In previous two tutorials we learned how to set up ESP8266 with arduino IDE as temperature sensing node. Now we gonna look Node Red side of things and will create dashboard for displaying the data.

 

  1. Open terminal to your Raspberry Pi
  2. Stop the Node Red: 
    node-red-stop
  3. Install node red dashboard with command  (more info: https://flows.nodered.org/node/node-red-dashboard): 
    npm install node-red-dashboard
  4. Start node red: 
    node-red-start
  5. Open browser and navigate to your node red address (examp: http://192.168.8.115:1880).
  6. Add MQTT input to the flow, and double click it.
  7. Now lets configure the mqtt node. First the server will be localhost:1883
    Topic of the node we will be subscribed to is nodes/node1.
    We can leave the QoS to 2 wich means “The broker/client will deliver the message exactly once by using a four step handshake.” And click Done.
  8. Now add debug node from output nodes and connect it to the mqtt node and from top right corner click Deploy.
  9. Select debug tab from the menu on the right and you should see the mqtt output displayed in debug window:
  10. Next add json node. This will parse the msg.payload to convert a json string to/from a javascript object.
  11. Now we will add function node. The json output will be funcnction node input. Double click on the function node. At the bottom in the outputs field insert “2” and replace the Function text with the following : 
    var newMsg = { payload: msg.payload.t };
var newMsg2 = { payload: msg.payload.h };
return [ newMsg , newMsg2 ];

    and click done. Now the incoming message will be broken down to temperature and humidity. you can check the output of the function by adding debug nodes to the output of the function node, don’t forget to click deploy:

  12. Next we will build a dashboard. Open dashboard tab from the top right. Then layout and then “+tab”.
  13. Next add chart node from the left menu. Double click it.
  14. And fill the fields like on the following picture:
  15. Add a new charts node and do the same:
  16. Now connect the upper output of the function to temperature chart node and bottom output to humidity chart node and click deploy.
  17. Navigate your browser to “http://RP-ip:1880/ui” and you will see your charts. And that’s it.

 

Full node red code:

[{"id":"f2d3ec26.9a4f","type":"tab","label":"Flow 1"},{"id":"20bcdf30.ea5f8","type":"mqtt in","z":"f2d3ec26.9a4f","name":"node1","topic":"nodes/node1","qos":"2","broker":"5922bd3.b481244","x":144.86126708984375,"y":324.7552795410156,"wires":[["399a6d05.a191a2"]]},{"id":"399a6d05.a191a2","type":"json","z":"f2d3ec26.9a4f","name":"","x":328.9445037841797,"y":324.9444580078125,"wires":[["b2d9b690.f2b878"]]},{"id":"b2d9b690.f2b878","type":"function","z":"f2d3ec26.9a4f","name":"temp and humidity","func":"var newMsg = { payload: msg.payload.t };\nvar newMsg2 = { payload: msg.payload.h };\nreturn [ newMsg , newMsg2 ];","outputs":"2","noerr":0,"x":531.9514617919922,"y":319.03125,"wires":[["b106e70.bbf8e18"],["fb264a8c.63f2e8"]]},{"id":"b106e70.bbf8e18","type":"ui_chart","z":"f2d3ec26.9a4f","name":"Temperature","group":"405f29f9.181328","order":0,"width":"0","height":"0","label":"Temp","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"linear","nodata":"","ymin":"0","ymax":"40","removeOlder":"5","removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"x":828.9479217529297,"y":181.46876525878906,"wires":[[],[]]},{"id":"fb264a8c.63f2e8","type":"ui_chart","z":"f2d3ec26.9a4f","name":"Humidity","group":"405f29f9.181328","order":0,"width":"0","height":"0","label":"Humidity","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","ymin":"0","ymax":"100","removeOlder":"5","removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"x":823.9514312744141,"y":413.4653015136719,"wires":[[],[]]},{"id":"5922bd3.b481244","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"405f29f9.181328","type":"ui_group","z":"","name":"Default","tab":"fcbe88a5.c068a8","disp":true,"width":"6"},{"id":"fcbe88a5.c068a8","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]