Value Stepper

Value stepper 위젯은 제어 버튼 두 개(왼쪽은 감소, 오른쪽은 증가)로 숫자 값을 늘리거나 줄이게 합니다. 클릭할 때마다 속성을 갱신하거나 시계열 기록을 남길 수 있습니다. 팬 속도 단계, 온도 설정값, 밝기, 밸브 위치 등 숫자로 된 HMI 장치 매개변수에 씁니다.

• 전용 버튼 두 개로 숫자 값을 늘리고 줄입니다.
• 불러올 때 속성이나 텔레메트리 값에서 현재 값을 읽습니다.
• 버튼마다 속성 갱신이나 텔레메트리 쓰기를 따로 정합니다.
• 최소·최대 범위, 단계 크기, 소수 자릿수를 설정할 수 있습니다.
• HMI 장치 데이터, 알람, 대시보드 상태에 따라 자동으로 비활성화할 수 있습니다.

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

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

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

• 장치 — 특정 HMI 장치. 위젯이 이 HMI 장치의 속성과 텔레메트리 데이터를 읽어 초기 값을 정합니다.
• 개체 별명 — 엔티티 별칭에 맞는 엔티티 집합. 실행 중에 대상 HMI 장치를 동적으로 고를 때 씁니다.

동작 영역은 위젯이 초기 숫자 값을 읽는 방법, 왼쪽 버튼과 오른쪽 버튼을 클릭할 때 각각 실행할 동작, 버튼이 비활성화되는 시점을 정합니다. 필요한 하위 영역을 설정합니다. 비활성화 상태는 선택 사항입니다.

대시보드를 불러올 때 표시할 숫자 값을 정합니다. 아래 동작 유형 중 하나를 고릅니다.

• 아무 것도 하지 않음

  값을 직접 정합니다. 실시간 데이터가 필요 없습니다.

  매개변수	설명
  Value	표시할 고정 숫자.

• 속성 가져오기

  HMI 장치나 엔티티 속성을 읽어 현재 값을 정합니다.

  매개변수	설명
  속성 범위	속성이 저장된 곳: 전체, 클라이언트, 서버, 공유.
  속성 키	읽을 속성 이름(예: speed, targetTemperature).
  조건(없음)	속성 값을 그대로 씁니다.
  조건(함수)	숫자를 돌려주는 f(data) 함수로 결과를 변환합니다.

• 시계열 가져오기

  최신 텔레메트리 값을 읽어 현재 값을 정합니다.

  매개변수	설명
  시계열 키	감시할 텔레메트리 키(예: temperatureSetpoint).
  조건(없음)	텔레메트리 기록의 값을 그대로 씁니다.
  조건(함수)	숫자를 돌려주는 f(data) 함수로 결과를 변환합니다.

• 알람 상태 가져오기

  엔티티의 활성 알람에 따라 표시 값을 정합니다.

  매개변수	설명
  알람 심각도	확인할 심각도: 심각한, 주요한, 작은, 경고, 중간.
  알람 유형	모든 알람 또는 특정 알람 유형.
  조건(함수)	숫자를 돌려주는 f(data) 함수로 결과를 변환합니다.

• 대시보드 상태 ID 가져오기

  현재 열린 대시보드 상태에 따라 값을 정합니다.

  매개변수	설명
  조건(없음)	현재 상태 이름에서 값을 얻습니다.
  조건(함수)	숫자를 돌려주는 f(data) 함수로 결과를 변환합니다.

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

  대시보드 상태 컨텍스트 전체로 값을 정합니다. 상태 매개변수 여러 개를 한꺼번에 확인해야 할 때 씁니다.

  매개변수	설명
  조건(함수만)	표시할 숫자 값을 돌려주는 f(data) 함수를 작성합니다.

사용자가 왼쪽 버튼을 클릭할 때 실행할 동작을 정합니다. 줄어든 값을 HMI 장치로 보냅니다. 아래 동작 유형 중 하나를 고릅니다.

• 속성 설정

  줄어든 값으로 HMI 장치 속성을 갱신합니다.

  매개변수	설명
  속성 범위	서버 또는 공유.
  속성 키	갱신할 속성(예: speed, targetTemperature).
  Value	Value — 위젯의 현재 값을 그대로 넘깁니다. 함수 f(value) — 쓰기 전에 값을 변환합니다.

• 시계열 추가

  줄어든 값으로 시계열 기록을 씁니다.

  매개변수	설명
  시계열 키	쓸 텔레메트리 키(예: temperatureSetpoint).
  Value	Value — 위젯의 현재 값을 그대로 넘깁니다. 함수 f(value) — 쓰기 전에 값을 변환합니다.

사용자가 오른쪽 버튼을 클릭할 때 실행할 동작을 정합니다. 늘어난 값을 HMI 장치로 보냅니다. 왼쪽 버튼 클릭과 짝을 이루도록 설정합니다. 아래 동작 유형 중 하나를 고릅니다.

• 속성 설정

  늘어난 값으로 HMI 장치 속성을 갱신합니다.

  매개변수	설명
  속성 범위	서버 또는 공유.
  속성 키	갱신할 속성(예: speed, targetTemperature).
  Value	Value — 위젯의 현재 값을 그대로 넘깁니다. 함수 f(value) — 쓰기 전에 값을 변환합니다.

• 시계열 추가

  늘어난 값으로 시계열 기록을 씁니다.

  매개변수	설명
  시계열 키	쓸 텔레메트리 키(예: temperatureSetpoint).
  Value	Value — 위젯의 현재 값을 그대로 넘깁니다. 함수 f(value) — 쓰기 전에 값을 변환합니다.

비활성화 상태는 설정한 조건이 맞으면 두 버튼을 모두 조작할 수 없게 해, 안전하지 않거나 올바르지 않은 상황에서 값을 바꾸지 못하게 합니다.

• 아무 것도 하지 않음

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

  매개변수	설명
  Value	버튼을 항상 비활성화하려면 참, 항상 활성화해 두려면 거짓으로 정합니다.

• 속성 가져오기

  HMI 장치 속성(예: locked 플래그, online 상태)에 따라 버튼을 비활성화합니다.

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

• 시계열 가져오기

  최신 텔레메트리 값(예: 운전 모드, 가용성 측정값)에 따라 버튼을 비활성화합니다.

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

• 알람 상태 가져오기

  특정 알람이 활성인 동안 버튼을 비활성화합니다(예: 심각한 알람 중 값 조정 막기).

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

• 대시보드 상태 ID 가져오기

  현재 열린 대시보드 상태에 따라 버튼을 비활성화합니다. 읽기 전용이나 제한된 화면에서 값을 바꾸지 못하게 할 때 씁니다.

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

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

  대시보드 상태 컨텍스트 전체로 버튼을 비활성화합니다. 상태 매개변수 여러 개를 한꺼번에 확인해야 할 때 씁니다.

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

값 표시와 위젯의 전체 레이아웃을 설정합니다.

설정	설명
레이아웃	버튼 디자인 종류: 단순 — 최소한의 스타일, 채움 — 채워진 배경, 볼륨 — 입체 효과.
자동 크기 조절	위젯 크기를 바꾸면 글꼴 크기와 요소 비율을 자동으로 조정합니다.
범위	허용하는 숫자 범위: 최소와 최대 값.
값 증가/감소 단계	버튼을 한 번 클릭할 때마다 적용하는 단계 크기(예: 1, 5, 0.5).
값	표시 값의 글꼴 설정(서체, 크기, 굵기), 색상, 소수 자릿수.
값 박스 배경	숫자 표시 영역 뒤의 배경색.
테두리	값 영역의 테두리 너비와 색상.

버튼마다 아이콘과 색상을 따로 정합니다. 이 영역에는 왼쪽과 오른쪽 탭이 있습니다.

설정	설명
왼쪽 버튼 / 오른쪽 버튼	버튼을 표시하거나 숨기는 스위치.
아이콘	버튼에 표시되는 아이콘. 크기(px)와 아이콘을 고릅니다.
전원 ‘켜짐’ 색상	기본 — 활성 상태의 버튼 채우기 색상, 배경 — 주변 영역 색상.
비활성화 색상	기본 — 비활성화 상태의 버튼 채우기 색상, 배경 — 주변 영역 색상.

설정	설명
배경	카드 배경색이나 이미지.
카드 버튼 표시	전체화면 — 위젯을 전체 화면 모드로 펼칩니다.
카드 모서리 반경	카드 모서리의 둥근 정도.
카드 패딩	위젯 내용과 카드 테두리 사이 간격.

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

시나리오: Heating Controller라는 HMI 장치가 실내 온도를 제어합니다. 공유 속성 targetTemperature에서 설정값을 읽고, 값이 바뀌면 히터를 조정합니다. 두 번째 공유 속성 locked(Boolean)가 true이면 값을 바꿀 수 없습니다.

사전 준비:

• MX On Cloud에 Heating Controller라는 HMI 장치를 만들고 라이선스를 등록합니다(HMI 장치 연결 가이드 참고).
• 공유 속성을 추가합니다: 키 — targetTemperature, 데이터 유형 — Double, 값 — 24.5.
• 공유 속성을 추가합니다: 키 — locked, 데이터 유형 — Boolean, 값 — false.

1단계. 위젯 추가. 대시보드를 수정 모드로 열고 위젯 추가를 클릭하고 Buttons 번들을 선택한 다음 Value stepper를 고릅니다.

2단계. 데이터 소스 설정. 대상 장치를 Heating Controller로 정합니다.

3단계. 동작 설정.

초기 상태: 속성 가져오기 — 범위: 공유, 키: targetTemperature, 조건: 없음.

왼쪽 버튼 클릭: 속성 설정 — 범위: 공유, 키: targetTemperature, Value: Value.

오른쪽 버튼 클릭: 속성 설정 — 범위: 공유, 키: targetTemperature, Value: Value.

비활성화 상태: 속성 가져오기 — 범위: 공유, 키: locked, 조건: 없음 — 결과가 true(Boolean)이면 비활성화.

4단계. 모양 설정.

• 레이아웃: 채움
• 범위: 최소 16, 최대 28
• 값 증가/감소 단계: 0.5
• 값: 단위 °C, 소수 자릿수 1

5단계. 버튼 모양 설정.

왼쪽 버튼: 전원 ‘켜짐’ 색상 — 기본 #048AD3, 배경 #FFFFFF.

오른쪽 버튼: 전원 ‘켜짐’ 색상 — 기본 #F44336, 배경 #FFFFFF.

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

결과: 위젯이 Heating Controller의 targetTemperature를 읽어 초기 값으로 표시합니다. 왼쪽 버튼(파랑)을 클릭하면 설정값이 0.5 °C 내려가고, 오른쪽 버튼(빨강)을 클릭하면 0.5 °C 올라갑니다. locked = true이면 두 버튼이 모두 비활성이 됩니다.

위젯에 올바른 초기 값이 표시되지 않음

원인	해결 방법
속성 키가 틀림	키가 HMI 장치 속성과 정확히 같은지 확인합니다. 키 이름은 대소문자를 구분합니다.
속성 범위가 틀림	범위를 실제 속성 유형(클라이언트 / 서버 / 공유)에 맞춥니다.
HMI 장치에 속성이 없음	장치 → 속성을 열고 키가 값과 함께 있는지 확인합니다.

버튼을 클릭해도 반응이 없음

원인	해결 방법
HMI 장치가 오프라인임	HMI 장치 연결과 전송 설정을 확인합니다.
값이 범위를 벗어남	새 값이 설정한 최소 / 최대 범위 안에 있는지 확인합니다.

위젯이 비활성화 상태에서 벗어나지 않음

원인	해결 방법
비활성화 조건이 늘 참으로 평가됨	비활성화 상태 설정을 검토합니다. 동작 유형과 결과 변환기를 확인합니다.
예상하지 못한 속성 값	장치 → 속성이나 최근 데이터를 열어 실제 값을 확인합니다.