For my immersion heater control, I wanted to graphically display the amount of hot water in the cylinder.  I have 4 DS18B20 sensors on the tank.  For the display, I used an HTML5 gradient as a background colour; this took me a little time to fathom, so I present the distilled result here in case it’s useful.
The code (in my case, use in a node-red function node, output to populate a template node):
var tHi = 60;
var tLo = 35;
var tD = tHi - tLo;
if (!state.water_TEMP_1)
state.water_TEMP_1 = tLo;
if (!state.water_TEMP_2)
state.water_TEMP_2 = tLo;
if (!state.water_TEMP_3)
state.water_TEMP_3 = tLo;
if (!state.water_TEMP_4)
state.water_TEMP_4 = tLo;
var R1 = (255*(state.water_TEMP_1-tLo)/tD);
var B1 = 255 - (255*(state.water_TEMP_1-tLo)/tD);
var R2 = (255*(state.water_TEMP_2-tLo)/tD);
var B2 = 255 - (255*(state.water_TEMP_2-tLo)/tD);
var R3 = (255*(state.water_TEMP_3-tLo)/tD);
var B3 = 255 - (255*(state.water_TEMP_3-tLo)/tD);
var R4 = (255*(state.water_TEMP_4-tLo)/tD);
var B4 = 255 - (255*(state.water_TEMP_4-tLo)/tD);
if (R1 < 0) R1 = 0;
if (R1 > 255) R1 = 255;
if (B1 < 0) B1 = 0;
if (B1 > 255) B1 = 255;
if (R2 < 0) R2 = 0;
if (R2 > 255) R2 = 255;
if (B2 < 0) B2 = 0;
if (B2 > 255) B2 = 255;
if (R3 < 0) R3 = 0;
if (R3 > 255) R3 = 255;
if (B3 < 0) B3 = 0;
if (B3 > 255) B3 = 255;
if (R4 < 0) R4 = 0;
if (R4 > 255) R4 = 255;
if (B4 < 0) B4 = 0;
if (B4 > 255) B4 = 255;
var tR1 = ("00" + ((R1|0)+4294967296).toString(16)).substr(-2);
var tR2 = ("00" + ((R2|0)+4294967296).toString(16)).substr(-2);
var tR3 = ("00" + ((R3|0)+4294967296).toString(16)).substr(-2);
var tR4 = ("00" + ((R4|0)+4294967296).toString(16)).substr(-2);
var tB1 = ("00" + ((B1|0)+4294967296).toString(16)).substr(-2);
var tB2 = ("00" + ((B2|0)+4294967296).toString(16)).substr(-2);
var tB3 = ("00" + ((B3|0)+4294967296).toString(16)).substr(-2);
var tB4 = ("00" + ((B4|0)+4294967296).toString(16)).substr(-2);
var css = "background-image: linear-gradient(to bottom," +
" #"+tR1+"00"+tB1+" 0%," +
" #"+tR2+"00"+tB2+" 33%," +
" #"+tR3+"00"+tB3+" 66%," +
" #"+tR4+"00"+tB4+" 100%" +
");";
Â
then in the template node:
Â
Â
This produces a gradient from blue to red, where blue = < 35 degrees C, and red >65 degrees C.  The exact css required may be different in browsers other than Chrome….
tHi and tLo control the temperatures that full red and full blue represent.
Â
btsimonh 