Overview

Skill Level: Any Skill Level

Beginner

Ingredients

IBM Bluemix Account

Step-by-step

  1. Introduction

    This tutorial wil help you in creating dashboard for IoT devices data using node red. You can register and simulate devices by following steps in this recipe. After simulating devices you can subscribe to events using node red IBM Iot node.

    Create Node-RED application

    In the Bluemix catalog, select the Node-RED Starter under the Boilerplate category.
    Create a new instance, giving your application a unique name. After a few minutes you will be taken to your applications Overview page.

    Include UI and aggregator nodes into Node-RED

    Create a Git repository that is associated with this Node-RED application.

    Click on the repository link and then click on Edit code button.

    Click on the package.json file and add the following line to include UI and aggregator nodes.

    "node-red-contrib-ui":"1.2.19"

    "node-red-contrib-aggregator":"1.0.4"

    Below is the sample screenshot showcasing the code changes,

    Click File -> Save to save the changes,
    Click on Git icon, provide a commit message and click Commit button to commit the changes

    Click Push button to push the changes to the main branch.

  2. Node red Application Dashboard

    Access the Node-RED editor by opening http://<your-application-name>.mybluemix.net/red.

    Add an ibmiot input node and configure it using API key and token credentials. Set the Device Type field to match the type you used to register your device with. Leave the Device Id and Event fields set to all.

    Drag-n-Drop a function node, double click and paste the following code in the body to extract the pressure value from the payload.

     return {payload:msg.payload.d.pressure};

    Connect the output of ibmiot node to the input of function node.

    You will see following UI nodes on the left side after adding the package:

    Similarly aggregator node as shown below:

    Attach the gauge node to the function node to observe the extracted pressure on dashboard.

    Configure gauge node as shown below:

    Similalry follow the above steps to observe temperature on dashboard.

    Here is the flow:

    Also you can use aggregator node to observe min, max and average of temperature for a specified duration.

    Here is the flow:

    You can use change node to convert String to number and then passing it to aggregator node.

    Here is the configuration of aggregator node:

    Similarly add aggregator node to get a max value for last 5 mins.

    Here is the node red flow json:

     [{"id":"78c11497.7edcec","type":"ibmiot in","z":"a2145799.eafe28","authentication":"apiKey","apiKey":"8b31c008.1eb4b","inputType":"evt","deviceId":"","applicationId":"","deviceType":"+","eventType":"+","commandType":"","format":"json","name":"IBM IoT","service":"registered","allDevices":true,"allApplications":"","allDeviceTypes":true,"allEvents":true,"allCommands":"","allFormats":"","x":85,"y":107,"wires":[["d3907fe6.59bc9","3bd8ba73.3dcd36"]]},{"id":"795271f9.44eec","type":"aggregator","z":"a2145799.eafe28","name":"Min Temp","topic":"","intervalCount":"5","intervalUnits":"m","submitIncompleteInterval":true,"aggregationType":"min","x":229,"y":349,"wires":[["22aae844.7f35c8"]]},{"id":"d3907fe6.59bc9","type":"function","z":"a2145799.eafe28","name":"Temp Payload","func":"nreturn {payload:msg.payload.d.temp};","outputs":1,"noerr":0,"x":184,"y":199,"wires":[["301d41ca.ac4dae","d0bbd428.7e2be8"]]},{"id":"301d41ca.ac4dae","type":"ui_gauge","z":"a2145799.eafe28","tab":"2d254f2c.39637","name":"Temp Gauge","group":"Temperature","order":1,"format":"{{value}}","min":"-50","max":"150","x":312,"y":138,"wires":[]},{"id":"7b6282a7.76944c","type":"ui_gauge","z":"a2145799.eafe28","tab":"2d254f2c.39637","name":"Pressure Gauge","group":"Pressure","order":"2","format":"{{value}}","min":"-100","max":"200","x":321,"y":91,"wires":[]},{"id":"3bd8ba73.3dcd36","type":"function","z":"a2145799.eafe28","name":"Pressure payload","func":"nreturn {payload:msg.payload.d.pressure};","outputs":1,"noerr":0,"x":196,"y":24,"wires":[["7b6282a7.76944c"]]},{"id":"22aae844.7f35c8","type":"ui_gauge","z":"a2145799.eafe28","tab":"2d254f2c.39637","name":"Min Temp Gauge","group":"Min Temp(Last 5 mins)","order":"2","format":"{{value}}","min":"-100","max":"200","x":354,"y":421,"wires":[]},{"id":"76c9dd4a.fc11d4","type":"aggregator","z":"a2145799.eafe28","name":"Max Temp","topic":"","intervalCount":"5","intervalUnits":"m","submitIncompleteInterval":false,"aggregationType":"max","x":231,"y":478,"wires":[["64f26ea1.e73ab"]]},{"id":"64f26ea1.e73ab","type":"ui_gauge","z":"a2145799.eafe28","tab":"2d254f2c.39637","name":"Max temp Gauge","group":"Max Temp(Last 5 mins)","order":"2","format":"{{value}}","min":"-100","max":"200","x":354,"y":554,"wires":[]},{"id":"d0bbd428.7e2be8","type":"change","z":"a2145799.eafe28","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":232.5,"y":269,"wires":[["795271f9.44eec","76c9dd4a.fc11d4"]]},{"id":"8b31c008.1eb4b","type":"ibmiot","z":"a2145799.eafe28","name":""},{"id":"2d254f2c.39637","type":"ui_tab","z":"a2145799.eafe28","name":"IoT Dashboard","icon":"dashboard","order":"1"}]

  3. Dashboard

    Access the dashboard by opening http://<your-application-name>.mybluemix.net/ui.

    Here is the Dashboard snapshot:

    This tutorial briefly covers how to create dashboard for IoT devices data using node red.

    You can add link on the dashboard using link node, add charts for device data and add

    other functionalities with different nodes.

1 comment on"UI Dashboard for IoT Device data using node red"

  1. Kiran Shashi January 09, 2017

    I think this has to be updated to newer library – Not sure if the Ui – library are still supported.

    https://github.com/node-red/node-red-dashboard

Join The Discussion