UIBuilder Example Flow to send and receive multiple data from node-red to webpage and vice versa
If you know about uibuilder , it's really awesome Node to make customized dashboards using HTML, CSS, and javascript.
If we install uibuilder , we will have a sample webpage that includes some basic operations and instructions.
uibuilder homepage: https://flows.nodered.org/node/node-red-contrib-uibuilder
In this Example flow, I am going to show some simple operation using uibuilder. We will take input from users in a form and send data to node-red from uibuilder. Then at the same time, we will receive data from node-red to our uibuilder webpage. I will include a youtube video link later on. [Update:Youtube Video link: https://youtu.be/NIeJ_VTI3i8 ] Enjoy!
[{"id":"82e68978.045b68","type":"uibuilder","z":"84ee0234.4f135","name":"","topic":"","url":"uibuilder_Example","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":470,"y":260,"wires":[["16dde3ab.c3fc8c"],[]]},{"id":"b64473a7.3d6dc","type":"inject","z":"84ee0234.4f135","name":"","topic":"cardId","payload":"111","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":200,"y":200,"wires":[["82e68978.045b68"]]},{"id":"18e53c59.76d4a4","type":"inject","z":"84ee0234.4f135","name":"","topic":"cardId","payload":"222","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":203,"y":238,"wires":[["82e68978.045b68"]]},{"id":"d18950fe.7f075","type":"inject","z":"84ee0234.4f135","name":"","topic":"cardId","payload":"333","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":203,"y":278,"wires":[["82e68978.045b68"]]},{"id":"1239bfb7.99356","type":"inject","z":"84ee0234.4f135","name":"","topic":"cardId","payload":"444","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":203,"y":318,"wires":[["82e68978.045b68"]]},{"id":"16dde3ab.c3fc8c","type":"debug","z":"84ee0234.4f135","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":690,"y":240,"wires":[]}]
