본문으로 건너뛰기
  1. Posts/

Thingworx에서 Gauge bar 구현 시 Slider 위젯의 대안으로 사용할 수 있는 Highchart Extension 활용 방법 제시

·1 분· loading · loading ·
작성자
SeungHyeon Lee
R&D Center Developer

Thingworx에서 Slider위젯의 커스텀 한계로 진행도 표시를 위한 게이지 바 UI 구성이 원활하지 않은 경우가 있습니다.

이 경우 자사의 Innofactory Highchart Extension을 사용하여 Extension에 스크립트를 추가하여 게이지 바를 구현할 수 있는 방법을 제시합니다.

Thingworx에서 Highchart를 사용한 Gauge bar 구현 방법
#

준비물
#

  1. Innofactory highchart Extension
  2. Thingworx에서 Innofactory Highchart Extension을 사용해야 합니다.
  3. Highchart Extension을 수정하여 Highchart 모듈을 추가할 수 있어야 합니다. (pattern-fill 추가하여 패턴을 추가하는 기능을 더할 수 있습니다.)

Thingworx의 Slider로 만든 게이지 바 예시
#

image-20231214141406537

Thingworx에서는 Slider 위젯을 통해 게이지 바와 유사한 UI를 구현할 수 있습니다.

하지만 Slider 위젯에서는 Value 속성만 라벨로 표현할 수 있고, Value 속성이 Number 유형을 고정적으로 받기 때문에 % 또는 값의 단위를 함께 표시하는 것은 불가능합니다.

Highchart로 만든 게이지 바 예시
#

Highchart Extension을 사용할 경우 선택할 수 있는 옵션이 다양해 집니다.

값에 단위를 표시할 수도 있고, 현재 위치임을 표시하는 Text Label만을 표시할 수도 있습니다.

아래는 값이 아닌 “Current” Label 만을 표시한 예시입니다.

또한 Highchart 모듈 중 pattern-fill 모듈을 추가하여 게이지 바를 패턴으로 채워 표현할 수도 있습니다.

Innofactory Highchart Extension에 Highchart Pattern-fill 모듈 추가 방법
#

Innofactort Highchart Extension은 {extension file 명}.runtime.js 파일의 renderHtml에서 필요한 모듈을 추가하는 과정을 수행합니다.

renderHtml의 모듈 추가 과정에 pattern-fill.js 모듈 추가 후 Extension을 다시 Thingworx로 import 하여 해당 모듈을 사용할 수 있습니다.

this.body_append('<script type="text/javascript" src="../Common/extensions/{Extension명}/ui/{ui명}/lib/modules/pattern-fill.js"></script>');

관련 글

Thingworx Extension 개발을 위한 이클립스 개발 환경 세팅
·2 분· loading · loading
Thingworx에 사용자가 개발한 Extension을 추가하여 위젯, Thing과 서비스 등 엔티티를 추가하여 사용할 수 있습니다. Thingworx Extension 개발을 위해서는 Eclipse에 플러그인 설치가 필요합니다. Eclipse 플러그인 설치와 개발을 위한 기본 설정을 알아보겠습니다. Thingworx Extension 개발을 위한 Eclipse 플러그인 설치 # [support.ptc.com](PTC Software Download - ThingWorx Foundation) 에서 사용하는 버전을 선택하여 Eclipse Plugin for Thingworx Extensions zip 파일을 다운로드 받아 압축을 해제합니다.
Thingworx 테스트 Tip (3) - 브라우저 개발자 도구 네트워크 기능을 이용한 Session 이벤트 제어와 서비스 이벤트 제어
·2 분· loading · loading
Thingworx Mashup 개발 시 화면간 이동으로 triggering되는 Load 이벤트와 Session에 설정한 사용자 지정 속성의 이벤트, 서비스의 동작에 따른 이벤트의 연쇄작용으로 테스트가 어려운 경우가 있습니다. 이번 글에서는 브라우저 개발자 도구 네트워크 기능을 이용한 Session 이벤트 제어와 서비스 이벤트 제어를 알아보도록 하겠습니다. Thingworx Session 객체를 통한 Session 이벤트 제어 # Session 값 조작에는 Thingworx 런타임객체 내의 Session 객체를 통해 Session 값 제어가 가능했지만,
Thingworx 테스트 Tip (2) - 브라우저 개발자 도구 콘솔을 통한 Thingworx Session 객체 접근 및 조작
·2 분· loading · loading
Thingworx Mashup 개발 시 로직의 순서 제어를 위해 Thingworx의 Session에 설정한 사용자 지정 속성의 이벤트를 이용하는 작업이 필요한 경우가 있습니다. 하지만 필요한 이벤트를 trigger 하기 위해 선행되어야 하는 동작들이 있을 수 있으며, 그 동작들을 테스트를 통해 인위적으로 발생시키기 위해서는 많은 양의 테스트 서비스 작성 및 서비스/이벤트 바인딩이 수행되었다가 테스트 후에 원복 시켜야 하는 불편함이 발생하기도 합니다. 브라우저의 개발자 도구의 콘솔을 이용하여 Thingworx의 Session 객체에 접근하고, 객체의 내장 함수를 통해 Thingworx Session 의 특정 사용자 지정값을 get/set 하거나, 세션 값이 변경 될 경우에 발생하는 이벤트를 trigger 할 수 있습니다. 이는 별도의 테스트용 서비스 작성 및 서비스/이벤트 바인딩 작업을 줄여 작업 시간 단축을 기대할 수 있을 것입니다.