Fo as cool and useful as Node-RED is I am surprised at the lack of “useful” documentation and examples on the web. Sure http://flows.nodered.org/ has some very useful flows and nodes, no doubt but they don’t really help a beginner slap some IoT goodness together. I have some knowledge but I by all means don’t have “skills”, at least I don’t think so. Anyway enough rambling on to the code…
DISCLAIMER: I by no means really know what I am doing, I know just enough to be dangerous. I am not responsible for what you do or what happens, by you or someone following anything mentioned on this page (or site).
Display sensor data on a webpage with Node-RED
This should allow you to take data from a sensor or another node and display it on a webpage.
Nodes you will need:
- HTTP request (set as GET)
- Function (Get current values)
- Template (HTTP)
- HTTP Response
Get Current Values Function
|
1 2 3 4 5 6 |
msg.current = { variable1: context.global.variable1, variable2: context.global.variable2, variable3: context.global.variable3 } return msg; |
HTTP Template
|
1 2 3 4 5 6 7 8 9 10 |
<html><head></head> <body> <form method="POST" action="/homesubmit"> <p>Variable1: {{current.variable1}}</p> <p>Variable2: {{current.variable2}}</p> <p>Variable3: {{current.variable3}}</p> <p><input type="submit" value="Refresh"></p> </form> </body> </html> |
That is the bulk of it, now all you have to do is declare the global variables you just created. Add a function block directly after your sensor (or edit the one you already have). Now you just need to set the sensors payload to equal the global variable.
Set each global variable for each sensor you have like this (I added it at the very bottom, before “return msg;”.):
context.global.variable1 = msg.payload;
Refresh the page button
This should allow you to get a button on a webpage to refresh the page for you.
Nodes you will need:
- HTTP request (set as GET)
- Function (Return to page)
Return to page Function:
msg.res.redirect("/checksensors");
Well thats it, I hope this was enough straight forward code and enough direction to get you going. I had to scrape this all together. One is glad to be of service.
For your pleasure and in the chances I may help cure some headaches, because I hate headaches, here is all the code (minus setting the global variables):
|
1 |
[{"id":"d42812f2.2bd7f","type":"http in","z":"df14cbe6.20eb38","name":"","url":"/checksensors","method":"get","swaggerDoc":"","x":197.1428680419922,"y":887.1428833007812,"wires":[["ab5eccd2.54a13"]]},{"id":"4b806cd2.b47f94","type":"http response","z":"df14cbe6.20eb38","name":"Display the Page","x":867.6428680419922,"y":887.1428833007812,"wires":[]},{"id":"ab5eccd2.54a13","type":"function","z":"df14cbe6.20eb38","name":"Get Current Values","func":"msg.current = {\n variable1: context.global.variable1,\n variable2: context.global.variable2,\n variable3: context.global.variable3\n}\nreturn msg;","outputs":1,"noerr":0,"x":420.1428680419922,"y":887.1428833007812,"wires":[["6b295f84.94d6a"]]},{"id":"6b295f84.94d6a","type":"template","z":"df14cbe6.20eb38","name":"HTTP","field":"payload","format":"handlebars","template":"<html><head></head>\n<body>\n <form method=\"POST\" action=\"/homesubmit\">\n <p>variable1: {{current.variable1}}</p>\n <p>variable2: {{current.variable2}}</p>\n <p>variable3: {{current.variable3}}</p>\n <p><input type=\"submit\" value=\"Refresh\"></p>\n \n </form>\n \n</body>\n\n</html>","x":657.6428680419922,"y":887.1428833007812,"wires":[["4b806cd2.b47f94"]]},{"id":"70c3e0ae.8f3c2","type":"http in","z":"df14cbe6.20eb38","name":"Refresh Page Button","url":"/homesubmit","method":"post","swaggerDoc":"","x":208.1428680419922,"y":942.1428833007812,"wires":[["e3453d3f.1cbac"]]},{"id":"e3453d3f.1cbac","type":"function","z":"df14cbe6.20eb38","name":"Redirect back to /checksensors","func":"msg.res.redirect(\"/checksensors\");\n","outputs":"0","noerr":0,"x":819.1428680419922,"y":942.1428833007812,"wires":[]}] |
This post is were I found the code needed to get the above results:
https://groups.google.com/forum/#!searchin/node-red/gpio/node-red/ycho_15kJvM/bTOY9tbwrmYJ
Discover more from Its_All.Lost
Subscribe to get the latest posts sent to your email.
