Hello all,
is there a way to color a UI widget background dynamically?
Instead of passing a stairs of IFs, it would be more elegant to paint my battery SoC as a hue value, resulting in red at 0% and green at 100% with all possible values between.
If yes, I would like to see an example.
Also, the color saturation might be used to display the Charge/discharge power, but this will be the 2nd chapter.
I found syntax here: https://www.w3schools.com/cssref/func_hsl.php, but I am not able to implement this in OH4.3.1.
Not even a fixed value is accepted. The 87 in my example should be replaced by the real value coming from the SoC percentage.
You are on the right track. First you have a small error in your example: there must be no space between hsl and (87 50% 50%). If you try hsl(87 50% 50%) you should see a color change.
Second, to make it a dynamic value, you just need work with widget expressions:
In this case, the ultimate value that you want is just a string that reads something like "hsl(87 50% 50%)". With widget expressions, there are several ways to do this but the simplest is probably just:
With string values, the + just concatenates them together. The calculation in the middle assumes that your percentage value is actually held in an item with the actual numerical value between 0 and 100 and just converts that to 0 to 1 then multiplies that value times 120 (green in hsl). If your number items are different (e.g., already just 0 to 1) you’ll need to modify that a little.
(Also, quick note: the Tutorials and Examples category is for posting your own solutions, not for requesting help. I’ve moved this to a more appropriate category.)
