Smart Cities - Data Visualisation using the Node-RED dashboard

From Sensors in Schools
Jump to navigation Jump to search

Overview

In this lesson we are going to retrieve sensor data using Dweet.io, process the data and then graph the data using the inbuilt Dashboard in Node-RED on the Raspberry Pi.

See example below of a Water Level Dashboard from six environmental sensors. The sensors have been placed in different waterbodies in the City of Whittlesea. The Dashboard was created using Node-RED.

Learning Objectives

  • Learn how to get sensors data from Dweet.io using Node-RED
  • Learn how to analyse and process the data using the Function node
  • Learn how to graph sensor data using the Chart node

Creating flow in Node-RED

  • Start Node-RED by clicking on the Node-RED icon in the Start > Programming
  • Wait for 10 seconds for Node-RED to boot up
  • Open a Web Browser
  • Enter the URL localhost:1880


  • Create a new Tab by clicking on the plus (+) symbol

  • Double click on the Tab name to edit the default name.
  • Change the name to Botanica-lake
  • Click on Done to commit the changes.

  • Drag in an Inject node from the Pallet.
  • Note that the name of Inject node changes to Timestamp when you drag it into onto the Workspace.

Installing new Nodes in Node-RED

  • Additional nodes can be installed in Node-RED using the Manage Pallet feature.
  • On the top left of the screen you will see three (3) horizontal lines.
  • Click on this button for a drop down menu
  • Select Manage Pallet

  • Click on the Install Tab

  • In the search bar enter simpletime
  • This will search for a new node library of the same name.
  • If this library is already installed it will show as installed
  • Otherwise click Install and the library will be added to Node-RED.
  • Installation takes approximately 20 seconds.
  • Click on Close to return to the Workspace.

  • In the Pallet enter simpletime to search for the simpletime node.
  • Drag the simpletime node onto the Workspace
  • Connect the inject and the simpletime nodes together.

HTTP Request node for Dweet.io

  • Add a HTTP Request node and a Debug node to your flow.

  • At the top left in the right Sidebar click on the Debug button.
  • Clear the debug window by clicking on the Rubbish bin icon.

  • Click on the Deploy button.
  • Then click on the tab on the left hand side of the Inject node.
  • Remember that the Inject node has been renamed as Timestamp
  • This should start the flow.
  • The output of the flow will appear in the Debug window in the Sidebar.
  • Here is a key to interpreting the data:
    • B - Battery voltage. Nominal voltage is 3.7V to 4.1V.
    • P - Pressure reading from a pressure sensor. Readings presented as either water depth (cm) or as milli Volts (mV)
    • EC - Electrical conductivity. A measure of how salty the water is. Units are mS. Values above 1000mS indicate salty water.
    • iT - internal temperature within sensor housing.
    • iH - internal humidity within sensor housing.
    • S - sleep time. These sensor wake on the hour every hour. So normally they sleep for 55-59 minutes. If batteries voltages are low they may sleep longer.

Processing data using the Function node

  • Search for the function node in the Node-RED pallet and drag it onto the Workspace
  • Add a Debug node and connect the nodes as shown.

  • Edit the Function node by double clicking on the node.
  • Enter the following code in the function node edit window.
  • This code will extract the Battery data B from the returned JSON object.
    • msg.payload - is the payload
    • with[0] - is the next level down
    • [0] - with[] is an array and we are extracting the first element [0]
    • content - is the next level down
    • B - is the final variable element
  • Although this is a bit confusing JSON formatting is a common and easy way to transfer data between machines.

  • Deploy the flow.
  • Click on the Inject node tab to start your flow.
  • The output from the Debug nodes will appear in the Debug Sidebar.
  • You should see two (2) outputs because we have two Debug nodes.
    • Debug (1) will show the full JSON output from the HTTP request node
    • Debug (2) will show the Battery data

  • Congratulations. Now you can extract data from a Dweet

Dashboard Groups and Tabs in Node-RED

  • It is easy to create informative Dashboard in Node-RED
  • In this example the water level of different environmental sensors are shown together.
  • Dashboard are arranged using Groups
    • a Group of Dashboard tools (charts, gauges, text).
    • Think of a group containing all display tools arranged in a vertical column
    • Different groups are stack together side by side as columns.

  • Dashboards are also arranged using Tabs
  • Tabs are equivalent to different web pages.
  • Tabs are located on the left hand side of the Dashboard user interface.

  • From the Hamburger menu (three horizontal lines) select Manage Pallet.
  • Click on Install and search for the node-red-dashboard library.
  • Close the window.
  • A popup notification will appear once the library has been installed.

  • Once the Dashboard is installed a new set of Dashboard nodes will appear in the pallet menu on the left of screen.

Adding a Chart to the Node-RED Dashboard

  • Drag a Chart node from the Pallet onto the Workspace.
  • Wire up the Chart to the Function node as shown.
  • Note that the Chart displays a red triangle indicating that it needs to be configured before it will work.

  • Double click on the Chart node.
  • This opens up the Edit Chart node window.
  • Click on the pencil edit icon to the right of the Group field so that we can Add new ui_group
  • Remember that the Group will be a vertical column containing our Dashboard charts.

  • In the Edit Chart node > Add new dashboard group config node window click on the pencil edit icon to the right of the Tab field.

  • In the Edit chart node > Add new dashboard group config node > Add new dashboard tab config node window.
  • Change Tab Name to Battery.
  • We will place all the battery data from sensors on the one Tab.
  • Click on Add when finished.

  • Back in the Edit chart node > Add new dashboard group config node.
  • Change the Name of the Group to Group 1 Column 1
  • This is to remind us that the all the Charts belonging to this group will sit within a single column.
  • Then click on Add

  • In the Edit chart node window change the following details:
    • Label - Botanica Park Battery PS-1
    • X-axis - Change duration displayed to 1 week
    • Name - scroll down and change name to Botanica Park Battery PS-1
  • The click on Done to commit changes.

  • In the main Workspace click on Deploy

  • Click on the Inject node two times to send some battery data to the Chart node.

Node-RED Dashboard

  • To view the Node-RED Dashboard we need to open up another web page in the Raspberry Pi web browser.
  • Open a new tab.
  • Enter localhost:1880/ui
  • You should see a single chart as shown below.
  • Use the tabs in the browser to change from the Workspace to the Dashboard.

Publishing data to two Charts

  • It is possible to send data from a function node to two charts.
  • Double click on the function node.
  • Click on the SetupTab
  • Change the number of Outputs from 1 to 2

  • Click back on the On Message tab.
  • Modify the Javascript code to the following.
  • Click on Done.

  • Add a second Chart to the Workspace.
  • Connect the second Chart to the second output on the function node.

  • Double click on the Chart node.
  • Configure the Chart node with the following settings.
  • In the Edit chart node window select Add new ui_group and click on the pencil icon to the right.

  • In the Edit chart node > Add new dashboard group config node
  • From the Tab option select Add new ui_tab option and click on the pencil icon to the right.

  • In the window Edit chart node > Add new dashboard group config node > Add new dashboard tab config node
  • Enter the Name water level.
  • The click 'Add
  • Now we have two Tabs in the Dashboard
    • Tab 1 will display Battery charts
    • Tab 2 will display Water Level charts

  • In the Edit chart node > Add new dashboard group config node
  • Change the Name to Group 1 Column 1
  • Remember that this is for the Water Level tab in the Dashboard.
  • Click on Add

  • Finally, in the Edit chart window update the following details in the Chart to the following.
    • Label - Botanica Park Water Level PS-1
    • x-axis - duration to 1 week
    • Name - to Botanica Park Water Level PS-1
  • Then click Done and Deploy changes.

  • Click on the Inject node twice to create some data.
  • In the Node-RED dashboard you will see two Tabs.
  • By clicking each tab in turn you can view Battery or Water level charts.

Adding data from different sensors to the Dashboard

  • More sensor data can be added.
  • From the Workbench click on the plus symbol to Add flow

  • Repeat the same process for other sensors.
  • Include the following sensors using the following dweet APIs:
    • botanica-park-lake-bundoora
    • janefield-wetland-bundoora
    • laurimar-football-wetland-doreen
    • carlingford-park-lake
    • painted-hills-wetland-doreen
    • laurimar-boulevard-wetland-doreen
  • Don't forget to separate out the Battery (B) and the Water level (P) data.

Dashboard Challenge

Try to recreate the re-create the Water Level and Battery Dashboards using two Tabs below in Node-RED. To generate chart data you need to keep your Raspberry Pi for one week.

Water level Dashboard

Battery Dashboard

Saving data from sensors using Node-RED

Retrieved from "http://www.waterwaysinwhittlesea.org/index.php?title=Smart_Cities_-_Data_Visualisation_using_the_Node-RED_dashboard&oldid=4204"