Display a Foto in the Dashboard

Dashboard
1

Hi,
my new project "Door Bell",
it is a ESP32-Cam, this device take a Picture (.jpg ca. 100 bytes) when the Ring-Button is pressed and send it to a Raspi with NR over MQTT, with the command:

       client.publish("door/photo", "FILE_PHOTO")     as Payload in the ESP32 sketch;

in Node-Red:
- Node "mqtt in" (Topic: door/photo) / output: base64-coding string;
- Node "base64" converter
- and a Template (Dashboard)

on the Template the picture would not be displayed, the debug-list output of the base64 msg.payload show's the following:

door/photo : msg.payload buffer[10] [70,73,76,69,95,80,72,79,84,79] >>> "FILE_PHOTO"

flow:

    {
        "id": "7998f37f030d7fd9",
        "type": "mqtt in",
        "z": "81f9dc57e0d19d5e",
        "name": "",
        "topic": "door/photo",
        "qos": "2",
        "datatype": "base64",
        "broker": "31b2666c956d6ef4",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 100,
        "y": 100,
        "wires": [
            [
                "1e3a16b617888cd7"
            ]
        ]
    },
    {
        "id": "8d1deb059071d2c5",
        "type": "ui_template",
        "z": "81f9dc57e0d19d5e",
        "group": "48fa5d97.39c614",
        "name": "show image",
        "order": 4,
        "width": "6",
        "height": "5",
        "format": "<div>\n    <img width=\"300px\" alt=\"esp32-cam test\" src=\"data:image/jpg;base64,{{msg.payload}}\" />\n</div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 750,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "1e3a16b617888cd7",
        "type": "base64",
        "z": "81f9dc57e0d19d5e",
        "name": "",
        "action": "",
        "property": "payload",
        "x": 480,
        "y": 100,
        "wires": [
            [
                "8d1deb059071d2c5",
                "e1fc8194866b05e9"
            ]
        ]
    },
    {
        "id": "e1fc8194866b05e9",
        "type": "debug",
        "z": "81f9dc57e0d19d5e",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 640,
        "y": 180,
        "wires": []
    },
    {
        "id": "31b2666c956d6ef4",
        "type": "mqtt-broker",
        "name": "DoorBell",
        "broker": "localhost",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "sessionExpiry": ""
    },
    {
        "id": "48fa5d97.39c614",
        "type": "ui_group",
        "name": "Door Bell",
        "tab": "9f8151f3dee1b703",
        "order": 1,
        "disp": false,
        "width": "6",
        "collapse": false
    },
    {
        "id": "9f8151f3dee1b703",
        "type": "ui_tab",
        "name": "DoorBell",
        "icon": "dashboard",
        "order": 6,
        "disabled": false,
        "hidden": false
    }
]```

maybe a component there are missing (like a decoder?), I don't know...
2

That would be because you are actually sending a string of FILE_PHOTO not image data

There is a complete demo project here: GitHub - botabotlab/ESP32CAM-MQTT: Sketch to control an ESP32CAM and export pictures via MQTT

It even has a sketch - see here: ESP32CAM-MQTT/ESP32_Cam_MQTT/ESP32_Cam_MQTT.ino at 968b24756c5fe4fae39697adff7ffc9561392f02 · botabotlab/ESP32CAM-MQTT · GitHub

1 Like
3

thank you for this information
Hi,

yes I have see, it is a string only

now in Node-Red-flow ist is exactly the same

the Sketch by the ESP32 I have adjusted this accordingly... but no Debug-Info and no Photo
all other functions in both directions works fine as well ... ???

thank you again

4

hi
something most be wrong, by early working from to begin, I don't get any problems by installing and setup "mqtt" in Node-Red.
together with my project with esp32-Cam I could buildup the sketch with the flow in NR
it work but without to transfer the picture (wrong command in the sketch)
after the corrections after the notice from Steve-Mcl, as already mentioned, but no picture and no info's in the debug
then I was trying with the mentioned "Demo Project" from Github together with NR, running locally on the WIN-Labtop, it was not possible to get a connection
by the esp32: Attempting MQTT connection...failed, rc=-2 try again in 5 seconds)
by NR: [info] [mqtt-broker:217100a2f85c9176] Connection failed to broker: mqtt://192.168.1.68:1883

after this "new" trouble, I was taking the esp32-Cam with my sketch as before with all the same originally adjustments - no connection is established any more!
in the serial-monitor from the ESP32 there the connection is shown as successful... (connected)
in the Node-Red-Log the same as before (...Connection failed to broker...)

I can't find out why!!!

  • I'm working for the Sketch and loading to the ESP32 with a MacBook

  • on Raspi:
    pi@raspi01 : ~ $ mosquitto -v
    1646139926: mosquitto version 1.5.7 starting
    1646139926: Using default config.
    1646139926: Opening ipv4 listen socket on port 1883.
    1646139926: Error: Address already in use

5

Hi,
ok, here we go - hope this works...

[
    {
        "id": "28e827e644b71b5f",
        "type": "ui_template",
        "z": "486dea2824d2bb02",
        "group": "e5f7d98cd417c6e8",
        "name": "Test",
        "order": 1,
        "width": 6,
        "height": "5",
        "format": "<div class=\"roomFrame\">\n    <div class=\"lightTable\">\n        <div class=\"lightTableRow\">\n            <div class=\"d1\">Name</div>\n            <div class=\"d2\"><input type=\"color\" ng-model=\"msg.payload.hex\" ng-change=\"send(msg)\"></div>\n            <div class=\"d3\"><md-switch aria-label=\"tank\" class=\"md-switch\" value=\"{{msg.payload.on}}\" ng-model=\"aktiv\" ng-change=\"send({payload : {on:aktiv}})\" ng-checked=\"msg.payload.on\"></md-switch></div>\n        </div>\n    </div>\n    <div class=\"lightTable\">\n        <div class=\"lightTableRow\">\n            <div class=\"d4\">Heligkeit</div>\n            <div class=\"d5\"><md-slider min=\"0\" max=\"100\" ng-model=\"helligkeit\" value=\"{{msg.payload.brightness}}\" ng-change=\"send({payload : {brightness:helligkeit}})\" class=\"lightSlider\"></md-slider></div>\n            <div class=\"d6\">{{msg.payload.brightness}}</div>\n        </div>\n        <div class=\"lightTableRow\">\n            <div class=\"d4\">Farbe</div>\n            <div class=\"d5\"><md-slider min=\"153\" max=\"500\" ng-model=\"farbtemp\" value=\"{{msg.payload.colorTemp}}\" ng-change=\"send({payload : {colorTemp:farbtemp}})\" class=\"lightSlider\"></md-slider></div>\n            <div class=\"d6\">{{msg.payload.colorTemp}}</div>\n        </div>\n    </div>\n</div>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 450,
        "y": 200,
        "wires": [
            [
                "fa4ab0245b1fc293",
                "fa4ab0245b1fc293",
                "09e4ab5db7cc5098",
                "ca1d780ce899221d"
            ]
        ]
    },
    {
        "id": "290b7a6f911b1f62",
        "type": "ui_template",
        "z": "486dea2824d2bb02",
        "group": "e5f7d98cd417c6e8",
        "name": "Sliderstyle",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<style>\n    .lightSlider {\n        float:right;\n        width: 100%   \n    }\n    .lightSlider .md-thumb:after, .lightSlider .md-track{\n        background-color: #FA9900 !important;\n        border-color: #FA9900 !important;\n    }\n    .lightSlider .md-focus-thumb, .lightSlider .md-focus-ring{\n        background-color: #FA9900;\n    }\n    .lightTable {\n        display:table;\n        width:95%;\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n    .lightTableRow {\n        display:table-row;\n    }\n    .d1 {\n        display:table-cell;\n        width:60%;\n    }\n    .d2 {\n        display:table-cell;\n        text-align:center;\n        width:20%;\n    }\n    .d3 {\n        display:table-cell;\n        text-align:right;\n        width:20%;\n    }\n    .d4 {\n        display:table-cell;\n        width:30%;\n        vertical-align:middle;\n    }\n    .d5 {\n        display:table-cell;\n        width:60%;\n    }\n    .d6 {\n        display:table-cell;\n        text-align:right;\n        width:10%;\n        vertical-align:middle;\n    }\n    .roomFrame {\n        border:1px solid grey;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "sliderstyle",
        "x": 410,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "d146875305ac6621",
        "type": "hue-light",
        "z": "486dea2824d2bb02",
        "name": "Dusche indirekt",
        "bridge": "fdd57983b73f8605",
        "lightid": "10d664ae-bfdb-42e4-8459-394712a8c0b4",
        "colornamer": true,
        "skipevents": false,
        "initevents": false,
        "x": 120,
        "y": 200,
        "wires": [
            [
                "9b7081fb638c0d14",
                "3059fd94e2fa1c6b",
                "9b7081fb638c0d14",
                "3059fd94e2fa1c6b"
            ]
        ]
    },
    {
        "id": "09e4ab5db7cc5098",
        "type": "hue-light",
        "z": "486dea2824d2bb02",
        "name": "Dusche indirekt",
        "bridge": "fdd57983b73f8605",
        "lightid": "10d664ae-bfdb-42e4-8459-394712a8c0b4",
        "colornamer": true,
        "skipevents": false,
        "initevents": false,
        "x": 840,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "fa4ab0245b1fc293",
        "type": "debug",
        "z": "486dea2824d2bb02",
        "name": "",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 630,
        "y": 140,
        "wires": []
    },
    {
        "id": "ca1d780ce899221d",
        "type": "debug",
        "z": "486dea2824d2bb02",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 630,
        "y": 240,
        "wires": []
    },
    {
        "id": "9b7081fb638c0d14",
        "type": "function",
        "z": "486dea2824d2bb02",
        "name": "Add#",
        "func": "msg.payload.hex = \"#\" + msg.payload.hex;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 290,
        "y": 200,
        "wires": [
            [
                "28e827e644b71b5f",
                "28e827e644b71b5f"
            ]
        ]
    },
    {
        "id": "3059fd94e2fa1c6b",
        "type": "debug",
        "z": "486dea2824d2bb02",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 330,
        "y": 280,
        "wires": []
    },
    {
        "id": "e5f7d98cd417c6e8",
        "type": "ui_group",
        "name": "test2",
        "tab": "c8014419458cb66d",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "fdd57983b73f8605",
        "type": "hue-bridge",
        "name": "Tautendorf EG",
        "bridge": "192.168.110.30",
        "key": "ZET7k2XRFUDtHpvNOXm8DiqeVSZgCrJpwGAj9QNY",
        "worker": "4",
        "autoupdates": true,
        "disableupdates": false
    },
    {
        "id": "c8014419458cb66d",
        "type": "ui_tab",
        "name": "Test",
        "icon": "info",
        "disabled": false,
        "hidden": false
    }
]

The msg coming from the HUE lamp after changing the color (from within the HUE APP) is:

{"on":true,"brightness":40.16,"brightnessLevel":102,"reachable":true,"connectionStatus":"connected","updated":"2022-03-01T17:29:16+01:00","rgb":[85,187,242],"hex":"55bbf2","xyColor":{"x":0.1767,"y":0.2509},"color":"teal","colorTemp":false,"colorTempName":"unknown"}

With the Add# function, the message sets the color picker in the dashboard.

Changing the color from the dashboard node sends the message:

`{"on":true,"brightness":40.16,"brightnessLevel":102,"reachable":true,"connectionStatus":"connected","updated":"2022-03-01T17:29:16+01:00","rgb":[85,187,242],"hex":"#002e7a","xyColor":{"x":0.1767,"y":0.2509},"color":"teal","colorTemp":false,"colorTempName":"unknown"}`

to the lamp, which does not do anything with the lamp. I have the feeling, that the lamp does not like the '#'. Using the color picker dashboard node works both ways (Format setting hex).

6

Got the solution for now: The problem is that the entire message was completely routed through my nodes. This message also contains Rob information that was not changed by the template ui node. Removing this information fixes the update route from template to HUE.

I still need the # in my message from HUE to get the dashboard updated - any thoughts on this?

7

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