태그와 화면 사이 개요
게이트웨이가 읽어 온 값이 어떤 길을 지나 화면 요소에 닿는지.
필요: 읽을 것이 먼저 있어야 합니다 — 태그 관리에 등록된 태그, 또는 화면 안에서만 도는
local: 값설비 → 게이트웨이 → SSE → 값 버스 → 바인딩 → 요소설명
바인딩 한 줄은 요소 하나 + 태그 하나 + prop 하나를 잇습니다. "이 탱크를, 이 수위 태그로, 채움 높이로" 같은 문장 하나라고 보면 됩니다.
한 요소에 바인딩을 여러 줄 걸 수 있습니다. 같은 태그로 채움과 색과 글자를 동시에 움직이거나, 서로 다른 태그를 각각 다른 prop 에 물릴 수도 있습니다.
값이 오는 길은 이렇습니다.
- 게이트웨이가 설비를 주기적으로 읽어 태그 값을 갱신합니다.
- 브라우저는 그 변화를 SSE(서버가 밀어 주는 연결)로 받습니다. 화면이 게이트웨이에 값을 물어보는 것이 아니라, 바뀔 때 알려 오는 방식입니다.
- 값 버스가 게이트웨이 값과 화면 로컬 값을 같은 모양으로 합칩니다. 그래서 바인딩은 값이 어디서 왔는지 신경 쓰지 않습니다.
- 바인딩이 그 값을 받아 요소를 고칩니다.
local: 값이 같은 버스로 합쳐집니다.
ps.run), 바꿀 속성(fill), 그리고 값→색 규칙이 한 칸에 들어 있습니다.설정 항목
| 이름 | 값 | 기본 | 설명 |
|---|---|---|---|
| 요소 | element | — | 값을 보여 줄 대상. 바인딩은 요소에 붙습니다. |
| 태그 | tagId | — | 읽을 값의 이름. local: 로 시작하면 게이트웨이가 아니라 화면 안의 값입니다. |
| prop | string | — | 그 값을 무엇으로 보일지. 글자·색·채움·회전 등 18가지. |
동작
적용은 0.3초마다 모아서 합니다. 그 사이 같은 태그가 여러 번 바뀌었으면 마지막 값만 그려집니다. 값 하나하나를 다 그리면 태그가 수백 개인 화면에서 브라우저가 따라오지 못합니다. 대신 화면은 최대 0.3초까지 늦을 수 있습니다 — 사람이 보는 감시 화면에는 문제가 없지만, 순간적으로 스쳐 지나가는 값(펄스)은 놓칠 수 있습니다.
값의 품질이 요소에 함께 기록됩니다. 태그를 못 읽으면 그 요소가 불량 표시를 답니다. 다만 화면에 저절로 보이지는 않습니다 — 통신 상태를 눈에 보이게 하려면 상태 태그에 visible 이나 fill 을 따로 걸어야 합니다.
게이트웨이에 연결되지 않아도 화면은 그려집니다. 값이 안 올 뿐 요소는 작화 상태 그대로 남아 있어서, 정상 화면과 구분되지 않습니다. 운전 화면 어딘가에 연결 상태를 반드시 띄워 두세요.
local: 로 시작하는 값은 서버로 나가지 않습니다. 슬라이더나 데모용 값이고, 같은 문서를 여러 모니터에 띄웠을 때는 그 창들 사이에서만 공유됩니다. 자세한 것은 로컬 값·슬라이더 에 있습니다.
해 보기
제품 샘플 › 바인딩 표현 사전슬라이더 하나로 18가지 prop 이 동시에 반응하는 화면
제품에 들어 있는 샘플
제품 샘플 › 물탱크 미믹태그 하나가 채움·글자·색·트렌드로 동시에 나타나는 예
제품에 들어 있는 샘플