How can I display pictures in order

[Mikee1234K]

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

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]);
}

[knoepsche]

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

on the nodes tab "start"

context.set('images', [])

on the nodes tab "function":

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);
}

[Mikee1234K]

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

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)

[knoepsche]

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

[Mikee1234K]

@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

[knoepsche]

This is an example as function-node:

[
    {
        "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

[Mikee1234K]

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 !