data-scada-part(기본 blade)와 회전축 data-cx·data-cy 가 있어야 합니다prop: spin 태그 필수 spinMax = 가장 빠른 회전에 해당하는 값 · 음수 = 역회전설명
날개를 제자리에서 계속 돌립니다. 값이 클수록 빨라지고, 음수면 반대로 돕니다.
값의 절댓값을 spinMax 와 견주어 0~1 사이 비율을 얻은 뒤 속도로 바꿉니다. 가장 느릴 때 한 바퀴 2.8초, 가장 빠를 때 0.22초입니다.
angle·rotate 와 무엇이 다른가. 셋 다 회전이지만 값의 뜻이 다릅니다.
spin— 값의 뜻은 속도. 팬·펌프·모터처럼 돌고 있는지가 정보인 곳에 씁니다.- angle — 값의 뜻은 각도. 게이지 바늘처럼 값이 곧 각도인 곳에 씁니다.
- rotate — 값의 뜻은 각도(요소 전체). 요소를 기울여 놓을 때 씁니다.
팬은 "지금 몇 도로 서 있는가"가 아니라 "돌고 있는가, 얼마나 빠른가"가 정보입니다. 그래서 angle 로는 표현되지 않습니다 — 값이 멈추면 바늘처럼 그 각도에 서 있을 뿐입니다.
설정 항목
| 이름 | 값 | 기본 | 설명 |
|---|---|---|---|
| 태그 | tagId | — | 읽을 값. 부호가 방향이 되므로 인버터 주파수를 그대로 넣어도 됩니다. |
| spinMax | number | 100 | 가장 빠르게 돌 때의 값. 값의 절댓값을 이 값과 견줍니다. |
| part | string | blade | 돌릴 부위 이름. 심볼의 날개 묶음에 붙어 있습니다. |
동작
값 30 · spinMax 60 → 중간 속도. 값 −30 이면 같은 속도로 역회전, 값 0 이면 멈춥니다.
멈춤 판정은 1% 입니다. spinMax 대비 1% 미만이면 애니메이션을 멈춥니다. 이때 날개는 사라지거나 원위치로 튀지 않고 멈춘 자리에 그대로 섭니다 — 정지 순간에 홱 돌아가면 눈에 거슬리고, 실제 설비도 그렇게 서지 않습니다.
회전축을 심볼이 지정해야 합니다. 날개 묶음에 data-cx · data-cy 가 없으면 경계상자 중심을 축으로 삼는데, 그게 실제 축과 어긋나는 경우가 많습니다. 날개는 허브를 중심으로 배치되지만 각 날개가 제 각도로 기울어져 있어 묶음의 경계상자가 한쪽으로 치우치기 때문입니다(팬 실측: 허브 y=50 인데 경계상자 중심 y=43). 그러면 도는 게 아니라 흔들리는 것처럼 보입니다. 기본 심볼 팬 에는 축이 들어 있습니다. 직접 그린 그림에 걸 때는 날개를 <g data-scada-part="blade" data-cx="…" data-cy="…"> 로 묶으세요.
회전은 CSS 애니메이션이라 화면이 가려져 있으면 브라우저가 알아서 쉽니다. 표시 창을 여러 개 띄워도 부담이 늘지 않습니다.