node-red gateway manual 1 edition - kgs · node-red and the iot when the ibm folks created...

28
Node-Red Gateway Manual 1 Edition ©Copyright 1986 - 2018 KGS Systemer as 1

Upload: others

Post on 03-Oct-2020

12 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

1

Page 2: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

2

Table of contents

Introduction ................................................................................................................................................................. 4

IoT Gateway controllers .......................................................................................................................................... 4

The History of Node-RED ....................................................................................................................................... 5

Node-RED and the IoT ............................................................................................................................................ 5

Geting started ............................................................................................................................................................. 6

Start Node-Red ....................................................................................................................................................... 6

Login with local user acoont ................................................................................................................................ 6

Working from remote PC ..................................................................................................................................... 6

Node-Red user interface ......................................................................................................................................... 7

Connect nodes together .......................................................................................................................................... 8

Key Concepts ......................................................................................................................................................... 8

Flows ...................................................................................................................................................................... 8

Messages ............................................................................................................................................................... 8

Standard Nodes ......................................................................................................................................................... 9

Function Nodes ....................................................................................................................................................... 9

Writing Function Nodes ....................................................................................................................................... 9

Creating and returning a new message in a function node ................................................................................ 10

Creating and returning multiple messages ......................................................................................................... 10

Array messages ................................................................................................................................................ 11

Object message ................................................................................................................................................ 12

Object message with arrays .............................................................................................................................. 12

Convert XML and JSON to Javascript objects ................................................................................................... 13

Extract property values from objects .................................................................................................................. 14

Node-Red Dashboard nodes Versjon 2.7.0 ............................................................................................................ 15

Create Tabs .......................................................................................................................................................... 16

Dashboard input nodes ......................................................................................................................................... 18

Button ................................................................................................................................................................ 18

Dropdown (list of choice) ................................................................................................................................... 19

Switch ................................................................................................................................................................ 20

Slider ................................................................................................................................................................. 21

Numeric field ..................................................................................................................................................... 21

Text field ............................................................................................................................................................ 22

Page 3: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

3

Text ................................................................................................................................................................... 22

email.................................................................................................................................................................. 22

Password .......................................................................................................................................................... 22

Telephone entery .............................................................................................................................................. 22

Color picker ....................................................................................................................................................... 22

Time picker ........................................................................................................................................................ 22

Week picker ....................................................................................................................................................... 22

Month picker ...................................................................................................................................................... 22

Form .................................................................................................................................................................. 23

Dashboard output nodes ....................................................................................................................................... 24

Text ....................................................................................................................................................................... 24

Gauge ................................................................................................................................................................... 24

Notification node ................................................................................................................................................... 25

Chart node ............................................................................................................................................................ 25

Bonus: create an event log ................................................................................................................................... 26

References ............................................................................................................................................................... 28

Page 4: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

4

Introduction

Node-RED is a powerful tool for building internet of things (IoT) applications focusing on simplifying "wiring together"

of code blocks to perform tasks.

Node-Red uses a visual programming approach that allows developers to connect predefined code blocks known as

"nodes" together to perform a task.

The connected nodes, usually a combination of input nodes, handle nodes and output nodes, when connected,

constitute a "flow".

IoT Gateway controllers

Our IIoT Gateway controllers are configured with Node-Red, in addition to that, they are slightly different in relation

to which model. The most powerful comes with a fully configured and tested MySQL database that is ready for use.

Sensor to web Do you have sensor data and want to show it on the internet, then it can be done in a short period of

time. Finished web interface nodes provide you with simple text, graphical view or chart. Configured in minutes and

ready for use.

Sharing data You can easily share data between our IoT Gateway controllers, Web servers or other online services

such as thingsboard.io, freeboard.io, Microsoft Azure, or just save directly to a DropBox account that you share.

Remember if data is shared on open-ended online solutions, these are visible to everyone, so do not share sensitive

information!

Large protocol support Our IoT Gateway controllers complete Modbus-TCP, Modbus-RTU, MQTT, REST, OPCUA

support, and support for multiple protocols.

Page 5: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

5

The History of Node-RED

As the examples in the previous section have shown, Node-RED is a powerful tool for building IoT applications and

services. Its genesis was triggered exactly by this need to rapidly prototype IoT applications and Node-RED was

created as an open source project by the IBM Emerging Technologies group, in particular by two researchers, Nick

O’Leary and Dave Conway-Jones. They created Node-RED initially as a tool for themselves as they were working

on IoT projects and were “looking for a way to simplify the process of hooking together systems and sensors when

building proof-of-concept technologies for customers.”

An initial version of Node-RED was released as an open source project in late 2013 and built up a small but active

user and developer group during 2014. At the time of writing, Node-RED is still an emerging technology, but has

already seen significant adoption by makers, experimentalists and a number of large and small companies

experimenting with using it for their needs.

Today there is a vibrant user and developer community, with a core group working on the Node-RED code itself and

most developers contributing nodes or flows to the flow library. You can check out the mailing list and github

repositories using the links provided in Appendix A or just google them.

Node-RED and the IoT

When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices

to processing and processing to devices. As a tool for rapid application development for the IoT, Node-RED is both

powerful and flexible. Its power comes from a combination of two factors:

Node-RED is an example of a flow-based programming model – messages representing events flow between

nodes, triggering processing that results in output. The flow-based programming model maps well to typical IoT

applications which are characterised by real-world events that trigger some sort of processing which in turn results in

real-world actions. Node-RED packages these events as messages which offer a simple and uniform model for

events as they flow between nodes that make up the flows.

The set of built-in nodes is the second part of the Node-RED story. By building a set of powerful input and output

nodes, each of which hides much of the complexity of interacting with the real world, Node-RED offers developers

powerful building blocks to allow them to quickly put together flows that accomplish a lot, without having to worry

about the programming details.

These two factors make Node-RED a powerful tool for IoT application development. When combined with the

flexibility to create and use nodes such as the function node, which allows the developer to quickly write arbitrary

JavaScript, plus the Node-RED community, who are constantly creating and sharing new nodes, Node-RED is likely

to be one of the main tools in the IoT developers toolbox.

Page 6: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

6

Geting started

Start Node-Red

Login with local user acoont

Default password and username and password is unoroot:4520

Start Node-Red user interface with double clicking on the Node-Red icon on the desktop

Login to Node-Red

Default password and username and password is root:00000000

Working from remote PC

Connection from Remote PC, From your web-browser go to http: // Gateway-IP: 1880

Default password and username and password is root:00000000

Page 7: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

7

Node-Red user interface

Below you will see the Node-Red user interface.

On the left you have all your nodes. A node is a bulding block with codes that you can use in you flow (Program).

You can wire nodes tougeter to make things happend

In the middle you have Flows. you can have many flows on the same time and it's a god way to separate code from

each other.

On the right you have info, debug and settings information.

Page 8: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

8

Connect nodes together

Start by adding the nodes and a into a new flow.

You press the desired node and hold the left-hand mouse button and move it to the Flow.

Draw a link between the nodes

Deploy you new code with the Deploy button

If you select the debug window on the right side and then tap timestamp, you will see the result displayed in the

debug window.

You have now made your first Node-Red program :D

Key Concepts

As you’ve learned so far, when you program with Node-RED, you create flows that are networks of lightweight

components, called nodes, that exchange messages along pre-defined connections or wires. Let’s look at these

concepts in a bit more detail.

Flows

Node-RED programs or flows are a collection of nodes wired together to exchange messages. Under the hood, a

flow consists of a list of JavaScript objects that describe the nodes and their configurations, as well as the list of

downstream nodes they are connected to, the wires.

Messages

Messages passed between nodes in Node-RED are, by convention, JavaScript Objects called msg, consisting of a

set of named properties. These messages often contain a msg.payload property with, you guessed it, the payload of

the message. Nodes may attach other properties to a message, which can be used to carry other information onto

the next node in the flow. When this happens, these extra properties will be documented in the node documentation

that appears in the node info pane when you select a node in the Node-RED workspace.

Messages are the primary data structure used in Node-RED and are, in most cases, the only data that a node has to

work with when it is activated. This ensures that a Node-RED flow is conceptually clean and stateless – each node

is self-contained, working with input messages and creating output messages.

Page 9: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

9

Standard Nodes

Quick review of different standard nodes that come with Nod-Red

Function Nodes

The function node is the ‘Swiss Army knife’ of nodes that you can use when

there is no existing node dedicated to your task at hand. It’s great for doing

specialized data processing or formatting for example. As the name implies, a

function node exposes a single JavaScript function. Using the function node,

you can write your own JavaScript code that runs against the messages

passed in and returns zero or more messages to downstream nodes for

processing. To write function nodes, you write a JavaScript function using the

built-in code editor as shown in the figure on the right.

Writing Function Nodes

Let’s get started writing function nodes. To test these out, you’ll create a

simple flow with an inject and a debug node as shown in the figure under.

Simple flow to test our function nodes.

The most simple function node just returns null. When you return null, no message is passed on to downstream

nodes and the flow ends here. To create a node that passes the message “as is”, you can simply return the

message itself.

This is the default code in a function node.

Deploy and test and you will see the timestamp is outputted in the debug pane thru the function node.

Not very interesting, so let’s add some content to the payload. In this example, an "world" string.

A simple string concatenation operator is used to add the string “world” to the incoming message payload (line 1).

This updated payload is then sent, using return, as the output message (line 2) to the next node in the flow.

If you add the new code and deploy it, you will see in the debug pane the timestamp for the inject node and the text "

world" appended.

Obviously, if you now edit the inject node to inject a string instead of the timestamp, and set the injected string to

“hello”,you will see “hello world” in the debug pane, when you deploy and test.

1. return msg;

1 msg.payload += " world";

2 return msg;

Page 10: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

10

1. if (msg.payload == "high") {

2. return [ msg, null, null ];

3. } else if (msg.payload == "med") {

4. return [ null, msg, null ];

5. } else {

6. return [null, null, msg];

7. }

Creating and returning a new message in a function node

You can create your own message by defining a new message.

If we make a new message variable called "newMsg", and assigning the string “new payload” to the property

payload (line 1) and then returning the new message at line 2.

Creating and returning a new message

When you deploy the flow and hit the inject button, the new message you created is output when it arrives at the

debug node.

Creating and returning multiple messages

The function node also allows you to configure it with multiple outputs.

Once you’ve configured multiple outputs, you can send multiple messages, one to each output, using an array.

First, let’s edit the function node to tell Node-RED that the node will have three outputs, using the node configuration

window

Lets make the code to send a message to one of three different outputs based on a message payload value ‘high’,

‘med’ or ‘low’:

Line 1 checks the incoming payload to see if it is set as “high”. If

yes, then it passes on the message on the first output and null

messages on the 2nd and 3rd output at line 2 by returning an

array with three elements, [msg, null, null]. A “med” message

causes a message to be returned on output 2 (line 4). Anything

else returns a message on output 3 (line 6).

To try it out, wire it up to three inject nodes and three output nodes as

shown in the figure on the right.

Set the different inject nodes to inject a text string of either low, med, high. Edit the test

function and then deploy.

As you select the different inject nodes, you will see the appropriate debug

node fire in the debug pane.

1 var newMsg = { payload: "new payload" };

2 return newMsg;

Page 11: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

11

1. var temp = [23.5, 24, 24.8];

2. msg.payload = temp;

3. return msg;

1. var temp = [23.5, 24, 24.8];

2. msg.payload = temp[0];

3. return msg;

1. var temp = [23.5, 24, 24.8];

2. msg.payload = temp.length;

3. return msg;

Array messages

An array is a special variable, which can hold more than one value at a time.

If you have a list of temprature values, and storing the values in array variable could look like this:

Use the same nodes as before.

Arrays use numbers to access its "elements".

If we change the 2 line from

msg.payload = Temp;

to

msg.payload = Temp[0];

We only get the first value of the array out.

Temp[0] returns 23.5:

We can also count how many elements the array have.

Page 12: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

12

1. var message = {

2. "tagname": "Freze-124",

3. "temp": 23.5,

4. "door-open": false

5. }

6. msg.payload = message

7. return msg;

1. var message = {

2. "tagname": "Freze-124",

3. "temp": [23.5, 24, 24.8],

4. "door-open": false

5. }

6. msg.payload = message

7. return msg;

Object message

If you going to work with Node-Red you wil have to learn to use Objects.

Objects are king, and if you understand Objects is't all going to be so much easier.

XML, and JSON can easy be converted to Javascript objects and the opposite.

In an Object's you have properties, and the properties have a value.

Use the same nodes as before.

In the code below the "message" is the object. Tagname, Temp, and Door open are the properties.

Object message with arrays

A objects can alsow have properties with array values.

Page 13: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

13

<?xml version="1.0" encoding="UTF-8"

standalone="yes"?><root><tagname>Freze-

124</tagname><temp>23.5</temp><temp>24</temp><tem

p>24.8</temp><door-open>false</door-open></root>

Convert XML and JSON to Javascript objects

The json node , and the xml node is used to convert JSON and XML into javascript

objects, and the odder way around. They are used is in the same way so we just is showing the use of the XML

node.

XML code to use in this exsemple.

Under we are sending an XML string from the inject node that you can see in the debug window from the "XML

String" debug node.

The XML string is also sent to the XML node and is been converted to a Object as we can see in the debug window

from the "Javascript object" node.

Page 14: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

14

Extract property values from objects

Objects is easy to work with and Node-Red have a nice feature that make its easer to use.

Start with the same example as above, just remove the "XML string debug node.

The output in the debug window of this you se below. If you hold your mouse over the firs icon on the right of the first

value of the temp property and click, you get notification of path copied.

Now insert a function node between the xml node and the debug node.

past the path we copied above into the Function.

"payload.root.temp[0]"

The value from this path we insert directly to the msg variable and return it.

"msg.payload = msg.payload.root.temp[0]"

Deploy and inject the XML string , to see the output in the debug window.

Just the first value of the temp property is displayed.

Page 15: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

15

Node-Red Dashboard nodes Versjon 2.7.0

Node-RED Dashboard module allows you to very easily add a (very nice) graphic interface to a Node-RED project.

The Dashboard module succeeds UI module . With this module you can add displays to view various forms of

action: gauges, chart, text, notification, or the free HTML code. You can also add fields to interactions: button,

switch, slider (slider), input field (text or digital), list of choice and forms.

The Dashboard module offers the following graphics commands (entered):

● Button (button)

● List of choices (dropdown)

● Switch 2 States (switch)

● Horizontal slider (slider)

● Digital selector (numeric)

● Input field for text (text input)

● date picker (date)

● colour picker (hex color)

● Form (form)

As well as the following displays (outputs) :

● Text (text)

● Gauge (gauge)

● Graphic (chart)

● Audio out (TS Voice output)

● Notification (notification)

● Change of page (tab) (ui control)

● Display of HTML (template)

Page 16: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

16

Create Tabs

It is possible to create groups and pages directly from the control panel of each Node of the dashboard. When the

module is discovered, it is much easier and clearer to go through the range of configuration which is added next to

the console (debug). If the Panel is not visible (or if you closed it), go to the View menu then and finally dashboard .

Choose a title. It will be displayed as the title of the page in the header of the Web browser. You can choose

between two themes, dark with a black background (Dark) or clear with a white background, the graphic elements in

blue (Light).

click + tab to add a page.

Open the editing window by pressing edit .

Give a name and possibly one icon (see before how to do). Save with Done or Update . Here we give the main

screen name and the home icon.

Add now 3 groups

And open the editing window

Give the following names to groups:

Input elements

Form

Dashboard Event log

Page 17: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

17

Leaving the size of each widget is set automatically but in some cases you will need to change it by hand with the

parameter Width.

You can reorder the groups in a Tab, move them one tab to another and reorder the Tab and using the handle.

The group is now ready.

Now, let’s add one control items proposed by the module and find out what they allow and available parameters.

You will assign each element to the group ‘Elements of entry’, except the form that you will assign to the group

“form.

Page 18: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

18

Dashboard input nodes

Button

Button settings

● Group: display group.

● Size : size of the element. Auto default

● Icon : displays an icon to the left of the text

● Label : the button

● Colour : color of the text (in hexa, for example #8000ff)

● Payload : output value when you press on the button (true, false)

● Topic : label

● Name : name of the Node that is displayed on the Node-RED flow

Example of button

Page 19: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

19

Dropdown (list of choice)

The Dropdown (choice list) element allows the user to return 3 types of data:

● A string

● A whole digital value

● A Boolean

The Node can also be transparent and let an incoming message. For this, you must check the box “If msg

can we input, pass trough to output”.

The choice list obtained

Page 20: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

20

Switch

the horizontal switch allows to return a Boolean when it changes state. It is possible to reverse the Boolean

value by selecting by inverting the output value depending on the State On and Off.

It is also possible to have other types of output (other than the payload):

● A Flow

● Store the State in a global variable (Global)

● A string of characters (String)

● A number (Number)

● A JSON object

● the date and time of the action (timestamp)

The switch ui displayed

Page 21: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

21

Slider

As well as the switch, the slider can pass an incoming transparent message (check if msg come…).

The slider takes as a parameter the minimum value (min), maximum (max) and not (step).

The slider ui

Numeric field

Must be defined a range of entry (min, max).

The resulting numeric field

Page 22: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

22

Text field

This field offers 8 input masks. If a delay (delay) is specified (default 300ms), the Node reference value

entered automatically. It is convenient for use on tablet. If period is zero (0), then confirm the entry by

pressing the Enter key.

Text

Nothing more to say about it.

email

The email mode will color in red if it is not a valid address and will return undefined.

Password

In this case the characters are masked.

Telephone entery

For telephone numbers (Not any info yet)

Color picker

It return the color in hexadecimal format code. It uses the color selector of the system.

Time picker

The time input type returns a number of milliseconds from midnight.

Week picker

Output exsemple: 2018-01-04T13:59:00.000Z.

Month picker

output exsemple: 2018-01-31T23:00:00.000Z

Not all browsers support the week and month input types, and may return undefined.

Please test your target browser(s) before use.

Page 23: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

23

Form

Last big piece of the Dashbord, the form . It is a component really very powerful and very simple to

implement.

As usual, denominated one (Label) can give a type that will be displayed in the header. Are ‘stacked’ then

the elements in the form (Form elements). It for the following choices:

● Text

● Number

● Email

● Password

● Checkbox

● Switch

You can make each mandatory element (Required) before the release of the form.

Here is the resulting form.

Page 24: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

24

Dashboard output nodes

Text

Will display a non-editable text field on the user interface.

The Value Format field can be used to change the displayed format and can contain valid HTML and Angular filters.

For example: {{value | uppercase}} &deg; will uppercase the payload text and add the degree symbol.

The label can also be set by a message property by setting the field to the name of the property, for example

{{msg.topic}}.

The Text output node displayed

Gauge

Adds a gauge type widget to the user interface.The gauge has several modes. Regular gauge, donut, compass and

wave.The msg.payload is searched for a numeric value and is formatted in accordance with the defined Value

Format, which can then be formatted using Angular filters.

For example : {{value | number:1}}% will round the value to one decimal place and append a % sign.

4 different gauge type

Page 25: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

25

Notification node

Shows msg.payload as a popup notification or OK / Cancel dialog message on the user interface.

If a msg.topic is available it will be used as the title.

If you do not set an optional border highlight colour, then it can be set dynamically by msg.highlight.

You may also configure the position and duration of the notification.

Exsemple of the notification output node

Chart node

Plots the input values on a chart. This can either be a time based line chart, a bar chart (vertical or horizontal), or a

pie chart.

Each input msg.payload value will be converted to a number. If the conversion fails, the message is ignored.

Minimum and Maximum Y axis values are optional. The graph will auto-scale to any values received.

Multiple series can be shown on the same chart by using a different msg.topic value on each input message.

Multiple bars of the same series can be shown by using the msg.label property.

Exsemple of chart output node

Page 26: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

26

Bonus: create an event log

Now let’s see what it looks like. I offer you a small piece of code that stores all events and posters in the

form of an event log (log) in a global variable.

Add a function Node and paste this code. Events on the interface is stored in a global variable. We delete

messages beyond 20 records. 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// initialise the counter to 0 if it doesn't exist already

var dashboardLog = context.get('dashboardLog')|| [];

dashboardLog.push(msg);

if (dashboardLog.length &gt; 20){

// Delete oldest message if &gt; 20

dashboardLog.shift();

dashboardLog.length = 20;

}

// store the value back

context.set('dashboardLog',dashboardLog);

// make it part of the outgoing msg object

msg = {};

msg.payload = dashboardLog;

return msg;

Add an HTML Node and paste this code. AngularJS ng-repeat class is used to browse the array returned

by the previous function. We created a label in red with the topic. Next to a chip (ul), it displays the value

returned by the event of the Dashboard. 1

2

3

4

5

6

7

8

<ul>

<li ng-repeat="x in msg.payload">

<font color="red">{{x.topic}}</font>

<ul>

<li>{{x.payload}}</li>

</ul>

</li>

</ul>

Now, you can go to the Dashboard by typing the address http://IP_NODERED:1880 / ui

For you to test now!

Page 27: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

27

Code of the flow

[{"id":"4cfaf9fa.a30168","type":"ui_button","z":"e9d1fff8.ab495","name":"Boutton","group":"a0b774ba.296d38","order":1,"width":0,"height":0,"label":"Boutton","color":"#fffff","icon":"fa-

star","payload":"true","payloadType":"bool","topic":"Button","x":354,"y":47,"wires":[["87a0631d.38e72"]]},{"id":"6a67cde0.403404","type":"ui_dropdown","z":"e9d1fff8.ab495","name":"List of choice","label":"Choose what you

want","place":"","group":"a0b774ba.296d38","order":2,"width":0,"height":0,"passthru":true,"options":[{"label":"Choce 1: string","value":"Choice 1","type":"str"},{"label":"Choice 2 : number","value":4,"type":"num"},{"label":"Choice

2: bool","value":true,"type":"bool"}],"payload":"","topic":"List of choice","x":324,"y":87,"wires":[["87a0631d.38e72","7e1c5b34.3eaa44"]]},{"id":"da093a4f.e11508","type":"debug","z":"e9d1fff8.ab495","name":"Dashboard

Log","active":true,"console":"false","complete":"payload","x":873,"y":172,"wires":[]},{"id":"7ccd781e.ab69a8","type":"ui_switch","z":"e9d1fff8.ab495","name":"Switch","label":"switch","group":"a0b774ba.296d38","order":3,"width":0

,"height":0,"passthru":true,"decouple":"false","topic":"Switch","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":324,"y":127,"wires":[["87a06

31d.38e72","15e7c194.6a563e"]]},{"id":"4ae37ac8.ee65d4","type":"ui_slider","z":"e9d1fff8.ab495","name":"Slider","label":"slider","group":"a0b774ba.296d38","order":4,"width":0,"height":0,"passthru":true,"topic":"Slider","min":0,"

max":10,"step":1,"x":364,"y":167,"wires":[["87a0631d.38e72","e61b1f71.32d16","1bd8fec.19bd801"]]},{"id":"6e76a5be.7a216c","type":"ui_numeric","z":"e9d1fff8.ab495","name":"","label":"numeric","group":"a0b774ba.296d38","o

rder":5,"width":0,"height":0,"passthru":true,"topic":"numeric","format":"{{value}}","min":0,"max":10,"step":"","x":354,"y":207,"wires":[["87a0631d.38e72"]]},{"id":"6c1cad76.edaae4","type":"ui_text_input","z":"e9d1fff8.ab495","name

":"","label":"Text entry field","group":"a0b774ba.296d38","order":6,"width":0,"height":0,"passthru":true,"mode":"text","delay":"0","topic":"Text entry

field","x":172,"y":180,"wires":[["87a0631d.38e72","ac714be1.528678"]]},{"id":"8a63e0f0.a2895","type":"ui_form","z":"e9d1fff8.ab495","name":"","label":"A Node-RED

form","group":"75e875ea.3bc9ac","order":0,"width":0,"height":0,"options":[{"label":"A text ","value":"Text","type":"text","required":true},{"label":"A number","value":"Number","type":"number","required":false},{"label":"A

email","value":"email","type":"email","required":false},{"label":"A password","value":"A password","type":"password","required":false},{"label":"A check box","value":"Check box","type":"checkbox","required":false},{"label":"A

switch","value":"Interrupteur","type":"switch","required":false}],"formValue":{"Text":"","Number":"","email":"","A password":"","Check

box":false,"Interrupteur":false},"payload":"","topic":"Form","x":120,"y":612,"wires":[["87a0631d.38e72"]]},{"id":"87a0631d.38e72","type":"function","z":"e9d1fff8.ab495","name":"Saves events","func":"// initialise the counter to 0 if it

doesn't exist already\nvar dashboardLog = context.get('dashboardLog')|| [];\n\ndashboardLog.push(msg);\nif (dashboardLog.length > 15){\n // Delete oldest message if > 15\n dashboardLog.shift();\n dashboardLog.length

= 15;\n} \n\n// store the value back\ncontext.set('dashboardLog',dashboardLog);\n\n// make it part of the outgoing msg object\nmsg = {};\nmsg.payload = dashboardLog;\nreturn

msg;\n","outputs":1,"noerr":0,"x":596,"y":246,"wires":[["da093a4f.e11508","c6653090.a967"]]},{"id":"c6653090.a967","type":"ui_template","z":"e9d1fff8.ab495","group":"6b4d489b.6cdea8","name":"Dashboard Event

Log","order":1,"width":"8","height":"15","format":"<ul>\n <li ng-repeat=\"x in msg.payload\">\n <font color=\"red\">{{x.topic}}</font>\n <ul>\n <li>{{x.payload}}</li>\n </ul>\n

</li>\n</ul>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":903,"y":286,"wires":[[]]},{"id":"ffc23d7b.03145","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"Email entry

field","group":"a0b774ba.296d38","order":7,"width":0,"height":0,"passthru":true,"mode":"email","delay":300,"topic":"Email entry

field","x":192,"y":220,"wires":[["87a0631d.38e72"]]},{"id":"8d07df52.67852","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"Password entry

field","group":"a0b774ba.296d38","order":8,"width":0,"height":0,"passthru":true,"mode":"password","delay":300,"topic":"Password entry

field","x":152,"y":260,"wires":[["87a0631d.38e72"]]},{"id":"f3f3f12e.dabca","type":"ui_date_picker","z":"e9d1fff8.ab495","name":"","label":"Date","group":"a0b774ba.296d38","order":14,"width":0,"height":0,"passthru":true,"topic":"d

ate","x":106,"y":524,"wires":[["87a0631d.38e72"]]},{"id":"5147aa1a.401194","type":"ui_colour_picker","z":"e9d1fff8.ab495","name":"","label":"Color

picker","group":"a0b774ba.296d38","format":"hex","outformat":"string","showSwatch":true,"showPicker":false,"showValue":true,"showAlpha":false,"showLightness":true,"order":15,"width":0,"height":0,"passthru":true,"topic":"colo

r picker","x":120,"y":563,"wires":[["87a0631d.38e72"]]},{"id":"83781b3d.b30df8","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"Telephone

entery","group":"a0b774ba.296d38","order":9,"width":0,"height":0,"passthru":true,"mode":"tel","delay":300,"topic":"Telephone

entery","x":126,"y":306,"wires":[["87a0631d.38e72"]]},{"id":"300c3e9.4f957c2","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"Color

Picker","group":"a0b774ba.296d38","order":10,"width":0,"height":0,"passthru":true,"mode":"color","delay":300,"topic":"Color Picker (text

field)","x":104,"y":347,"wires":[["87a0631d.38e72"]]},{"id":"44704fdd.f3cf4","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"Time

picker","group":"a0b774ba.296d38","order":11,"width":0,"height":0,"passthru":true,"mode":"time","delay":300,"topic":"Time

picker","x":101,"y":392,"wires":[["87a0631d.38e72"]]},{"id":"e4265151.44308","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"Week

picker","group":"a0b774ba.296d38","order":12,"width":0,"height":0,"passthru":true,"mode":"week","delay":300,"topic":"Week

picker","x":108,"y":439,"wires":[["87a0631d.38e72"]]},{"id":"18e309bd.60d026","type":"ui_text_input","z":"e9d1fff8.ab495","name":"","label":"Month

picker","group":"a0b774ba.296d38","order":13,"width":0,"height":0,"passthru":true,"mode":"month","delay":300,"topic":"Month

picker","x":116,"y":481,"wires":[["87a0631d.38e72"]]},{"id":"ac714be1.528678","type":"ui_text","z":"e9d1fff8.ab495","group":"73a8aee4.cd88a","order":0,"width":0,"height":0,"name":"Text","label":"Text","format":"{{msg.payload}}"

,"layout":"row-

spread","x":644,"y":478,"wires":[]},{"id":"e61b1f71.32d16","type":"ui_gauge","z":"e9d1fff8.ab495","name":"Gauge","group":"73a8aee4.cd88a","order":0,"width":0,"height":0,"gtype":"gage","title":"Gauge","label":"units","format":"{{v

alue}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":639,"y":538,"wires":[]},{"id":"1bd8fec.19bd801","type":"ui_chart","z":"e9d1fff8.ab495","name":"Chart","group":"73a8aee4.cd88a","order":0

,"width":0,"height":0,"label":"Chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"10","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"60","c

utout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":636,"y":602,"wires":[[],[]]},{"id":"7e1c5b34.3eaa44","type":"ui_toast","

z":"e9d1fff8.ab495","position":"top

right","displayTime":"3","highlight":"","outputs":0,"ok":"OK","cancel":"","topic":"","name":"","x":598,"y":670,"wires":[]},{"id":"15e7c194.6a563e","type":"ui_template","z":"e9d1fff8.ab495","group":"73a8aee4.cd88a","name":"Templat

e","order":0,"width":"5","height":"6","format":"<!DOCTYPE html>\n<style>\n:focus {\noutline: 5;\n}\nmd-led-index01{\n display: block;\n\tborder-radius:80px;\n\tborder:2px solid #666666;\n\twidth: 20px; \n\theight:20px;\n\tfloat:

right;\n\tbackground: -webkit-radial-gradient(#9AF589, #42B821);\n \n }\n\n\n</style>\n\n<p style=\"font-size:120%;text-align:center\" >Template</p> \n\n<span style=\"font-size:100%;text-align:left;margin: 2px\">\nSwitch

status\n<md-led-index01\n ng-style=\"{background: msg.payload=='1' ?'transparrent':'#424c3f'}\"\n\n>\n{{msg.payload == '0' ? '' : ''}}\n</md-led-

index01>\n\n</span>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":567,"y":722,"wires":[[]]},{"id":"a0b774ba.296d38","type":"ui_group","z":"","name":"Input

elements","tab":"d01a8f33.8299d","order":1,"disp":true,"width":"8"},{"id":"75e875ea.3bc9ac","type":"ui_group","z":"","name":"Form","tab":"d01a8f33.8299d","order":3,"disp":true,"width":"8"},{"id":"6b4d489b.6cdea8","type":"ui_gro

up","z":"e9d1fff8.ab495","name":"Dashboard Event Log","tab":"d01a8f33.8299d","order":4,"disp":true,"width":"8"},{"id":"73a8aee4.cd88a","type":"ui_group","z":"","name":"Output

elements","tab":"d01a8f33.8299d","order":2,"disp":true,"width":"6"},{"id":"d01a8f33.8299d","type":"ui_tab","z":"","name":"Main Screen","icon":"home","order":2}]

Page 28: Node-Red Gateway Manual 1 Edition - KGS · Node-RED and the IoT When the IBM folks created Node-RED, they were mostly focused on the Internet of Things, i.e connecting devices to

Node-Red Gateway Manual 1 Edition

©Copyright 1986 - 2018 KGS Systemer as

28

References

http://noderedguide.com/

https://diyprojects.io

https://nodered.org/docs/