Examples of interfacing node-red with a web page
9,430 views
Skip to first unread message
Adam S
Apr 24, 2015, 2:52:00 PM4/24/15
to node...@googlegroups.com
Can someone point me in the direction of some examples of
html/javascript code that sends/receives data to/from node-red and the
corresponding flows? I did some searching here and didn't really come
up with much. I'm not sure if using the wrong search terms or what,
still trying to learn the node-red terminology.
Basically my goal is to have an html page with textboxes and buttons and I want to update text on the page based on text box input and some flow output after a button is pressed on the html page. My thinking is I need to use http GET and POST but I'm a complete noob when it comes to http requests and responses.
Also, is this http://flows.nodered.org/ the go to place for user submitted flows and nodes?
Basically my goal is to have an html page with textboxes and buttons and I want to update text on the page based on text box input and some flow output after a button is pressed on the html page. My thinking is I need to use http GET and POST but I'm a complete noob when it comes to http requests and responses.
Also, is this http://flows.nodered.org/ the go to place for user submitted flows and nodes?
Dave C-J
Apr 24, 2015, 3:33:08 PM4/24/15
to node...@googlegroups.com
Adam
Nick's example in this thread should get you going....
And yes - flows.nodered.org is the place to start - or in this group.
Julian Knight
Apr 24, 2015, 5:48:43 PM4/24/15
to node...@googlegroups.com
Peter has, in fact been busy! You will find some tutorials on his website: http://tech.scargill.net/
You may find them helpful to get going.
I've been taking a rather different approach by having my pages immediately send back any input changes to NR for processing (using websockets). This makes it really easy to flick a switch on a page and have NR immediately react. Not an approach for every occasion but fits the bill for me. I've written some helper code so that I can reuse it on any page.
You may find them helpful to get going.
I've been taking a rather different approach by having my pages immediately send back any input changes to NR for processing (using websockets). This makes it really easy to flick a switch on a page and have NR immediately react. Not an approach for every occasion but fits the bill for me. I've written some helper code so that I can reuse it on any page.
Dean Sellers
Apr 25, 2015, 6:53:30 PM4/25/15
to node...@googlegroups.com
You could also have a look at a project of mine.
It is an express web app with node-red embedded to provide device control logic. It also embeds a MQTT broker (mosca with levelDB as the persistence layer) and uses MQTT.js as a browser end socket library. You don't really need to know this though, it all works out of the box, once you have added a flow. There is a working one in the readme. It is still in embryo but simple websocket messaging works, for which the html/js is about 20 lines.
There is still quite a bit to do, user auth and MQTT messaging security is the next big one, then a streaming storage system for device flows.
I had a couple of weeks off, but I am now working on it again now, so there should be some regular updates. Let me know if you get a chance to look and have any suggestions/bugs/questions.
Regards,
d-o
Adam S
Apr 25, 2015, 10:31:17 PM4/25/15
to node...@googlegroups.com
Thanks for the replies, it all looks good. I'll try some of this out tomorrow to see if I can get it working.
Adam S
Apr 27, 2015, 1:07:37 PM4/27/15
to node...@googlegroups.com
Those examples were pretty basic for what I want to do in the long run, but I was able to work my way through it enough to get my first goal complete. Right now it takes a reading from 2 temp sensors, one inside and one outside, and adjusts a pwm fan based on the inside temp and also sends some output to MQTT which another pi is subscribed to (not sure what I'm even trying to do there)
To get the temp sensors working you just need to install node-red-contrib-ds18b20 and make a boot.config edit:
Assumes default install directory
Flow:
[{"id":"e00a1942.7d2d4","type":"mqtt-broker","broker":"localhost","port":"1883","clientid":""},{"id":"b3bb40e2.2d92","type":"http in","name":"","url":"/temp","method":"get","x":355,"y":1824,"z":"abafa038.54fa88","wires":[["61d29d3b.18a4cc"]]},{"id":"ca26a7dc.33f038","type":"http response","name":"","x":1025.5,"y":1824,"z":"abafa038.54fa88","wires":[]},{"id":"61d29d3b.18a4cc","type":"function","name":"Get Current Values","func":"msg.current = {\n insidetemp: context.global.insidetemp,\n outsidetemp: context.global.outsidetemp\n}\nreturn msg;","outputs":1,"valid":true,"x":578,"y":1824,"z":"abafa038.54fa88","wires":[["76e37074.8e19a8"]]},{"id":"76e37074.8e19a8","type":"template","name":"","field":"payload","format":"handlebars","template":"<html><head></head>\n<body>\n <form method=\"POST\" action=\"/submit\">\n <p>Inside Temp: <input name=\"insidetemp\" value=\"{{current.insidetemp}}\"></p>\n <p>Outside Temp: <input name=\"outsidetemp\" value=\"{{current.outsidetemp}}\"></p>\n <p><input type=\"submit\" value=\"Update\"></p>\n \n </form>\n \n</body>\n\n</html>","x":815.5,"y":1824,"z":"abafa038.54fa88","wires":[["ca26a7dc.33f038"]]},{"id":"b3231d0a.18df28","type":"function","name":"Set Values/Update Fan","func":"var fahrenheit = msg.payload * (9/5) + 32;\ncontext.global.insidetemp = fahrenheit;\n\nvar fanspeed;\n\nif (fahrenheit < 70){\n fanspeed = 0;\n}\nif (fahrenheit >= 70 && fahrenheit < 72){\n fanspeed = 10;\n}\nif (fahrenheit >= 72 && fahrenheit < 74){\n fanspeed = 20;\n}\nif (fahrenheit >= 74 && fahrenheit < 76){\n fanspeed = 30;\n}\nif (fahrenheit >= 76 && fahrenheit < 78){\n fanspeed = 40;\n}\nif (fahrenheit >= 78 && fahrenheit < 80){\n fanspeed = 50;\n}\nif (fahrenheit >= 80 && fahrenheit < 82){\n fanspeed = 60;\n}\nif (fahrenheit >= 82 && fahrenheit < 84){\n fanspeed = 70;\n}\nif (fahrenheit >= 84 && fahrenheit < 86){\n fanspeed = 80;\n}\nif (fahrenheit >= 86 && fahrenheit < 88){\n fanspeed = 90;\n}\nif (fahrenheit >= 88){\n fanspeed = 100;\n}\n\n//node.send({payload:fanspeed});\n\nmsg.current = {\n fanspeed: fanspeed,\n insidetemp: context.global.insidetemp\n}\n\nmsg.payload = fanspeed\n\nreturn msg;","outputs":1,"valid":true,"x":590,"y":1636,"z":"abafa038.54fa88","wires":[["69a1289e.ec28c","c9b4cb6e.c568a8"]]},{"id":"177e6002.bff4e8","type":"ds18b20","name":"Shed Inisde","sensorid":"28-000006154ba3","timer":".3","x":368,"y":1636,"z":"abafa038.54fa88","wires":[["b3231d0a.18df28"]]},{"id":"b647f4e6.6196f8","type":"debug","name":"","active":false,"console":"false","complete":"false","x":1015,"y":1554,"z":"abafa038.54fa88","wires":[]},{"id":"6d56f263.9f937c","type":"function","name":"Set Values","func":"var fahrenheit = msg.payload * (9/5) + 32;\n\ncontext.global.outsidetemp = fahrenheit;\n\nmsg.current = {\n outsidetemp: context.global.outsidetemp\n}\nreturn msg;","outputs":1,"valid":true,"x":553,"y":1703,"z":"abafa038.54fa88","wires":[["790f4fa7.5fe4f"]]},{"id":"16104bda.b13fdc","type":"ds18b20","name":"Shed Outside","sensorid":"28-000006155474","timer":".3","x":372,"y":1703,"z":"abafa038.54fa88","wires":[["6d56f263.9f937c"]]},{"id":"b93bf43d.ad6c8","type":"debug","name":"","active":false,"console":"false","complete":"false","x":1011,"y":1767,"z":"abafa038.54fa88","wires":[]},{"id":"26f78092.0f21a8","type":"http in","name":"","url":"/submit","method":"post","x":362,"y":1879,"z":"abafa038.54fa88","wires":[["bef67b91.3c74b8"]]},{"id":"bef67b91.3c74b8","type":"function","name":"Redirect back to /temp","func":"msg.res.redirect(\"/temp\");\n","outputs":"0","valid":true,"x":977,"y":1879,"z":"abafa038.54fa88","wires":[]},{"id":"69a1289e.ec28c","type":"rpi-gpio out","name":"","pin":"22","set":"","level":"0","out":"pwm","x":832,"y":1553,"z":"abafa038.54fa88","wires":[]},{"id":"c9b4cb6e.c568a8","type":"template","name":"","field":"payload","format":"handlebars","template":"Current fan speed: {{current.fanspeed}} Current inside temp: {{current.insidetemp}}","x":822,"y":1635,"z":"abafa038.54fa88","wires":[["b647f4e6.6196f8","be901cc1.2c2b1"]]},{"id":"790f4fa7.5fe4f","type":"template","name":"","field":"payload","format":"handlebars","template":"Current outside temp: {{current.outsidetemp}}","x":820,"y":1703,"z":"abafa038.54fa88","wires":[["b93bf43d.ad6c8","996c686c.e78c58"]]},{"id":"be901cc1.2c2b1","type":"mqtt out","name":"","topic":"fans","qos":"","retain":"","broker":"e00a1942.7d2d4","x":1027,"y":1635,"z":"abafa038.54fa88","wires":[]},{"id":"996c686c.e78c58","type":"mqtt out","name":"","topic":"fans","qos":"","retain":"","broker":"e00a1942.7d2d4","x":1025,"y":1703,"z":"abafa038.54fa88","wires":[]}]
To get the temp sensors working you just need to install node-red-contrib-ds18b20 and make a boot.config edit:
Assumes default install directory
cd /usr/local/lib/node_modules/node-red/
sudo npm install node-red-contrib-ds18b20sudo nano /boot/config.txt
>Add to bottom: dtoverlay=w1-gpioFlow:
[{"id":"e00a1942.7d2d4","type":"mqtt-broker","broker":"localhost","port":"1883","clientid":""},{"id":"b3bb40e2.2d92","type":"http in","name":"","url":"/temp","method":"get","x":355,"y":1824,"z":"abafa038.54fa88","wires":[["61d29d3b.18a4cc"]]},{"id":"ca26a7dc.33f038","type":"http response","name":"","x":1025.5,"y":1824,"z":"abafa038.54fa88","wires":[]},{"id":"61d29d3b.18a4cc","type":"function","name":"Get Current Values","func":"msg.current = {\n insidetemp: context.global.insidetemp,\n outsidetemp: context.global.outsidetemp\n}\nreturn msg;","outputs":1,"valid":true,"x":578,"y":1824,"z":"abafa038.54fa88","wires":[["76e37074.8e19a8"]]},{"id":"76e37074.8e19a8","type":"template","name":"","field":"payload","format":"handlebars","template":"<html><head></head>\n<body>\n <form method=\"POST\" action=\"/submit\">\n <p>Inside Temp: <input name=\"insidetemp\" value=\"{{current.insidetemp}}\"></p>\n <p>Outside Temp: <input name=\"outsidetemp\" value=\"{{current.outsidetemp}}\"></p>\n <p><input type=\"submit\" value=\"Update\"></p>\n \n </form>\n \n</body>\n\n</html>","x":815.5,"y":1824,"z":"abafa038.54fa88","wires":[["ca26a7dc.33f038"]]},{"id":"b3231d0a.18df28","type":"function","name":"Set Values/Update Fan","func":"var fahrenheit = msg.payload * (9/5) + 32;\ncontext.global.insidetemp = fahrenheit;\n\nvar fanspeed;\n\nif (fahrenheit < 70){\n fanspeed = 0;\n}\nif (fahrenheit >= 70 && fahrenheit < 72){\n fanspeed = 10;\n}\nif (fahrenheit >= 72 && fahrenheit < 74){\n fanspeed = 20;\n}\nif (fahrenheit >= 74 && fahrenheit < 76){\n fanspeed = 30;\n}\nif (fahrenheit >= 76 && fahrenheit < 78){\n fanspeed = 40;\n}\nif (fahrenheit >= 78 && fahrenheit < 80){\n fanspeed = 50;\n}\nif (fahrenheit >= 80 && fahrenheit < 82){\n fanspeed = 60;\n}\nif (fahrenheit >= 82 && fahrenheit < 84){\n fanspeed = 70;\n}\nif (fahrenheit >= 84 && fahrenheit < 86){\n fanspeed = 80;\n}\nif (fahrenheit >= 86 && fahrenheit < 88){\n fanspeed = 90;\n}\nif (fahrenheit >= 88){\n fanspeed = 100;\n}\n\n//node.send({payload:fanspeed});\n\nmsg.current = {\n fanspeed: fanspeed,\n insidetemp: context.global.insidetemp\n}\n\nmsg.payload = fanspeed\n\nreturn msg;","outputs":1,"valid":true,"x":590,"y":1636,"z":"abafa038.54fa88","wires":[["69a1289e.ec28c","c9b4cb6e.c568a8"]]},{"id":"177e6002.bff4e8","type":"ds18b20","name":"Shed Inisde","sensorid":"28-000006154ba3","timer":".3","x":368,"y":1636,"z":"abafa038.54fa88","wires":[["b3231d0a.18df28"]]},{"id":"b647f4e6.6196f8","type":"debug","name":"","active":false,"console":"false","complete":"false","x":1015,"y":1554,"z":"abafa038.54fa88","wires":[]},{"id":"6d56f263.9f937c","type":"function","name":"Set Values","func":"var fahrenheit = msg.payload * (9/5) + 32;\n\ncontext.global.outsidetemp = fahrenheit;\n\nmsg.current = {\n outsidetemp: context.global.outsidetemp\n}\nreturn msg;","outputs":1,"valid":true,"x":553,"y":1703,"z":"abafa038.54fa88","wires":[["790f4fa7.5fe4f"]]},{"id":"16104bda.b13fdc","type":"ds18b20","name":"Shed Outside","sensorid":"28-000006155474","timer":".3","x":372,"y":1703,"z":"abafa038.54fa88","wires":[["6d56f263.9f937c"]]},{"id":"b93bf43d.ad6c8","type":"debug","name":"","active":false,"console":"false","complete":"false","x":1011,"y":1767,"z":"abafa038.54fa88","wires":[]},{"id":"26f78092.0f21a8","type":"http in","name":"","url":"/submit","method":"post","x":362,"y":1879,"z":"abafa038.54fa88","wires":[["bef67b91.3c74b8"]]},{"id":"bef67b91.3c74b8","type":"function","name":"Redirect back to /temp","func":"msg.res.redirect(\"/temp\");\n","outputs":"0","valid":true,"x":977,"y":1879,"z":"abafa038.54fa88","wires":[]},{"id":"69a1289e.ec28c","type":"rpi-gpio out","name":"","pin":"22","set":"","level":"0","out":"pwm","x":832,"y":1553,"z":"abafa038.54fa88","wires":[]},{"id":"c9b4cb6e.c568a8","type":"template","name":"","field":"payload","format":"handlebars","template":"Current fan speed: {{current.fanspeed}} Current inside temp: {{current.insidetemp}}","x":822,"y":1635,"z":"abafa038.54fa88","wires":[["b647f4e6.6196f8","be901cc1.2c2b1"]]},{"id":"790f4fa7.5fe4f","type":"template","name":"","field":"payload","format":"handlebars","template":"Current outside temp: {{current.outsidetemp}}","x":820,"y":1703,"z":"abafa038.54fa88","wires":[["b93bf43d.ad6c8","996c686c.e78c58"]]},{"id":"be901cc1.2c2b1","type":"mqtt out","name":"","topic":"fans","qos":"","retain":"","broker":"e00a1942.7d2d4","x":1027,"y":1635,"z":"abafa038.54fa88","wires":[]},{"id":"996c686c.e78c58","type":"mqtt out","name":"","topic":"fans","qos":"","retain":"","broker":"e00a1942.7d2d4","x":1025,"y":1703,"z":"abafa038.54fa88","wires":[]}]
Dave C-J
Apr 27, 2015, 1:55:18 PM4/27/15
to node...@googlegroups.com
nzfarmer
Apr 27, 2015, 8:26:50 PM4/27/15
to node...@googlegroups.com
I love the framework with web sockets, but troubled by the lack of a specification for widgets. Have just found this: http://mblogic.sourceforge.net/mbhmi/cascadas/Cascadas_Protocol_2009-12-16.pdf . Welcome thoughts.
A standard way of representing widgets; maintaining state; and authentication is definitely required!
Reply all
Reply to author
Forward
0 new messages