This widget was mainly developed to showcase how additional code can be packaged and injected dynamically using the new the new bundle-oriented approach. Therefore, it’s not the usual JSON file but a fully-fledged openHAB addon. You need a recent HABPanel snapshot to use this feature.
To install it, simply drop the .jar from there in the
addons folder: https://github.com/ghys/habpanel-gauge-widget/releases/latest
Source link: https://github.com/ghys/habpanel-gauge-widget
Obligatory shoutout to the original author.
Some technical details for those interested: the actual template is actually very short since it simply uses a
gauge directive defined in the gauge.directive.js file, which is registered to the HttpService as a static resource (in GaugeWidgetProvider.java) and dynamically loaded by the
<div oc-lazy-load="['/habpanel-resources/gauge/gauge.directive.js']" style="position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px);"> <gauge value="itemState(config.item) || config.min" label="ngModel.name" label-scale="config.label_scale" unit="config.unit" min="config.min" max="config.max" yellow-zone="config.yellow_zone" red-zone="config.red_zone" include-green-zone="config.include_green_zone" major-ticks="config.major_ticks" minor-ticks="config.minor_ticks" /> </div>
Let me know if it works for you, and I hope it get you inspired to develop more complex widgets and package them this way so in the future, those kind of widgets could be installed as extensions.