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

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로 만든 게이지 바 예시 #

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>');