How possible can I pass msg.payload to ui_template

I have designed the working of the gauge by html css and javascript, how can I pass msg.payload to show in ui_template? Here's my flow

[
    {
        "id": "5538c227d2380829",
        "type": "tab",
        "label": "Flow 4",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "7201d3624616b33b",
        "type": "ui_template",
        "z": "5538c227d2380829",
        "group": "df51c8d9cae894b0",
        "name": "html",
        "order": 1,
        "width": 28,
        "height": 13,
        "format": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>Portfolio Landing Page</title>\n    <!----CSS link----->\n    <link rel=\"stylesheet\" href=\"index.css\" />\n    <!----Fontawesome CDN Link----->\n    <link\n      rel=\"stylesheet\"\n      href=\"https://pro.fontawesome.com/releases/v5.10.0/css/all.css\"\n    />\n  </head>\n  <body>\n    <header>\n      <div class=\"top\">\n        <h1>Overview Dashboard</h1>\n      </div>\n    </header>\n    <header>\n      <div class=\"container\">\n        <nav>\n          <!----navigation bar----->\n          <ul>\n            <!----menu----->\n            <li><a href=\"\">ALTERNATOR</a></li>\n            <li><a href=\"\">STARTER</a></li>\n            <li><a href=\"\">STATOR</a></li>\n          </ul>\n        </nav>\n        <div class=\"containerinfo\">\n          <section class=\"ratio-info\">\n            <div class=\"ratio-header\">\n              <h1>ALT3RD</h1>\n            </div>\n            <div class=\"infoactual\">\n              <p><b>1280</b></p>\n            </div>\n            <div class=\"containercircular\">\n              <div class=\"circular-progress\">\n                <div class=\"value-container\"> 0%\n                </div>\n              </div>\n              \n            </div>\n            <div class=\"oaratio\">\n              <h2>70 %</h2>\n            </div>\n            <div class=\"ratio-btn\">\n              <a href=\"\" class=\"ratioalt\">&nbsp;<mark>CHART↗</mark>&nbsp;</a>\n            </div>\n          </section>\n          <section class=\"ratio-info\">\n            <div class=\"ratio-header\">\n              <h1>ALT3RD</h1>\n            </div>\n            <div class=\"infoactual\">\n              <p><b>1280</b></p>\n            </div>\n            <div class=\"containercircular\">\n                <div class=\"circular-progress\">\n                    <div class=\"value-container\"> 0%\n                      </div>\n                </div>\n                \n              </div>\n            <div class=\"oaratio\">\n              <h2>70 %</h2>\n            </div>\n            <div class=\"ratio-btn\">\n              <a href=\"\" class=\"ratioalt\">&nbsp;<mark>CHART↗</mark>&nbsp;</a>\n            </div>\n          </section>\n          <section class=\"ratio-info\">\n            <div class=\"ratio-header\">\n              <h1>ALT3RD</h1>\n            </div>\n            <div class=\"infoactual\">\n              <p><b>1280</b></p>\n            </div>\n            <div class=\"containercircular\">\n                <div class=\"circular-progress\">\n                    <div class=\"value-container\"> 0%\n                      </div>\n                </div>\n                \n              </div>\n            <div class=\"oaratio\">\n              <h2>70 %</h2>\n            </div>\n            <div class=\"ratio-btn\">\n              <a href=\"\" class=\"ratioalt\">&nbsp;<mark>CHART↗</mark>&nbsp;</a>\n            </div>\n          </section>\n          <section class=\"ratio-info\">\n            <div class=\"ratio-header\">\n              <h1>ALT3RD</h1>\n            </div>\n            <div class=\"infoactual\">\n              <p><b>1280</b></p>\n            </div>\n            <div class=\"containercircular\">\n                <div class=\"circular-progress\">\n                    <div class=\"value-container\"> 0%\n                      </div>\n                </div>\n                \n            </div>\n            <div class=\"oaratio\">\n              <h2>70 %</h2>\n            </div>\n            <div class=\"ratio-btn\">\n              <a href=\"\" class=\"ratioalt\">&nbsp;<mark>CHART↗</mark>&nbsp;</a>\n            </div>\n          </section>\n                     \n        </div>\n      </header>\n    </body>\n    \n</html>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 370,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "fd6ad36ce575c223",
        "type": "ui_template",
        "z": "5538c227d2380829",
        "group": "df51c8d9cae894b0",
        "name": "css",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<style>\n@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap\");\n*,\n*::before,\n* ::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: \"Roboto\", sans-serif;\n}\nbody {\n  background-color: #f0f1f6;\n  height: 100vh;\n}\n.container {\n  max-width: 1500px;\n  margin-right: 100px;\n  border: 1px solid red;\n}\n.containerinfo {\n  margin: 0 auto;\n  border: 1px solid blue;\n  display: flex;\n  justify-content: space-around;\n}\nheader {\n  margin-left: 100px;\n  color: #001737;\n}\nnav {\n  height: 30px;\n  width: 400px;\n  border: 1px solid red;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n}\nnav ul {\n  display: flex;\n  justify-content: space-between;\n  list-style: none;\n  width: 350px;\n  border: 1px solid red;\n}\nnav ul li a {\n  text-decoration: none;\n  color: #001737;\n}\n.ratio-btn {\n  height: 40px;\n  border-radius: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 20px;\n  text-align: center;\n}\n\n.ratio-info {\n  margin-top: 20px;\n  width: 240px;\n  height: 600px;\n  border: 1px solid red;\n  background-color: white;\n  justify-content: center;\n  align-items: center;\n}\n.ratio-header h1 {\n  font-size: 16px;\n  text-align: center;\n  border: 1px solid red;\n  margin-top: 15px;\n  color: #001737;\n}\n.infoactual p {\n  font-size: 30px;\n  text-align: center;\n  border: 1px solid red;\n  color: #001737;\n}\n.oaratio {\n  border: 1px solid red;\n  width: auto;\n  margin-top: 15px;\n  height: 27px;\n}\n.oaratio h2 {\n  text-align: center;\n  color: #001737;\n}\n\n.ratio-btn a {\n  text-decoration: none;\n  display: inline-block;\n  color: #001737;\n  margin-top: -20px;\n}\n.containercircular {\n  border: 1px solid blue;\n  height: 220px;\n  background-color: white;\n  position: relative;\n  transform: translate (-50%, -50%);\n  display: grid;\n  place-items: center;\n}\n.circular-progress {\n  background-color: white;\n  position: relative;\n  height: 180px;\n  width: 180px;\n  background-color: orange;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n}\n.circular-progress::before {\n  content: \"\";\n  position: absolute;\n  height: 84%;\n  width: 84%;\n  background-color: white;\n  border: 1px solid red;\n  border-radius: 50%;\n}\n.value-container {\n  position: relative;\n  color: black;\n  font-size: 35px;\n}\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 370,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "25addb19739e6f3c",
        "type": "ui_template",
        "z": "5538c227d2380829",
        "group": "df51c8d9cae894b0",
        "name": "script",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<script>\n// Get all the circular progress bars in the container\nlet progressBars = document.querySelectorAll(\".circular-progress\");\n\n// Loop through each progress bar and apply the script to it\nprogressBars.forEach((progressBar) => {\nlet valueContainer = progressBar.querySelector(\".value-container\");\nlet progressValue = 0;\nlet progressEndValue = 50;\nlet speed = 50;\n\nlet progress = setInterval(() => {\nprogressValue++;\nvalueContainer.textContent = `${progressValue}%`;\nprogressBar.style.background = `conic-gradient(\nblack ${progressValue * 3.6}deg,\n#cadcff ${progressValue * 3.6}deg\n)`;\nif (progressValue == progressEndValue) {\nclearInterval(progress);\n}\n}, speed);\n});\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 370,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "df51c8d9cae894b0",
        "type": "ui_group",
        "name": "",
        "tab": "b442f83846d9b243",
        "order": 3,
        "disp": true,
        "width": "28",
        "collapse": false,
        "className": ""
    },
    {
        "id": "b442f83846d9b243",
        "type": "ui_tab",
        "name": "testgauge",
        "icon": "dashboard",
        "order": 15,
        "disabled": false,
        "hidden": false
    }
]

Your flow is showing three nodes that are not attached to anything.
Is there more to your flow?

Most nodes require you to send them something, what have you tried sending to your nodes?

Dashboard is sent all messages that go into any of the Dashboard nodes. Any processing then happens in the front-end using AngularJS's functions, not in node red.

So the short answer is you don't do anything to get payload into the front-end, it will already be there if you've sent a msg.

There are various Dashboard examples in the node-red cookbook I think.

You can also look at the Flows site and search for 'dashboard' and click on the nodes and collections buttons to remove them from the list. This will give you a bunch of flows using the dashboard you can look at to see how people are using the dashboard.

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