Two-Segment Button

Two-segment button 위젯은 대시보드에 선택지가 두 개인 세그먼트 컨트롤을 추가합니다. 서로 배타적인 두 화면이나 상태(예: 온도와 습도, 지도와 목록) 사이를 전환할 때 씁니다. 한 번에 세그먼트 하나만 선택할 수 있습니다. 위젯은 실시간 HMI 장치 데이터나 대시보드 상태에서 현재 선택을 읽으므로, 강조된 세그먼트가 늘 사용자가 있는 곳이나 활성화된 모드를 반영합니다.

주요 기능

서로 배타적인 세그먼트 두 개(첫 번째와 두 번째). 하나를 선택하면 다른 하나는 선택이 해제됩니다.
HMI 장치 속성, 텔레메트리 값, 알람 상태, 대시보드 상태에서 현재 선택을 읽습니다.
세그먼트마다 클릭할 때 실행할 대시보드 동작을 따로 정합니다: 상태 이동, 상태 업데이트, 다른 대시보드 열기, 사용자 지정 동작, 모바일 동작, URL 열기.
세그먼트마다, 그리고 선택됨/선택 안 됨 색상 상태마다 라벨, 아이콘, 색상 스타일을 따로 정합니다.
레이아웃 모양 두 가지: 각진 모서리와 둥근 모서리. 어느 쪽이든 세그먼트별 색상을 따로 정할 수 있습니다.
HMI 장치 데이터, 알람, 대시보드 상태에 따라 위젯 전체를 비활성화할 수 있습니다.

위젯 추가

대시보드를 수정 모드로 엽니다. 위쪽 툴바의 위젯 추가를 클릭하거나, 빈 대시보드 가운데의 위젯 추가 아이콘을 클릭합니다.
위젯 번들 선택 대화상자에서 Buttons를 찾아 클릭합니다.
Two-segment button 위젯을 선택합니다.
데이터 소스, 동작, 모양을 설정한 다음 추가를 클릭합니다.

구성

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

데이터 소스

위젯의 데이터 소스를 선택합니다.

장치 — 특정 HMI 장치. 위젯이 이 HMI 장치의 속성과 텔레메트리 데이터를 읽어 선택된 세그먼트와 비활성화 상태를 정합니다.
개체 별명 — 엔티티 별칭에 맞는 엔티티 집합. 실행 중에 대상 HMI 장치를 동적으로 고를 때 씁니다.

동작

동작 영역은 불러올 때 어느 세그먼트를 선택된 것으로 보일지, 세그먼트마다 클릭하면 무엇을 할지, 위젯이 언제 비활성화될지를 정합니다. 비활성화 상태는 선택 사항입니다.

선택 상태

대시보드를 불러올 때 어느 세그먼트(첫 번째 또는 두 번째)를 강조할지 정합니다. 아래 동작 유형 중 하나를 고릅니다.

아무 것도 하지 않음

선택된 세그먼트를 직접 정합니다. 실시간 데이터가 필요 없습니다.

매개변수 설명
Value 첫 번째 — 불러올 때 첫 번째 세그먼트를 강조합니다. 두 번째 — 불러올 때 두 번째 세그먼트를 강조합니다.

매개변수	설명
Value	첫 번째 — 불러올 때 첫 번째 세그먼트를 강조합니다. 두 번째 — 불러올 때 두 번째 세그먼트를 강조합니다.

속성 가져오기

HMI 장치 속성을 읽어 선택된 세그먼트를 정합니다.

매개변수	설명
속성 범위	속성이 저장된 곳: 전체, 클라이언트, 서버, 공유.
속성 키	읽을 속성 이름(예: `mode`, `view`).
’첫 번째 버튼’ when result is (없음)	속성이 지정한 값과 같으면 첫 번째 세그먼트가 선택됩니다.
‘첫 번째 버튼’ when result is (함수)	`f(data)` 함수가 `true`를 돌려주면 첫 번째 세그먼트가 선택됩니다.

시계열 가져오기

최신 텔레메트리 값을 읽어 선택된 세그먼트를 정합니다.

매개변수	설명
시계열 키	읽을 텔레메트리 키(예: `state`, `mode`).
’첫 번째 버튼’ when result is (없음)	텔레메트리 값이 지정한 값과 같으면 첫 번째 세그먼트가 선택됩니다.
‘첫 번째 버튼’ when result is (함수)	`f(data)` 함수가 `true`를 돌려주면 첫 번째 세그먼트가 선택됩니다.

알람 상태 가져오기

엔티티에 조건에 맞는 알람이 활성이면 첫 번째 세그먼트를 선택합니다.

매개변수 설명
알람 심각도 심각한, 주요한, 작은, 경고, 중간.
알람 유형 모든 알람 또는 특정 알람 유형.

매개변수	설명
알람 심각도	심각한, 주요한, 작은, 경고, 중간.
알람 유형	모든 알람 또는 특정 알람 유형.

대시보드 상태 ID 가져오기

현재 열린 대시보드 상태 이름에 따라 선택된 세그먼트를 정합니다. 활성 상태를 눈에 띄게 강조해야 하는 탐색 막대에 씁니다.

매개변수	설명
’첫 번째 버튼’ when result is (없음)	현재 상태 이름이 입력한 글자와 같으면 첫 번째 세그먼트가 선택됩니다.
‘첫 번째 버튼’ when result is (함수)	`f(data)` 함수가 `true`를 돌려주면 첫 번째 세그먼트가 선택됩니다.

대시보드 상태 객체 가져오기

대시보드 상태 컨텍스트 전체로 선택된 세그먼트를 정합니다. 상태 매개변수 여러 개를 한꺼번에 평가해야 할 때 씁니다.

매개변수 설명
’첫 번째 버튼’ when result is (함수만) f(data) 함수를 작성해 true를 돌려주면 첫 번째 세그먼트가 선택됩니다.

매개변수	설명
’첫 번째 버튼’ when result is (함수만)	`f(data)` 함수를 작성해 `true`를 돌려주면 첫 번째 세그먼트가 선택됩니다.

첫 번째 버튼 클릭

사용자가 첫 번째 세그먼트를 클릭할 때 실행할 동작을 정합니다. 아래 동작 유형 중 하나를 고릅니다.

동작 안 함

세그먼트를 클릭할 수는 있지만 아무 동작도 하지 않습니다. 스타일을 시험할 때나 자리를 잡아 둘 때 씁니다.

새로운 대시보드 상태 탐색

같은 대시보드 안의 다른 화면(예: 지도 화면, 상세 화면)으로 바꿉니다.

매개변수	설명
대상 대시보드 상태	열 상태(필수).
위젯으로 부터 객체 설정	현재 엔티티를 대상 상태로 넘깁니다.
상태 개체 파라미터 이름	엔티티를 넘길 때 쓰는 키.
대시보드 상태 표시 옵션	일반(같은 화면), 별도 다이얼로그로 열기(팝업), 팝오버로 열기(인라인 오버레이).

현재 대시보드 상태 업데이트

다른 곳으로 이동하지 않고 현재 화면의 컨텍스트를 갱신합니다(예: 선택한 엔티티 바꾸기).

매개변수	설명
대상 대시보드 상태	바꿀 상태(선택 사항).
위젯으로 부터 객체 설정	현재 엔티티를 갱신한 상태로 넘깁니다.
상태 개체 파라미터 이름	엔티티를 넘길 때 쓰는 키.

다른 대시보드 탐색

완전히 다른 대시보드를 엽니다.

매개변수	설명
대상 대시보드	열 대시보드(필수).
대상 대시보드 상태	그 대시보드 안에서 열 특정 화면.
새 브라우저 탭에서 열기	현재 페이지를 떠나지 않고 대시보드를 엽니다.
위젯으로 부터 객체 설정	현재 엔티티를 다른 대시보드로 넘깁니다.

Custom action

클릭하면 사용자 지정 JavaScript를 실행합니다. 함수가 받는 값: $event, widgetContext, entityId, entityName, additionalParams, entityLabel.
Custom action (with HTML template)

Custom action과 같지만, 세그먼트를 클릭하면 사용자 지정 HTML 패널이나 대화상자도 표시합니다.

매개변수 설명
리소스 외부 스크립트와 스타일.
CSS 스타일.
HTML 레이아웃.
JS 로직.

매개변수	설명
리소스	외부 스크립트와 스타일.
CSS	스타일.
HTML	레이아웃.
JS	로직.

모바일 액션

MX On Cloud 모바일 앱 안에서 카메라나 QR 스캐너 같은 장치 기본 기능을 실행합니다.

매개변수	설명
모바일 액션 유형	갤러리에서 사진 선택, 사진 촬영, 지도 길찾기 열기, 지도 위치 열기, QR 코드 스캔, 전화 걸기, 휴대폰 위치 가져오기, 스크린샷 찍기, 장치 프로비저닝 중 하나.

URL 열기

세그먼트를 클릭하면 웹사이트나 외부 링크를 엽니다.

매개변수 설명
URL 열 주소(필수).
새 브라우저 탭에서 열기 현재 대시보드를 열어 둔 채로 링크를 엽니다.

매개변수	설명
URL	열 주소(필수).
새 브라우저 탭에서 열기	현재 대시보드를 열어 둔 채로 링크를 엽니다.

두 번째 버튼 클릭

사용자가 두 번째 세그먼트를 클릭할 때 실행할 동작을 정합니다. 동작 유형과 매개변수는 모두 위의 첫 번째 버튼 클릭과 같습니다.

비활성화 상태

비활성화 상태는 설정한 조건이 맞으면 위젯 전체를 조작할 수 없게 합니다. 두 세그먼트가 모두 회색이 되고 클릭이 모두 무시됩니다. 이 영역은 선택 사항입니다. 위젯을 항상 클릭할 수 있어야 하면 건너뜁니다.

아무 것도 하지 않음

비활성화 상태를 직접 정합니다. 실시간 데이터가 필요 없습니다.

매개변수 설명
Value 참 — 위젯이 항상 비활성화됩니다. 거짓 — 위젯이 항상 활성화됩니다.

매개변수	설명
Value	참 — 위젯이 항상 비활성화됩니다. 거짓 — 위젯이 항상 활성화됩니다.

속성 가져오기

HMI 장치 속성에 따라 위젯을 비활성화합니다.

매개변수	설명
속성 범위	전체, 클라이언트, 서버, 공유.
속성 키	읽을 속성 이름(예: `enabled`, `locked`).
조건(없음)	속성이 지정한 값과 같으면 비활성화합니다.
조건(함수)	`f(data)` 함수가 `true`를 돌려주면 비활성화합니다.

시계열 가져오기

최신 텔레메트리 값에 따라 위젯을 비활성화합니다.

매개변수	설명
시계열 키	감시할 텔레메트리 키.
조건(없음)	텔레메트리 값이 지정한 값과 같으면 비활성화합니다.
조건(함수)	`f(data)` 함수가 `true`를 돌려주면 비활성화합니다.

알람 상태 가져오기

특정 알람이 활성인 동안 위젯을 비활성화합니다.

매개변수 설명
알람 심각도 심각한, 주요한, 작은, 경고, 중간.
알람 유형 모든 알람 또는 특정 알람 유형.
대시보드 상태 ID 가져오기

현재 열린 대시보드 상태에 따라 위젯을 비활성화합니다.

매개변수 설명
조건(없음) 현재 상태 이름이 입력한 글자와 같으면 비활성화합니다.
조건(함수) f(data) 함수가 true를 돌려주면 비활성화합니다.
대시보드 상태 객체 가져오기

대시보드 상태 컨텍스트 전체로 위젯을 비활성화합니다.

매개변수 설명
조건(함수만) f(data) 함수를 작성해 true를 돌려주면 위젯이 비활성화됩니다.

매개변수	설명
알람 심각도	심각한, 주요한, 작은, 경고, 중간.
알람 유형	모든 알람 또는 특정 알람 유형.

매개변수	설명
조건(없음)	현재 상태 이름이 입력한 글자와 같으면 비활성화합니다.
조건(함수)	`f(data)` 함수가 `true`를 돌려주면 비활성화합니다.

매개변수	설명
조건(함수만)	`f(data)` 함수를 작성해 `true`를 돌려주면 위젯이 비활성화됩니다.

모양

위젯의 전체 모양과 카드 스타일을 설정합니다.

설정	설명
레이아웃	버튼 세그먼트의 모양: 각진 모서리(직각 모서리) 또는 둥근 모서리(알약 모양).
자동 크기 조절	위젯 크기를 바꾸면 글꼴 크기와 요소 비율을 자동으로 조정합니다.
카드 테두리	카드 테두리의 너비(px)와 색상.

버튼 모양

세그먼트마다 시각 스타일을 따로 정합니다. 이 영역에는 첫 번째와 두 번째 탭 두 개가 있습니다.

설정	설명
라벨	세그먼트에 표시되는 글. 엔티티 변수 `$\{entityName\}`, `$\{entityLabel\}`을 지원합니다.
아이콘	세그먼트에 표시되는 Material Design 아이콘. 크기(px)를 설정할 수 있습니다.
색상 스타일	하위 탭 두 개: 선택됨(활성 세그먼트)과 선택 안 됨(비활성 세그먼트). 각각 따로 설정합니다.
색상 팔레트	기본: 세그먼트 채우기나 글자 색상, 배경: 주변 영역 색상. 선택됨/선택 안 됨 상태마다 설정합니다.
사용자 지정 스타일	상호작용별 스타일 재정의: 활성화, 호버, 비활성화. 상태마다 기본, 배경, 그림자 설정이 있습니다.

예시

온도·습도 대시보드 전환

시나리오: Temperature & Humidity 대시보드에 상태가 두 개 있습니다: Temperature(루트)와 Humidity. 상태마다 무작위로 만든 데이터로 현재 값 카드와 과거 데이터 차트를 보여 줍니다. 위쪽의 Two-segment button으로 상태 사이를 전환하고, 활성 상태가 자동으로 강조됩니다.

1단계. 대시보드 상태 만들기.

Temperature & Humidity라는 대시보드를 만들고 대시보드 상태 관리를 열어 상태 두 개를 추가합니다:

Temperature — 루트 상태로 지정, State Id: temperature.
Humidity — State Id: humidity.

상태마다 현재 값 카드와 시계열 선 차트를 추가합니다. 시험용 무작위 데이터는 함수 데이터 소스로 만듭니다.

2단계. Temperature 상태에 Two-segment button 추가.

Temperature 상태로 바꿉니다. 위젯 추가를 클릭하고 Buttons 번들을 선택한 다음 Two-segment button을 고릅니다.

데이터 소스의 HMI 장치는 비워 둡니다. 탐색만 하는 동작에는 HMI 장치 데이터가 필요 없습니다.

3단계. 동작 설정.

선택 상태를 열고 다음과 같이 설정합니다:

동작: 대시보드 상태 ID 가져오기
동작 결과 변환기: 없음
‘첫 번째 버튼’ when result is: temperature(String)

첫 번째 버튼 클릭을 열고 다음과 같이 설정합니다:

동작: 현재 대시보드 상태 업데이트
대상 대시보드 상태: temperature

두 번째 버튼 클릭을 열고 다음과 같이 설정합니다:

동작: 현재 대시보드 상태 업데이트
대상 대시보드 상태: humidity

4단계. 버튼 모양 설정.

첫 번째 탭: 라벨을 Temperature로 정하고 온도계 아이콘을 고릅니다.

두 번째 탭: 라벨을 Humidity로 정하고 물방울 아이콘을 고릅니다.

5단계. 위젯 저장.

추가를 클릭하고 위젯을 Temperature 상태의 위쪽에 놓습니다.

6단계. Humidity 상태로 위젯 복사.

위젯을 마우스 오른쪽 버튼으로 클릭하고 복사를 선택합니다.

위쪽 툴바의 상태 드롭다운으로 Humidity 상태로 바꿉니다. 대시보드 캔버스를 마우스 오른쪽 버튼으로 클릭하고 붙여넣기를 선택합니다.

7단계. 대시보드 저장. 툴바의 저장을 클릭합니다.

결과: 위젯이 두 화면 모두에서 활성 상태를 자동으로 강조합니다. 선택 로직이 현재 대시보드 상태 id로 동작하므로 Humidity 상태에는 추가 설정이 필요 없습니다.

문제 해결

불러온 뒤 어느 세그먼트도 선택되어 보이지 않음

원인	해결 방법
선택 상태 조건이 맞지 않음	조건 값이 실제 속성, 텔레메트리, 상태 id 값과 정확히 같은지 확인합니다. 값은 대소문자를 구분합니다.
HMI 장치에 속성 키가 없음	장치 → 속성을 열고 키가 값과 함께 있는지 확인합니다.
속성 범위가 틀림	범위를 실제 속성 유형(클라이언트 / 서버 / 공유)에 맞춥니다.
함수 변환기가 항상 같은 값을 돌려줌	함수 본문을 검토합니다. `return` 문이 빠졌거나 비교가 잘못되지 않았는지 확인합니다.

세그먼트를 클릭해도 아무 일도 일어나지 않음

원인	해결 방법
대상 대시보드 상태가 없음	동작의 상태 이름이 대시보드의 실제 상태 id와 같은지 확인합니다. 이름은 대소문자를 구분합니다.
동작 유형이 동작 안 함으로 설정됨	클릭 동작을 열고 올바른 동작 유형을 선택합니다.
위젯이 비활성화 상태임	비활성화 상태 조건을 확인합니다. 조건이 뜻하지 않게 참이면 위젯이 잠깁니다.

위젯이 항상 비활성화됨

원인	해결 방법
비활성화 상태 조건이 항상 참이 됨	비활성화 상태의 조건 값이나 함수 본문을 검토합니다.
속성이나 텔레메트리 키를 찾을 수 없음	대상 HMI 장치에 키가 있는지 확인합니다.
속성 범위가 틀림	범위를 실제 속성 유형(클라이언트 / 서버 / 공유)에 맞춥니다.