Image selection by comparison

Dashboard
1

Hello everyone,

I plan to control my sliding gate with an ESP32 in MQTT via my nodered dashboard.
For the moment, the control part of the portal works but I would like to illustrate with an image integrated into my portal opening page.
To do this, I equipped my gate with two limit switches which return an integer value to me via my ESP32.
Here are the images I made:

portail fermé
portail fermé1796×819 76.5 KB

portail entre ouvert
portail entre ouvert1401Ă—627 65.8 KB

portail ouvert
portail ouvert1336Ă—665 64.3 KB

My two sensors return the following value to me when the gate is open:

  • Open sensor: 0
  • Closed sensor: 1

My two sensors return the following value to me when the gate is closed:

  • Open sensor: 1
  • Sensor closed: 0

My two sensors return the following value to me when the gate is partially open:

  • Open sensor: 1
  • Closed sensor: 1

I created a Template which shows me the image correctly in my feed :

<table>
    <tr>
        <!-- Row 2 -->
        <td style="text-align: center"><img src="/ferme.png" id='p32'/></td>
    </tr>
</table>
<style>
#p32{
width: 1200px;
height: 650px;
}
    </style>

<table>
    <tr>
        <!-- Row 2 -->
        <td style="text-align: center"><img src="/portillon.png" id='p32'/></td>
    </tr>
</table>
<style>
    #p32 {
        width: 1200px;
        height: 650px;
    }
</style>

<table>
    <tr>
        <!-- Row 2 -->
        <td style="text-align: center"><img src="/ouvert.png" id='p32'/></td>
    </tr>
</table>
<style>
    #p32 {
        width: 1200px;
        height: 650px;
    }
</style>

I have no idea how to select the image to display according to the comparisons above.
Can you help me with examples?

Thank you in advance

2

The standard way to do this is to have all 3 images in the HTML and use classes to hide/show the correct image.

Since D2 uses VueJS, you can make the classes dynamic.

I wouldn't put them in a table though, that will just make things more complex.

3

Do you perhaps have any help links to learn this kind of thing?

4

Well, ChatGPT is now pretty good is you can formulate a reasonable prompt. Maybe something like (not tried):

"Using HTML, VueJS, CSS and JavaScript, write a simple web page that contains 3 images but only shows one at a time based on a VueJS data variable."

Then you should be able to slot that into a ui template node. You might even be able to ask a follow-up question and get ChatGPT to do the Node-RED flow for you as well.

It doesn't always get everything right so you might have to mess around a bit but you could probably look things up more normally once you have the basic framework.

5

Wasn't this similar topic you discussed few months ago ?

6

Yes, it's the similar subject but I didn't study the function part that could select the right image to display. I think you need to use a javascript function which will sort the msg.topic by creating a condition if on values msg.payload.
Here are the image display functions I started creating :

function Fermer() {
    var imageJavaScriptPortailFerme = document.createElement("img")
    imageJavaScriptPortailFerme.src = "/ferme.png"
    div.appendChild(imageJavaScriptPortailFerme)
}

function portillon() {
    var imageJavaScriptPortailEntreOuvert = document.createElement("img")
    imageJavaScriptPortailEntreOuvert.src = "/ferme.png"
    div.appendChild(imageJavaScriptPortailEntreOuvert)
}

function Ouvert() {
    var imageJavaScriptPortailOuvert = document.createElement("img")
    imageJavaScriptPortailOuvert.src = "/ouvert.png"
    div.appendChild(imageJavaScriptPortailOuvert)
}
7

so there are 3 possible conditions and depending on what condition is present at the moment you want 3 different images to show on dashboard.
can you just not use a switch node and direct show a defined image ? sorry I may be misreading your requirement.

opnclose

[{"id":"aa4055d2e729e0fa","type":"inject","z":"5a5b50a5e5a3beba","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"BUTTON-1","payloadType":"str","x":215,"y":250,"wires":[["7da39ba5a703ba6a"]]},{"id":"7da39ba5a703ba6a","type":"switch","z":"5a5b50a5e5a3beba","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"BUTTON-1","vt":"str"},{"t":"eq","v":"BUTTON-2","vt":"str"},{"t":"eq","v":"BUTTON-3","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":525,"y":300,"wires":[["63337c154a6d26b2"],["ee4d0d06294c7dd4"],["bd04340505552b4a"]]},{"id":"602aa9bfc152b5e6","type":"ui_template","z":"5a5b50a5e5a3beba","group":"5b5ee9f169c93ecf","name":"Logo","order":1,"width":"10","height":"10","format":"","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":1000,"y":300,"wires":[[]]},{"id":"ee4d0d06294c7dd4","type":"change","z":"5a5b50a5e5a3beba","name":"","rules":[{"t":"set","p":"img","pt":"msg","to":"\\test\\hc.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":300,"wires":[["0d4d75c8fa027d3f"]]},{"id":"0d4d75c8fa027d3f","type":"template","z":"5a5b50a5e5a3beba","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>\n<img src={{img}} width=\"350\" height=\"290\"  style= \"margin: 5px 5px 5px 5px\"; >\n</div>","output":"str","x":860,"y":300,"wires":[["602aa9bfc152b5e6"]]},{"id":"63337c154a6d26b2","type":"change","z":"5a5b50a5e5a3beba","name":"","rules":[{"t":"set","p":"img","pt":"msg","to":"\\test\\o.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":250,"wires":[["0d4d75c8fa027d3f"]]},{"id":"bd04340505552b4a","type":"change","z":"5a5b50a5e5a3beba","name":"","rules":[{"t":"set","p":"img","pt":"msg","to":"\\test\\c.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":350,"wires":[["0d4d75c8fa027d3f"]]},{"id":"70cc0622dba92e7c","type":"inject","z":"5a5b50a5e5a3beba","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"BUTTON-2","payloadType":"str","x":215,"y":300,"wires":[["7da39ba5a703ba6a"]]},{"id":"86230ce4d0e6efc3","type":"inject","z":"5a5b50a5e5a3beba","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"BUTTON-3","payloadType":"str","x":215,"y":350,"wires":[["7da39ba5a703ba6a"]]},{"id":"bcda6816b7ef2d86","type":"ui_button","z":"5a5b50a5e5a3beba","name":"","group":"5b5ee9f169c93ecf","order":7,"width":"3","height":"2","passthru":false,"label":"Open","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"BUTTON-1","payloadType":"str","topic":"topic","topicType":"msg","x":350,"y":375,"wires":[["7da39ba5a703ba6a"]]},{"id":"ccd4e14e7104e502","type":"ui_button","z":"5a5b50a5e5a3beba","name":"","group":"5b5ee9f169c93ecf","order":7,"width":"3","height":"2","passthru":false,"label":"half Open","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"BUTTON-2","payloadType":"str","topic":"topic","topicType":"msg","x":340,"y":425,"wires":[["7da39ba5a703ba6a"]]},{"id":"3ca2654bebea95f3","type":"ui_button","z":"5a5b50a5e5a3beba","name":"","group":"5b5ee9f169c93ecf","order":7,"width":"3","height":"2","passthru":false,"label":"Close","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"BUTTON-3","payloadType":"str","topic":"topic","topicType":"msg","x":350,"y":475,"wires":[["7da39ba5a703ba6a"]]},{"id":"5b5ee9f169c93ecf","type":"ui_group","name":"demo","tab":"195948bb680041dd","order":1,"disp":false,"width":"32","collapse":false,"className":""},{"id":"195948bb680041dd","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]
8

Here is the function I just did but it doesn't work :

[
    {
        "id": "5ddab18dbde51940",
        "type": "ui_template",
        "z": "bf19831ff82cf14d",
        "group": "4d8299c5b5c503de",
        "name": "Img portail fermé",
        "order": 8,
        "width": 0,
        "height": 0,
        "format": "<style>\n  \nwidth: 1200px;\nheight: 650px;\n  \n     </style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 970,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "c61d4baed2d104e2",
        "type": "mqtt in",
        "z": "bf19831ff82cf14d",
        "name": "",
        "topic": "Etat/capteur/portail/ferme",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 390,
        "y": 120,
        "wires": [
            [
                "3ada3f3d0e5d214a"
            ]
        ]
    },
    {
        "id": "5dc15c12aa54b06a",
        "type": "mqtt in",
        "z": "bf19831ff82cf14d",
        "name": "",
        "topic": "Etat/capteur/portail/ouvert",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 390,
        "y": 240,
        "wires": [
            [
                "3ada3f3d0e5d214a"
            ]
        ]
    },
    {
        "id": "13e16236ab3903b7",
        "type": "mqtt in",
        "z": "bf19831ff82cf14d",
        "name": "",
        "topic": "Etat/capteur/portillon",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 400,
        "y": 180,
        "wires": [
            [
                "3ada3f3d0e5d214a"
            ]
        ]
    },
    {
        "id": "3ada3f3d0e5d214a",
        "type": "function",
        "z": "bf19831ff82cf14d",
        "name": "Triage des images du portail",
        "func": "let capteurFerme = msg.payload;\nlet capteurOuvert = msg.payload;\n\nif (msg.topic === \"Etat/capteur/portail/ferme\" && capteurFerme === 0 && capteurOuvert === 1) {\n  Fermer();\n} else {\n\n}\n\nif (msg.topic === \"Etat/capteur/portillon\" && capteurFerme === 1 && capteurOuvert === 1) {\n    portillon();\n} else {\n\n}\n\nif (msg.topic === \"Etat/capteur/portail/ouvert\" && capteurFerme === 1 && capteurOuvert === 0) {\n    Ouvert();\n} else {\n\n}\nreturn, msg;\n\nfunction Fermer() {\n    var imageJavaScriptPortailFerme = document.createElement(\"img\")\n    imageJavaScriptPortailFerme.src = \"/ferme.png\"\n    div.appendChild(imageJavaScriptPortailFerme)\n}\n\nfunction portillon() {\n    var imageJavaScriptPortailEntreOuvert = document.createElement(\"img\")\n    imageJavaScriptPortailEntreOuvert.src = \"/ferme.png\"\n    div.appendChild(imageJavaScriptPortailEntreOuvert)\n}\n\nfunction Ouvert() {\n    var imageJavaScriptPortailOuvert = document.createElement(\"img\")\n    imageJavaScriptPortailOuvert.src = \"/ouvert.png\"\n    div.appendChild(imageJavaScriptPortailOuvert)\n }\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 7,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 700,
        "y": 180,
        "wires": [
            [
                "5ddab18dbde51940"
            ]
        ]
    },
    {
        "id": "4d8299c5b5c503de",
        "type": "ui_group",
        "name": "Ouverture du portail exterieur",
        "tab": "40264fa5a0eade36",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false,
        "className": ""
    },
    {
        "id": "b690438f99f8231b",
        "type": "mqtt-broker",
        "name": "",
        "broker": "192.168.1.13",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "autoUnsubscribe": 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": "40264fa5a0eade36",
        "type": "ui_tab",
        "name": "Gestion des portails ",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
9

there is some syntactical error in function node. sorry i am no javascript expert. let me know if the no code solution given by me is not good for you.

10

apart from the random , after return you should be aware that code in a function node runs server side (in the Node-RED runtime) not in the client side (i.e. not in the dashboard). That is why document and div are not available (node runtime is not a web page!)

image

You should adapt @smanjunath211 demo flow to your needs.

11

I will probably choose the no-code solution. On the other hand, how can I make comparisons with switch nodes which have two input topics ?

The two switches return the value of 1 or 0 via the MQTT message.

[
    {
        "id": "09e5e1ac552c0874",
        "type": "switch",
        "z": "725edb971072c7d0",
        "name": "if sensor 1",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 590,
        "y": 180,
        "wires": [
            [
                "8f541e3084094d66"
            ],
            [
                "8f541e3084094d66"
            ]
        ]
    },
    {
        "id": "994632044c883441",
        "type": "switch",
        "z": "725edb971072c7d0",
        "name": "if sensor 2",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 590,
        "y": 260,
        "wires": [
            [
                "8f541e3084094d66"
            ],
            [
                "8f541e3084094d66"
            ]
        ]
    },
    {
        "id": "648665c874665363",
        "type": "mqtt in",
        "z": "725edb971072c7d0",
        "name": "",
        "topic": "Etat/capteur/portail/ouvert",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 350,
        "y": 180,
        "wires": [
            [
                "09e5e1ac552c0874"
            ]
        ]
    },
    {
        "id": "ac6ccddf39f5c42b",
        "type": "mqtt in",
        "z": "725edb971072c7d0",
        "name": "",
        "topic": "Etat/capteur/portail/ferme",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 350,
        "y": 260,
        "wires": [
            [
                "994632044c883441"
            ]
        ]
    },
    {
        "id": "8f541e3084094d66",
        "type": "function",
        "z": "725edb971072c7d0",
        "name": "selection of msg.payload in relation to topics",
        "func": "",
        "outputs": 3,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 890,
        "y": 220,
        "wires": [
            [
                "a14365b3420d45f7"
            ],
            [
                "5bf51c67f5ff8889"
            ],
            [
                "5753aa23a32e12a8"
            ]
        ]
    },
    {
        "id": "a14365b3420d45f7",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1230,
        "y": 140,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "5bf51c67f5ff8889",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1190,
        "y": 220,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "5753aa23a32e12a8",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1230,
        "y": 300,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "9fc75c0fa1751f0b",
        "type": "template",
        "z": "725edb971072c7d0",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "This is the payload: {{payload}} !",
        "output": "str",
        "x": 1380,
        "y": 220,
        "wires": [
            [
                "c5a6acd9137035a6"
            ]
        ]
    },
    {
        "id": "c5a6acd9137035a6",
        "type": "ui_template",
        "z": "725edb971072c7d0",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<div ng-bind-html=\"msg.payload\"></div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1440,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "b690438f99f8231b",
        "type": "mqtt-broker",
        "name": "",
        "broker": "192.168.1.13",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "autoUnsubscribe": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    }
]

How can I make a comparison in the function node with two topics to check?

12

Use a join node to get all properties into the same message

See this article in the cookbook for an example of how to join messages into one object.

1 Like
13

I tried to make a flow to my mining but it doesn't work, there may be a poorly configured node :

[
    {
        "id": "09e5e1ac552c0874",
        "type": "switch",
        "z": "725edb971072c7d0",
        "name": "Capteur ouvert",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 600,
        "y": 180,
        "wires": [
            [
                "18563fbd6e58b618",
                "8b2ea8fbbd3b11e7"
            ],
            [
                "5cc752376ce8fcfa"
            ]
        ]
    },
    {
        "id": "994632044c883441",
        "type": "switch",
        "z": "725edb971072c7d0",
        "name": "Capteur fermé",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 600,
        "y": 260,
        "wires": [
            [
                "5cc752376ce8fcfa",
                "8b2ea8fbbd3b11e7"
            ],
            [
                "18563fbd6e58b618"
            ]
        ]
    },
    {
        "id": "648665c874665363",
        "type": "mqtt in",
        "z": "725edb971072c7d0",
        "name": "",
        "topic": "Etat/capteur/portail/ouvert",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 370,
        "y": 180,
        "wires": [
            [
                "09e5e1ac552c0874"
            ]
        ]
    },
    {
        "id": "ac6ccddf39f5c42b",
        "type": "mqtt in",
        "z": "725edb971072c7d0",
        "name": "",
        "topic": "Etat/capteur/portail/ferme",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 370,
        "y": 260,
        "wires": [
            [
                "994632044c883441"
            ]
        ]
    },
    {
        "id": "a14365b3420d45f7",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "/ferme.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1150,
        "y": 120,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "5bf51c67f5ff8889",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/portillon.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1140,
        "y": 220,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "5753aa23a32e12a8",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/ouvert.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1140,
        "y": 320,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "9fc75c0fa1751f0b",
        "type": "template",
        "z": "725edb971072c7d0",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<div>\n<img src={{img}} width=\"1200px\" height=\"650px\"  style= \"margin: 5px 5px 5px 5px\"; >\n</div>\n",
        "output": "str",
        "x": 1340,
        "y": 220,
        "wires": [
            [
                "be6473c4d103ba20"
            ]
        ]
    },
    {
        "id": "18563fbd6e58b618",
        "type": "join",
        "z": "725edb971072c7d0",
        "name": "Etat fermé du portail",
        "mode": "custom",
        "build": "object",
        "property": "topic",
        "propertyType": "msg",
        "key": "payload",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "1",
        "count": "2",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 860,
        "y": 120,
        "wires": [
            [
                "3a58d00a463f7b30",
                "a14365b3420d45f7"
            ]
        ]
    },
    {
        "id": "3a58d00a463f7b30",
        "type": "debug",
        "z": "725edb971072c7d0",
        "name": "portail fermé",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 870,
        "y": 80,
        "wires": []
    },
    {
        "id": "5cc752376ce8fcfa",
        "type": "join",
        "z": "725edb971072c7d0",
        "name": "Etat ouvert du portail",
        "mode": "custom",
        "build": "object",
        "property": "topic",
        "propertyType": "msg",
        "key": "payload",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "1",
        "count": "2",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 870,
        "y": 320,
        "wires": [
            [
                "c5669ac45bd374c3",
                "5753aa23a32e12a8"
            ]
        ]
    },
    {
        "id": "8b2ea8fbbd3b11e7",
        "type": "join",
        "z": "725edb971072c7d0",
        "name": "Etat entre ouvert du portail",
        "mode": "custom",
        "build": "object",
        "property": "topic",
        "propertyType": "msg",
        "key": "payload",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "1",
        "count": "",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "num",
        "reduceFixup": "",
        "x": 880,
        "y": 220,
        "wires": [
            [
                "7f760c0fe769c977",
                "5bf51c67f5ff8889"
            ]
        ]
    },
    {
        "id": "7f760c0fe769c977",
        "type": "debug",
        "z": "725edb971072c7d0",
        "name": "portail entre ouvert",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 890,
        "y": 180,
        "wires": []
    },
    {
        "id": "c5669ac45bd374c3",
        "type": "debug",
        "z": "725edb971072c7d0",
        "name": "portail ouvert",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 870,
        "y": 280,
        "wires": []
    },
    {
        "id": "be6473c4d103ba20",
        "type": "ui_template",
        "z": "725edb971072c7d0",
        "group": "4d8299c5b5c503de",
        "name": "",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1360,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "b690438f99f8231b",
        "type": "mqtt-broker",
        "name": "",
        "broker": "192.168.1.13",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "autoUnsubscribe": 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": "4d8299c5b5c503de",
        "type": "ui_group",
        "name": "Ouverture du portail exterieur",
        "tab": "40264fa5a0eade36",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false,
        "className": ""
    },
    {
        "id": "40264fa5a0eade36",
        "type": "ui_tab",
        "name": "Gestion des portails ",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
14

Try this. Please ensure that correct img reference is put in the change nodes before template node.

[{"id":"94e04e1250c9ced6","type":"group","z":"5a5b50a5e5a3beba","name":"","style":{"stroke":"#0070c0","fill":"#7fb7df","label":true},"nodes":["2f97bcf85d342764","c927bc7b220519c5","2a45ecfe85f1a2f0","80f12069ca3c11b4","1d6d3c3bc88a9a20","3aa625a28c6d4b18","67998388fd033959","690717b327e9c24d","cce9ee5c18f8627e","3609ad8d6cc1a7fa","005c9cb87751320d","d6f109aeda62055f","50c545146384375d","ae4352de98646b0b","31ca3099e671229f","88fc79f13ea3eae6"],"x":154,"y":921.5,"w":1247,"h":257},{"id":"2f97bcf85d342764","type":"inject","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"open","payload":"0","payloadType":"num","x":250,"y":962.5,"wires":[["1d6d3c3bc88a9a20","d6f109aeda62055f"]]},{"id":"c927bc7b220519c5","type":"inject","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"open","payload":"1","payloadType":"num","x":250,"y":1006.25,"wires":[["1d6d3c3bc88a9a20","d6f109aeda62055f"]]},{"id":"2a45ecfe85f1a2f0","type":"inject","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"close","payload":"0","payloadType":"num","x":250,"y":1093.75,"wires":[["1d6d3c3bc88a9a20","50c545146384375d"]]},{"id":"80f12069ca3c11b4","type":"inject","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"close","payload":"1","payloadType":"num","x":250,"y":1137.5,"wires":[["1d6d3c3bc88a9a20","50c545146384375d"]]},{"id":"1d6d3c3bc88a9a20","type":"join","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"2","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":425,"y":1050,"wires":[["3aa625a28c6d4b18"]]},{"id":"3aa625a28c6d4b18","type":"switch","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open","property":"payload.open","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":575,"y":1050,"wires":[["690717b327e9c24d"],["67998388fd033959"]]},{"id":"67998388fd033959","type":"switch","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Close","property":"payload.close","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":725,"y":1075,"wires":[["005c9cb87751320d"],["3609ad8d6cc1a7fa"]]},{"id":"690717b327e9c24d","type":"switch","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Close","property":"payload.close","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":725,"y":1000,"wires":[[],["cce9ee5c18f8627e"]]},{"id":"cce9ee5c18f8627e","type":"change","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open:0 Close-1 \\n OPEN","rules":[{"t":"set","p":"img","pt":"msg","to":"/ouvert.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":930,"y":975,"wires":[["88fc79f13ea3eae6","ae4352de98646b0b"]]},{"id":"3609ad8d6cc1a7fa","type":"change","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open:1 Close:1 \\n PARTIALLY OPEN","rules":[{"t":"set","p":"img","pt":"msg","to":"/portillon.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":1125,"wires":[["88fc79f13ea3eae6","ae4352de98646b0b"]]},{"id":"005c9cb87751320d","type":"change","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open:1 Close:0 \\n CLOSED","rules":[{"t":"set","p":"img","pt":"msg","to":"/ferme.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":930,"y":1050,"wires":[["88fc79f13ea3eae6","ae4352de98646b0b"]]},{"id":"d6f109aeda62055f","type":"debug","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":435,"y":975,"wires":[]},{"id":"50c545146384375d","type":"debug","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Close","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":450,"y":1125,"wires":[]},{"id":"ae4352de98646b0b","type":"template","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>\n<img src={{img}} width=\"1200px\" height=\"650px\"  style= \"margin: 5px 5px 5px 5px\"; >\n</div>\n","output":"str","x":1140,"y":1050,"wires":[["31ca3099e671229f"]]},{"id":"31ca3099e671229f","type":"ui_template","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","group":"4d8299c5b5c503de","name":"","order":7,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1315,"y":1050,"wires":[[]]},{"id":"88fc79f13ea3eae6","type":"debug","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Output","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1150,"y":975,"wires":[]},{"id":"4d8299c5b5c503de","type":"ui_group","name":"Ouverture du portail exterieur","tab":"40264fa5a0eade36","order":1,"disp":true,"width":"25","collapse":false,"className":""},{"id":"40264fa5a0eade36","type":"ui_tab","name":"Gestion des portails ","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

opnclose1

15

Thanks for the demonstration !
Everything works fine for sorting the states but I don't have any image to display on my dashboard. However, they are in my HTTPstatic folder.

16

Here is the code template that allows me to display as below :

[
    {
        "id": "ae200bc21f5b9809",
        "type": "ui_template",
        "z": "a3c2cda0fd0187df",
        "g": "fb800b13527218e6",
        "group": "4d8299c5b5c503de",
        "name": "TEST",
        "order": 6,
        "width": 25,
        "height": 8,
        "format": " \n<table>\n    <tr>\n        <!-- Row 2 -->\n        <td style=\"text-align: center\"><img src=\"/ferme.png\" width=\"800px\" height=\"400px\"/></td>\n    </tr>\n</table>\n\n<style>\n  \n    \n    \n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1330,
        "y": 760,
        "wires": [
            []
        ]
    },
    {
        "id": "4d8299c5b5c503de",
        "type": "ui_group",
        "name": "Ouverture du portail exterieur",
        "tab": "40264fa5a0eade36",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false,
        "className": ""
    },
    {
        "id": "40264fa5a0eade36",
        "type": "ui_tab",
        "name": "Gestion des portails ",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Capture d’écran 2024-09-19 125440
Capture d’écran 2024-09-19 1254401477×693 133 KB

Here's how I set up the knots:

[
    {
        "id": "b74cde8a3ee4763f",
        "type": "change",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "Open:0 Close-1 \\n OPEN",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/ouvert.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 850,
        "y": 212.5,
        "wires": [
            [
                "446bcbac18986f21",
                "1c34574a073528de"
            ]
        ]
    },
    {
        "id": "fa8748b37bb9f4e9",
        "type": "change",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "Open:1 Close:1 \\n PARTIALLY OPEN",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/portillon.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 860,
        "y": 362.5,
        "wires": [
            [
                "446bcbac18986f21",
                "1c34574a073528de"
            ]
        ]
    },
    {
        "id": "b324cbae81af7ae0",
        "type": "change",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "Open:1 Close:0 \\n CLOSED",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/ferme.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 850,
        "y": 287.5,
        "wires": [
            [
                "446bcbac18986f21",
                "1c34574a073528de"
            ]
        ]
    },
    {
        "id": "1c34574a073528de",
        "type": "template",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<table>\n    <tr>\n        <!-- Row 2 -->\n        <td style=\"text-align: center\"><img src={{img}} width=\"800px\" height=\"400px\"/></td>\n    </tr>\n</table>\n\n\n",
        "output": "str",
        "x": 1060,
        "y": 287.5,
        "wires": [
            [
                "673c2607b7d0519a"
            ]
        ]
    },
    {
        "id": "673c2607b7d0519a",
        "type": "ui_template",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "group": "4d8299c5b5c503de",
        "name": "Image portail new",
        "order": 10,
        "width": 15,
        "height": 5,
        "format": "<style>\n    </style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1250,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "446bcbac18986f21",
        "type": "debug",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "Output",
        "active": true,
        "tosidebar": false,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 1070,
        "y": 212.5,
        "wires": []
    },
    {
        "id": "4d8299c5b5c503de",
        "type": "ui_group",
        "name": "Ouverture du portail exterieur",
        "tab": "40264fa5a0eade36",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false,
        "className": ""
    },
    {
        "id": "40264fa5a0eade36",
        "type": "ui_tab",
        "name": "Gestion des portails ",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Do you have any idea why the images are not displayed by the {{img}} system?

17 
<div ng-bind-html="msg.payload"></div>

try putting above code in the template node (blue template)

image

OR

name the property as msg.template instead of msg.payload

image

1 Like
18

Thank you very much for the information, everything works perfectly, I will study the flow to fully understand how the node works " join "

Normally I'm done with this portal project :sweat_smile:

1 Like
19

Well, everything worked fine with the inject nodes but no longer works with my two MQTT nodes. Here is the debug window for topics + payload received.

Capture
Capture1414Ă—496 73.9 KB

I can't set the node join so that my message gets to the end.
Any idea?

20

I found, I added two change nodes to change the topic and it works very well. I'm starting to get the hang of it.

Capture
Capture1413Ă—375 65.3 KB

thank you for your help which helps me progress

1 Like