Custom Color Widget

Apps & Services HABPanel
, ,
1

Hi,

I´m trying to write a custom widget that shows a lightbulb(or an icon of a lightbulb) according to a color item of my hue lamp. Is there a way to set the icon color to the color item, or maybe the background of the item to the according color?

Any help would be appreciated, thanks!

2

I doubt you can without coding a separate directive, but it’s not easy… Colors are represented in openHAB as HSV comma-separated values and in CSS you can use HSL (see https://en.wikibooks.org/wiki/Color_Models:_RGB,_HSV,_HSL and https://www.w3schools.com/colors/colors_hsl.asp) but this needs a conversion…

You can review the code of the standard color picker for inspiration:

For icons it’s even more complex because it’s a filter like this:

1 Like
3

Thanks for the help, I will have a look into that!

4

Hi

Did you have any success with this?

Cheers,
Stuart

5

I use this

ng-style="{'color': 'rgb(' + itemValue(item.name + '_rgb_String') + ')'}"

to control the color of a glyphicon in a container/button

1 Like
6

Thanks Christopher :slight_smile:

I’ll give that a try.

Just to be uber clear…
Is the item your container button is looking for named something like

LightColour_rgb_String

And how is the RGB string presented in that string, for example, are the three values HEX or Decimal, comma separated or fixed lengths?

I did see somewhere that the Color style can accept HSL values which might save some conversion.

I have had a look at the NodeRed Dashboard, with the idea that I’d use the colourpicker there, but the HSL values are very formally presented (within the payload) so there’s a need for conversion In & Out.

I’ll let you know how I get on :slight_smile:

Cheers,
Stuart

7

You could possibly change it to use directly the color item and change the RGB to hsl but I’m not sure

1 Like
8

Hi Chris

I’m just not having any joy with this.

Converting the values doesn’t seem to difficult, but getting a colour to change in the UI is proving beyond me.

Would you mind sharing your Widget / Container / Button so that I can have a clear look at what’s going on?

Thanks,

Stuart

9

@MDAR Did you work this out as I am trying to work out the same thing? How to get the style to change based on the color inside a color item?

EDIT:
Possibly this is done by setting the colour info with a rule into a new string item and using that. I’m hoping there is a more elegant solution to this…

10

Sorry Matt

I stopped once I got the colour to change at will.

Styling it seemed less important, the more I realised that it was beyond my skilset.