Tutorial: Node-RED dashboards – creating your own UI widget

Creating your own UI widget for a Node-RED dashboard

Node-RED’s dashboard nodes provide a comprehensive set of UI components for building basic dashboards suitable for the Internet of Things (IoT) – offering graphs, gauges, basic text as well as sliders and inputs. However, there will always be situations when you need something custom. The template node is the solution and in this tutorial we’ll show you a quick example of using it to create your own UI widget.

If you want a general introduction to the Node-RED dashboard or to UI techniques for Node-RED, then check out these resources which are part of our lecture series:

The template node

The ui template node is a generic node that takes valid html and Angular/Angular-Material directives and can be used to create a dynamic user interface element.

In this example, we’ll create a simple dashboard element that displays some fake random data mimicking data from a factory machine sensor.

We want our UI element to look as shown on the right of the screen shot below (you can see how to create the 2 line chart in this tutorial)

screen-shot-2016-12-07-at-7-31-32-am

As you can see – our UI widget is named “and more” and has four data columns. These data column show the fake factory machine data and are dynamically updated as new data arrives.

We’ll set up a flow as shown below – the function node will generate the fake data, and the UI template node, which we name Machine status, will format and present the data in the table shown above.

screen-shot-2016-12-07-at-7-21-49-am

If we take a look inside the function node, you can see we use the usual Math.random function to generate some fake data. However, instead of just passing this data in as payload, we insert the data into a JSON structure called factory. Factory has two elements -machine00 and machine01 which in turn have four elements min, max, failProb and name.

screen-shot-2016-12-07-at-7-22-44-am

Once we have set up our function node to create the fake data. We now need to create a UI template node and set it up to display on our dashboard. As you can see below, we assign it to the Home dashboard and use a new group name “and more”. (Details on setting up dashboard groups can be found here)

screen-shot-2016-12-07-at-7-23-09-am

Let’s take a look in more detail at the HTML used to display the data we generate in the function node.

The first <div> sets out the labels for the columns defining them using the <span flex> tag so they will fit the space nicely.

<div layout=”row” layout-align=”start center”>
<span flex>RPM Min</span>
<span flex>RPM Max</span>
<span flex>Failure Prob</span>
<span flex>Machine type</span>
</div>
<div layout=”row” layout-align=”start center” ng-repeat=”machine in msg.payload.factory”>
<span flex style=”color: green”>{{machine.min}}</span>
<span flex style=”color: red”>{{machine.max}}</span>
<span flex style=”color: black”>{{machine.failProb}}%</span>
<span flex style=”color: black”>{{machine.name}}</span>
</div>

The second <div> then uses the ng-repeat command to iterate through the JSON structure in payload and displaying the data in the columns. It works by looking for each element named machine in the factory element. Remember, we named each set of data associated with a machine, machine00, machine01 – so we iterate through those.

For each machine element, we use the sub-elements min, max, failProb and name to fill the data fields. Note how we also use a style directive to set the colour for the text. The result is shown below.

screen-shot-2016-12-07-at-7-22-08-am

This is a simple use of the template node, but it should be enough to get you started. However, the template node is much more sophisticated, it can be used to dynamically set styles (e.g. colours), show images, create clickable elements that generate messages etc – so once you master the basics, you can go on to create some sophisticated UI widgets for your own dashboards.

Node-RED: Lecture 7 – Dashboards and UI techniques for Node-RED

In this lecture you will take a look at a few techniques to allow you to visualize data passing through flows. We’ll focus on three approaches, the use of a third party dashboard tool, FreeBoard (Part 1), using the default Dashboard UI nodes provided by default in Node-RED (Part 2) and a general technique using a standard JavaScript charting tool (Part 3).

By the end of the lecture you will have enough knowledge to decide which approach is best for your specific needs and how to quickly get a visualization of your data up in a web browser.

We use a cloud hosted version of Node-RED for these lectures called FRED. Sign up for a free account at FRED.sensetecnic.com. Examples in the early lectures will work with other installations of Node-RED, later lectures use nodes you will need to install yourself if you don’t use FRED.

Example 7.1 Using the FreeBoard dashboarding service

This is a simple example of reading and visualizing data using the FreeBoard node from a Node-RED flow. We’ll be using the Cloud based FRED service as our Node-RED engine and visualizing data from a web weather service . This guide will show you how to:

  • set up an openweathermap node in FRED using the built in node
  • display the data from the openweathermap node using the FreeBoard display node

To begin, head over to openweathermap.org and register for a free account. When you register/login you will be able to access your API Key. You will need your own API key which will look similar to the one below – you will use your own key in Node RED so make a copy.

 

01

Now, head over to FRED and create a new flow by starting with an openweathermap node (you will find this node under “weather”, or by using “filter nodes” to search at the top of the left pane) and connecting it to a debug node like this:

02

 

Now, double click on the openweathermap node to configure it. Enter your API Key from OpenWeatherMap, configure a location you’re interested in, and name your Node:

 

03

Click on Deploy on the top right corner of the Node-RED UI. You will see on the right pane, under “debug” the data that OpenWeatherMap provides us with a variety of information about the location including temperature (in C and K), humidity, windspeed etc:

 

04

As you can see, the data is already in JSON format; so we can use any of the values very easily. Let’s build a dashboard to visualize our data using the  node that allows you to create visualizations very easily. Find the freeboard node in the left pane by either browsing through the nodes or searching for it using “filter nodes”. Add it to the flow. Double click on it to give it a name, like so.

05

 

Click on Deploy. This will prompt the openweathermap to get data and send it to both the debug and freeboard nodes. The freeboard node is quite smart and will do its best to parse the data you send it and figure out how to make it available using the FreeBoard UI. We’ll look at that in a moment. If you inspect the “info” tab in the right panel you will see more information about the “freeboard” node:

06

 

Visit the link provided in the info panel, or at

https://fred.sensetecnic.com/red/freeboard/

This will open a new tab in your browser:

07

This tab will allow you to create visualization in FreeBoards, save them and load them. Let’s create a visualization of our weather data. We first need to add a datasource to our freeboard. Click on “Add” under “DATASOURCES”. Under “type” select the name of the “freeboard” node we configured above. In our case we named it “freeboard”. This will allow us to access ANY data we connect to the “freeboard” node in Node RED.

 

08

 

We will now add a Pane. Click on “ADD PANE”, this will add a new empty pane:

09

 

Now, we will add a “Widget”, click on the “+” (plus) sign in the new pane. Select “Gauge”. Under “DATASOURCE” select the “freeboard” node and select “tempc”. As you can see, all of the different data fields in the openweathermap JSON structure are available for you to visualize. FreeBoard essentially takes the JSON structure you pass it and breaks out any fields. If you can’t see this in the dropdown, go back to Node RED and click on “Deploy” again. So that the “freeboard” node can get some data and store the data it has received. Your configuration should look something like this:

 

10

 

Click on OK. Which will build your widget and add it to the pane you created!

11

 

To save your dashboard click on “save”, and select [pretty] or [minify] which will save it in FRED and will show you the URL to access the Dashboard. You need to save the URL used to access the dashboard, e.g. as a dashboard. From now on you can access your saved dashboard by accessing the saved url, which will be similar to the one below.

https://fred.sensetecnic.com/red/freeboard/#start-16091

Part 2  Part 3

 


About Sense TecnicSense Tecnic Systems Inc have been building IoT applications and services since 2010. We provide these lectures and FRED, cloud hosted Node-RED as a service to the community. We also offer a commercial version to our customers, as well as professional services. Learn more.


© Lea, Blackstock, Calderon

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.