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

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
              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?


Have a look at the code of

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


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.


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

1 Like

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"'

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.

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"'

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.