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