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:
Whilst I can't give you a working answer, I can tell you why your code isn't working. The dashboard uses the angular framework, which has a habit of stripping off style attributes from elements.
One way around that is to give each element a classname and then add the CSS in a <style> block.
Thank for your reply, but I'm new in NR so I don't know how to change the CSS and then I understand I have to write something like <style somrthing_related_to_words_in_CSS> <img src="path1"> <img src="path2"> </style> ,
but how the browser can tell that 2nd image goes over the 1st?
I've also reversed the nested quotes. This is more style than a requirement but html generally uses double-quotes and js doesn't care. So it reads easier this way round.
I was in the editor and a window said "connection lost"; I connected via ssh to the Raspberry, stopped the service and started it menually:
~/.node-red $ node-red-pi --max-old-space-size=256
19 Feb 14:02:52 - [info]
Welcome to Node-RED
===================
19 Feb 14:02:52 - [info] Node-RED version: v1.2.7
19 Feb 14:02:52 - [info] Node.js version: v12.20.1
19 Feb 14:02:52 - [info] Linux 5.4.51-v7+ arm LE
19 Feb 14:02:53 - [info] Loading palette nodes
19 Feb 14:02:57 - [info] Dashboard version 2.28.1 started at /gui
19 Feb 14:02:57 - [info] Settings file : /home/pi/.node-red/settings.js
19 Feb 14:02:57 - [info] HTTP Static : /home/pi/mynode
19 Feb 14:02:57 - [info] Context store : 'default' [module=memory]
19 Feb 14:02:57 - [info] User directory : /home/pi/.node-red
19 Feb 14:02:57 - [warn] Projects disabled : editorTheme.projects.enabled=false
19 Feb 14:02:57 - [info] Flows file : /home/pi/.node-red/flows_vrvtest.json
19 Feb 14:02:58 - [info] Server now running at http://127.0.0.1:1880/admin/
19 Feb 14:02:58 - [warn]
---------------------------------------------------------------------
Your flow credentials file is encrypted using a system-generated key.
If the system-generated key is lost for any reason, your credentials
file will not be recoverable, you will have to delete it and re-enter
your credentials.
You should set your own key using the 'credentialSecret' option in
your settings file. Node-RED will then re-encrypt your credentials
file using your chosen key the next time you deploy a change.
---------------------------------------------------------------------
19 Feb 14:02:58 - [info] Starting flows
19 Feb 14:02:58 - [info] Started flows
19 Feb 14:02:58 - [info] [sqlitedb:c813c58a.edf36] opened /home/pi/mynode/recipedb.sqlite ok
19 Feb 14:03:00 - [red] Uncaught Exception:
19 Feb 14:03:00 - RangeError: Maximum call stack size exceeded
at get (internal/bootstrap/pre_execution.js:309:8)
at hasBinary (/home/pi/.node-red/node_modules/has-binary2/index.js:44:3)
at hasBinary (/home/pi/.node-red/node_modules/has-binary2/index.js:58:59)
at hasBinary (/home/pi/.node-red/node_modules/has-binary2/index.js:58:59)
at hasBinary (/home/pi/.node-red/node_modules/has-binary2/index.js:58:59)
at hasBinary (/home/pi/.node-red/node_modules/has-binary2/index.js:58:59)
at hasBinary (/home/pi/.node-red/node_modules/has-binary2/index.js:58:59)
at hasBinary (/home/pi/.node-red/node_modules/has-binary2/index.js:58:59)
at hasBinary (/home/pi/.node-red/node_modules/has-binary2/index.js:58:59)
at hasBinary (/home/pi/.node-red/node_modules/has-binary2/index.js:58:59)
In another post in this forum I learned that to get the list of nodes that uses the file has to be used /.node-red $ npm ls has-binary2 in the dir /.node-red:
You can run node-red in safe mode by using the --safe command line argument. That will start node-red but not start your flows - allowing you to load the editor and undo whatever you last did that lead to this.
This renders the image out of the group the ui-builder node belongs to. It's out of the scrollable area but I think the ovarlap happened but in the wrong place and eith the image not resized.