Node-Red Gateway Manual 1 Edition
©Copyright 1986 - 2018 KGS Systemer as
1
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
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
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.
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.
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
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.
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.
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;
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;
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.
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.
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.
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.
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)
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
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.
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
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
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
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
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.
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.
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
● Password
● Checkbox
● Switch
You can make each mandatory element (Required) before the release of the form.
Here is the resulting form.
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}} ° 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
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
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 > 20){
// Delete oldest message if > 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!
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}]
Node-Red Gateway Manual 1 Edition
©Copyright 1986 - 2018 KGS Systemer as
28
References
http://noderedguide.com/
https://diyprojects.io
https://nodered.org/docs/