Stack of images

mune · 17 February 2021 18:10

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?

TotallyInformation · 17 February 2021 19:30

Check in your dev console to see whether some CSS too precedence - if it did you can probably add !important to the position style.

mune · 17 February 2021 23:24

I used it in this way:

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: !important absolute; top: 10px; left: 10px; '>";
msg.payload += " <img src='img/test_pos08off.gif' width='576' style='position: !important absolute; top: 10px; left: 10px; '>";
msg.payload += "</div>";
return msg;

But anything new happens.

knolleary · 18 February 2021 00:05

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.

mune · 18 February 2021 15:51

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?

TotallyInformation · 18 February 2021 22:41

To apply styles to an individual element, you just create a new classname

<style>
.img1 { width: 576; position: relative; top: 10px; left: 10px; }
</style>

Your original js becomes:

msg.payload += ' <img src="img/test_pos_all.jpg" class="img1">';

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.

mune · 19 February 2021 11:09

That's OK
but while msg.payload += ' <img src="img/test_pos_a... goes in my NR function node, where is (or I have to create) the CSS?

knolleary · 19 February 2021 11:18

You can add it to the string you build up in that function as well...


msg.payload = "<style>.img { width: 576px; ..... }</style>";
msg.payload +=  "<div style='position: relative;'>";
...

mune · 19 February 2021 13:33

OT
Huge problem: node-red stopped working!.

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:

~/.node-red $ npm ls has-binary2
node-red-project@0.0.1 /home/pi/.node-red
└─┬ node-red-dashboard@2.28.1
  └─┬ socket.io@2.4.1
    ├─┬ engine.io@3.5.0
    │ └─┬ engine.io-parser@2.2.1
    │   └── has-binary2@1.0.3  deduped
    ├── has-binary2@1.0.3 
    └─┬ socket.io-client@2.4.0
      └── has-binary2@1.0.3  deduped

Help!!!!!!!!!!!!

knolleary · 19 February 2021 13:40

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.

mune · 19 February 2021 14:30

Now it is working
You saved me, thanks.

mune · 19 February 2021 15:58

Following the instruction in the page ( Example of positioning an image on top of another using the position property), I modified my nodes.

The function node:

msg.payload =  '<style>';
msg.payload += ' .FMparent {position: relative; top: 0; left: 0; } ';
msg.payload += ' .FMimage1 {position: relative; top: 0; left: 0; border: 1px solid #000000; width: 576px;}';
msg.payload += ' .FMimage2 {position: absolute; top: 0; left: 0; border: 1px solid #000000; width: 576px;}';
msg.payload += '</style> ';
msg.payload += '<div  class="FMparent">'; 
msg.payload += ' <img src="img/test_pos_all.jpg" class="FMimage1">';
msg.payload += ' <img src="img/test_pos03on.gif" class="FMimage2">';
msg.payload += ' <img src="img/test_pos08off.gif" class="FMimage2">';
msg.payload += '</div>';
return msg;

The ui-builder still is:

<div ng-bind-html="msg.payload" align="center"></div>

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.