Custom widget: Gauge

UglyKidJoe · June 2, 2017, 1:08pm

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:

And my widget dropdown looks like this…

Any idea why it doesn’t show up?

Thanks in advance,

Craig

ysc · June 2, 2017, 5:48pm

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

UglyKidJoe · June 4, 2017, 11:08am

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…

Thanks gain,

Craig

anfaenger · June 4, 2017, 11:17am

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

UglyKidJoe · June 4, 2017, 11:42am

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…

anfaenger · June 4, 2017, 3:26pm

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.

ysc · June 4, 2017, 5:25pm

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

UglyKidJoe · June 5, 2017, 8:27am

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

furax54 · June 5, 2017, 8:56pm

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

LuFriFri · July 8, 2017, 8:57am

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

Nic_P · July 28, 2017, 8:35am

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

Nic_P · July 28, 2017, 8:45am

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

togi · April 26, 2019, 1:24pm

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

henryd · August 17, 2019, 1:23pm

Hi Yannick,

Many thanks for this great work! For beginners it’s really not easy to let it run, but now it works fine:

gauge

I have a question to the colors: Is it possible to change it? For example yellow to blue?

ysc · August 30, 2019, 7:57pm

Hi, sorry for the delay, I just happen to find this in a suggested topics list.
IIRC I made a “clone widget” feature in HABPanel’s custom widgets list (in the original gauge widget tile’s context menu) which will copy it to a regular custom widget that you can edit. Then you should find hardcoded values for the colors in the code.

henryd · August 31, 2019, 9:02am

Hi Yannick,
Many thanks for your reply. I’ve cloned the widget as you described. But I’ve only see this code without hard coded colors:

I hope, you can help me to find the right way to customize the widget.
Many thanks in advance and best regards
Henry

ysc · August 31, 2019, 11:30am

Revisiting this code it appears the default colors are defined here, in the directive’s JS file:

github.com

ghys/habpanel-gauge-widget/blob/3d6db039e5b681bc2214954e962906b42bfbdd24/static/gauge.directive.js#L58


    this.config.cx = this.config.size / 2;
    this.config.cy = this.config.size / 2;
    
    this.config.min = undefined != configuration.min ? configuration.min : 0; 
    this.config.max = undefined != configuration.max ? configuration.max : 100; 
    this.config.range = this.config.max - this.config.min;
    
    this.config.majorTicks = configuration.majorTicks || 5;
    this.config.minorTicks = configuration.minorTicks || 2;
    
    this.config.greenColor 	= configuration.greenColor || "#109618";
    this.config.yellowColor = configuration.yellowColor || "#FF9900";
    this.config.redColor 	= configuration.redColor || "#DC3912";
    
    this.config.transitionDuration = configuration.transitionDuration || 500;
}


this.render = function()
{
    this.body = d3.select(this.element)
                        .append("svg:svg")

What you can do, to keep things simple, is save the file above (click on the Raw button on GitHub) in the html folder of your configuration (maybe in a gauge subfolder), modify it as you see fit, then modify the code of the widget in HABPanel changing
oc-lazy-load="['/habpanel-resources/gauge/gauge.directive.js']" to
oc-lazy-load="['/static/gauge/gauge.directive.js']"

henryd · September 5, 2019, 4:46pm

Hi Yannick,
Many thanks for your reply. I’ll try it next weekend!
Kind regards
Henry

henryd · September 16, 2019, 4:12pm

Hi Yannick,

I’ve tyed it as you described in this path:
grafik

And change it in the widget-clone too:

grafik

But with no effect.

It would be great, if you give me a solution for this!

Best regards
Henry

ysc · September 17, 2019, 11:17am

Looks ok, what do you mean by “no effect”?
Did you change the source? Try adding console.log('hello') somewhere to confirm the right file is being loaded, check the console in the developers tools of your browser.