Working with UI-Template

General
1

Hello everyone,
I'm have difficult when I try connect from HMI <-> MQTT <-> Node-red.
Everything is ok. When I start HMI first, the Template can receive and display all status and value I need to see. However, when I start Node-red first, I saw Node-red receive all status and value but Node-red display only one last status/value.
This is my flow:
Node-red forum.txt (48.0 KB)
This is my dashboard I wish to see:

image

This is the dashboard I see when I start HMI first:

image
image710×445 31 KB

The Node-red received all status/value from HMI, but Dashboard display only the end status/value

Untitled
Untitled819×512 37.7 KB

How to template can receive and display all status/value when I start HMI first or deploy Node-red.
Could anyone help me please?
Thank you!

2 
[
    {
        "id": "999bb768077d599d",
        "type": "tab",
        "label": "Flow 14",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "6c4fe6272b06f58d",
        "type": "mqtt in",
        "z": "999bb768077d599d",
        "name": "Giá trị 220VAC",
        "topic": "CBL/NamKa/Power/Pub/220VAC",
        "qos": "2",
        "datatype": "json",
        "broker": "ae98c6335ab26845",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 180,
        "y": 160,
        "wires": [
            [
                "bf0ae386c1b8f7d9"
            ]
        ]
    },
    {
        "id": "f57b5f892ad9bd77",
        "type": "mqtt in",
        "z": "999bb768077d599d",
        "name": "Trạng thái 220VAC",
        "topic": "CBL/NamKa/Display/Pub/220VAC",
        "qos": "2",
        "datatype": "json",
        "broker": "ae98c6335ab26845",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 190,
        "y": 100,
        "wires": [
            [
                "d3449902d5678bf6",
                "6a2fd695302fe253"
            ]
        ]
    },
    {
        "id": "d3449902d5678bf6",
        "type": "function",
        "z": "999bb768077d599d",
        "name": "",
        "func": "var kt = msg.payload.d[\"220VAC_Status\"][0];\nreturn {\n    payload:(kt) ? \"#5fddcc\" : \"#b8bbae\",\n    topic:\"220vac@cx_color\"\n};\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 420,
        "y": 60,
        "wires": [
            [
                "9692e30ed5a239c6"
            ]
        ]
    },
    {
        "id": "bf0ae386c1b8f7d9",
        "type": "function",
        "z": "999bb768077d599d",
        "name": "",
        "func": "kt = msg.payload.d[\"220VAC\"][0];\nkt=kt.toString();\nreturn {\n    payload: kt,\n    topic:\"gtri_220vac@cx_status\"\n };\n ",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 420,
        "y": 160,
        "wires": [
            [
                "9692e30ed5a239c6"
            ]
        ]
    },
    {
        "id": "6a2fd695302fe253",
        "type": "function",
        "z": "999bb768077d599d",
        "name": "",
        "func": "var kt = msg.payload.d[\"220VAC_Status\"][0];\nif (kt==false)\n{\n    return {payload : \"NGẮT\",\n       topic:\"tthai_220vac@cx_status\"\n};\n}\nelse\n{return {payload : \"ĐÓNG\",\n       topic:\"tthai_220vac@cx_status\"\n};\n}\n    \n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 420,
        "y": 100,
        "wires": [
            [
                "9692e30ed5a239c6"
            ]
        ]
    },
    {
        "id": "13b30a7c43c39ca2",
        "type": "debug",
        "z": "999bb768077d599d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1030,
        "y": 120,
        "wires": []
    },
    {
        "id": "9692e30ed5a239c6",
        "type": "ui_template",
        "z": "999bb768077d599d",
        "group": "5549dc5cdeeebf33",
        "name": "Sơ đồ nguyên lý trạm CBL NamKa",
        "order": 10,
        "width": 25,
        "height": 15,
        "format": "<div id=\"graphics\" ng-init=\"checkSVG()\">\n\n    <!-- SVG FILE CONTENT BELOW -->\n\n<svg viewBox=\"68.943 29.115 402.866 219.077\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:bx=\"https://boxy-svg.com\">\n  <defs>\n    <style bx:fonts=\"Acme\">@import url(https://fonts.googleapis.com/css2?family=Acme%3Aital%2Cwght%400%2C400&amp;display=swap);</style>\n  </defs>\n  <rect x=\"80.37\" y=\"112.951\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(95, 221, 204);\" rx=\"2.008\" ry=\"2.008\" id=\"220vac@cx_color\">\n    <title>METER1</title>\n  </rect>\n  <rect x=\"129.686\" y=\"112.951\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(95, 221, 204);\" rx=\"2.509\" ry=\"2.509\" id=\"ups@cx_color\">\n    <title>METER2</title>\n  </rect>\n  <rect x=\"204.95\" y=\"110.951\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(95, 221, 204);\" rx=\"1.506\" ry=\"1.506\" id=\"ai@cx_color\">\n    <title>AI</title>\n  </rect>\n  <rect x=\"299.112\" y=\"110.951\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(95, 221, 204);\" rx=\"2.008\" ry=\"2.008\" id=\"di@cx_color\">\n    <title>DI</title>\n  </rect>\n  <rect x=\"396.375\" y=\"110.951\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(95, 221, 204);\" rx=\"2.008\" ry=\"2.008\" id=\"do@cx_color\">\n    <title>DO</title>\n  </rect>\n  <path style=\"fill: rgb(255, 255, 255); stroke: rgb(235, 0, 0); stroke-width: 2px;\" d=\"M 99.922 112.435 L 99.922 86.982 L 235.568 87.709 L 320.671 87.935\"></path>\n  <rect x=\"231.95\" y=\"39.951\" width=\"51.057\" height=\"29.132\" style=\"stroke: rgb(0, 0, 0); fill: rgb(95, 221, 204);\" rx=\"3.011\" ry=\"3.011\">\n    <title>HMI</title>\n  </rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 17.6766px; line-height: 25.4543px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.680093, 0, 0, 0.690188, 213.172729, -43.905594)\" x=\"66.957\" y=\"148.088\">HMI</text>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(245, 0, 0); stroke-width: 2px;\" d=\"M 148.732 112.421 L 148.732 87.377\"></path>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(235, 0, 0); stroke-width: 2px;\" d=\"M 319.654 111.087 L 319.654 87.25\"></path>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Acme; font-size: 5.49287px; line-height: 8.78858px; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.704669, -23.056522, 75.039406)\" x=\"130.88099670410156\" y=\"133.41000366210938\"> </text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Acme; font-size: 5.49287px; line-height: 8.78858px; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.704669, -22.755657, 74.277657)\" x=\"130.88099670410156\" y=\"133.41000366210938\"> </text>\n  <rect x=\"79.853\" y=\"140.213\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(246, 255, 82);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"82.109\" y=\"150.254\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 7.00763px; line-height: 8.78858px; stroke-width: 2.60509px; text-anchor: middle; text-transform: uppercase; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.713508, -7.45266, 51.509895)\" x=\"130.881\" y=\"133.41\">TRẠNG THÁI</text>\n  <rect x=\"180.008\" y=\"164.127\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(0, 199, 66);\" id=\"acquy@cx_color\">\n    <title>BATT</title>\n  </rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 15.9089px; line-height: 25.4543px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.554435, 0, 0, 0.56572, 162.746597, 94.850128)\" x=\"66.957\" y=\"148.088\">ẮC QUY</text>\n  <rect x=\"228.92\" y=\"164.127\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(0, 199, 53);\" id=\"24vdc@cx_color\">\n    <title>POWER</title>\n  </rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 15.8043px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.554681, 0, 0, 0.569465, 212.593277, 91.259262)\"><tspan x=\"66.957\" y=\"148.088\">NGUỒN </tspan><tspan x=\"66.957\" dy=\"1em\">​</tspan><tspan>24VDC</tspan></text>\n  <rect x=\"180.008\" y=\"191.536\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(246, 255, 82);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"182.264\" y=\"201.577\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <rect x=\"228.92\" y=\"191.536\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(229, 255, 82);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"231.177\" y=\"201.577\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 7.00763px; line-height: 8.78858px; stroke-width: 2.60509px; text-anchor: middle; text-transform: uppercase; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.713508, 141.360672, 103.333786)\" x=\"130.881\" y=\"133.41\">TRẠNG THÁI</text>\n  <rect x=\"276.324\" y=\"164.127\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(0, 204, 68);\" id=\"quat@cx_color\">\n    <title>FAN</title>\n  </rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 15.9089px; line-height: 25.4543px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.554435, 0, 0, 0.56572, 259.627533, 94.850143)\" x=\"66.957\" y=\"148.088\">QUẠT</text>\n  <rect x=\"325.236\" y=\"164.127\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(0, 209, 77);\" id=\"amply@cx_color\">\n    <title>AMP</title>\n  </rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 15.1809px; line-height: 21.5905px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.511362, 0, 0, 0.592852, 311.471771, 91.689423)\"><tspan x=\"66.957\" y=\"148.088\">AMPLY</tspan><tspan x=\"66.957\" dy=\"1em\">​</tspan></text>\n  <rect x=\"276.324\" y=\"191.536\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(238, 255, 82);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"278.58\" y=\"201.577\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <rect x=\"325.236\" y=\"191.536\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(238, 255, 82);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"327.493\" y=\"201.577\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <rect x=\"372.941\" y=\"164.127\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(0, 199, 63);\" id=\"mp3@cx_color\">\n    <title>MP3</title>\n  </rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 14.4281px; line-height: 24.8988px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.614011, 0, 0, 0.623782, 351.831787, 87.823792)\" x=\"66.957\" y=\"148.088\">MP3</text>\n  <rect x=\"421.854\" y=\"164.127\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(0, 199, 66);\" id=\"loa@cx_color\">\n    <title>SPK</title>\n  </rect>\n  <rect x=\"372.941\" y=\"191.536\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(239, 252, 89);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"375.197\" y=\"201.577\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <rect x=\"421.854\" y=\"191.536\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(246, 255, 82);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"424.11\" y=\"201.577\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(250, 254, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(238, 16, 16); stroke-width: 2px;\" d=\"M 224.906 136.14 L 225.111 150.869\"></path>\n  <path style=\"fill: rgb(255, 255, 255); stroke: rgb(231, 20, 20); stroke-width: 2px;\" d=\"M 225.604 150.573 L 200.537 150.573 L 200.62 163.66\"></path>\n  <path style=\"fill: rgb(255, 255, 255); stroke: rgb(232, 18, 18); stroke-width: 2px;\" d=\"M 225.604 150.576 L 248.644 150.422 L 248.803 163.659\"></path>\n  <path style=\"fill: rgb(255, 255, 255); stroke: rgb(231, 16, 16); stroke-width: 2px;\" d=\"M 296.607 150.506 L 440.887 149.965 L 441.107 163.706\"></path>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(233, 15, 15); stroke-width: 2px;\" d=\"M 320.555 136.169 L 320.815 150.364\"></path>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(226, 14, 14); stroke-width: 2px;\" d=\"M 416.747 136.103 L 416.921 149.858\"></path>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(233, 11, 11); stroke-width: 2px;\" d=\"M 344.806 163.765 L 344.806 150.441\"></path>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(238, 13, 13); stroke-width: 2px;\" d=\"M 393.103 163.765 L 393.103 150.316\"></path>\n  <rect x=\"129.711\" y=\"167.272\" width=\"40.149\" height=\"18.467\" style=\"stroke: rgb(0, 0, 0); fill: rgb(34, 36, 5);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"131.967\" y=\"170.171\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Acme; font-size: 5.49287px; line-height: 8.78858px; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.704669, 27.213751, 74.242722)\" x=\"130.88099670410156\" y=\"133.41000366210938\"> </text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 128.508423, 70.394547)\" id=\"gtri_ups@cx_status\" x=\"36.064\" y=\"192.61\">GIÁ TRỊ</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 15.8043px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.452928, 0, 0, 0.569465, 412.085938, 94.626465)\" x=\"66.957\" y=\"148.088\">LOA</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 7.00763px; line-height: 8.78858px; stroke-width: 2.60509px; text-anchor: middle; text-transform: uppercase; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.713508, 92.701538, 102.832733)\" x=\"130.881\" y=\"133.41\">TRẠNG THÁI</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 7.00763px; line-height: 8.78858px; stroke-width: 2.60509px; text-anchor: middle; text-transform: uppercase; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.713508, 189.541504, 103.225388)\" x=\"130.881\" y=\"133.41\">TRẠNG THÁI</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 7.00763px; line-height: 8.78858px; stroke-width: 2.60509px; text-anchor: middle; text-transform: uppercase; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.713508, 237.660583, 102.832733)\" x=\"130.881\" y=\"133.41\">TRẠNG THÁI</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 7.00763px; line-height: 8.78858px; stroke-width: 2.60509px; text-anchor: middle; text-transform: uppercase; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.713508, 285.350311, 103.225388)\" x=\"130.881\" y=\"133.41\">TRẠNG THÁI</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 7.00763px; line-height: 8.78858px; stroke-width: 2.60509px; text-anchor: middle; text-transform: uppercase; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.713508, 334.862061, 103.225388)\" x=\"130.881\" y=\"133.41\">TRẠNG THÁI</text>\n  <rect x=\"179.118\" y=\"218.432\" width=\"40.149\" height=\"18.467\" style=\"stroke: rgb(0, 0, 0); fill: rgb(34, 36, 5);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"181.374\" y=\"221.332\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Acme; font-size: 5.49287px; line-height: 8.78858px; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.704669, 76.621063, 125.403381)\" x=\"130.88099670410156\" y=\"133.41000366210938\"> </text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 177.915741, 121.555206)\" id=\"gtri_acquy@cx_status\" x=\"36.064\" y=\"192.61\">GIÁ TRỊ</text>\n  <rect x=\"228.955\" y=\"218.39\" width=\"40.149\" height=\"18.467\" style=\"stroke: rgb(0, 0, 0); fill: rgb(34, 36, 5);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"231.211\" y=\"220.698\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Acme; font-size: 5.49287px; line-height: 8.78858px; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.704669, 126.457809, 125.769394)\" x=\"130.88099670410156\" y=\"133.41000366210938\"> </text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 227.752472, 121.921219)\" id=\"gtri_24vdc@cx_status\" x=\"36.064\" y=\"192.61\">GIÁ TRỊ</text>\n  <rect x=\"79.891\" y=\"167.305\" width=\"40.149\" height=\"18.467\" style=\"stroke: rgb(0, 0, 0); fill: rgb(34, 36, 5);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"81.997\" y=\"170.205\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <rect x=\"129.52\" y=\"140.257\" width=\"40.149\" height=\"24.749\" style=\"stroke: rgb(0, 0, 0); fill: rgb(246, 255, 82);\" rx=\"5.337\" ry=\"5.337\"></rect>\n  <rect x=\"131.776\" y=\"150.298\" width=\"35.675\" height=\"12.445\" style=\"stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);\" rx=\"3.712\" ry=\"3.712\"></rect>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 7.00763px; line-height: 8.78858px; stroke-width: 2.60509px; text-anchor: middle; text-transform: uppercase; white-space: pre;\" transform=\"matrix(0.821947, 0, 0, 0.713508, 42.214134, 51.55394)\" x=\"130.881\" y=\"133.41\">TRẠNG THÁI</text>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(245, 0, 0); stroke-width: 2px;\" d=\"M 223.919 110.78 L 223.919 86.754\"></path>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(225, 19, 19); stroke-width: 2px;\" d=\"M 416.42 110.927 L 416.42 86.747\"></path>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(225, 20, 20); stroke-width: 2px;\" d=\"M 319.759 87.886 L 416.707 87.68\"></path>\n  <path style=\"fill: rgb(216, 216, 216); stroke: rgb(228, 24, 24); stroke-width: 2px;\" d=\"M 256.22 69.292 L 256.52 87.87\"></path>\n  <path style=\"fill: rgb(216, 216, 216); stroke-width: 2px; stroke: rgb(228, 22, 22);\" d=\"M 296.369 149.443 L 296.369 163.821\"></path>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 6.47277px; text-anchor: middle; white-space: pre;\" transform=\"matrix(1.204383, 0, 0, 1.390441, 57.146042, -143.671051)\" id=\"text-1\"><tspan x=\"36.064\" y=\"192.61\">ĐIỆN ÁP</tspan><tspan x=\"36.064\" dy=\"1em\">​</tspan><tspan>220VAC</tspan><tspan x=\"36.064\" dy=\"1em\">​</tspan></text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 6.47277px; text-anchor: middle; white-space: pre;\" transform=\"matrix(1.204383, 0, 0, 1.390441, 106.644623, -143.426422)\" id=\"text-2\"><tspan x=\"36.064\" y=\"192.61\">ĐIỆN ÁP</tspan><tspan x=\"36.064\" dy=\"1em\">​</tspan><tspan>UPS</tspan><tspan x=\"36.064\" dy=\"1em\">​</tspan></text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 16px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 203.732193, 16.23937)\" id=\"text-3\" x=\"36.064\" y=\"192.61\">AI</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 16px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 298.587982, 16.830669)\" id=\"text-4\" x=\"36.064\" y=\"192.61\">DI</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 16px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 397.294006, 16.830669)\" id=\"text-5\" x=\"36.064\" y=\"192.61\">DO</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 79.331406, 70.394547)\" id=\"gtri_220vac@cx_status\" x=\"36.064\" y=\"192.61\">GIÁ TRỊ</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 79.331406, 50.32761)\" id=\"tthai_220vac@cx_status\" x=\"36.064\" y=\"192.61\">Đ/N</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 128.508423, 50.32761)\" id=\"tthai_ups@cx_status\" x=\"36.064\" y=\"192.61\">Đ/N</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 179.237366, 101.781235)\" id=\"tthai_acquy@cx_status\" x=\"36.064\" y=\"192.61\">Đ/N</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 230.13179, 101.781235)\" id=\"tthai_24vdc@cx_status\" x=\"36.064\" y=\"192.61\">Đ/N</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 277.546295, 101.781235)\" id=\"tthai_quat@cx_status\" x=\"36.064\" y=\"192.61\">Đ/N</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 324.293793, 101.923836)\" id=\"tthai_amply@cx_status\" x=\"36.064\" y=\"192.61\">Đ/N</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 373.662384, 101.496025)\" id=\"tthai_mp3@cx_status\" x=\"36.064\" y=\"192.61\">Đ/N</text>\n  <text style=\"fill: rgb(51, 51, 51); font-family: Ahem; font-size: 11px; text-anchor: middle; white-space: pre;\" transform=\"matrix(0.562869, 0, 0, 0.5625, 422.073853, 101.923836)\" id=\"tthai_loa@cx_status\" x=\"36.064\" y=\"192.61\">Đ/N</text>\n</svg>\n\n    <!-- SVG FILE CONTENT ABOVE -->\n\n    <script>\n        (function($scope) {\n            const cxMove = \"cx_move\";\n            const cxColor = \"cx_color\";\n            const cxStatus = \"cx_status\";\n            const cxHide = \"cx_hide\";\n            const cxStroke = \"cx_stroke\";\n            const maxStatusLength = 12;\n\n\n            $scope.checkSVG = function() {\n\n                if (!$scope.graphicObjects) {\n                    $scope.graphicObjects = [];\n                }\n                recursiveEach($(\"#graphics\"), $scope.graphicObjects);\n                // console.log($scope.graphicObjects);\n\n                function recursiveEach(element, container){\n                    element.children().each(function () {\n                        const $currentElement = $(this);\n                        if (this.id && this.id.indexOf('@') > 0) {\n                            container.push({\n                                id: this.id,\n                                element: $currentElement,\n                                cxMove: (this.id.indexOf(cxMove) > 0),\n                                cxColor: (this.id.indexOf(cxColor) > 0),\n                                cxStatus: (this.id.indexOf(cxStatus) > 0),\n                                cxHide: (this.id.indexOf(cxHide) > 0),\n                                cxStroke: (this.id.indexOf(cxStroke) > 0),\n                            });\n                        }\n                        recursiveEach($currentElement, container);\n                    });\n                }\n            };\n\n            $scope.$watch('msg', function() {\n                if (!$scope.msg) return;\n\n                if (Array.isArray($scope.msg.payload)) {\n                    for (let aReq of $scope.msg.payload) {\n                        animateObject(aReq.payload, aReq.topic);\n                    }\n                } else {\n                    animateObject($scope.msg.payload, $scope.msg.topic);\n                }\n            });\n\n            function animateObject(payload, topic) {\n\n                if (payload === undefined || payload === null ||\n                    !topic || typeof topic !== 'string' || !topic.includes('@')) return;\n\n                const id = topic.split('@')[0], cxType = topic.split('@')[1];\n\n                for (const graphicObject of $scope.graphicObjects) {\n                    const objId = graphicObject.id.split('@')[0];\n                    if (objId !== id || graphicObject.id.indexOf(cxType) === -1) continue;\n\n                    if (cxType === cxColor && graphicObject.cxColor && typeof payload === 'string') {\n\n                        graphicObject.element.css({fill : payload});\n\n                    } else if (cxType === cxStatus && graphicObject.cxStatus && typeof payload === 'string') {\n                        const statusText = (payload.length > maxStatusLength) ?\n                            payload.substring(0, maxStatusLength - 3) + '...' : payload;\n\n                        graphicObject.element.text(statusText);\n\n                    } else if (cxType === cxHide && graphicObject.cxHide && typeof payload === 'boolean') {\n                        const displayAttr = (payload)? 'none' : '';\n                        graphicObject.element.css({display: displayAttr})\n\n                    } else if (cxType === cxMove && graphicObject.cxMove) {\n                        // box = SVGRect {x: 51.95399475097656, y: 54.69599914550781, width: 94.41000366210938, height: 94.41000366210938}\n                        const box = graphicObject.element[0].getBBox();\n                        const matrix = getMatrix(payload, box);\n                        if (matrix) graphicObject.element.attr('transform', matrix);\n\n                    } else if (cxType === cxStroke && graphicObject.cxStroke) {\n                        // const displayAttr = (payload)? 'none' : '';\n                        if (payload.color != null) graphicObject.element.css({stroke: payload.color});\n                        if (payload.width != null) graphicObject.element.css({[\"stroke-width\"]: payload.width});\n                    }\n                }\n            }\n\n\n            function getMatrix(config, box) {\n                if (!config || !box) return;\n\n                // translation\n                const tx = config.x || 0;\n                const ty = config.y || 0;\n                // angle in radians\n                const rads = config.deg * (Math.PI / 180) || 0;\n                // rotation centre\n                // box = { x: 51.95399475097656, y: 54.69599914550781, width: 94.41000366210938, height: 94.41000366210938 }\n                const pivot_x = (config.pivot && config.pivot[0])? config.pivot[0] : 0;\n                const pivot_y = (config.pivot && config.pivot[1])? config.pivot[1] : 0;\n                const cx = box.x + box.width * ( (pivot_x)? pivot_x : 0.5 );\n                const cy = box.y + box.height * ( (pivot_y)? pivot_y : 0 );\n                // scaling\n                const sx = 1;\n                const sy = 1;\n\n                // matrix(0.594088, -0.516432, 0.62601, 0.720144, -223.586029, 145.949615)\n                return 'matrix(' +\n                    (sx * Math.cos(rads)) + ', ' + (sy * Math.sin(rads)) + ', ' +\n                    (-sx * Math.sin(rads)) + ', ' + (sy * Math.cos(rads)) + ', ' +\n                    ((-Math.cos(rads) * cx + Math.sin(rads) * cy + cx) * sx + tx) + ', ' +\n                    ((-Math.sin(rads) * cx - Math.cos(rads) * cy + cy) * sy + ty) + ')';\n            }\n\n        })(scope);\n    </script>\n</div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 760,
        "y": 120,
        "wires": [
            [
                "13b30a7c43c39ca2"
            ]
        ]
    },
    {
        "id": "ae98c6335ab26845",
        "type": "mqtt-broker",
        "name": "",
        "broker": "192.168.1.109",
        "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": "5549dc5cdeeebf33",
        "type": "ui_group",
        "name": "Sơ đồ nguyên lý",
        "tab": "9c471883f1ec6014",
        "order": 1,
        "disp": true,
        "width": "27",
        "collapse": false,
        "className": ""
    },
    {
        "id": "9c471883f1ec6014",
        "type": "ui_tab",
        "name": "Trạm Cảnh báo lũ NamKa",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]
3

if you don't want to process msgs with 'NGAT', use a switch node to filter them out

1 Like
4

Thank you very much when you read my post.
I want the Template node to receive and display all data (color, status, value...). But when I refreshed the Dashboard or deployed the Node-red, the Template didn't reload data from HMI (The Template didn't display the present data (color, status, value ... of HMI). Even Though I saw the Debug node has received all present data from HMI). It only displays one received last data. Meanwhile HMI sent a lot of data.

5

Put a debug node (set to display the complete msg object) on the output of the mqtt nodes and then copy the data and paste it to a reply. Make sure to expand the output to show all the data.

There’s a great page in the docs (Working with messages : Node-RED) that will explain how to use the debug panel to find the right path to any data item.

Pay particular attention to the part about the buttons that appear under your mouse pointer when you over hover a debug message property in the sidebar.

BX00Cy7yHi

Note that as it is, there will be three different msgs being passed to your template node. If you want all the data to arrive at the same time, you need to add a join node before the template node.

1 Like
6

Thank you very much for your help.
I already added a join node. But The Template node didn't understand. Because payloads have another Topic.

7

you will have to adjust your template to reference the variables in the msg. Add a debug node on the output of the join node so you can see what the names are.

1 Like
8

Hi @zenofmud ,
Thank you for your help.
When I set join node as following:

image
image475×558 14.3 KB

I received this message:
image
image
image
.
.
.
image
I don't know what I need to change in the Template node?
In present, the Template node can understand with follow message:
image
image
....
Thank you for your patience.

9

If you want the data from all three msgs to get to the template node then change the join to only send when 3 msgs arrive

1 Like
10

Hi @zenofmud,
Thank you for your help. It done.

11

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