Custom widget: Gauge

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.

henryd · September 17, 2019, 4:45pm

I hope, I’ve understood
grafik
The console in the browser developer tools I read nothing like ‘hello’!
grafik
I think, the gauge.directive.js is not being loaded.
The widget is in this folder:
grafik
That’s o.k.?

ysc · September 17, 2019, 9:06pm

Yep, you can confirm that by going to the Sources tab in the devtools window and check whether gauge.directive.js is loaded from habpanel-resources/gauge (the original location, wrong) or static/gauge. In the former case you might be using the original widget and not the one you cloned.

RicardoSJ · October 6, 2020, 7:03pm

Thanks for this widget, it is really useful! Just a quick note on changing the colours, there appears to be a typo in what you’ve proposed to change the HABPanel settings to. Instead of

oc-lazy-load="['/static/gauge/gauge.directive.js']"

it should be

oc-lazy-load=\"['/static/gauge/gauge.directive.js']\"

You need a leading backslash \ after the first = sign, and a trailing one between ] and "

This worked for me and now I have the blue colour I needed. I think this error was introduced as a result of not using code fences as this happened to my original reply.

RicardoSJ · February 27, 2021, 3:38pm

Hey @ysc Yannik, any chance of getting this to work with OH3? I use it to show energy usage and it’s really good; just migrating to OH3 and it doesn’t work