Water tank temperature

Setup, Configuration and Use Items & Sitemaps
1

I would like to visualize the temperature in the hot water tank using HabPanel. I have one sensor located at the bottom of the tank and one at the top. I would like it to be a gradient: one end is the temperature from the first sensor and the other end is the temperature from the second sensor.
Does anyone have any idea how to do a visualization of the temperature distribution in it?

2

Well, first, you need to determine which color you want. Second, you need to convert your temperature reading to a value of 0-255. Only then you can set a gradient (in css).

css gradients are defined like this:

background: linear-gradient(COLOR1, COLOR2);

So your COLOR1, and COLOR2 can be defined like this:

color1 is
#rgb(111,222, <your bottom temp here>)

color2 is
#rgb(111,222, <your top temp here>)

note that the rgb values range from 0-255 only so you need to convert your temps.

Example template (you can create a widget too)

.myGradient {
  background: linear-gradient(rgb(111,222, {{itemValue('yourItem')}}), rgb(111,222,{{itemValue('theOhterItem')}}));
}

<div class="myGradient" />
3

I have modified your code as below:

<div class="box" style="background: linear-gradient(rgb(19,19,{{itemValue('grad_cwud')}}, rgb(60,1,1));"></div>

First, I set the values manually by entering specific values and then the gradient appeared as intended. However, if I insert {{itemValue (‘grad_cwud’)}}, the gradient does not generate.

Number grad_cwud "temp. CWU down [%.0f]"

rule "cwud"
when
Item temp_cwu received update
then
grad_cwud.sendCommand((temp_cwu.state as DecimalType).intValue / 50)
end
4

add this on a simple tag:

<pre>
background: linear-gradient(rgb(19,19,{{itemValue('grad_cwud')}}, rgb(60,1,1));
</pre>

then paste the output here.
My eyes are tired but I suspect you’re missing a closing )

5

Yes! You are right! I’m blind :frowning: Below my template:

<div class="box" style="background: linear-gradient(rgb({{itemValue('grad_cwug')}},0,0),rgb({{itemValue('grad_cwud')}},0,255));"></div>
6

Hi Zulus, I would like to do this also. Would you be able to share more details on the entire widget? Thanks.