Put snapshot on dashboard

Dashboard
1

hi I'm trying to put a snapshot from my 3d printer cam on my dashboard,
i am able to get a picture to a image preview node , but when i send it to a ui template node the only thing that appears on the dashboard is the address

image_2025-10-09_190320056
image_2025-10-09_1903200561109Ă—582 99 KB

[
    {
        "id": "d4a09425498d2426",
        "type": "inject",
        "z": "5a48f4f272ae5046",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "http://192.168.0.107:8001/?action=snapshot",
        "payloadType": "str",
        "x": 130,
        "y": 100,
        "wires": [
            [
                "26eaef4d01b44d90",
                "3af15ac76ab8b2ce"
            ]
        ]
    },
    {
        "id": "26eaef4d01b44d90",
        "type": "image",
        "z": "5a48f4f272ae5046",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "thumbnail": false,
        "active": true,
        "pass": true,
        "outputs": 1,
        "x": 500,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "3af15ac76ab8b2ce",
        "type": "ui_template",
        "z": "5a48f4f272ae5046",
        "group": "81060d8e4e1f2004",
        "name": "",
        "order": 0,
        "width": "6",
        "height": "6",
        "format": "<div ng-bind-html=\"msg.payload\"></div>",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 290,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "81060d8e4e1f2004",
        "type": "ui_group",
        "name": "bambu",
        "tab": "cb9ffd151a8ff47e",
        "order": 7,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "cb9ffd151a8ff47e",
        "type": "ui_tab",
        "name": "3d printer",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

`

image_2025-10-09_190434773
image_2025-10-09_190434773555Ă—458 7.98 KB

2

If only it was that easy :grinning:
Unfortunately your code is telling the browser to just display the payload text, as you found out.

You can try this small flow, it is for dashboard 1 (OG dashboard) as I don't use the new one.
Just set the ui-template to your dashboard group, and adjust size to suit.

[{"id":"inject-node","type":"inject","z":"2a22289221c91045","name":"Trigger Refresh","props":[{"p":"payload"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":860,"y":590,"wires":[["http-request-node"]]},{"id":"http-request-node","type":"http request","z":"2a22289221c91045","name":"Fetch Snapshot","method":"GET","ret":"bin","paytoqs":"ignore","url":"http://192.168.0.107:8001/?action=snapshot","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":1060,"y":590,"wires":[["function-node"]]},{"id":"function-node","type":"function","z":"2a22289221c91045","name":"Convert to Base64","func":"if (msg.statusCode && msg.statusCode !== 200) {\n    node.error('HTTP Request failed with status: ' + msg.statusCode);\n    msg.payload = null;\n} else if (msg.payload) {\n    msg.payload = 'data:image/jpeg;base64,' + Buffer.from(msg.payload).toString('base64');\n} else {\n    msg.payload = null;\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1260,"y":590,"wires":[["ui-template-node"]]},{"id":"ui-template-node","type":"ui_template","z":"2a22289221c91045","group":"74bd0363.c7a924","name":"Display Snapshot","order":1,"width":"10","height":"8","format":"<div>\n    <img ng-src=\"{{msg.payload}}\" alt=\"Snapshot\" style=\"max-width: 100%; height: auto;\" ng-if=\"msg.payload\">\n    <p ng-if=\"!msg.payload\">No image available</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1460,"y":590,"wires":[[]]},{"id":"74bd0363.c7a924","type":"ui_group","name":"newsfeed","tab":"dc50fb1.77df988","order":2,"disp":false,"width":"10","collapse":false,"className":"click_newsfeed"},{"id":"dc50fb1.77df988","type":"ui_tab","name":"Home Page","icon":"","order":1,"disabled":false,"hidden":false},{"id":"eb25c74e588dec7a","type":"global-config","env":[],"modules":{"node-red-dashboard":"3.6.6"}}]
1 Like
3

your an absolute star thank you
martin

1 Like
4

Thats a bit strong - I mean he's good, but star?

Sorry @Sean-McG, I'm still hurt by the COMMS room discussion :winking_face_with_tongue:

(and sorry for the spam - its been a while :sweat_smile: )

I moved this to the dashboard category

1 Like
5

I'll let you off the comms room if you finish the virgin tv node !
( montyfert -also sorry for the spam !)

2 Likes
6

hi i have another stream but it does not seem to want to work like the last one , just wondering if you could take a look at it :grinning_face:
http://192.168.0.33:1984/api/frame.mp4?src=cam3
thanks
martin

7

I assume this is from a different source / camera type ?

What happens if you try that in your browser, does it give a jpg image ?

8

yes its wansview camera ,i did try installing the onvif node but it would not install so am using go2rtc to convert it
and yes it does give an image.
thanks

9

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