I have a progress bar with html, css and javascript code which I have written inside a template node (for dashboard). I have understand that I can display some text dynamically (coming from a msg.payload) using {{msg.payload}} but I do not get how to launch a function using my msg.payload.
So in my example, I'd like to run my function move() which is actually run when someone click the html button using my msg.payload. So I will have a button node, when clicked will run the move() function of my template node...
Thank you for your help
[{"id":"1cd50f9d.3c71","type":"tab","label":"Flow 12","disabled":false,"info":""},{"id":"6f406d43.046d94","type":"ui_template","z":"1cd50f9d.3c71","group":"448586ea.7f42a8","name":"","order":5,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<style>\n#myProgress {\n width: 100%;\n background-color: #ddd;\n}\n\n#myBar {\n width: 100%;\n height: 30px;\n background-color: #4CAF50;\n}\n</style>\n<body>\n\n\n<div id=\"myProgress\">\n <div id=\"myBar\"> </div>\n</div>\n <p id=\"msg\"> {{msg.payload}} </p>\n \n <button onclick=\"move()\">Click Me</button> \n\n<br>\n\n\n<script>\nvar i = 0;\nfunction move() {\n if (i == 0) {\n i = 1;\n var elem = document.getElementById(\"myBar\");\n var message = document.getElementById(\"msg\");\n var width = 100;\n var id = setInterval(frame, 100);\n function frame() {\n if (width <= 0) {\n clearInterval(id);\n i = 0;\n } else {\n width = width - 1;\n elem.style.width = width + \"%\";\n elem.textContent = width;\n if (width == 95) {\n \tmessage.textContent = \"forcez\";\n \t{payload: 1};\n \n }\n \n }\n }\n }\n}\n</script>\n\n</body>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1020,"y":660,"wires":[["cc88617e.6dec8"]]},{"id":"cc88617e.6dec8","type":"debug","z":"1cd50f9d.3c71","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1250,"y":640,"wires":[]},{"id":"90364668.6c00c8","type":"function","z":"1cd50f9d.3c71","name":"","func":"msg.payload = 0;\nreturn msg;","outputs":1,"noerr":0,"x":860,"y":500,"wires":[["6f406d43.046d94"]]},{"id":"2ca038e1.0fc2c8","type":"inject","z":"1cd50f9d.3c71","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":700,"y":560,"wires":[["90364668.6c00c8"]]},{"id":"448586ea.7f42a8","type":"ui_group","z":"","name":"Compte à rebours","tab":"f75bbc9f.a03b1","order":3,"disp":true,"width":"6","collapse":false},{"id":"f75bbc9f.a03b1","type":"ui_tab","z":"","name":"Préhension SELFIT","icon":"dashboard","order":4,"disabled":false,"hidden":false}]
