State Chart
State chart 위젯은 엔티티 상태가 시간에 따라 어떻게 바뀌는지 색 구간으로 이루어진 타임라인으로 보여 줍니다. 온라인/오프라인, 활성/비활성, 열림/닫힘 같은 상태 전환을 추적하는 데 알맞아, HMI 장치 가용성, 공정 전환, 시스템 활동을 한눈에 감시할 수 있습니다.
주요 기능
섹션 제목: “주요 기능”- 상태가 언제 어떻게 바뀌었는지 정확히 보여 주는 색 타임라인 구간으로 상태 전환을 시각화합니다.
- 모든 텔레메트리 데이터 유형(문자열, 정수, 실수, 불리언, JSON)을 다룹니다.
- 여러 시리즈: HMI 장치나 매개변수 여러 개의 상태 기록을 한 차트에서 감시합니다.
- 상태 매핑을 정할 수 있습니다: 상태 값마다 라벨과 색상을 지정합니다.
- 비교 모드: 패턴을 분석하도록 이전 기간의 같은 상태 시리즈를 겹쳐 그립니다.
- 상태 선 아래 영역의 채우기 스타일(단색 또는 그라데이션)을 설정할 수 있습니다.
위젯 추가
섹션 제목: “위젯 추가”- 대시보드를 수정 모드로 엽니다. 위쪽 툴바의 위젯 추가를 클릭하거나, 빈 대시보드 가운데의 위젯 추가 아이콘을 클릭합니다.
- 위젯 번들 선택 대화상자에서 Charts를 찾아 클릭합니다.
- State chart 위젯을 선택합니다.
- 데이터 소스, 시리즈, 상태, 모양을 설정한 다음 추가를 클릭합니다.
이 절의 설정은 모두 기본 모드 기준입니다. 필수 항목만 다루는 빠른 설정입니다. 사용자 지정 툴팁 함수나 고급 축 서식 같은 세부 설정은 고급 탭으로 바꿉니다.
기본 탭은 설정을 타임윈도우, 데이터 소스, 시리즈, 상태, Y축, 모양, 차트, X축, 범례, 툴팁, 애니메이션, 카드 모양으로 나눕니다.
시간 창
섹션 제목: “시간 창”표시할 시간 구간을 정합니다(예: 과거 24시간, Current day). 자세한 내용은 시간 창 가이드를 참고하세요.
데이터 소스
섹션 제목: “데이터 소스”상태 데이터의 소스를 선택합니다:
- 장치 — 특정 HMI 장치. 설정한 시간 범위 동안 이 HMI 장치의 상태 기록을 보여 줍니다.
- 개체 별명 — 엔티티 별칭에 맞는 엔티티 집합. 여러 HMI 장치의 상태 타임라인을 한 차트에 표시할 때 씁니다.
시리즈
섹션 제목: “시리즈”위젯은 표시 모드 두 가지를 지원합니다: 시리즈와 비교.
시리즈 모드
섹션 제목: “시리즈 모드”데이터 키마다 독립된 상태 타임라인으로 그립니다. 표시할 상태 매개변수마다 키를 추가합니다(예: connected, doorState). 새 텔레메트리가 들어오면 시리즈마다 동적으로 갱신됩니다.
텔레메트리 키에는 지원하는 어떤 데이터 유형이든 들어갈 수 있습니다:
- 문자열 — 예:
"online","offline","maintenance". - 정수 — 예: 서로 다른 상태를 나타내는
0,1,2. - 실수 — 예: 숫자 상태 표시용
1.0,2.5. - 불리언 — 예:
true= 활성,false= 비활성. - JSON — 예:
{"state": "running"}. 위젯이 안쪽 값을 꺼내 표시합니다.
시리즈 행의 설정 아이콘을 클릭하면 일반과 고급 탭이 있는 데이터 키 구성 대화상자가 열립니다.
일반 탭:
| 설정 | 설명 |
|---|---|
| 키 | 텔레메트리나 속성 키 이름. |
| 라벨 | 이 시리즈의 범례 라벨. |
| 소수점 | 표시 값의 소수 자릿수. |
| 색상 | 상태 선과 채우기에 쓰는 시리즈 색상. |
| 데이터 후처리 기능 사용 | 표시하기 전에 원시 값에 적용하는 JavaScript 변환(선택 사항). 시그니처: f(value, latestData). |
고급 탭 — 범례:
| 설정 | 설명 |
|---|---|
| 범례에 표시 | 이 시리즈를 차트 범례에 넣습니다. |
| 기본 숨김 | 시리즈를 그리지만 사용자가 범례에서 켜기 전까지 숨겨 둡니다. |
고급 탭 — Y축: 이 시리즈를 그릴 Y축을 선택합니다.
고급 탭 — 채우기: 상태 선 아래 영역을 칠합니다. 옵션: 없음, 불투명도(투명도가 있는 단색 채우기), 그라데이션(시작·끝 불투명도 값 설정).
고급 탭 — 툴팁 값 서식 함수: 이 시리즈의 호버 툴팁에 보이는 값의 서식을 정하는 JavaScript 함수 f(value, latestData)(선택 사항).
고급 탭 — 비교 설정: 비교용 과거 데이터 표시를 켜면 이 시리즈 옆에 이전 기간의 비교 시리즈를 그립니다. 비교 키 라벨(자동 또는 사용자 지정)과 비교 데이터 색상을 설정합니다.
비교 모드
섹션 제목: “비교 모드”비교 모드에서는 이전 기간의 같은 데이터 키를 현재 데이터 위에 겹쳐 그립니다(예: 오늘과 어제, 이번 주와 지난주). 기간마다 별도의 상태 타임라인으로 그리므로 반복되는 패턴이나 동작 변화를 쉽게 찾을 수 있습니다.
이 모드를 켜려면 시리즈 영역의 비교 탭으로 바꿉니다. 비교 항목마다 구간 드롭다운, X축 버튼, 데이터 키 목록(표시, 키, 라벨, 색상)이 있습니다.
비교 구간 옵션:
| 옵션 | 설명 |
|---|---|
| 이전 구간(기본) | 시간 창을 구간 길이 하나만큼 뒤로 옮깁니다. |
| 1일 전 | 24시간 전의 같은 기간과 비교합니다. |
| 1주 전 | 7일 전의 같은 기간과 비교합니다. |
| 1개월 전 | 한 달 전의 같은 기간과 비교합니다. |
| 1년 전 | 1년 전의 같은 기간과 비교합니다. |
| 사용자 지정 구간 | 사용자 지정 오프셋을 밀리초로 입력합니다. |
비교 X축 설정 — X축 버튼을 클릭해 비교 시간 축의 표시 방식을 설정합니다:
| 설정 | 설명 |
|---|---|
| 표시 | 차트에 비교 X축을 표시합니다. |
| 라벨 | 비교 축의 글 라벨. |
| 위치 | 위 또는 아래. |
| 눈금 라벨 | 눈금에 날짜/시간 라벨을 표시합니다. 글꼴과 색상을 설정합니다. |
| 눈금 표시 | 축에 눈금 표시를 그립니다. |
| 선 표시 | 축 기준선을 그립니다. |
| 분할선 표시 | 눈금마다 세로 격자선을 그립니다. |
상태 영역은 나올 수 있는 텔레메트리 값마다 Y축에 표시할 읽기 쉬운 라벨을 연결합니다. 새 행을 추가하려면 상태 추가를 클릭합니다.
| 필드 | 설명 |
|---|---|
| 라벨 | Y축에 표시되는 상태 라벨(예: Online, Offline, Maintenance). |
| 눈금 값 | Y축에서 이 상태가 놓일 숫자 위치(예: 비활성은 0, 활성은 1). |
| 소스 | 상수 — 정확히 한 값과 일치하면 이 상태입니다. 범위 — 정한 범위 안의 값이면 이 상태입니다. |
| 값 유형 | 들어오는 텔레메트리 값의 데이터 유형: 문자열, 정수, 실수, 불리언, JSON. |
| 값 / 범위 | 이 상태가 되는 정확한 값(상수) 또는 최소/최대 범위(범위). |
Y축을 하나 이상 설정해 세로 스케일과 라벨을 정합니다. 시리즈 설정의 Y축 필드로 시리즈마다 다른 축을 지정할 수 있습니다. 새 축을 추가하려면 Y축 추가를 클릭합니다.
축 행마다 다음 열이 있습니다:
| 열 | 설명 |
|---|---|
| Id | 시리즈를 이 축에 지정할 때 쓰는 고유 식별자. |
| 표시 | 차트에서 축을 표시하거나 숨깁니다. |
| 라벨 | 축 옆에 표시되는 글 라벨. |
| 위치 | 왼쪽 또는 오른쪽. |
| Min / Max | 고정 스케일 경계. 눈금 값의 범위에 맞게 직접 정합니다(예: 두 상태 불리언이면 0~1). |
| 단위 | 축 눈금 라벨의 단위 접미사. |
| 소수점 | 눈금 라벨 값의 소수 자릿수. |
축 행의 설정 아이콘을 클릭하면 Y축 설정 대화상자가 열립니다:
| 설정 | 설명 |
|---|---|
| 라벨 | 글꼴과 색상을 설정할 수 있는 글 라벨. |
| 눈금 라벨 | 눈금마다 값 라벨을 표시합니다. 글꼴과 색상을 설정합니다. |
| 눈금 표시 | 축 선에 눈금 표시를 그립니다. |
| 선 표시 | 축 기준선을 그립니다. |
| 분할선 표시 | 눈금마다 차트를 가로지르는 가로 격자선을 그립니다. |
| 눈금 간격 | 눈금 사이 간격. 자동이면 데이터 범위에서 정합니다. |
| 분할 수 | 권장 눈금 구간 수. 자동이면 차트가 정합니다. |
위젯 헤더에 표시되는 차트 제목을 설정합니다.
| 설정 | 설명 |
|---|---|
| 제목 | 위젯 헤더에 표시되는 글. 글꼴, 크기, 굵기, 색상을 설정합니다. 제목을 아예 숨기려면 스위치를 끕니다. |
| 카드 아이콘 | 제목 옆에 표시하는 아이콘(선택 사항). |
상호작용 동작과 차트 영역 레이아웃을 설정합니다.
| 설정 | 설명 |
|---|---|
| 데이터 줌 | 대시보드 시간 창을 바꾸지 않고 좁은 시간 범위를 살펴보도록 가로 줌을 켭니다. |
| 그리드 | 차트 영역 안쪽 여백을 조정합니다. |
| 스택 모드 | 여러 시리즈를 같은 축에 쌓습니다. 겹치는 상태 기록을 보여 줄 때 유용합니다. |
가로 시간 축을 설정합니다. 축을 아예 숨기려면 표시 스위치를 끕니다.
| 설정 | 설명 |
|---|---|
| 라벨 | 축을 따라 표시되는 글 라벨. 글꼴과 색상을 설정합니다. |
| 위치 | 아래 또는 위. |
| 눈금 라벨 | 눈금마다 날짜/시간 라벨을 표시합니다. 날짜 형식, 글꼴, 색상을 설정합니다. |
| 눈금 표시 | 축에 눈금 표시를 그립니다. 색상을 설정합니다. |
| 선 표시 | 축 기준선을 그립니다. 색상을 설정합니다. |
| 분할선 표시 | 눈금마다 차트를 가로지르는 세로 격자선을 그립니다. |
주 스위치로 범례 전체를 표시하거나 숨깁니다.
| 설정 | 설명 |
|---|---|
| 범례 위치 | 범례 배치: 상단, 하단, 왼쪽, 오른쪽. |
| Show 값s | 시리즈별로 표시할 통계: 최소, 최대, 평균, 합계, 최신. |
| 라벨 | 시리즈 이름 라벨의 글꼴과 색상. |
| 값 | 통계 값의 글꼴과 색상. |
| Column 제목 | 열 머리글 행의 글꼴과 색상(Show 값s를 켜면 보임). |
| 범례에 데이터키 정렬 | 시리즈 항목을 알파벳순으로 정렬합니다. |
주 스위치로 툴팁 전체를 표시하거나 숨깁니다.
| 설정 | 설명 |
|---|---|
| 트리거 | 포인트 — 데이터 점에 마우스를 올립니다. 축 — 어디에나 마우스를 올리면 그 타임스탬프의 모든 시리즈 값을 보여 줍니다. |
| 날짜 | 타임스탬프를 표시합니다. 날짜 형식을 고르고 글꼴과 색상을 설정합니다. |
| 날짜/시간 구간 표시 | 툴팁 머리글에 시간 구간 범위를 표시합니다. |
| 0 값 숨기기 | 값이 0인 시리즈 항목을 툴팁에서 뺍니다. |
| 라벨 | 툴팁의 시리즈 이름 라벨 글꼴과 색상. |
| 값 | 툴팁의 값 글자 글꼴과 색상. |
| 배경색 | 툴팁 배경 채우기 색상. |
| 배경 블러 | 툴팁 배경에 적용하는 블러 반경(px). |
애니메이션
섹션 제목: “애니메이션”주 스위치로 차트 애니메이션을 켜거나 끕니다. 켜면 다음을 설정합니다:
| 설정 | 설명 |
|---|---|
| 애니메이션 임계값 | 데이터 점 수가 이 값(기본 2000)을 넘으면 성능을 위해 애니메이션을 끕니다. |
| 애니메이션 지속 시간 | 처음 불러올 때 애니메이션의 지속 시간(밀리초, 기본 500 ms). |
| 애니메이션 이징 | 처음 애니메이션의 이징 함수(예: cubicOut). |
| 애니메이션 지연 | 처음 애니메이션이 시작되기 전 지연(밀리초). |
| 업데이트 애니메이션 지속 시간 | 데이터 갱신이 들어올 때 애니메이션의 지속 시간(기본 300 ms). |
| 업데이트 애니메이션 이징 | 업데이트 애니메이션의 이징 함수. |
| 업데이트 애니메이션 지연 | 업데이트 애니메이션이 시작되기 전 지연(밀리초). |
카드 모양
섹션 제목: “카드 모양”| 설정 | 설명 |
|---|---|
| 배경 | 카드의 단색 또는 이미지 배경. |
| 카드 버튼 표시 | 툴바의 전체화면과 Data export 버튼을 켭니다. |
| 카드 모서리 반경 | 모서리 둥글기(픽셀). |
| 카드 패딩 | 내용과 카드 테두리 사이 간격. |
State chart는 위젯 헤더 버튼 동작을 지원합니다. 위젯 헤더에 놓는 버튼으로, 클릭하면 설정한 동작을 실행합니다.
HMI 장치 연결 상태
섹션 제목: “HMI 장치 연결 상태”목표: 불리언 텔레메트리 키 connected로 지난 하루 동안 Smart Device가 언제 연결되어 있었고 언제 연결이 끊겼는지 보여 주는 타임라인을 표시합니다.
사전 준비: connected 키를 불리언 값(true / false)으로 보내는 Smart Device라는 HMI 장치.
1단계. 위젯 추가. 대시보드를 수정 모드로 열고 위젯 추가를 클릭하고 Charts 번들을 선택한 다음 State chart를 고릅니다.
2단계. 타임윈도우 설정. 기간을 과거 1일로 정합니다. 집합은 없음으로 둡니다.
3단계. 데이터 소스 설정. 데이터소스 유형을 장치로 정하고 Smart Device를 선택합니다.
4단계. 시리즈 추가. 시리즈 영역에 데이터 키 하나를 추가합니다:
| 키 | 라벨 | Y축 | 색상 | 소수점 |
|---|---|---|---|---|
connected | HMI Device state | default | #2196F3 | 0 |
시리즈 고급 설정을 열고 채우기를 그라데이션으로, 시작 불투명도를 80, 끝 불투명도를 40으로 정합니다.
5단계. 상태 설정. 상태 영역에 상태 두 개를 추가합니다:
| 라벨 | 눈금 값 | 소스 | 값 유형 | 값 |
|---|---|---|---|---|
| Inactive | 0 | 상수 | 불리언 | False |
| Active | 1 | 상수 | 불리언 | True |
6단계. Y축 설정. 기본 축을 설정합니다:
| ID | 라벨 | 위치 | Min | Max | 소수점 |
|---|---|---|---|---|---|
default | HMI Device state | 왼쪽 | 0 | 1 | 0 |
7단계. 모양 설정. 제목 표시를 끕니다. 범례 영역에서 범례를 끕니다.
8단계. 저장. 추가를 클릭하고 필요하면 크기와 위치를 조정한 다음 대시보드 툴바의 저장을 클릭합니다.
결과: 차트가 HMI 장치가 활성이었던 기간(connected = true)을 파란 구간의 타임라인으로 보여 줍니다. 구간 사이의 빈 곳은 비활성 기간입니다. Y축 라벨에는 Inactive와 Active가 표시됩니다(원래 값 0/1 대신).
문제 해결
섹션 제목: “문제 해결”위젯에 데이터가 표시되지 않음
| 원인 | 해결 방법 |
|---|---|
| 데이터 키 이름이 틀림 | 키 이름이 HMI 장치가 보내는 텔레메트리 키와 같은지 확인합니다. 키 이름은 대소문자를 구분합니다. |
| 데이터 소스나 엔티티 별칭이 틀림 | 올바른 HMI 장치나 개체 별명을 선택했는지 확인합니다. 개체 별명을 열어 별칭이 결과를 돌려주는지 확인합니다. |
| HMI 장치가 데이터를 보내지 않음 | 장치 → 최근 데이터를 열고 최근 값이 있는지 확인합니다. 비어 있으면 HMI 장치의 전송 설정과 액세스 토큰을 확인합니다. |
| 선택한 시간 창에 텔레메트리가 없음 | 시간 범위를 늘려 데이터가 있는지 확인합니다. |
| 룰 체인 설정 오류 | 룰 체인에 HMI 장치 텔레메트리를 데이터베이스로 보내는 Save time series 노드가 있는지 확인합니다. |
| 가져온 뒤 데이터 소스를 바꾸지 않음 | 위젯을 가져온 뒤 데이터 소스가 사용자의 HMI 장치를 가리키도록 바꾸고, 데이터 키 이름을 HMI 장치의 실제 텔레메트리에 맞게 바꿉니다. |
Y축에 상태 라벨이 나타나지 않음
| 원인 | 해결 방법 |
|---|---|
| 상태가 설정되지 않음 | 상태 영역을 열고, 기대하는 상태 값마다 값 유형과 값이 올바른 항목이 있는지 확인합니다. |
| Y축 Min/Max가 설정되지 않음 | 눈금 값의 전체 범위를 덮도록 Min과 Max를 직접 정합니다(예: 불리언 키면 0~1). |
| 값 유형이 맞지 않음 | 상태 영역의 값 유형이 텔레메트리 키의 실제 데이터 유형(불리언, 문자열, 정수 등)과 같은지 확인합니다. |
상태 구간 대신 평평한 선이 표시됨
| 원인 | 해결 방법 |
|---|---|
| 집계가 켜져 있음 | 평균 대신 개별 상태 전환을 보려면 시간 창에서 집합을 없음으로 정합니다. |
| 눈금 값이 서로 다르지 않음 | Y축에서 상태를 눈으로 구분할 수 있도록 상태마다 눈금 값을 다르게 정합니다. |