Versions Compared

Old Version 9

changes.mady.by.user Thomas Watteyne

Saved on

compared with

New Version Current

changes.mady.by.user Thomas Watteyne

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info
Excerpt

The Node-RED Dashboard is a quick and easy way to visualize your data and send commands into your SmartMesh IP network.

Table of Contents

Note

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 gaugegauges, line charts, switches, etc. right on the computer that runs Node-RED!

You edit your dashboard by dragging and dropping Node-RED nodes, it . 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

Option 1: [simplest] directly from the browser

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

Installation Option 2: using npm

You can also install the Node-RED Dashboard using the npm utility, exactly like you installed Node-RED itself:

Code BlockC:\Users\twatteyne>cd .node-red C:\Users\twatteyne\.node-red>npm i node-red-dashboard

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.

Tip

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
Note

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


Info
titleJSON version of the flow
Code Block
[{"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}]

Include Page
_inc_node-red_import_flow
_inc_node-red_import_flow

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.