위젯

위젯은 특정 유형의 데이터를 표시하거나 특정 기능을 제공하는 대시보드 요소입니다. 위젯으로 HMI 장치 데이터를 시각화하고, HMI 장치를 원격으로 제어하고, 알람을 관리하고, 사용자 지정 HTML 콘텐츠를 표시할 수 있습니다.

위젯은 위젯 번들로 묶입니다. 위젯 번들은 관련 위젯을 기능이나 용도별로 모은 것입니다.

위젯 라이브러리

위젯 라이브러리에는 MX On Cloud 위젯 전체가 번들과 용도(데이터 시각화, 알람, SCADA, 지도, 산업 모니터링 등)별로 정리되어 있습니다.

Widgets Library 열기 >

위젯 유형

형식	설명	예시
시계열	선택한 시간 창(실시간으로 움직이는 구간이나 고정된 과거 기간)의 데이터를 표시합니다. 속성보다 텔레메트리에 맞게 설계되었습니다.	Time series chart, Bar chart
최근 값	선택한 속성이나 텔레메트리 키의 가장 최근 값을 보여 줍니다. HTML 템플릿을 쓰는 위젯은 이미지도 표시할 수 있습니다.	Temperature radial gauge, Value card, HTML Value Card
알람	알람과 알림을 표시하고 관리합니다.	Alarms table
정적	평면도, 이미지, 회사 정보 같은 정적 콘텐츠를 사용자 지정 HTML까지 포함해 보여 줍니다.	HTML card

위젯 번들 전체 목록은 Widgets Library를 참고하세요.

대시보드에 위젯 추가

대시보드를 열고 수정 모드로 바꿉니다.
+ 위젯 추가를 클릭합니다.
위젯 번들을 선택한 다음 원하는 위젯을 고릅니다.
데이터 소스를 설정합니다. 엔티티 별칭을 선택하거나(권장) 엔티티를 직접 선택하고 필요한 데이터 키를 추가합니다.
모양과 동작 방식(제목, 단위, 색상, 임곗값, 액션 등)을 조정합니다.
추가를 클릭합니다.
격자에서 원하는 위치로 끌어다 놓고 크기를 조정합니다.
저장을 클릭해 변경 사항을 저장하고 수정 모드를 끝냅니다.

위젯 설정

쓸 수 있는 설정 탭은 위젯 유형에 따라 다릅니다.

위젯 유형	시간 창	데이터 소스	모양	위젯 카드	액션
시계열	✓	✓	✓	✓	✓
최근 값	◑	✓	✓	✓	✓
컨트롤	—	✓	✓	✓	✓
알람	✓	✓	✓	✓	✓
정적	—	—	—	✓	✓

◑ — 데이터 키에서 집계를 켠 경우에 쓸 수 있습니다.

레이아웃 설정(대시보드 격자에서의 위치와 크기)은 모든 위젯 유형에서 쓸 수 있습니다.

기본 모드와 고급 모드

위젯 설정 대화상자에는 모드가 두 가지 있습니다. 대화상자 머리글의 토글로 모드를 바꿉니다.

기본 모드 — 꼭 필요한 설정(데이터 소스, 키 라벨, 몇 가지 모양 옵션)만 보여 줍니다. 빠르게 설정할 때 좋습니다.
고급 모드 — 모든 탭(데이터, 모양, 위젯 카드, 액션, 레이아웃)의 전체 설정을 보여 줍니다.

위젯 시간 창

시간 창은 텔레메트리와 알람 데이터에 적용되는 시간 구간과 집계·그룹화 규칙을 정합니다. 위젯은 자체 시간 창을 쓰거나 대시보드 시간 창을 물려받을 수 있습니다.

자세한 내용은 시간 창을 참고하세요.

데이터 소스

데이터 소스는 위젯이 데이터를 어디서 가져올지, 즉 어떤 엔티티를 조회하고 어떤 키를 읽을지 정합니다. 위젯마다 데이터 소스를 하나 이상 둘 수 있습니다. 데이터 소스마다 유형, 엔티티 범위(HMI 장치 하나 또는 별칭으로 결정되는 집합), 선택 사항인 필터, 데이터 키 목록을 지정합니다.

데이터 소스 유형

장치 — 명시적으로 선택한 HMI 장치 하나에서 데이터를 읽습니다. 대시보드 컨텍스트와 상관없이 위젯이 항상 같은 HMI 장치의 데이터를 보여 줄 때 씁니다.

개체 — 엔티티 별칭으로 결정되는 엔티티 하나 이상에서 데이터를 읽습니다. 별칭은 엔티티 하나(예: 대시보드 컨텍스트의 현재 HMI 장치)나 동적 목록(예: 특정 유형의 모든 HMI 장치)을 대상으로 할 수 있습니다. 맥락에 따라 바뀌는 위젯과 여러 엔티티를 다루는 위젯의 기본 데이터 소스 유형입니다.

기능 — JavaScript 함수로 가상의 값(예: 난수, 사인파)을 만듭니다. 개발 중에 실제 HMI 장치 데이터 없이 위젯 모양을 설정하고 미리 볼 때 씁니다.

엔티티 수 — 별칭과 선택 사항인 필터로 찾은 엔티티 수를 숫자 값 하나로 돌려줍니다. Value card 위젯과 함께 써서 “전체 장치”나 필터에 맞는 장치 수 같은 지표를 보여 줍니다.

알람s count — 선택한 엔티티 범위와 알람 필터(심각도, 상태, 유형, 담당자)에 맞는 알람 수를 숫자 값 하나로 돌려줍니다. Value card 위젯과 함께 써서 “활성 심각 알람” 같은 지표를 보여 줍니다.

데이터 키

데이터 키는 위젯이 데이터 소스로 읽는 텔레메트리, 속성, 엔티티 필드를 가리킵니다. 데이터 소스마다 데이터 키를 여러 개 둘 수 있습니다.

키 소스 유형:

시계열 — HMI 장치가 보고하거나 REST API로 쓴 텔레메트리 키.
속성 — 선택한 엔티티의 클라이언트·서버·공유 속성.
개체 필드 — 엔티티 유형에 있는 메타데이터 필드(예: 이름, 유형, 라벨, 생성 시간).

쓸 수 있는 소스는 위젯 유형에 따라 다릅니다. 시계열 위젯은 시계열 키를 쓰고, 최근 값 위젯은 세 유형을 모두 지원합니다. 알람 위젯은 알람 전용 필드도 지원하고, 컨트롤 위젯과 정적 위젯은 데이터 키를 쓰지 않습니다.

키 추가

키 입력란을 클릭하고 사용할 수 있는 키 드롭다운에서 고릅니다.

HMI 장치가 아직 보고하지 않은 키를 추가하려면 이름을 직접 입력하고 소스 유형을 고릅니다. 값이 들어오면 위젯이 데이터를 표시합니다.

기본 키 설정

키 행마다 전체 대화상자를 열지 않고 라벨, 단위, 소수점을 바로 설정할 수 있습니다. 표시되는 필드는 위젯 유형에 따라 다를 수 있습니다.

고급 키 설정

키 행의 연필 아이콘을 클릭해 전체 키 설정 대화상자를 엽니다.

키 — 위젯이 읽는 데이터 키입니다. 이 값을 바꾸면 데이터 소스를 지우고 다시 추가하지 않아도 위젯이 다른 키를 읽습니다.

라벨 — 위젯 범례와 툴팁에 표시되는 이름입니다. 비워 두면 키 이름을 씁니다.

단위 — 표시되는 값 뒤에 붙는 기호입니다(예: °C, %, kWh).

소수점 — 숫자 값에 표시할 소수 자릿수입니다.

색상 — 차트와 범례에 쓰는 시리즈 색상입니다.

집합(최근 값 위젯에서 사용 가능). 시간 창을 켜고, 구간마다 키의 시계열 데이터를 집계 값 하나로 줄입니다.
키마다 따로 설정합니다.
지원하는 함수: 최소, 최대, 평균, 합계, 숫자(개수).

증분 계산 — 현재 집계 값을 과거 기준 기간과 비교합니다. 집계를 켜야 합니다.
결과는 이전 값, 증분 (절대값)(현재 − 이전), 증분 (퍼센트)(상대 차이)로 표시할 수 있습니다.
쓸 수 있는 비교 기간: 이전 구간, 1일 전, 1주 전, 1개월 전, 1년 전, 사용자 지정 구간.

데이터 후처리 기능 — 들어오는 값마다 표시 전에 적용하는 JavaScript 함수입니다.
단위를 바꾸거나, 이상값을 거르거나, 파생 지표를 계산할 때 씁니다.
함수는 time, value, prevValue, timePrev, prevOrigValue를 받고, number | string | boolean | null을 돌려줘야 합니다.
null을 돌려주면 그 데이터 포인트는 시각화에서 빠집니다.

필터

필터는 위젯이 데이터 소스에서 가져오는 데이터를 좁힙니다. 키를 추가하고 그 키에 조건을 정의해 필터를 만듭니다. 키와 조건을 여러 개 조합할 수 있습니다.

자세한 내용은 필터를 참고하세요.

알람 필터

알람 위젯은 데이터 키 목록 대신 전용 필터 패널을 씁니다. 상태, 심각도, 유형, 담당자, 엔티티 범위로 위젯에 나타날 알람을 정합니다.

알람 상태 목록 — 선택한 상태의 알람만 보여 줍니다: 활성, 해제, 수용, 불수용. 상태를 여러 개 함께 고를 수 있습니다.
알람 심각도 목록 — 선택한 심각도의 알람만 보여 줍니다: 심각한, 주요한, 작은, 경고, 중간. 심각도를 여러 개 함께 고를 수 있습니다.
알람 유형 목록 — 특정 알람 유형 이름(예: HighTemperature)으로 제한합니다. 비워 두면 모든 유형을 보여 줍니다.
담당자 — 알람이 할당된 사용자로 거르거나, 모두로 둡니다.
전파된 알람 검색 — 켜면 하위 엔티티에서 발생해 상위로 전파된 알람도 위젯에 포함합니다. 데이터 소스가 자산으로 결정될 때, 자산 자체의 알람뿐 아니라 관련된 하위 HMI 장치의 알람도 보고 싶을 때 유용합니다.

모양

모양 탭은 위젯의 시각적 표현, 레이아웃 구조, 표시 방식을 정합니다. 데이터 소스, 조회, 처리 로직에는 영향을 주지 않고 데이터를 대시보드에 어떻게 그리고 형식화할지 정합니다.

쓸 수 있는 옵션은 위젯 유형에 따라 다릅니다. 위젯에 따라 모양 탭에서 다음을 설정할 수 있습니다.

값 형식 — 기본 단위, 소수 자릿수, 날짜 형식, 선택한 시간 창에 데이터가 없을 때 표시하는 “No data” 메시지.
레이아웃 구조 — 레이아웃 유형, 자동 크기 조정, 요소 표시 여부(라벨, 아이콘, 값, 날짜), 아이콘 크기.
차트 그리기 — 축 설정(위치, 최소/최대, 단위), 추가 Y축, 임곗값, 격자선, 쌓기, 확대·축소, 범례 동작, 툴팁 설정, 집계 표시.
표 표시 — 머리글 표시 여부, 검색, 열 관리, 작업 열, 페이지 나누기, 탭, 행 스타일.
스타일과 테마 — 배경색, 흐림, 안쪽 여백, 색상 팔레트, 아이콘·값·라벨 색상, 사용자 지정 CSS.
애니메이션과 시각 상태 — 애니메이션 사용, 상태에 따른 스타일, 동적 효과.
분야별 시각 요소(예: SCADA 위젯) — 심볼 선택, 흐름 방향, 존재 표시기, 애니메이션 속도.

위젯 카드

위젯 카드는 대시보드의 모든 위젯을 감싸는 바깥 틀입니다. 제목 표시줄, 카드 수준 시각 스타일, 최종 사용자가 쓸 수 있는 헤더 버튼(선택 사항)을 제공합니다.

Card 제목

제목 표시 — 제목 표시줄 전체를 보이거나 숨기는 토글입니다.
제목 — 헤더에 표시되는 라벨입니다. ${entityName}이나 ${entityLabel} 같은 동적 패턴을 쓸 수 있습니다.
제목 툴팁 — 제목 위에 마우스를 올리면 나타나는 툴팁 글입니다.
제목 아이콘 표시 — 제목 앞에 아이콘을 넣는 토글입니다. 켜면 아이콘과 크기, 정렬, 색상을 설정합니다.
고급 제목 스타일 — 글꼴과 글자 스타일(크기, 굵기, 색상, 장식)을 세밀하게 정하는, 펼칠 수 있는 영역입니다.

카드 스타일

위젯 컨테이너 전체에 시각 스타일을 적용합니다.

글자 색 — 위젯 안의 기본 글자 색입니다.
배경 색 — 카드의 채우기 색입니다.
패딩 — 카드 가장자리와 내용 사이의 안쪽 간격입니다.
여백 — 카드 바깥쪽 간격입니다.
모서리 반경 — 카드 모서리의 둥근 정도입니다.
그림자 — 카드 주위에 그림자 효과를 넣는 토글입니다.
고급 위젯 스타일 — 위젯 컨테이너에 적용할 사용자 지정 CSS를 넣는, 펼칠 수 있는 영역입니다.

카드 버튼

위젯 헤더에 나타날 작업 아이콘을 정합니다.

전체화면 사용 — 위젯 헤더에 펼치기 버튼을 표시합니다. 클릭하면 위젯이 전체 화면으로 열립니다. 기본으로 켜져 있습니다.

위젯 동작

동작은 사용자 상호작용을 탐색이나 HMI 장치 제어 작업으로 연결합니다. 동작마다 액션 소스(무엇이 동작을 실행하는지)와 유형(동작이 무엇을 하는지)을 정합니다.

액션 소스

액션 소스는 위젯 유형에 따라 다릅니다.

소스	위젯
위젯 헤더 버튼 — 위젯 제목 표시줄의 사용자 지정 버튼	전체
행 클릭 시 — 표의 행을 클릭할 때	표
행 더블 클릭 시 — 표의 행을 두 번 클릭할 때	표
동작 셀 버튼 — 표의 사용자 지정 버튼 열	표
HTML 요소 클릭 시 — `id`로 표시한 HTML 요소	HTML 위젯
마커 클릭 시, 다각형 클릭 시 등 — 지도의 마커와 다각형	지도 위젯

동작 유형

동작 유형은 모든 위젯에서 같습니다.

형식	설명
새로운 대시보드 상태 탐색	현재 대시보드의 이름 있는 상태를 엽니다
현재 대시보드 상태 업데이트	현재 상태의 엔티티 컨텍스트를 바꿉니다
다른 대시보드 탐색	다른 대시보드를 엽니다
URL 열기	웹 URL을 엽니다
Custom action	사용자 지정 JavaScript 함수를 실행합니다
Custom action (with HTML template)	HTML 팝업 안에서 함수를 실행합니다
모바일 액션	모바일 장치 기능(카메라, QR 스캔, 위치)을 실행합니다
맵 항목 배치	지도에 새 엔티티를 만들어 놓습니다 (지도 위젯만)

동작을 추가하는 방법

기본 모드에서 — 위젯 설정을 열고 액션까지 스크롤한 다음 액션 추가를 클릭합니다. 소스와 유형을 설정하고 추가와 저장을 클릭합니다.

고급 모드에서 — 위젯 설정을 열고 액션 탭으로 가서 + 버튼을 클릭합니다. 설정한 다음 추가와 적용을 클릭합니다.

모든 소스와 유형의 전체 예시는 위젯 동작을 참고하세요.

레이아웃 설정

레이아웃 탭은 대시보드 격자와 모바일 화면에서 위젯이 어떻게 동작할지 정합니다.

크기 조정 옵션

크기 조절 가능 — 켜면 수정 모드에서 위젯의 가장자리나 모서리를 끌어 크기를 바꿀 수 있습니다. 끄면 위젯이 현재 크기로 고정됩니다.
종횡비 유지 — 켜면 크기를 바꿀 때 원래 가로세로 비율을 유지합니다.

모바일

모바일 화면에서 위젯 표시 여부와 크기를 정합니다.

모바일 모드에서 위젯 숨기기 — 데스크톱에는 두고 모바일 레이아웃에서만 위젯을 뺍니다.
데스크톱 모드에서 위젯 숨기기 — 모바일에는 두고 데스크톱 레이아웃에서만 위젯을 뺍니다.
순서 — 모바일 레이아웃에서 위젯이 쌓이는 위치입니다. 모바일에서는 위젯이 세로로 쌓이며, 값이 작을수록 먼저 나옵니다.
높이 — 모바일 격자에서의 위젯 높이(격자 단위)입니다. 모바일 화면에서는 데스크톱 높이 대신 이 값을 씁니다.

위젯 가져오기와 내보내기

위젯은 독립된 JSON 파일로 내보내고, 어느 대시보드나 MX On Cloud 인스턴스로든 가져올 수 있습니다. 내보낸 파일에는 위젯 정의 전체(유형, 설정, 모양, 동작)가 들어 있지만 엔티티 데이터 자체는 없습니다.

위젯 내보내기

위젯 헤더에서 위젯 내보내기를 클릭하면 위젯 구성을 .json 파일로 내려받습니다.

위젯 가져오기

대시보드를 열고 수정 모드로 바꿉니다.
+ 위젯 추가를 클릭한 다음 위젯 가져오기를 선택합니다.
.json 파일을 올리고 가져오기를 클릭합니다.
데이터 소스를 다시 설정합니다. 위젯은 원래 엔티티 참조를 그대로 갖고 있으므로 대상 대시보드에 맞게 바꿔야 합니다.
추가를 클릭한 다음 저장을 클릭합니다.

위젯 편집

위젯을 편집하려면 대시보드 수정 모드로 바꾼 다음 위젯 헤더의 연필 아이콘을 클릭합니다.
위젯 설정 대화상자가 열립니다.

위젯 복제

위젯을 복제하면 새 위젯을 처음부터 만들지 않고 기존 설정을 다시 쓸 수 있습니다. 여러 위젯이 같은 레이아웃, 스타일, 동작을 쓰면서 데이터만 다를 때 유용합니다.

전체 복사본 만들기

전체 복사본은 모든 설정을 그대로 가진 독립된 사본입니다.

대시보드를 수정 모드로 엽니다.
위젯을 마우스 오른쪽 버튼으로 클릭하고 복사를 선택합니다(또는 Ctrl+C).
필요하면 대상 대시보드를 엽니다.
캔버스의 빈 곳을 마우스 오른쪽 버튼으로 클릭하고 붙여넣기를 선택합니다(또는 Ctrl+V).
위젯 위치를 옮기고 저장을 클릭합니다.

전체 복사본은 같은 대시보드나 다른 대시보드에 붙여 넣을 수 있습니다. 복제한 위젯은 독립적이어서 원본에 영향을 주지 않고 수정할 수 있습니다.

참조 복사본 만들기

참조 복사본은 원본 위젯과 같은 설정을 공유합니다. 한쪽을 바꾸면 다른 쪽에도 자동으로 반영됩니다.

Ctrl+R을 눌러 참조를 복사합니다.
같은 대시보드에서 다른 상태로 바꿉니다.
캔버스를 마우스 오른쪽 버튼으로 클릭하고 참조 붙여넣기를 선택합니다(또는 Ctrl+I).

참조 복사본은 같은 대시보드 안에서만, 주로 다른 상태 사이에서 씁니다. 다른 대시보드에는 붙여 넣을 수 없습니다.

위젯 삭제

위젯을 삭제하려면 대시보드 수정 모드로 바꾼 다음 위젯 헤더의 ✕ 아이콘을 클릭합니다. 위젯이 바로 지워집니다. 대시보드 저장을 클릭해 변경을 저장하거나, 취소를 클릭해 버리고 위젯을 되살립니다.

위젯으로 할 수 있는 일

기능	설명	안내
시계열 텔레메트리 시각화	선 차트, 막대 차트 같은 시계열 위젯으로 실시간 또는 과거 텔레메트리 데이터를 표시합니다	시간 창
최근 값 표시	게이지, Value card, 표시기 위젯으로 속성과 텔레메트리의 현재 상태를 표시합니다	엔티티 별칭
알람 모니터링	알람 표 위젯으로 활성·과거 알람을 표시하고, 거르고, 관리합니다	알람
대시보드 상태 간 이동	위젯 동작으로 데이터 포인트, 표의 행, 버튼을 다른 상태나 대시보드에 연결합니다	위젯 동작
데이터를 동적으로 결정	엔티티 별칭으로 위젯이 맥락에 맞게 동작하게 합니다. 현재 선택한 엔티티의 데이터를 보여 줍니다	엔티티 별칭
다시 쓸 수 있는 위젯 템플릿 만들기	설정한 위젯을 JSON으로 내보내 다른 대시보드나 MX On Cloud 인스턴스로 가져옵니다	가져오기와 내보내기
위젯을 대시보드로 구성	여러 위젯을 한 대시보드에 모아 완전한 모니터링 화면을 만듭니다	대시보드
사용자 지정 위젯으로 확장	위젯 라이브러리에서 HTML, CSS, JavaScript로 완전한 사용자 지정 위젯을 개발합니다	Widget Library