Node-RED User Interface – Dashboards


Node-RED can easily display interactive information to the user or operator using a web browser on your phone, tablet, or computer. Any device that has access to the network in which node-red is running.
We will be installing the node-red-dashboard palette. This allows us to create a live data dashboard user interface. (UI)
Node-RED User Interface - Dashboards
The information from our Solo process temperature controller will be displayed. Setpoint information can be set either by the dashboard UI or the Click analog input signal. This will be selected via the user interface. Let’s get started using Node-RED Dashboards.

In this series we started using Node-RED in some of the following ways:
Installing the Windows SoftwareVideo
Modbus CommunicationVideo
We will continue with the following:
Display Information on a user interface, HMI, or dashboard
Log information into a database
View information in the database through spreadsheets such as Excel.

Previously we installed Node-RED Modbus Palette on our windows 10 computer. We then communicated Modbus RTU (serial) and Modbus TCP (Ethernet) to a Solo Process Temperature Controller and a Click PLC. I would recommend that you review the following Node-RED Essentials Videos (Basics of the Editor) before continuing. This will allow you to become familiar with the editor.
Watch the video below to see the operation of the Node-RED Dashboard.

Installing node-red-dashboard Palette
Node-RED Dashboard User Interface UI

At the command prompt type node-red. This will start the program. Our previous Modbus communication program will load.
The editor is browser-based. Open your browser and type http://localhost:1880/
HMI Flow
On the main header click the menu three lines (pancake icon) and select manage palette.
Under the user settings menu, select the palette on the left-hand side. This will show you the current nodes that you have installed. We currently have only the default nodes installed.
Select the install tab.
Node-RED User Interface - Dashboards
Type in ‘dashboard’ in the search field and press enter. Select the install button on the node-red-dashboard palette.
Node-RED User Interface - Dashboards
On the pop-up window select install.
Node-RED User Interface - Dashboards
Our new dashboard UI will now be installed.
Node-RED User Interface - Dashboards
The Node-Red Dashboard UI palette is now installed. We can now select the close button to close the user settings window.
Node-RED User Interface - Dashboards
The palette on the editor will now contain the nodes that we will need for creating a user interface dashboard. These nodes contain a lighter color (inputs) and a darker color (outputs) for our user interface.

Node-RED Variable Scopes

Node-RED has three types of variable scopes. Context, Flow, and Global objects are used for variable scopes.
Context object will store data for a node
Flow object will store data for a flow
The global object will store data for the canvas

Flow Modifications for Dashboard
Set PV ans SV Variables

We will modify the function node after the Modbus RTU read of the Solo process temperature controller.
HMI Flow

var values = msg.payload.data;
msg.payload = { 
'value': values, 
'fc': 16, 
'unitid': 1, 
'address': 0, 
'quantity': 2 
} 
flow.set("PV", msg.payload.value[0]);
flow.set("SV", msg.payload.value[1]);
return msg;

The present and set values will now be available anywhere in the flow.

Node-RED Dashboard Chart

A chart output and function will be used to display the present and set values over a time period.
HMI Flow
The function node before the chart will set up our variables.
Node-RED User Interface - Dashboards
The outputs are set for two. Topics are used to determine the chart items. Values are converted to afloat with one decimal. (Divide by 10)
Node-RED User Interface - Dashboards
The chart properties will set the x-axis to 120 seconds. This is so we can quickly see our parameters as they change on the chart. The first two colors in the series will determine the line colors. Select the group edit icon.
Node-RED User Interface - Dashboards
The Name will be what appears on the group of UI items. The tab is the name of the overall page.

Node-RED Dashboard Text

The Text node of our dashboard will be used to display the current present and set values of the Solo.
HMI Flow
A function node will be used in front of the text node to set up the values to be displayed.

msg = { payload: parseFloat(flow.get("PV")/10) };
return msg;

Node-RED User Interface - Dashboards
The properties of the text node will be to label it PV and center the layout.
HMI Flow
The value for the SV will be retrieved from the flow variable in the function node.

msg ={ payload: parseFloat(flow.get("SV")/10) };
return msg;

Node-RED User Interface - Dashboards
The SV will be displayed with the text node. The label will be SV and the layout will be centered

Node-RED Dashboard Switch

Once we have read the SV from the Click PLC we will insert a dashboard switch. This switch will determine if the SV is coming from the Click PLC (Default) or locally from a dashboard slider switch.
HMI Flow
Here are the dashboard switch properties.
Node-RED User Interface - Dashboards
The function node will now take the switch information and place this in a flow variable called a switch.

flow.set("Switch", msg.payload);
return;
Node-RED Dashboard Slider

We will use the slider switch to set the SV of the Solo locally.
HMI Flow
The slider will be labeled SV Local Control and be scaled from 0 to 1000 in single steps. This scaled value will actually relate from 0.0 to 100.0 in degrees C on our temperature controller.
Node-RED User Interface - Dashboards
The function block will write the variable so we can use it later in the flow.

flow.set("Slider", msg.payload);
return msg;
Selection of Local and Click SV

We will modify the function nod just before the Modbus RTU write to determine the information that will be set for the SV value.
HMI Flow

var values = [msg.payload.data[0]];
if (flow.get("Switch"))
{
values = [flow.get("Slider")]; 
}
msg.payload = { 
'value': values, 
'fc': 16, 
'unitid': 1, 
'address': 4097, 
'quantity': 1 
} 
return msg;
Node-RED Dashboard Layout

On the sidebar, select the arrow down to call up the dashboard.
Node-RED User Interface - Dashboards
The first tab on the dashboard is the layout.
Node-RED User Interface - Dashboards
On the layout, you can arrange the order of the controls on the user interface. Select the site tab.
Node-RED User Interface - Dashboards
The site tab is where you can adjust the size of the UI and change some of the default parameters of the dashboard. Select the theme tab.
HMI Flow
On the style, we changed the light (default) to dark.

Running Node-RED Dashboard

Run the user interface in any browser by using the IP address followed by a backslash and UI.
Example: http://localhost:1880/UI
HMI Flow

Watch the video below to see the Node-RED Dashboard user interface monitor and control the Solo and Click controllers.

This series will continue with:
Logging information into a database
View information in the database through spreadsheets such as Excel.

Download the Click Program and Flow here.

Node-RED Links
Node-RED Organization Home Page
Getting Started – Run Locally
Node-RED running on Windows (Run at Startup)
Securing Node-RED
Node-RED Essentials Videos (Basics of the Editor)

Learn JavaScript Free
w3schools JavaScript Tutorial
learn-js.org
Node-Red JavaScript Primer

Modbus
Node-RED Modbus TCP and Serial

Dashboard – HMI
Node-RED Dashboard
Node-RED Dashboard extra nodes

SQL Database
Node-RED SQL Database
Node-RED SQL Plus – Execute queries and stored procedures

Modbus Learning Links:
Simply Modbus Frequently Asked Questions
Modbus TCP/IP Overview – Real-Time Automation
All You Need to Know About Modbus RTU – Video

Next time we will Log information into a database using Node-RED.

Watch on YouTube: Node-RED User Interface – Dashboards

If you have any questions or need further information please contact me.
Thank you,
Garry

If you’re like most of my readers, you’re committed to learning about technology. Numbering systems used in PLCs are not difficult to learn and understand. We will walk through the numbering systems used in PLCs. This includes Bits, Decimal, Hexadecimal, ASCII, and Floating Point. To get this free article, subscribe to my free email newsletter.

Use the information to inform other people how numbering systems work. Sign up now. Arduino Uno Super Starter Kit Buzzers The ‘Robust Data Logging for Free’ eBook is also available as a free download. The link is included when you subscribe to ACC Automation.

2 thoughts on “Node-RED User Interface – Dashboards”

Leave a Comment