#NR3V1: Dashboards

Application-Note: #NR3V1 : Dashboards

Related Documents:

  • Application-Note: #NR0V1 : Get Node-RED ready on my router
  • Application-Note: #NR1V1 : Hello World
  • https://nodered.org/docs/user-guide/
  • https://flows.nodered.org/node/node-red-dashboard

This application describes how to setup dashboards and the several visual elements that are available.

You can create your own dashboards in Node-RED to display live or historical data. Please checkout https://flows.nodered.org/node/node-red-dashboard for an introduction about the Node-RED dashboards. Especially the sections Layouts, Features, Widgets.

For this application-note we provide an Example Flow for Node-RED which displays a few possible widgets and a simulated value. Please consider that this application is running on the router and can be accessed via http or https://router-ip:1880/ui. You can access it also from outside through an Web2Go link from your mbCONNECT24 account.

Description 1 – Dashboard

This Dashboard displays widgets to visualize data and control setpoints. The values in this example are simulated and generated randomly. You can easily take this example and combine it with another application note where source data is coming from S7 plc for example.

The following picture shows the flow and gives an impression on how it is organized.

Description 2 - Node-RED Flow

The concept of this example is to generate a trigger every 5 seconds. This trigger is send to the function node "Random number" and these functions sending an random number to the dashboard nodes "Power". Besides this there is a flag "Bypass Turbine .." generated by an Input Dashboard node "Switch". This flag should enable/disable the random number generation. As you see, the trigger node and the switch node is connected to the random number function.

Description 3 - Trigger and Switch connected to function

Let's take a look deeper into trigger and switch:

Description 4 - Trigger setup

The trigger sends just a timestamp every 5 seconds.

The switch sends his value whenever it is switched. The node here sends additional the topic "bypass1".

Description 5 - Switch setup

So the msg.paylod is true or false and the msg.topic is "bypass1". We need this information then inside the function node "Random number".

Description 6 - function node random number

See the following code and explainations.

// this code inside the function node, will be processed when:
// 1. the trigger node sends a trigger every 5s
//  or
// 2. the switch is switched by the user

//First of all we need to declare and read a flow-public variable called "lBypass1".
//this is to store later on the position of the switch.
var lBypass1 = flow.get("lBypass1");

// the if will be processed only when msg.topic is "bypass1". That means when the event comes from the switch.
if (msg.topic == "bypass1" && msg.payload == "true" ) {
  lBypass1 = 1;
if (msg.topic == "bypass1" && msg.payload == "false" ) {
  lBypass1 = 0;

//if lBypass1 is false, we calculate the number, otherwise the outgoing value (payload) is 0
if (lBypass1 === 0) {
   rnd = Math.floor (Math.random() * (50 -30) +30);
} else {
    rnd = 0;
msg.payload = rnd;

//don't forget to store the value for usage in the next event.

return msg;

See below the Flow as a file to Import in your application.