Battery Level

• 시각 레이아웃 네 가지: 세로와 가로, 각각 단일과 분할 아이콘 스타일.
• 배터리 채우기 색상 모드 네 가지(고정값, 그라데이션, 값 범위 구간, JavaScript 함수)로 사용자 지정 코드 없이 임곗값에 따라 색을 입힙니다.
• 배터리 외곽(윤곽선) 색상을 채우기와 따로 설정할 수 있습니다.
• entityName / entityLabel 동적 치환을 지원하는 제목(선택 사항).
• 카드 클릭 시 동작과 위젯 헤더 버튼 동작.

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

모든 설정은 기본 탭에 있습니다. 카드 수준 컨트롤(제목 글꼴, 툴팁, 모서리 반경, CSS 재정의)은 고급으로 바꿉니다.

배터리 잔량 값의 소스를 선택합니다.

• 장치 — 특정 HMI 장치. 위젯이 이 HMI 장치의 최신 값을 읽습니다.
• 개체 별명 — 엔티티 별칭에 맞는 엔티티 집합. 실행 중에 대상 HMI 장치를 동적으로 고를 때 씁니다.

데이터 키를 정확히 하나 추가합니다. 숫자 값(0~100)이 배터리 충전량을 나타내는 텔레메트리 키나 속성입니다.

시각 스타일 네 가지가 있습니다.

레이아웃	설명
세로. 단일	단색으로 채워지는 세로 배터리 아이콘. 기본값입니다.
가로. 단일	단색으로 채워지는 가로 배터리 아이콘.
세로. 분할	칸으로 나뉘어(분할) 채워지는 세로 배터리 아이콘.
가로. 분할	칸으로 나뉘어 채워지는 가로 배터리 아이콘.

설정	설명
제목	카드에 표시되는 라벨. 기본으로 켜져 있고 값은 Battery level입니다. {x} 동적 자리표시자 entityName, entityLabel을 지원합니다. 글꼴과 색상을 따로 설정합니다.

카드에 놓는 아이콘(선택 사항). 기본으로 꺼져 있습니다. 켜면 크기(px)와 색상을 설정합니다.

설정	설명
값	결정된 숫자 값을 표시합니다. 기본으로 켜져 있습니다. 글꼴과 색상을 설정합니다.
자동 크기 조절	위젯 크기를 바꾸면 영역에 맞게 값 글자 크기를 자동으로 조정합니다.

설정	설명
배터리 잔량 색상	배터리 표시기의 채우기 색상. 기본값은 초록에서 빨강으로 바뀌는 그라데이션입니다. 색상 모드 네 가지를 지원합니다(아래 참고).
배터리 외곽 색상	배터리 윤곽선과 단자의 색상. 기본은 투명입니다.
배경	카드 배경색. 기본은 비어 있습니다.

모드	설명
고정값	채우기 전체에 쓰는 고정 색상 하나.
그라데이션	값 범위를 따라 색상이 부드럽게 바뀝니다. 시작·끝 값과 색 정지점을 설정합니다. 기본값: 0에서 초록, 100에서 빨강.
범위	값 구간마다 색상을 지정합니다. 시작 / 끝 행을 여러 개 추가해 임곗값 색상 띠를 만듭니다(예: 0–25 초록, 25–90 노랑, 90–100 빨강).
함수	CSS 색상 문자열을 돌려주는 JavaScript 함수 f(value). 사용자 지정 또는 비선형 색상 로직에 씁니다.

설정	기본값	설명
카드 버튼 표시	—	위젯 헤더의 전체화면 버튼을 켜거나 끕니다.
카드 모서리 반경	0px	모서리 둥글기.
카드 패딩	12px	카드 내용과 테두리 사이 간격.

소스	설명
카드 클릭 시	사용자가 위젯 카드의 아무 곳이나 클릭하면 설정한 동작을 실행합니다.
위젯 헤더 버튼	위젯 헤더에 사용자 지정 버튼을 추가하고, 클릭하면 설정한 동작을 실행합니다.

목표: 현장 HMI 장치의 배터리 잔량을 대시보드 격자에서 추적해 운영자가 충전이 필요한 장치를 바로 알아보게 합니다.

사전 준비: batteryLevel(0–100)을 텔레메트리 키로 보내는 장치.

1단계. 위젯 추가. 대시보드를 수정 모드로 열고 위젯 추가를 클릭하고 Status indicators를 선택한 다음 Battery level을 고릅니다.

2단계. 데이터 소스 설정. 데이터소스 유형을 개체 별명으로 정하고, 현장 HMI 장치로 결정되는 별칭을 고른 다음 데이터 키로 batteryLevel을 추가합니다.

3단계. 레이아웃 설정. HMI 장치 여러 대를 놓는 격자에 알맞은 작은 카드가 되도록 레이아웃을 가로. 분할로 정합니다.

4단계. 임곗값 색상 설정. 배터리 잔량 색상을 클릭하고 범위 모드를 선택한 다음 구간 세 개를 추가합니다.

시작	끝	색상
0	20	빨강
20	60	노랑
60	100	초록

5단계. 저장. 추가를 클릭하고 위젯을 배치한 다음 대시보드를 저장합니다.

결과: HMI 장치 카드마다 배터리 아이콘이 실시간 충전량에 따라 채워지고 색이 바뀝니다. 위험하면 빨강, 보통이면 노랑, 양호하면 초록입니다.

배터리 아이콘이 채워지지 않음

원인	해결 방법
받은 데이터가 없음	장치 → 최근 데이터를 열고 HMI 장치가 설정한 데이터 키를 보고하는지 확인합니다. 키 이름은 대소문자를 구분합니다.
값이 null이거나 숫자가 아님	HMI 장치가 설정한 키에 0~100 사이 숫자를 보내는지 확인합니다.
엔티티 별칭이 어떤 엔티티로도 결정되지 않음	대시보드에서 개체 별명을 열고 별칭이 결과를 돌려주는지 확인합니다.

배터리 채우기 색상이 값에 따라 바뀌지 않음

원인	해결 방법
배터리 잔량 색상이 고정값으로 설정됨	값에 따라 색을 바꾸려면 그라데이션, 범위, 함수 모드로 바꿉니다.
범위 구간에 빈틈이 있거나 모든 값을 덮지 않음	범위 모드에서 구간을 합쳐 예상 범위 전체를 빈틈없이 덮는지 확인합니다.

제목에 사용자 지정 글 대신 엔티티 이름이 표시됨

원인	해결 방법
동적 자리표시자를 쓰고 있음	제목 필드는 {x} 자리표시자(entityName, entityLabel)를 지원합니다. 동적 치환이 필요 없으면 고정 글로 바꿉니다.