Stack of images

Dashboard
1

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?

2

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

3

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.

4

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.

5

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?

6

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.

7

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?

8

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;'>";
...
1 Like
9

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!!!!!!!!!!!! :scream:

10

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.

1 Like
11

Now it is working
You saved me, thanks. :hugs:

12

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.

13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.