Number Item color depending on value?

Is it possible to change the color of a number item in a custom widget depending on the item value?
For example:
value < -20 color red
value between -20 and 20 normal color
value >20 green

thanks in advance

So I did it as follows for my CO2 sensor - it works, but I assume there are more elegant solutions :wink:

<div ng-if="itemValue('Wohnzimmer_Klima_AirQuality')<900">
 	<div class="template-container" 
       style="top:0;bottom:0;left:0;right:0;position:absolute;background-color:#006600">
  		<div class="template-contents">
    		<div class="row">
    			Luftqualität
    		</div>
    		<div class="row">
      		<div class="col-xs-12"><span style="font-size: 20pt">{{itemValue('Wohnzimmer_Klima_AirQuality')}} ppm</span></div>
    		</div>
  		</div>
  </div>
</div>

<div ng-if="itemValue('Wohnzimmer_Klima_AirQuality')>=900 && itemValue('Wohnzimmer_Klima_AirQuality')<1400">
 	<div class="template-container" 
       style="top:0;bottom:0;left:0;right:0;position:absolute;background-color:#ff9900">
  		<div class="template-contents">
    		<div class="row">
    			Luftqualität
    		</div>
    		<div class="row">
      		<div class="col-xs-12"><span style="font-size: 20pt">{{itemValue('Wohnzimmer_Klima_AirQuality')}}ppm</span></div>
    		</div>
  		</div>
  </div>
</div>

<div ng-if="itemValue('Wohnzimmer_Klima_AirQuality')>=1400">
 	<div class="template-container" 
       style="top:0;bottom:0;left:0;right:0;position:absolute;background-color:#800000">
  		<div class="template-contents">
    		<div class="row">
    			Luftqualität
    		</div>
    		<div class="row">
      		<div class="col-xs-12"><span style="font-size: 20pt">{{itemValue('Wohnzimmer_Klima_AirQuality')}} ppm</span></div>
    		</div>
  		</div>
  </div>
</div>

P.S.
This solution changes the background of the item. But of course you are free to change any kind of the visualisation of the item.

Regards.

My way: I declare a scond itemValue an now i can change the color of the value from openHAB. For example my temperature from the bath room. Within a rule in openHAB i can change the color.

<img src={{itemValue(config.url)}} width="50" height="50"></img>
<p>
<span style="font-weight: bold; font-size: 40px; color:{{itemValue(config.color)}}; text-align:center">
{{itemValue(config.temp).replace("C","°C") | number:1}}°C
</span>

Regards

1 Like