/
Visualize your Data using Node-RED Dashboard

Visualize your Data using Node-RED Dashboard

Feb 22, 2017

We assume you have already been through the SmartMesh IP and Node-RED, revisited recipe and that you can launch the JsonServer application and Node-RED.

The Node-RED Dashboard is an add-on to Node-RED to build a dashboard with gauges, line charts, switches, etc. right on the computer that runs Node-RED!

You edit your dashboard by dragging and dropping Node-RED nodes. It integrates directly within your Node-RED flows.

In this recipe, you will create a simple dashboard which displays the temperature of 5 motes in your network and allows you to control their LEDs.

What you need

We assume you have a SmartMesh IP DC9000 starter kit with an embedded manager and 5 motes. Make sure the motes are turned on, run in master mode, and have joined the network.

Installation

Installation

Open the Node-RED flow editor in your browser:

  • click on the hamburger menu on the top right

  • Select "Manage palette"

  • in the install tab, enter "node-red-dashboard" and click install

Meet the dashboard palette!

When you start Node-RED after installation, you see a new "Dashboard" palette:

Start JsonServer

When Node-RED is running, start the JsonServer application and connect it to your manager.

See SmartMesh IP and Node-RED, revisited if you don't know how to do that.

In my network, I have 5 motes:

00-17-0d-00-00-58-f5-2b

00-17-0d-00-00-38-04-25

00-17-0d-00-00-60-08-ba

00-17-0d-00-00-38-03-69

00-17-0d-00-00-60-05-4a

Create the flow

Visualizing Temperature

To visualize temperature, you can set up the following flow:

Some keys for understanding:

  • the JsonServer application automatically publishes OAP notifications by issuing an HTTP POST

  • the "extract" function filters temperature measurements and extracts the MAC address and the temperature value

  • the "switch" dispatches the messages based on the MAC address

  • 5 equivalent gauges display the temperature

We provide the JSON string of the Node-RED flow below.

Setting LEDs

The second half of the flow takes input from on/off switches and issues the appropriate HTTP request to the JsonServer app to set/clear the LED.

Complete Flow and Visualization

 

JSON version of the flow

[{"id":"b16af910.c0de28","type":"http in","z":"2e0dad9f.85f132","name":"","url":"/oap","method":"post","swaggerDoc":"","x":83.40908813476562,"y":150.9091339111328,"wires":[["a36c1282.cad38","65cd86a7.c24f98"]]},{"id":"a36c1282.cad38","type":"http response","z":"2e0dad9f.85f132","name":"","x":212.4091033935547,"y":171.90914154052734,"wires":[]},{"id":"d8ca1da.61323e","type":"switch","z":"2e0dad9f.85f132","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"00-17-0d-00-00-58-f5-2b","vt":"str"},{"t":"eq","v":"00-17-0d-00-00-38-04-25","vt":"str"},{"t":"eq","v":"00-17-0d-00-00-60-08-ba","vt":"str"},{"t":"eq","v":"00-17-0d-00-00-38-03-69","vt":"str"},{"t":"eq","v":"00-17-0d-00-00-60-05-4a","vt":"str"}],"checkall":"true","outputs":5,"x":347.40904235839844,"y":102.63640594482422,"wires":[["2e5d0b44.c935f4"],["eead95ff.342898"],["b52b0555.174278"],["60f5d02a.341e5"],["25fd73a7.d622ec"]]},{"id":"2e5d0b44.c935f4","type":"ui_gauge","z":"2e0dad9f.85f132","name":"temp 58-f5-2b","group":"738e94b.6746f6c","order":1,"width":0,"height":0,"gtype":"gage","title":"temperature","label":"C","format":"{{value}}","min":"-40","max":"85","colors":["#00b500","#e6e600","#ca3838"],"x":525.4090423583984,"y":35.454559326171875,"wires":[]},{"id":"65cd86a7.c24f98","type":"function","z":"2e0dad9f.85f132","name":"extract","func":"if (msg.payload.fields.channel_str==\"temperature\") {\n msg.topic = msg.payload.mac;\n msg.payload = msg.payload.fields.samples[0]/100.00;\n return msg;\n}\n","outputs":1,"noerr":0,"x":219.40907287597656,"y":108.36367797851562,"wires":[["d8ca1da.61323e"]]},{"id":"3c970c62.e6f7d4","type":"comment","z":"2e0dad9f.85f132","name":"display temperature","info":"","x":122.40908813476562,"y":51.897727966308594,"wires":[]},{"id":"eead95ff.342898","type":"ui_gauge","z":"2e0dad9f.85f132","name":"temp 38-04-25","group":"606c391f.b987d8","order":1,"width":0,"height":0,"gtype":"gage","title":"temperature","label":"C","format":"{{value}}","min":"-40","max":"85","colors":["#00b500","#e6e600","#ca3838"],"x":520.2726898193359,"y":69.2727279663086,"wires":[]},{"id":"b52b0555.174278","type":"ui_gauge","z":"2e0dad9f.85f132","name":"temp 60-08-ba","group":"273f8bd5.76c3d4","order":1,"width":0,"height":0,"gtype":"gage","title":"temperature","label":"C","format":"{{value}}","min":"-40","max":"85","colors":["#00b500","#e6e600","#ca3838"],"x":518.2726898193359,"y":102.2727279663086,"wires":[]},{"id":"60f5d02a.341e5","type":"ui_gauge","z":"2e0dad9f.85f132","name":"temp 38-03-69","group":"600c3ee0.f4be3","order":1,"width":0,"height":0,"gtype":"gage","title":"temperature","label":"C","format":"{{value}}","min":"-40","max":"85","colors":["#00b500","#e6e600","#ca3838"],"x":520.2726898193359,"y":138.27276611328125,"wires":[]},{"id":"25fd73a7.d622ec","type":"ui_gauge","z":"2e0dad9f.85f132","name":"temp 60-05-4a","group":"b32e00c6.d7c1d","order":1,"width":0,"height":0,"gtype":"gage","title":"temperature","label":"C","format":"{{value}}","min":"-40","max":"85","colors":["#00b500","#e6e600","#ca3838"],"x":521.2726898193359,"y":171.27277374267578,"wires":[]},{"id":"888864fa.2414d8","type":"ui_switch","z":"2e0dad9f.85f132","name":"LED 58-f5-2b","label":"LED","group":"738e94b.6746f6c","order":0,"width":0,"height":0,"passthru":true,"topic":"00-17-0d-00-00-58-f5-2b","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":102.40908813476562,"y":316.0000534057617,"wires":[["dbd55b23.e7ebb8"]]},{"id":"fa3d5939.b22d48","type":"ui_switch","z":"2e0dad9f.85f132","name":"LED 38-04-25","label":"LED","group":"606c391f.b987d8","order":0,"width":0,"height":0,"passthru":true,"topic":"00-17-0d-00-00-38-04-25","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":103.27272033691406,"y":356.2727508544922,"wires":[["dbd55b23.e7ebb8"]]},{"id":"8ead9a2b.7f1e38","type":"ui_switch","z":"2e0dad9f.85f132","name":"LED 60-08-ba","label":"LED","group":"273f8bd5.76c3d4","order":0,"width":0,"height":0,"passthru":true,"topic":"00-17-0d-00-00-60-08-ba","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":104.27272033691406,"y":395.2727508544922,"wires":[["dbd55b23.e7ebb8"]]},{"id":"b256d372.2fd74","type":"ui_switch","z":"2e0dad9f.85f132","name":"LED 38-03-69","label":"LED","group":"600c3ee0.f4be3","order":0,"width":0,"height":0,"passthru":true,"topic":"00-17-0d-00-00-38-03-69","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":102.27272033691406,"y":435.2727508544922,"wires":[["dbd55b23.e7ebb8"]]},{"id":"ca84f4f6.262468","type":"ui_switch","z":"2e0dad9f.85f132","name":"LED 60-05-4a","label":"LED","group":"b32e00c6.d7c1d","order":0,"width":0,"height":0,"passthru":true,"topic":"00-17-0d-00-00-60-05-4a","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":107.27272033691406,"y":480.2727508544922,"wires":[["dbd55b23.e7ebb8"]]},{"id":"c9e1fc70.f5cce","type":"http request","z":"2e0dad9f.85f132","name":"","method":"PUT","ret":"txt","url":"","tls":"","x":505.4091033935547,"y":336.1818313598633,"wires":[["56c59ff0.218e1"]]},{"id":"dbd55b23.e7ebb8","type":"function","z":"2e0dad9f.85f132","name":"create request","func":"msg.url = \"http://127.0.0.1:8080/api/v1/oap/\"+msg.topic+\"/digital_out/INDICATOR_0\"\nmsg.payload = {\n \"value\": msg.payload===true?1:0,\n}\nreturn msg;","outputs":1,"noerr":0,"x":329.4090270996094,"y":333.9091262817383,"wires":[["c9e1fc70.f5cce"]]},{"id":"56c59ff0.218e1","type":"switch","z":"2e0dad9f.85f132","name":"","property":"statusCode","propertyType":"msg","rules":[{"t":"eq","v":"200","vt":"num"},{"t":"else"}],"checkall":"true","outputs":2,"x":304.40904235839844,"y":496.5454788208008,"wires":[["bfa6958f.444938"],["40208c1f.dc1414"]]},{"id":"f2fac085.05143","type":"ui_toast","z":"2e0dad9f.85f132","position":"top right","displayTime":"3","outputs":0,"ok":"OK","cancel":"","topic":"","name":"","x":599.4091033935547,"y":501.8182144165039,"wires":[]},{"id":"bfa6958f.444938","type":"change","z":"2e0dad9f.85f132","name":"success","rules":[{"t":"set","p":"payload","pt":"msg","to":"LED successfully set","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":434.40904235839844,"y":461.27274322509766,"wires":[["f2fac085.05143"]]},{"id":"40208c1f.dc1414","type":"change","z":"2e0dad9f.85f132","name":"fail","rules":[{"t":"set","p":"payload","pt":"msg","to":"ERROR when setting LED","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":430.272705078125,"y":524.2727355957031,"wires":[["f2fac085.05143"]]},{"id":"a855fd92.d2363","type":"comment","z":"2e0dad9f.85f132","name":"set LED","info":"","x":74.27272033691406,"y":266.2727355957031,"wires":[]},{"id":"738e94b.6746f6c","type":"ui_group","z":"","name":"00-17-0d-00-00-58-f5-2b","tab":"d1579ccd.92068","order":1,"disp":true,"width":"6"},{"id":"606c391f.b987d8","type":"ui_group","z":"","name":"00-17-0d-00-00-38-04-25","tab":"d1579ccd.92068","order":2,"disp":true,"width":"6"},{"id":"273f8bd5.76c3d4","type":"ui_group","z":"","name":"00-17-0d-00-00-60-08-ba","tab":"d1579ccd.92068","order":3,"disp":true,"width":"6"},{"id":"600c3ee0.f4be3","type":"ui_group","z":"","name":"00-17-0d-00-00-38-03-69","tab":"d1579ccd.92068","order":4,"disp":true,"width":"6"},{"id":"b32e00c6.d7c1d","type":"ui_group","z":"","name":"00-17-0d-00-00-60-05-4a","tab":"d1579ccd.92068","order":5,"disp":true,"width":"6"},{"id":"d1579ccd.92068","type":"ui_tab","z":"","name":"Motes","icon":"dashboard","order":1}]

To import the flow above in your Node-RED instance:

  • copy the string above (triple-click to select, then copy with Ctrl+C)
  • in your Node-RED editor, on the hamburger menu on the upper right, select "Import" > "Clipboard"
  • paste the string (Ctrl+V) and click "Import"
  • activate the flow by clicking on the "Deploy" button

What's Next?

We haven't scratched the surface of what the Node-RED Dashboard can do. There are countless other widgets you can add, in a way equivalent to what we did, including:

  • line charts

  • bar charts

  • donuts

  • drop-down menus

  • buttons

  • sliders

  • forms

  • etc.