# Stack of images

**URL:** <https://discourse.nodered.org/t/stack-of-images/41180>\
**Category:** Dashboard\
**Created:** [17 February 2021 17:02 UTC](https://discourse.nodered.org/t/stack-of-images/41180 "2021-02-17T17:02:01Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![mune](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mune/32/37105_2.png) [@mune](https://discourse.nodered.org/u/mune)\
**Post date:** [17 February 2021 17:02 UTC](https://discourse.nodered.org/t/stack-of-images/41180/1 "2021-02-17T17:02:02Z")

</div>

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;

```auto
<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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 February 2021 19:30 UTC](https://discourse.nodered.org/t/stack-of-images/41180/2 "2021-02-17T19:30:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mune](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mune/32/37105_2.png) [@mune](https://discourse.nodered.org/u/mune)\
**Post date:** [17 February 2021 23:20 UTC](https://discourse.nodered.org/t/stack-of-images/41180/3 "2021-02-17T23:20:07Z")

</div>

I used it in this way:

```auto
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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [18 February 2021 00:05 UTC](https://discourse.nodered.org/t/stack-of-images/41180/4 "2021-02-18T00:05:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mune](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mune/32/37105_2.png) [@mune](https://discourse.nodered.org/u/mune)\
**Post date:** [18 February 2021 15:51 UTC](https://discourse.nodered.org/t/stack-of-images/41180/5 "2021-02-18T15:51:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 February 2021 22:41 UTC](https://discourse.nodered.org/t/stack-of-images/41180/6 "2021-02-18T22:41:35Z")

</div>

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

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

```

Your original js becomes:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![mune](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mune/32/37105_2.png) [@mune](https://discourse.nodered.org/u/mune)\
**Post date:** [19 February 2021 11:09 UTC](https://discourse.nodered.org/t/stack-of-images/41180/7 "2021-02-19T11:09:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [19 February 2021 11:18 UTC](https://discourse.nodered.org/t/stack-of-images/41180/8 "2021-02-19T11:18:01Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![mune](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mune/32/37105_2.png) [@mune](https://discourse.nodered.org/u/mune)\
**Post date:** [19 February 2021 13:33 UTC](https://discourse.nodered.org/t/stack-of-images/41180/9 "2021-02-19T13:33:36Z")

</div>

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:

```auto
~/.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`:

```auto
~/.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!!!!!!!!!!!! 😱

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [19 February 2021 13:40 UTC](https://discourse.nodered.org/t/stack-of-images/41180/10 "2021-02-19T13:40:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mune](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mune/32/37105_2.png) [@mune](https://discourse.nodered.org/u/mune)\
**Post date:** [19 February 2021 14:30 UTC](https://discourse.nodered.org/t/stack-of-images/41180/11 "2021-02-19T14:30:25Z")

</div>

Now it is working  
You saved me, thanks. 🤗

---

<div class="post-metadata">

**Author:** ![mune](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mune/32/37105_2.png) [@mune](https://discourse.nodered.org/u/mune)\
**Post date:** [19 February 2021 15:50 UTC](https://discourse.nodered.org/t/stack-of-images/41180/12 "2021-02-19T15:50:54Z")

</div>

Following the instruction in the [page](https://www.w3docs.com/snippets/css/how-to-position-one-image-on-top-of-another-in-html-css.html) ( Example of positioning an image on top of another using the position property), I modified my nodes.

The function node:

```auto
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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 March 2021 15:50 UTC](https://discourse.nodered.org/t/stack-of-images/41180/13 "2021-03-21T15:50:57Z")

</div>

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