HTML Value Card

HTML Value Card 위젯은 사용자 지정 HTML 템플릿으로 텔레메트리나 속성 데이터를 표시합니다. 일반 Value card와 달리 레이아웃, 스타일, 여러 키의 데이터 표현을 모두 직접 정할 수 있습니다. KPI 대시보드, 상태 표시기 등 숫자 하나 이상의 서식이 필요한 카드에 씁니다.

• 어떤 엔티티든 최신 텔레메트리나 속성 값을 표시합니다.
• HTML 안에 ${key} 자리표시자를 넣어 실시간 값을 표시합니다.
• 카드 하나에 데이터 키 여러 개를 함께 넣습니다.
• 위젯 범위로 한정된 사용자 지정 CSS로 카드를 꾸밉니다.
• 모든 데이터 소스 유형을 쓸 수 있습니다: HMI 장치, 엔티티 별칭, 엔티티 수, 알람 수, 함수.
• 키 필터를 적용해 특정 조건에 맞는 엔티티만 세거나 표시합니다.

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

데이터 탭에서 위젯이 표시할 내용을 설정합니다:

• 데이터소스 유형: HMI 장치, 엔티티 별칭, 엔티티 수, 알람 수, 함수.
• 대상: 데이터를 읽을 HMI 장치나 엔티티 별칭.
• 데이터 키: 텔레메트리 키나 속성 하나 이상. 키마다 라벨을 이름으로 하는 ${key} 자리표시자로 HTML 템플릿에서 쓸 수 있습니다.
• 필터: 키 필터로 데이터 집합을 좁힐 수 있습니다(선택 사항, 예: active = true, battery < 20).

모양 탭의 HTML 필드에 카드 레이아웃을 작성합니다. ${key} 자리표시자로 실시간 값을 넣습니다:

예시 — Smart Device라는 HMI 장치의 온도 측정값을 표시합니다:

데이터 소스: HMI 장치 → Smart Device, 데이터 키: temperature

<div style="padding: 2px 0 2px 10px; text-align: center;">
    <h3>${entityName}</h3>
    <p style="font-size: 36px;">Temperature: ${temperature:1} °C</p>
</div>

모양 탭의 CSS 필드에 사용자 지정 CSS를 추가합니다. 스타일은 위젯 컨테이너 안에만 적용되어 대시보드의 다른 위젯에 영향을 주지 않습니다.

예시 — 어두운 배경으로 꾸민 온도 카드:

<div class="temperature-card">
    <h3>${entityName}</h3>
    <p class="temperature-value">Temperature: ${temperature} °C</p>
</div>

.temperature-card {
    background-color: #20232a;
    color: #61dafb;
    border: 6px solid #2196F3;
    border-radius: 12px;
    text-align: center;
}

.temperature-value {
    font-size: 36px;
}

CSS로 배경을 정할 때는 위젯 카드 탭에서 배경 색을 #FFFFFF00(투명)으로 정해 카드의 CSS 배경이 보이게 합니다.

위젯 카드 탭에서:

HTML Value Card는 위젯 헤더 버튼 동작을 지원합니다. 위젯 헤더에 버튼을 추가해 클릭하면 설정한 동작을 실행합니다.

목표: MX On Cloud 인스턴스에서 현재 활성인 HMI 장치 수를 표시합니다.

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

2단계. 데이터 소스 설정.

데이터 탭에서:

• 데이터소스 유형: 엔티티 수
• 개체 별명: All Sensors — 필터 유형: 개체 유형 → 장치
• 데이터 키: count, 라벨 activeDevicesNumber

활성 HMI 장치만 세도록 키 필터를 추가합니다:

• Filter name: ActiveDevicesFilter
• Key type: Attribute, Key name: active, Value type: Boolean
• Operation: 같음, 값: 참

3단계. 모양 설정.

HTML:

<div class='card' id="activeDevices">
    <div class='content'>
        <div class='value'>
            ${activeDevicesNumber:0}
        </div>
        <div class='description'>
            Active HMI Devices
        </div>
    </div>
</div>

CSS:

.card {
  width: 100%;
  height: 100%;
  border: 1px solid #E0E0E0;
  border-radius: 16px;
  box-sizing: border-box;
  background: #ffffff;
}

.card .content {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

.card .value {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  color: #0D47A1;
  text-align: center;
}

.card .description {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5;
  color: #333333;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media (min-width: 960px) and (max-width: 1200px) {
  .card .value { font-size: 2.2em; line-height: 1.2; }
  .card .description { font-size: 0.9em; line-height: 1.2; }
}

4단계. 위젯 카드 설정. 배경 색을 #FFFFFF00(투명)으로 정합니다.

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

결과: 활성 HMI 장치 수를 보여 주는 작은 카드가 표시되며, HMI 장치 활동이 바뀌면 자동으로 갱신됩니다.

목표: 비활성 HMI 장치 수를 표시합니다.

활성 HMI 장치 수와 같은 단계를 따르되, 다음이 다릅니다:

데이터 소스:

• 데이터 키: count, 라벨 inactiveDevicesNumber
• Filter name: InactiveDeviceFilter — Key type: Attribute, Key name: active, Value type: Boolean, Operation: 같음, 값: 거짓

HTML: activeDevicesNumber를 inactiveDevicesNumber로, 라벨 글을 Inactive HMI Devices로 바꿉니다.

CSS: 구조는 같고, .card .value 색을 #e53935(빨강)로 바꿉니다.

결과: 비활성 HMI 장치 수를 보여 주는 작은 카드가 표시되며, HMI 장치 활동이 바뀌면 동적으로 갱신됩니다.

목표: 배터리 잔량이 20 미만인 HMI 장치 수를 표시합니다.

활성 HMI 장치 수와 같은 단계를 따르되, 다음이 다릅니다:

데이터 소스:

• 데이터 키: count, 라벨 lowBatteryDevicesNumber
• Filter name: LowBatteryFilter — Key type: Time series, Key name: battery, Value type: Numeric, Operation: 작음, 값: 20

HTML: 데이터 키 자리표시자를 lowBatteryDevicesNumber로, 라벨 글을 Low battery HMI Devices로 바꿉니다.

CSS: 구조는 같고, .card .value 색을 #F2994A(주황)로 바꿉니다.

결과: 배터리 텔레메트리가 20 미만인 HMI 장치 수를 보여 주는 작은 카드가 표시되며, 자동으로 갱신됩니다.

카드에 데이터가 표시되지 않음

자리표시자가 비어 있거나 NaN으로 표시됨