# How can I display pictures in order

**URL:** <https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035>\
**Category:** Dashboard\
**Created:** [11 December 2022 13:49 UTC](https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035 "2022-12-11T13:49:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [11 December 2022 13:49 UTC](https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035/1 "2022-12-11T13:49:14Z")

</div>

I have a function which displays pictures from a camera. It displays the last 5 pictures taken by the camera. I would like to have the newest pictures always in position 1, the next in 2 and so on.  
I guess I have to use a array, but not sure if thats the right approach and how to as I dont know how to use arrays. Maybe there is a better way anyway ?

This is the function I currently use

```auto
var counthall = flow.get('counthall') ?? 1;
var picture;

if (counthall == 1) {
    picture = msg.payload.image.base64
    flow.set("counthall", counthall + 1)
    var msg1 = { payload: { image: { base64: picture } } }
    node.send([msg1, null, null, null, null]);
}

if (counthall == 2) {
    picture = msg.payload.image.base64
    flow.set("counthall", counthall + 1)
    var msg2 = { payload: { image: { base64: picture } } }
    node.send([null, msg2, null, null, null]);
}

if (counthall == 3) {
    picture = msg.payload.image.base64
    flow.set("counthall", counthall + 1)
    var msg3 = { payload: { image: { base64: picture } } }
    node.send([null, null, msg3, null, null]);
}
if (counthall == 4) {
    picture = msg.payload.image.base64
    flow.set("counthall", counthall + 1)
    var msg4 = { payload: { image: { base64: picture } } }
    node.send([null, null, null, msg4, null]);
}
if (counthall == 5) {
    picture = msg.payload.image.base64
    flow.set("counthall", 0)
    var msg5 = { payload: { image: { base64: picture } } }
    node.send([null, null, null, null, msg5]);
}

```

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [12 December 2022 10:10 UTC](https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035/2 "2022-12-12T10:10:48Z")

</div>

If you use a function node I would do something like that:

on the nodes tab "start"

```auto
context.set('images', [])

```

on the nodes tab "function":

```auto
addImage(msg.payload.image.base64)
const arrImages = context.get('images');
let msgImages = new Array(5).fill(null);

arrImages.forEach((element, index) => { 
    msgImages[index] = { payload: { image: { base64: element } } }
});

return msgImages;

function addImage(base64){
    let arrImages = context.get('images');
    const length = arrImages.unshift(base64)
    if (length > 5){
        arrImages.pop();
    }
    context.set('images', arrImages);
}

```

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [12 December 2022 10:32 UTC](https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035/3 "2022-12-12T10:32:19Z")

</div>

OK that (mostly) makes sense. Not sure what the

```auto
arrImages.unshift(base64)

```

does but I can try to find that somewhere in the docs.

This function would wait until all 5 pictures have been collected before sending ? Or could I send it with pictures not collected yet as null. Sometimes there can be hours between pictures being triggerd (this is from my security cams)

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [12 December 2022 15:26 UTC](https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035/4 "2022-12-12T15:26:03Z")

</div>

```auto
arrImages.unshift(base64)

```

inserts the new image at the arrays first index and shifts already indexed images one index up.

The array has a fixed length of 5 items (null on indices if not completely filled up) and deletes images shifted to index 5.

The function is sending the whole array on each new message

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [12 December 2022 18:21 UTC](https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035/5 "2022-12-12T18:21:49Z")

</div>

> [@knoepsche](#):
>
> `context.set('images', [])`

Ok I think I get it. What I am not sure about, with my fuction I have the function node set to have 5 outputs, each going to a template then a dashboard template node to display the 5 pics. If I understand your function, that will send 5 pics one after another ?

This is my flow at the moment

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a079f601938839757b527b7cd660c4627f5161d4.png)

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [12 December 2022 19:19 UTC](https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035/6 "2022-12-12T19:19:10Z")

</div>

This is an example as function-node:

```auto
[
    {
        "id": "4276b81d8034169a",
        "type": "function",
        "z": "f4dceb81588e2a15",
        "name": "function 1",
        "func": "addImage(msg.payload.image.base64)\nconst arrImages = context.get('images');\nlet msgImages = new Array(5).fill(null);\n\narrImages.forEach((element, index) => { \n msgImages[index] = { payload: { image: { base64: element } } }\n});\n\nreturn msgImages;\n\nfunction addImage(base64){\n let arrImages = context.get('images');\n const length = arrImages.unshift(base64)\n if (length > 5){\n arrImages.pop();\n }\n context.set('images', arrImages);\n}",
        "outputs": 5,
        "noerr": 0,
        "initialize": "// Der Code hier wird ausgeführt,\n// wenn der Node gestartet wird\ncontext.set('images', [])",
        "finalize": "",
        "libs": [],
        "x": 620,
        "y": 420,
        "wires": [
            [
                "91387a625415d622"
            ],
            [
                "135f5fe16a103537"
            ],
            [
                "f8366bedec9d2ed7"
            ],
            [
                "bd24b7930d88ea67"
            ],
            [
                "81ae7d7b0cb54d31"
            ]
        ]
    }
]

```

I tested by some base64 pictures and a the node-red-contrib-image-tools. Seems to work

 ![Flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f164b0d93028dbfa343abbf52c0130ade23e14ec.jpeg)

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [12 December 2022 19:34 UTC](https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035/7 "2022-12-12T19:34:58Z")

</div>

First time I tried with just a few debugs on there, it only came out of output 1. Now I tried again, and now it seems to work ok ! By tomorrow I will know for sure if its working as intended, but I think it will.  
Many thanks !  
Und viele Gruesse nach D ! 😃

---

<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:** [11 January 2023 19:35 UTC](https://discourse.nodered.org/t/how-can-i-display-pictures-in-order/72035/8 "2023-01-11T19:35:50Z")

</div>

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