How can I change the color of an icon depending on the temperatur?

[Norick]

I do have a temperature sensor which shows correctly the temperature in OH3 (windows). Now I configured a new widget where I would like to change the icon color depending on the temperature. Unfortunately it does not work. I suppose the temperature is a number.

Here my widget code where I change the color (not working):

- component: oh-label-item
            config:
              action: analyzer
              actionAnalyzerCoordSystem: time
              icon: ="f7:thermometer"
              iconColor: '=(items.tempItem.state.split(" ")[0] >= 20) ? "blue" : "green"'
              item: Wetterstation_Dach_Aussentemperatur

Can someone tell me what I am doing wrong here? Is the “tempItem” maybe a string which needs to be converted?

Thanks

[Wolfgang_S]

Have a look at the code of

OH3 temperature list widget with dynamic icon color, indoor/outdoor setting and option to show badge

Hi all, Here’s the code for a custom temperature list item widget that supports different rendering of indoor and outdoor temperatures, with the option to display a badge. [Screenshot 2021-06-12 at 10.34.56] By default the widget will render outdoor temperatures and will use “outdoor grade” temperature intervals. You can change the temperature intervals by setting the “Indoor” parameter to true. The temperatures have been defined in centigrade (°C): Temperature range name Outdoor Indoo…

[rlkoshak (Rich Koshak)]

@Norick

Can someone tell me what I am doing wrong here?

You need to reference the actual Item. Because you are overriding the defaults for iconColor the item property isn’t being used.

items.Wetterstation_Dach_Aussentemperatur.state...

The second problem is the state is a String but you want to do a numeric comparison meaning you need to parse the String to a Number. Building Pages - Components & Widgets | openHAB shows Number is available in expressions.

Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state)

Note that parseFloat will stop at the space so you don’t need to split the String.

[Norick]

@rlkoshak

Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state)

Thanks for the answer and sorry for the late reply. I changed it accordingly but it is still not working as expected. I reduced the expression to the minimum to verify it. Now it looks like this:

iconColor: '=(Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state)) > 35) ? "red" : (Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state)) > 10) ? "blue" : "purple"'

[rlkoshak (Rich Koshak)]

So what is it doing?

Are you familiar with the developer sidebar? Press alt-shift-d and select the third tab and you’ll find a widget expression tester.

[Norick]

Thanks for the hint!! This helped a lot and I could find a “)” issue which I solved. Now the developer sidebar shows the correct iconcolor but on the page where I am using this widget the color shows still “red”, independend of the current temperature.

I also refreshed the page several times already. Any idea what goes wrong here?

iconColor: '= Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= -10 ? "purple" : Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= 0 ? "blue" : Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= 10 ? "green" : Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= 20 ? "lighgreen" : Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= 25 ? "green" : Number.parseFloat(items.Wetterstation_Dach_Aussentemperatur.state) <= 30 ? "orange": "red"'

[rlkoshak (Rich Koshak)]

The best I can offer is that the expression tested in the developer sidebar is different from the one in the widget. The same code runs in both places. Either that, or the Item’s state > 30.

[Norick]

finally it works now
Thanks for your help again