The idea is to display an image with all the heaters on the bottom and the display over that image a transparent (GIF) layer that if the heater is on it has red flame else it has a black one. The images are equal size.
I managed to make it works in HTML with the index.html;
<html>
<body>
<div>
bla bla
</div>
<div style='position: relative;'>
<img src='images/test_pos_all.jpg' width='576' style='position: relative; top: 10px; left: 10px; '>
<img src='images/test_pos03on.gif' width='576' style='position: absolute; top: 10px; left: 10px; '>
<img src='images/test_pos08off.gif' width='576' style='position: absolute; top: 10px; left: 10px; '>
</div>
<div>
more bla bla
</div>
</body>
</html>
In node.red I have a function
node that creates a long msg.payload with the html code and the next node is ui_template
node that renders the msg,payload. The code in the function node is:
msg.payload = " <div style='position: relative;'>";
msg.payload += " <img src='img/test_pos_all.jpg' width='576' style='position: relative; top: 10px; left: 10px; '>";
msg.payload += " <img src='img/test_pos03on.gif' width='576' style='position: absolute; top: 10px; left: 10px; '>";
msg.payload += " <img src='img/test_pos08off.gif' width='576' style='position: absolute; top: 10px; left: 10px; '>";
msg.payload += "</div>";
return msg;
In the group the ui_template node belongs to, node-red displays three images one after another instead of a stack; what am I doing wrong?