Value Card

Value card 위젯은 엔티티의 최신 텔레메트리 측정값이나 속성 값 하나를 표시합니다. 바로 읽을 수 있어야 하는 KPI와 상태 지표(온도, 배터리 잔량, HMI 장치 가동 시간 등)에 씁니다.

• HMI 장치나 엔티티 별칭의 최신 텔레메트리나 속성 값을 표시합니다.
• 내장 서식: 단위, 소수 자릿수, 마지막 업데이트 시각(선택 사항).
• 아이콘, 라벨, 값을 배치하는 미리 정한 레이아웃 여러 가지.
• 값 범위에 연결된 그라데이션 색상 — 값이 바뀌면 아이콘과 값 색상이 자동으로 바뀝니다.
• HTML이나 CSS를 몰라도 됩니다(HTML Value Card와 달리).

1. 대시보드를 수정 모드로 엽니다. 위쪽 툴바의 위젯 추가를 클릭하거나, 빈 대시보드 가운데의 위젯 추가 아이콘을 클릭합니다.
2. 위젯 번들 선택 대화상자에서 Cards를 찾아 클릭합니다.
3. Value card 위젯을 선택합니다.
4. 데이터 소스와 모양을 설정한 다음 추가를 클릭합니다.

이 절의 설정은 모두 기본 모드 기준입니다. 필수 항목만 다루는 빠른 설정입니다. 제목 글꼴, 카드 스타일, 툴팁 같은 세부 설정은 고급 탭으로 바꿉니다.

표시할 값의 소스를 선택합니다.

• 장치 — 특정 HMI 장치. 카드가 이 HMI 장치의 최신 텔레메트리나 속성 값을 보여 줍니다.
• 개체 별명 — 엔티티 별칭에 맞는 엔티티 집합. 실행 중에 대상 HMI 장치를 동적으로 고를 때 씁니다.

데이터 키를 정확히 하나 추가합니다. 카드가 최신 값을 표시할 텔레메트리 키나 속성입니다.

카드 레이아웃, 라벨, 아이콘, 값 표시를 설정합니다.

설정	설명
레이아웃	카드 요소(라벨, 아이콘, 값)의 배치. 미리 정한 레이아웃 중에서 고릅니다.
자동 크기 조절	위젯 크기를 바꾸면 카드 영역에 맞게 글자 크기를 자동으로 조정합니다.
Label	카드에 표시하는 설명 글(예: Temperature, Status).
아이콘	라벨 옆에 표시하는 아이콘(선택 사항). 아이콘 종류, 크기, 색상을 정합니다.
값	결정된 데이터 키 값을 표시합니다. 단위, 소수 자릿수, 글자 색을 설정합니다.
날짜	마지막 데이터 업데이트 시각(선택 사항). 표시 형식을 고릅니다.

색상 설정은 Label, 아이콘, 값마다 따로 할 수 있습니다. 모드는 세 가지입니다.

모드	설명
고정값	들어오는 값과 상관없는 고정 색상.
그라데이션	정한 범위에서 값이 바뀌면 색상이 부드럽게 바뀝니다. 시작 값, 끝 값, 색 정지점을 정합니다. 다음에서 복사로 다른 요소의 그라데이션을 그대로 가져올 수 있습니다. 예를 들어 아이콘 그라데이션을 먼저 정한 다음 값에 복사합니다.
함수	현재 값에 따라 16진수 색상 문자열을 돌려주는 JavaScript 함수 f(value). 비선형이거나 임곗값 기반인 색상에 씁니다.

설정	설명
배경	카드의 단색 또는 이미지 배경.
카드 버튼 표시	위젯 헤더의 Data export 버튼과 전체화면 버튼을 켜거나 끕니다.
카드 모서리 반경	모서리 둥글기(픽셀).
카드 패딩	카드 내용과 테두리 사이 간격.

Value card는 위젯 헤더 버튼 동작을 지원합니다. 위젯 헤더에 놓는 버튼으로, 클릭하면 설정한 동작을 실행합니다.

목표: Smart Device라는 HMI 장치의 현재 온도를 표시합니다. 온도가 20 °C에서 30 °C로 오르면 값과 아이콘 색이 파랑에서 초록, 빨강으로 바뀝니다.

사전 준비: temperature(°C)를 텔레메트리 키로 보내는 Smart Device라는 HMI 장치.

1단계. 위젯 추가. 대시보드를 수정 모드로 열고 위젯 추가를 클릭하고 Cards를 선택한 다음 Value card를 고릅니다.

2단계. 데이터 소스 설정. 데이터소스 유형을 장치로 정하고, Smart Device를 선택한 다음 데이터 키로 temperature를 추가합니다.

3단계. 모양 설정.

Label: Temperature

아이콘: 크기 32, 색상 설정 — 그라데이션:

• 시작 값 20 → 색상 #048AD3
• 중간 색상 #06E10E
• 끝 값 30 → 색상 #FF0000

값: 단위 °C, 소수점 1, 색상 설정 — 그라데이션 → 다음에서 복사: 아이콘.

4단계. 카드 모양 설정. 배경 색을 흰색으로, 카드 모서리 반경을 12px로 정합니다.

5단계. 저장. 추가를 클릭하고 필요하면 크기와 위치를 조정한 다음 대시보드 툴바의 저장을 클릭합니다.

결과: 카드에 HMI 장치의 현재 온도가 표시됩니다. 값과 아이콘 색이 파랑(20 °C 이하)에서 초록을 거쳐 빨강(30 °C 이상)으로 부드럽게 바뀌어 온도 범위를 바로 알 수 있습니다. 새 텔레메트리가 들어오면 카드가 자동으로 갱신됩니다.

위젯에 데이터가 표시되지 않음

원인	해결 방법
데이터 키 이름이 틀림	키 이름이 HMI 장치가 보내는 텔레메트리 키와 같은지 확인합니다. 키 이름은 대소문자를 구분합니다.
HMI 장치가 데이터를 보내지 않음	장치 → 최근 데이터를 열고 최근 값이 있는지 확인합니다. 비어 있으면 HMI 장치의 전송 설정과 액세스 토큰을 확인합니다.
엔티티 별칭이 어떤 엔티티로도 결정되지 않음	대시보드에서 개체 별명을 열고 별칭이 결과를 돌려주는지 확인합니다.

값이 N/A로 표시되거나 갱신되지 않음

원인	해결 방법
HMI 장치가 텔레메트리를 더 보내지 않음	장치 → 최근 데이터에서 HMI 장치 연결과 마지막 활동 시각을 확인합니다.
데이터 소스 엔티티를 잘못 선택함	데이터 소스 구성에서 올바른 HMI 장치나 별칭을 선택했는지 확인합니다.

값의 단위나 소수 자릿수가 틀림

원인	해결 방법
단위를 설정하지 않음	값 모양 영역에서 단위 필드를 정합니다.
소수점을 설정하지 않음	값 모양 영역에서 소수점 필드를 정합니다.