Custom widget: Gauge

Apps & Services HABPanel
1

Hi,
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

gauge.png734×423 57.7 KB

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 oc-lazy-load directive:

<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 :wink: so in the future, those kind of widgets could be installed as extensions.

Cheers!

13 Likes
2

Awesome! Anything to make things easier for us slightly non-technical users is a great help!

3

Same here please. Kindly provide the walk through steps

4

I have been able to define config.min and config.max as a number, put in the values and it words great. But I failed with trying all the types “String,Number,Item” in value=itemState(config.item). then I changed the code a bit to value=“config.item” and then it started taking numeric entries.

But still i am not able to set values dynamically in it using an mqtt item. My item is as below kindly help:

Number dummySensor “Dummy Sensor [%s]” {mqtt="<[mqtt-gt:home/dummySensor/status:state:default]"}

5

Not sure how to help you. Numerical values should work without modifying the template. Just add the widget to a dashboard and configure it with your item. Also try using a dummy widget to see if your item is updated properly.

6

Hi

This looks really good… However, I can’t seem to get anything to work… I’ve dropped the jar file into the addons directory but I don’t see anything different in the HABpanel UI no extra widget to add to a panel or anything…

Have I missed something?

Cheers

7

Perhaps you don’t have a recent enough version.

The functionality to support bundle-provisioned widgets like this one was added recently.
Your “Add Widget” menu should look like this (with icons):

If it doesn’t, your version is too old.

8

Hi Yannick,

I’m dying to get this gauge widget onto my UI. It’s super-cool.

I cannot seem to find it though.

I have updated downloaded the widget .jar and the latest HABpanel .jar into the addons folder:

image.png783×116 7.69 KB

And my widget dropdown looks like this…

Any idea why it doesn’t show up?

Thanks in advance,

Craig

9

@UglyKidJoe can you verify the following:

  • In the openHAB console, type bundle:list, you should see a line like this:
189 | Active   |  80 | 2.1.0.201704261153     | Gauge widget for HABPanel
  • In Paper UI, go to Configuration > Services > UI (tab) > Configure HABPanel > Expert mode - post a screenshot of that screen. Maybe you simply have no HABPanel configuration yet, in this case the bundle would not install the widget.
10

Hi @ysc,

Thank’s for your reply.

For me typing bundle:list at the prompt failed with the following:

Is there a component I am missing maybe?

I’m running on an OpenHABian installed instance.

The HABPanel configuration Under PaperUI configuration>services>UI expert mode looks like this…

image.png610×529 10 KB

Thanks gain,

Craig

11

Hi Craig,

I think you should go to the karaf-console first.

Install karaf with openhabian

sudo openhabian-config

Details see http://docs.openhab.org/administration/console.html

Then call the karaf-console with

ssh openhab@localhost -p 8101

Then in karaf-console you can type:

bundle:list
12

Hi @anfaenger,

Thanks for the pointer :slight_smile:

I was now able to run the bundle:list, though I didn’t find the “Gauge widget for HABPanel” entry as Yannick referred to above.

Here is the tail of it…

image.png751×129 4.46 KB

13

I have no experience with the new bundle-oriented widget installation.

I did a first try, but when I tried to copy the jar-file into the addons-directory I ended up with a “permission denied”-error.

I’m sorry, at the moment I can’t help you.

14

@UglyKidJoe I assumed you were running openHAB on Windows since you posted a Windows Explorer screenshot…?

Anyways, on openHABian the addons folder should be /usr/share/openhab2/addons (documentation) - that’s where you should copy the bundle’s .jar file.

But your second screenshot also tells your HABPanel configuration is empty. So before you copy the .jar into the addons folder (or remove it if it’s already there), go to your HABPanel’s advanced settings and click the “Save the current configuration to a new panel configuration” link and give it a name. This will create the config. Then copy the .jar file.

15

Thanks Yannick. God spot on the windows installation! I only use that to test things when I’m away from home, so the schoolboy error was that I put the .jar in the windows installation and not my Pi. :blush:

Now it’s all good. Cheers

1 Like
16

It works for me but only after creating new panel AND restarting gauge bundle. Thanks @ysc

17

is there a new version that works with OH 2.1 and newer?

18

I also have the same question, the widget loads but is not visible in habpanel

 9 | Active   |  80 | 2.1.0.201704261153     | Gauge widget for HABPanel
19

I seem to have solved the problem. If anyone else is having the same issue my problem was that I still had an older habpanel .jar file in my addon folder. I removed this and then reinstalled habpanel in the paper UI and now all is working properly :slight_smile:

20

Hi guys,
independently of the fact that this topic is quite old I try to get this addon working.
It seems that I have the same issue like others: The add-on is loaded and active (I see it in the OH console) but the widget is not available in HABpanel.
Would be great if someone who got it working provide some addional hints for me.

Thanks,
Tobi