Progress Bar

• 숫자 텔레메트리나 속성을 정한 범위에 대해 채워진 가로 막대로 표시합니다.
• 레이아웃 두 가지: 기본(막대 위에 큰 값, 범위 눈금 포함)과 단순(라벨과 값을 한 줄에 간결하게).
• 막대 색상 모드 네 가지: 고정값, 그라데이션, 값 범위 구간, JavaScript 색상 함수. 코드 없이 임곗값 색상 띠를 만들 수 있습니다.
• 최소·최대 범위, 단위 라벨, 소수 자릿수, 범위 눈금 표시(선택 사항)를 설정할 수 있습니다.
• 아이콘(선택 사항)과 어떤 위젯 크기에도 맞춰지는 자동 크기 조절 글자.

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

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

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

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

데이터 키를 정확히 하나 추가합니다. 최신 숫자 값이 막대 채우기를 정할 텔레메트리 키나 속성입니다.

위젯 레이아웃, 라벨, 아이콘, 값 표시, 범위를 설정합니다.

설정	설명
레이아웃	기본 — 막대 위에 큰 숫자 값을, 아래에 범위 눈금을 보여 줍니다. 단순 — 제목과 값을 한 줄에 놓고 그 아래에 간결한 막대를 둡니다.
자동 크기 조절	위젯 크기를 바꾸면 영역에 맞게 글자 크기를 자동으로 조정합니다.
제목	카드에 표시되는 라벨. {x} 동적 자리표시자 entityName, entityLabel을 지원합니다. 글꼴과 색상을 따로 설정합니다.
아이콘	카드에 표시하는 아이콘(선택 사항). 크기와 색상을 정합니다. 기본으로 꺼져 있습니다.
값	결정된 숫자 값을 표시합니다. 단위 접미사(예: %), 소수 자릿수, 글자 색을 설정합니다.
범위	막대의 최소와 최대 경계를 정합니다. 막대는 이 값 사이에서 비례해 채워집니다. 기본값: 0–100.
범위 눈금	막대 양 끝 아래에 최소·최대 라벨을 표시합니다. 켜고 끌 수 있고, 글꼴과 색상을 설정합니다.

진행 막대의 채우기 색상과 배경을 설정합니다.

설정	설명
바 색상	막대의 채우기 색상. 모드 네 가지를 지원합니다(아래 참고).
바 배경	막대 트랙 중 채워지지 않은 부분의 배경색.

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

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

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

목표: Smart Device라는 HMI 장치의 배터리 잔량을 진행 막대로 표시합니다. 막대는 매우 낮으면 빨강, 보통이면 노랑, 양호하면 초록이 됩니다.

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

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

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

3단계. 모양 설정. 제목을 Battery로 정합니다. 값 단위를 %로, 소수 자릿수를 0으로 정합니다. 범위는 최소 0 / 최대 100으로 둡니다.

4단계. 막대 색상 설정. 바 색상을 열고 범위 모드를 선택합니다. 구간 세 개를 추가합니다.

시작	끝	색상
0	20	빨강(#F44336)
20	60	노랑(#FFC107)
60	100	초록(#4CAF50)

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

결과: 배터리 잔량 막대가 현재 충전량에 비례해 채워지고 색이 바뀝니다. 매우 낮으면 빨강, 보통이면 노랑, 양호하면 초록입니다. 새 텔레메트리가 들어오면 카드가 자동으로 갱신됩니다.

막대가 비어 있거나 채워지지 않음

원인	해결 방법
받은 데이터가 없음	장치 → 최근 데이터를 열고 HMI 장치가 설정한 데이터 키를 보내는지 확인합니다. 키 이름은 대소문자를 구분합니다.
값이 설정한 범위를 벗어남	값이 최소보다 작거나 최대보다 크면 막대가 비거나 가득 찬 채로 그려질 수 있습니다. 데이터에 맞게 범위 설정을 바꿉니다.
엔티티 별칭이 어떤 엔티티로도 결정되지 않음	대시보드에서 개체 별명을 열고 별칭이 결과를 돌려주는지 확인합니다.

막대 색상이 값에 따라 바뀌지 않음

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

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

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