# Custom widget: Gauge

**URL:** <https://community.openhab.org/t/custom-widget-gauge/27406>\
**Category:** HABPanel\
**Tags:** widget\
**Created:** [April 26, 2017, 5:33pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406 "2017-04-26T17:33:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [April 26, 2017, 5:33pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/1 "2017-04-26T17:33:16Z")

</div>

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](https://community.openhab.org/t/new-feature-globally-provisioned-widgets-i-e-with-osgi-bundles/26994). 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: [Release v2.1.0.201704261153 · ghys/habpanel-gauge-widget · GitHub](https://github.com/ghys/habpanel-gauge-widget/releases/latest)

![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/c/cd0e850df4536de7e10677f8e951fe6cea71ecd6.png)

Source link: [GitHub - ghys/habpanel-gauge-widget: Gauge widget for HABPanel](https://github.com/ghys/habpanel-gauge-widget)

Obligatory shoutout to [the original author](https://gist.github.com/tomerd/1499279).

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](https://github.com/ghys/habpanel-gauge-widget/blob/v2.1.0.201704261153/static/gauge.directive.js)_ file, which is registered to the HttpService as a static resource (in _[GaugeWidgetProvider.java](https://github.com/ghys/habpanel-gauge-widget/blob/v2.1.0.201704261153/src/main/java/org/openhab/ui/habpanel/widget/gauge/internal/GaugeWidgetProvider.java)_) and dynamically loaded by the `oc-lazy-load` directive:

```xml
<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.

Cheers!

---

<div class="post-metadata">

**Author:** ![TommySharp](https://community.openhab.org/user_avatar/community.openhab.org/tommysharp/32/2171_2.png) [@TommySharp](https://community.openhab.org/u/TommySharp)\
**Post date:** [April 27, 2017, 12:46am UTC](https://community.openhab.org/t/custom-widget-gauge/27406/2 "2017-04-27T00:46:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MohammadAhmad](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/dc4da7/32.png) [@MohammadAhmad](https://community.openhab.org/u/MohammadAhmad)\
**Post date:** [May 22, 2017, 1:48pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/3 "2017-05-22T13:48:33Z")

</div>

Same here please. Kindly provide the walk through steps

---

<div class="post-metadata">

**Author:** ![MohammadAhmad](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/dc4da7/32.png) [@MohammadAhmad](https://community.openhab.org/u/MohammadAhmad)\
**Post date:** [May 23, 2017, 12:44pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/4 "2017-05-23T12:44:20Z")

</div>

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]”}

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [May 26, 2017, 2:17pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/5 "2017-05-26T14:17:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mark\_Webster](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/919ad9/32.png) [@Mark\_Webster](https://community.openhab.org/u/Mark_Webster)\
**Post date:** [May 27, 2017, 11:21am UTC](https://community.openhab.org/t/custom-widget-gauge/27406/6 "2017-05-27T11:21:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [May 27, 2017, 7:53pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/7 "2017-05-27T19:53:53Z")

</div>

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):

> [@How to import "timeline" widget](https://community.openhab.org/t/how-to-import-timeline-widget/29059/4):
>
> I have no idea …

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

---

<div class="post-metadata">

**Author:** ![UglyKidJoe](https://community.openhab.org/user_avatar/community.openhab.org/uglykidjoe/32/26432_2.png) [@UglyKidJoe](https://community.openhab.org/u/UglyKidJoe)\
**Post date:** [June 2, 2017, 1:08pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/8 "2017-06-02T13:08:17Z")

</div>

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:  
 ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/4/4ff5a227678540ca572a7c46c202856844daa448.png)

And my widget dropdown looks like this…

![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/9/99544e9124e76987c4775b0c278e47fa050dd5f8.png)

Any idea why it doesn’t show up?

Thanks in advance,

Craig

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [June 2, 2017, 5:48pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/9 "2017-06-02T17:48:50Z")

</div>

@UglyKidJoe can you verify the following:

- In the openHAB console, type `bundle:list`, you should see a line like this:

```auto
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.

---

<div class="post-metadata">

**Author:** ![UglyKidJoe](https://community.openhab.org/user_avatar/community.openhab.org/uglykidjoe/32/26432_2.png) [@UglyKidJoe](https://community.openhab.org/u/UglyKidJoe)\
**Post date:** [June 4, 2017, 11:08am UTC](https://community.openhab.org/t/custom-widget-gauge/27406/10 "2017-06-04T11:08:08Z")

</div>

Hi @ysc,

Thank’s for your reply.

For me typing bundle:list at the prompt failed with the following:  
 ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/b/b036d74b828fa67456af432ff218cda610b01e5e.png)

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…

 ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/2/21f9cb52bf111c9861139b4780ad45ef67de886d.png)

Thanks gain,

Craig

---

<div class="post-metadata">

**Author:** ![anfaenger](https://community.openhab.org/letter_avatar_proxy/v4/letter/a/a9a28c/32.png) [@anfaenger](https://community.openhab.org/u/anfaenger)\
**Post date:** [June 4, 2017, 11:17am UTC](https://community.openhab.org/t/custom-widget-gauge/27406/11 "2017-06-04T11:17:01Z")

</div>

> [@UglyKidJoe](#):
>
> ent

Hi Craig,

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

Install karaf with openhabian

```auto
sudo openhabian-config

```

Details see [http://docs.openhab.org/administration/console.html](http://docs.openhab.org/administration/console.html)

Then call the karaf-console with

```auto
ssh openhab@localhost -p 8101

```

Then in karaf-console you can type:

```auto
bundle:list

```

---

<div class="post-metadata">

**Author:** ![UglyKidJoe](https://community.openhab.org/user_avatar/community.openhab.org/uglykidjoe/32/26432_2.png) [@UglyKidJoe](https://community.openhab.org/u/UglyKidJoe)\
**Post date:** [June 4, 2017, 11:42am UTC](https://community.openhab.org/t/custom-widget-gauge/27406/12 "2017-06-04T11:42:05Z")

</div>

Hi @anfaenger,

Thanks for the pointer 🙂

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…

![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/7c0d6b6e126006d476dc786fe9a9f41346638638.png)

---

<div class="post-metadata">

**Author:** ![anfaenger](https://community.openhab.org/letter_avatar_proxy/v4/letter/a/a9a28c/32.png) [@anfaenger](https://community.openhab.org/u/anfaenger)\
**Post date:** [June 4, 2017, 3:26pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/13 "2017-06-04T15:26:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [June 4, 2017, 5:25pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/14 "2017-06-04T17:25:34Z")

</div>

@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](http://docs.openhab.org/installation/linux.html#file-locations)) - 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.

---

<div class="post-metadata">

**Author:** ![UglyKidJoe](https://community.openhab.org/user_avatar/community.openhab.org/uglykidjoe/32/26432_2.png) [@UglyKidJoe](https://community.openhab.org/u/UglyKidJoe)\
**Post date:** [June 5, 2017, 8:27am UTC](https://community.openhab.org/t/custom-widget-gauge/27406/15 "2017-06-05T08:27:58Z")

</div>

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. 😊

Now it’s all good. Cheers

---

<div class="post-metadata">

**Author:** ![furax54](https://community.openhab.org/user_avatar/community.openhab.org/furax54/32/70835_2.png) [@furax54](https://community.openhab.org/u/furax54)\
**Post date:** [June 5, 2017, 8:56pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/16 "2017-06-05T20:56:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![LuFriFri](https://community.openhab.org/letter_avatar_proxy/v4/letter/l/e19b73/32.png) [@LuFriFri](https://community.openhab.org/u/LuFriFri)\
**Post date:** [July 8, 2017, 8:57am UTC](https://community.openhab.org/t/custom-widget-gauge/27406/17 "2017-07-08T08:57:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Nic\_P](https://community.openhab.org/letter_avatar_proxy/v4/letter/n/e19b73/32.png) [@Nic\_P](https://community.openhab.org/u/Nic_P)\
**Post date:** [July 28, 2017, 8:35am UTC](https://community.openhab.org/t/custom-widget-gauge/27406/18 "2017-07-28T08:35:09Z")

</div>

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

```javascript
 9 | Active | 80 | 2.1.0.201704261153 | Gauge widget for HABPanel

```

---

<div class="post-metadata">

**Author:** ![Nic\_P](https://community.openhab.org/letter_avatar_proxy/v4/letter/n/e19b73/32.png) [@Nic\_P](https://community.openhab.org/u/Nic_P)\
**Post date:** [July 28, 2017, 8:45am UTC](https://community.openhab.org/t/custom-widget-gauge/27406/19 "2017-07-28T08:45:32Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![togi](https://community.openhab.org/letter_avatar_proxy/v4/letter/t/58f4c7/32.png) [@togi](https://community.openhab.org/u/togi)\
**Post date:** [April 26, 2019, 1:24pm UTC](https://community.openhab.org/t/custom-widget-gauge/27406/20 "2019-04-26T13:24:33Z")

</div>

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

[Next page](https://community.openhab.org/t/custom-widget-gauge/27406.md?page=2)