Thingworx에서 Slider위젯의 커스텀 한계로 진행도 표시를 위한 게이지 바 UI 구성이 원활하지 않은 경우가 있습니다.
이 경우 자사의 Innofactory Highchart Extension을 사용하여 Extension에 스크립트를 추가하여 게이지 바를 구현할 수 있는 방법을 제시합니다.
Thingworx에서 Highchart를 사용한 Gauge bar 구현 방법 #
준비물 #
- Innofactory highchart Extension
- Thingworx에서 Innofactory Highchart Extension을 사용해야 합니다.
- 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>');