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\"> <mark>CHART↗</mark> </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\"> <mark>CHART↗</mark> </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\"> <mark>CHART↗</mark> </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\"> <mark>CHART↗</mark> </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
}
]
