Image display issue

syedfarrukhqamar · 26 October 2022 06:46

Need to show image in dashboard (UI)
Image is coming in base64 format but I think it is not bringing full image data which I can see in other mqtt client like easymqtt.

How to display the image.
is there some way to increase the data limit to receive full message received in mqtt publish message.

HERE Is the data which seems incomplete. see dots in the end. (Can I increase it size to hold longer string (base64)

[
    {
        "id": "57345c509c40faeb",
        "type": "tab",
        "label": "Images",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "65ed65d31be7f575",
        "type": "mqtt in",
        "z": "57345c509c40faeb",
        "name": "",
        "topic": "esp32cam/send",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "7d3c912cda946002",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 120,
        "y": 120,
        "wires": [
            [
                "1259899ddb72984b"
            ]
        ]
    },
    {
        "id": "1259899ddb72984b",
        "type": "base64",
        "z": "57345c509c40faeb",
        "name": "",
        "action": "",
        "property": "payload",
        "x": 380,
        "y": 120,
        "wires": [
            [
                "0c2af353be529f2e",
                "56536b6c7c353b55"
            ]
        ]
    },
    {
        "id": "56536b6c7c353b55",
        "type": "debug",
        "z": "57345c509c40faeb",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 580,
        "y": 280,
        "wires": []
    },
    {
        "id": "0c2af353be529f2e",
        "type": "image",
        "z": "57345c509c40faeb",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "thumbnail": false,
        "active": true,
        "pass": false,
        "outputs": 0,
        "x": 580,
        "y": 200,
        "wires": []
    },
    {
        "id": "7d3c912cda946002",
        "type": "mqtt-broker",
        "name": "",
        "broker": "broker.hivemq.com",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    }
]

Steve-Mcl · 26 October 2022 07:38

The debug is limited to showing the user 1000 chars (the actual data is still there).

Can you show us what comes out of the MQTT node?

syedfarrukhqamar · 26 October 2022 08:05

You are right. But some how it is incomplete even from the mqtt node if I attach a debug node and see the outcome.
I am comparing it from the easyMQTT client. There the data is much bigger than here. I tried to copy it to the inject node and saw the image in the image node.It worked. I think if some how I receive whole data then it would show the image as well.

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/2wBDAAoHCAkIBgoJCAkLCwoMDxkQDw4ODx8WFxIZJCAmJiQgIyIoLToxKCs2KyIjMkQzNjs9QEFAJzBHTEY/Szo/QD7/2wBDAQsLCw8NDx0QEB0+KSMpPj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj7/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/wAARCADwAUADASEAAhEBAxEB/9oADAMBAAIRAxEAPwB5aMf8uc3/AHxRuTH/AB5XH/fut/qq7o5vbXWwu6P/AJ87j8YxS7k/58p/+/dT9WXcftfIN0f/AD5XA/7Z0u6P/nzn/wC+KPqq7oftvINyf8+c34pS5i/59JP++aX1Zdx+28hcx/8APnL/AN8UZ...

Colin · 26 October 2022 08:32

As Steve said above, the debug output is limited in order to avoid flooding the browser. The dots at the end tell you that it has been truncated. If you select Console output in the debug node it will write the whole output to the node red log.

syedfarrukhqamar · 26 October 2022 09:07

Thanks for the reply
But the issue is I cannot see the image on the live dashboard when it comes here http://127.0.0.1:1880/ui/

I have changed the output to console and it is appearing there (the data coming from esp32 cam)
here is the flow

Steve-Mcl · 26 October 2022 09:21

Your screenshot shows no dashboard nodes. So if that is all you have, then that is why.

syedfarrukhqamar · 26 October 2022 17:27

I am new in node red and trying to learn it asap.
I have managed to see the image against the node now each time mqtt published the image.But some how I cannot see it in the dashboard media node. here are my nodes.Am I using the right node to display the image.

[
    {
        "id": "65ed65d31be7f575",
        "type": "mqtt in",
        "z": "b40f79848dc7d67a",
        "name": "",
        "topic": "esp32cam/send",
        "qos": "1",
        "datatype": "utf8",
        "broker": "7d3c912cda946002",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 120,
        "y": 100,
        "wires": [
            [
                "0c2af353be529f2e",
                "ea5714d7c47c6cd0"
            ]
        ]
    },
    {
        "id": "0c2af353be529f2e",
        "type": "image",
        "z": "b40f79848dc7d67a",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "thumbnail": false,
        "active": true,
        "pass": false,
        "outputs": 0,
        "x": 240,
        "y": 280,
        "wires": []
    },
    {
        "id": "ea5714d7c47c6cd0",
        "type": "image viewer",
        "z": "b40f79848dc7d67a",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "active": true,
        "x": 490,
        "y": 240,
        "wires": [
            [
                "5990019537f0e3c7"
            ]
        ]
    },
    {
        "id": "7d3c912cda946002",
        "type": "mqtt-broker",
        "name": "",
        "broker": "broker.hivemq.com",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "120",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    }
]```

Steve-Mcl · 26 October 2022 17:37

This has been done loads of times on the forum.

Here is one such answer that you should be able to adapt.

syedfarrukhqamar · 27 October 2022 04:39

Thanks for the reference.
I tried with that but some how it is not showing the image on the dashboard. On the dashboard view it shows the string data. as below

Note* I tried to connect with the base64 node but it doesn't show the image in the editor on the viewer node.But if I connect it to MQTT node then it shows the preview in the editor.
I think there is some mistake in the template node of dashboard where it is showing the data string instead of the image.

Here is the image of my nodes copied from the referenced post.

[
    {
        "id": "af2f11a1d93401ad",
        "type": "mqtt in",
        "z": "e96802a60ca41535",
        "name": "",
        "topic": "esp32cam/send",
        "qos": "1",
        "datatype": "auto-detect",
        "broker": "7d3c912cda946002",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 120,
        "y": 240,
        "wires": [
            [
                "ed24352e.c554d8",
                "a058a57114ad7b2a",
                "2dbac17c.9187ee",
                "2e9a58b72dd0e7d9"
            ]
        ]
    },
    {
        "id": "7d3c912cda946002",
        "type": "mqtt-broker",
        "name": "",
        "broker": "broker.hivemq.com",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "120",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    }
]

bakman2 · 27 October 2022 04:57

You only exported the mqtt node.

How did you format the payload in the template node ?

{{payload}}

or

{{{payload}}}

?

By default, mustache will escape any non-alphanumeric or HTML entities in the values it substitutes. To prevent this, use {{{triple}}} braces.

syedfarrukhqamar · 27 October 2022 05:33

Finally I got the image.
the problem was in the template node.
Thanks a lot for the help
here is the final working solution
for the template code

<img src = {{{payload}}} alt "jacket" width= "350" height="350" >

[
    {
        "id": "65ed65d31be7f575",
        "type": "mqtt in",
        "z": "b40f79848dc7d67a",
        "name": "",
        "topic": "esp32cam/send",
        "qos": "1",
        "datatype": "utf8",
        "broker": "7d3c912cda946002",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 120,
        "y": 120,
        "wires": [
            [
                "0c2af353be529f2e",
                "ea5714d7c47c6cd0"
            ]
        ]
    },
    {
        "id": "0c2af353be529f2e",
        "type": "image",
        "z": "b40f79848dc7d67a",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "thumbnail": false,
        "active": true,
        "pass": false,
        "outputs": 0,
        "x": 240,
        "y": 280,
        "wires": []
    },
    {
        "id": "ea5714d7c47c6cd0",
        "type": "image viewer",
        "z": "b40f79848dc7d67a",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "active": true,
        "x": 430,
        "y": 220,
        "wires": [
            [
                "d76b2319f77d2cea"
            ]
        ]
    },
    {
        "id": "63ca062c63ab4b95",
        "type": "ui_template",
        "z": "b40f79848dc7d67a",
        "group": "6e364b4a5bb6d701",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<div ng-bind-html=\"msg.payload\"></div>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 780,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "d76b2319f77d2cea",
        "type": "template",
        "z": "b40f79848dc7d67a",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<img src = {{{payload}}} alt \"jacket\" width= \"350\" height=\"350\" >",
        "output": "str",
        "x": 560,
        "y": 140,
        "wires": [
            [
                "63ca062c63ab4b95"
            ]
        ]
    },
    {
        "id": "7d3c912cda946002",
        "type": "mqtt-broker",
        "name": "",
        "broker": "broker.hivemq.com",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "120",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    },
    {
        "id": "6e364b4a5bb6d701",
        "type": "ui_group",
        "name": "Group",
        "tab": "f51c482d7f47e5f4",
        "order": null,
        "disp": true,
        "width": 6
    },
    {
        "id": "f51c482d7f47e5f4",
        "type": "ui_tab",
        "name": "Tab 1",
        "icon": "dashboard",
        "order": 1
    }
]

bakman2 · 27 October 2022 06:02

To avoid potential issues use

<img src="{{{payload}}}" alt "jacket" width= "350" height="350" >

note the double quotes.

syedfarrukhqamar · 27 October 2022 06:03

sure. Thanks for reviewing

system · 26 December 2022 06:03

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

Topic		Replies	Views
Display a Foto in the Dashboard Dashboard	6	939	31 March 2022
How to MQTT image from Raspi using Base64 and Template node Dashboard	4	1664	7 April 2021
Publishing Foto from ESP32Cam to Dashboard via mqtt General mqtt	1	1146	8 May 2022
I have problem about viewing image from esp32 cam on nodered General	5	257	10 December 2023
How to display mqtt image on uibuilder General	9	1553	27 April 2021

Image display issue

Related Topics