Template to show temperature difference with background colors in habpanel

Hi,

Another hour spent trying to find a solution before posting…

I have a number of temp sensors that feed an item showing the difference between the temperature and ambient temperature.

I am trying to create a widget/template that color codes the item depending on how above of below temperature it is.

I can get this to properly display a #FF0000 background as clearly both items are ‘==’ but I can’t get any ‘>’ or ‘<’ comparisons to work. What am I doing wrong?

<div 
  ng-style="{
  'background-color': itemValue(C_Sonoff4ch_Temperature_TempDiff) == itemValue(C_Sonoff4ch_Temperature_TempDiff) ? '#ff0000' : '#0000ff'
  }"
  class="template-container"
  style="top:0;bottom:0;left:0;right:0;position:absolute">
  <div class="template-contents">
		<div class="row">
			<div class="col-xs-12"><span style="color: #FFFFFF; font-size: 10pt; text-align:center">Entfernung Basisstation</span></div>
		</div>
		<div class="col-xs-12"><span style="color: #00ccff; font-size: 24pt; text-align:center">{{itemValue('C_Sonoff4ch_Temperature_TempDiff')}}</span></div>
	</div>
</div>

I can see what you’re trying to achieve there.

You’ll need someone with better skills than me, but for what it’s worth, I’d suggest that you need to check that you’re not trying to do maths on string.

As in, are the Item values definitely numbers, without a Unit of Measurement ?

Definitely a Number,

And definitely with a Temperature dimension…

I thought it worked as removing the dimension and adding a > 0 changed it to blue where I didn’t get a color before…

But it doesn’t change if I reverse the > to <…

This isn’t my area of expertise.

Can you try without the UoM ?

(I don’t bother with UoM, I’m sure it looks nice, but it makes a mess for my rules. I just add it at the UI point, if I really need to know that a temperature is °c etc)

1 Like

I did remove the dimension… based on your advice, I’ll probably go back and remove them all after painstakingly adding them…

Did it work?

No not quite. In the original example with itemvalueX = itemvalueX I do get a RED background.

With the dimensions removed, I can change the comparison to ‘< 0’ and do in fact get a BLUE background. Yay!

but when I change it to ‘> 0’ I still get a BLUE background.

Must be missing something dumb.

1 Like

But you’re closer to your goal.

Good luck

Thank you fine sir! I’ll dig in further in the AM…

1 Like

Looks like there was some inheritance between an item with a dimension and a calculation that had no dimension specified. I made it C_ITEMNAME:Dimensionless and the calculation appears to be working!

1 Like