Getting started with Node-RED

Getting started with Node-RED

Introduction

Node-RED is a programming tool for wiring together hardware devices, APIs and
online services in new and interesting ways.

It provides a browser-based editor that makes it easy to wire together flows using the
wide range of nodes in the palette that can be deployed to its runtime in a single-
click.

Node-RED is built on Node.js, taking full advantage of its event-driven, non-

blocking model. This makes it ideal to run locally, at the edge of the network on low-
cost hardware such as the Raspberry Pi as well as in the cloud.

A communication M2M means that once the application is implemented, the system
become autonomous and communicates with its environment.

IoT 3
Getting started with Node-RED

However, the system can be controlled. The control access can be provided with a
simple web browser dashboard (No need to install Node-RED in PC). The
application web pages are already incorporated within the embedded system.

The access is also possible via Smart Phone based on wifi network or cellular
network (cellular network needs configurations and network security aspects to
taken into consideration).

Web browser Access Mobile wifi Access Cellular network Access

The system control access

Node-RED can be operated by using a distant server (Cloud). We don’t need to

install anything; it is already done by the host offering the Node-RED service.

Node RED running locally on Windows

Locally means that we need to install Node-RED tool on PC. Once the applications
are created, they are running locally and allow user to communicate with any objects
that is related to the Network.

IoT 3
Getting started with Node-RED

Node-RED uses Node.js an open-source, cross-platform, back-end JavaScript runtime

environment to execute the JavaScript code. Node.js is like the Node-RED engine.
However, users are not forced to be a JavaScript expert developer to use Node-RED.

Node.js is extensible. In order to manage the new modules (extensions), Node.js uses
npm (Node Package Manager) which is already integrated with the Node.js installer.

1. Install Node.js
- Download the latest node-v14.18.0 LTS version of Node.js from the official
Node.js home page ( https://nodejs.org/en/ ). It will offer you the best version
for your system.
- Run the downloaded MSI file. Installing Node.js requires local administrator
rights; if you are not a local administrator, you will be prompted for an
administrator password on install.
- Accept the defaults when installing.
- After installation completes, close any open command prompts and re-open to
ensure new environment variables are picked up.
- Once installed, open a command prompt using cmd and run the following
command to ensure Node.js and npm (Node package manager) are installed
correctly:
**node --version && npm –version

You should receive back output that looks similar to:

2. Install Node-RED

Installing Node-RED as a global module adds the command node-red to your system
path.
- Execute the following command:
**npm install -g --unsafe-perm node-red
If it is already installed, it will display output that looks similar to the
following display, depending on the updated packages:

IoT 3
Getting started with Node-RED

Note: In order to uninstall Node-RED, try to follow the following commands:

1/ ** npm uninstall -g node-red
2/** npm cache clean --force –g : to force the cache clean
3/To completely remove all trace, you should then delete the ".node-red" folder
from all user home folders (there will be one in any user that has run node-red).
3/The command **npm ls -g --depth=0, will show you if you have any other
global modules you might want to delete.

3. Run Node-RED

Once installed, the simple way to run Node-RED is to use the node-red command in
a command prompt: If you have installed Node-RED as a global npm package, you
can use the node-red command:

**C:>node-red
This will output the Node-RED log to the terminal. You must keep the terminal open
in order to keep Node-RED running.

The output is as follows:

IoT 3
Getting started with Node-RED

Note: If it fails, please change your directory to C:

The output indicates the IP address of the Node-RED Server:

Note: Note that running Node-RED will create a new folder in your
%HOMEPATH% folder called .node-red. This is your userDir folder, think of it as
the home folder for Node-RED configuration for the current user. You will often see
this referred to as ~/.node-red in documentation. ~ is shorthand for the user home
folder on Unix-like systems. You can use the same reference if using PowerShell as
your command line as recommended. If you are using the older cmd shell, that won’t
work.

4. Access the Node-RED editor

- With Node-RED running, open the editor in a web browser:

IoT 3
Getting started with Node-RED

 If you are using a browser on the same computer that is running Node-
RED, you can access it with the url: http://localhost:1880.
 If you are using a browser on another computer, you will need to use
the ip address of the computer running Node-RED: http://<ip-
address>:1880.

We can notice that the application is running on the server. If we want to stop the
application, we return back to the cmd window and stop the process with a Ctrl + C
followed with an O to confirm

The disconnection problem is then highlighted in the associated Node-RED editor page:

IoT 3
Getting started with Node-RED

To reconnect, we need just to relaunch Node-RED application (command: ** node-

red)

5. Create your first flows

a. Basic examples

The Inject node allows you to inject messages into a flow, either by clicking the
button on the node, or setting a time interval between injects.

- Drag one onto the workspace from the palette.

- Select the newly added Inject node to see information about its properties and
a description of what it does in the Information sidebar pane.

The debug node provides a simple way to view messages, which are displayed in the
debug pane.

- Drag one onto the workspace from the palette

- Connect the nodes together

This link will carry different types of data (Boolean, integer, char,…).

The inject node provides a data (a payload message: the message content):

- Select Boolean
- Click Done

This block (node) provides then a Boolean that will be retrieved in the debug node. It
can be assimilated as an electrician multimeter. The result or the visualized data will
be displayed in the debug window

Note: The blue points appearing in the flow indicate that the application is not yet
deployed.

IoT 3
Getting started with Node-RED

- Click deploy
- Inject manually the true data with a simple click on the rectangle in the left of
the inject node
- The message is then displayed in the debug window

- Try to reproduce this flow

- Comment on the obtained results in the debug window?

………..
- Drag Trigger node onto the workspace from the palette
- Explore the node properties
- Reproduce the following flow

- Comment on the obtained results in the debug window?

……………….
- Reproduce the following flow

IoT 3
Getting started with Node-RED

- Comment on the obtained results in the debug window?

……………….
- Reproduce the following flow

- Comment on the obtained results in the debug window?

……………….
- Reproduce the following flow

IoT 3
Getting started with Node-RED

- Comment on the obtained results in the debug window?

……………….
- Reproduce the following flow with the two function examples

IoT 3
Getting started with Node-RED

- Comment on the obtained results in the debug window?

……………….

b. Getting started with the Node-RED dashboard

- Select Manage Palette

- In Installer tab, search for dashboard
- Select node-red-dashboard

- Click Install, please wait.

The manager finds out the associated nodes and adds them to the palette in order to
enable a web interface creation.

IoT 3
Getting started with Node-RED

- Prepare a web browser to display the result. The result is accessible via the url
adress: http://localhost:1880/ui/ (the same url address for the node-RED app
followed by “ui” for User Interface).

- Prepare the dashboard nodes to start the flow design.

- Drag button node onto the workspace from the palette (dashboard)
- Double click on button to edit properties

The ui group corresponds to the web page organization.

For this target, we have a corresponding button “dashboard” in the sidebar to
organize the web interface in different pages (tabs) and groups.

IoT 3
Getting started with Node-RED

- First, click on +tab to add a new page (tab), tab1 is then added

- Next, click on tab1 and then click on +group to add a new group

- Once tab1 and group1 are created, click on the button properties from the flow
workspace and select tab1 and group1 in the Group property.
- Select Boolean in the payload property, i.e., when we click on the button a
Boolean message “True” is generated

- Click on Done
- Click on Deploy

IoT 3
Getting started with Node-RED

- Comment on the obtained results in the web page interface?

……………….
- Edit page( tab) Name property

- Click on update
- Edit group Name property

*
- Click on update
- Deploy again and check the web page

- Click on the button in the web page interface and comment on the obtained
results?
…………….
- Add a debug node in the flow
- Connect the button and the debug nodes

IoT 3
Getting started with Node-RED

- Select the debug window in the Node-RED editor Sidebar

- Deploy again
- Click on the button in the web page interface and comment on the obtained
results in the debug window?
………..
- Edit button properties to change the colors and the name in the label

- Click on Done, Deploy, the web page is updated.

- Click on the dashboard in the sidebar to change the web page appearances.
- Click on Site and theme and modify the appearances according to your choice.
- Deploy again to update changes and trace the obtained results.
- Drag switch node onto the workspace from the palette (dashboard)

The switch node has two stable states: On payload and Off payload.

- Keep the default values (True and False)

IoT 3
Getting started with Node-RED

- Click on Done
- Connect the switch node to the debug node
- Click on Deploy
- Visit the web page interface

- Click on the switch button and comment on the obtained results in the debug
window?
………..
- Drag dropdown node onto the workspace from the palette (dashboard)
- Edit the button properties (options) as follows:

- Click on Done
- Connect the dropdown node to the debug node
- Deploy, see changes in the web page interface
- Select the choice one by one and comment on the obtained results in the debug
window

IoT 3
Getting started with Node-RED

So far, we have presented nodes that enable entries from the web page interface.
Now, we will present nodes that enable to represent an output toward the interface.

- Drag text node onto the workspace from the palette (dashboard)

- Edit text node properties; change label to value

- Click on Done
- Connect this text node to the dropdown node
- Edit the text view in the interface to occupy the last position (Drag on the
value in the Tab & Links window) and add a space to separate it from the
buttons (+spacer)

- Deploy and check the web page display

- Comment on the obtained results in the interface?
………..
- Drag numeric node onto the workspace from the palette (dashboard)
- Edit numeric node properties as follows, click on done

IoT 3
Getting started with Node-RED

- Connect these nodes as follows:

- Deploy and check results in the interface

- Enter different values and check results.
…………
- Drag slider node onto the workspace from the palette (dashboard)
- Edit slider node properties as follows, click on done

- Connect slider node to the value node

- Deploy and check results in the interface
…………
- Reproduce the following flow

IoT 3
Getting started with Node-RED

- Comment on the obtained results in the interface?

……………….
- Drag gauge node onto the workspace from the palette (dashboard)
- Edit gauge node properties as follows, click on done

- Connect Enter Value node to the gauge node

- Deploy and check results in the interface

…………
- In order to better organize the interface, create a second group in the
Tab&Links window
- Edit gauge node to be in the Second Group
- Deploy and check results in the interface
……………
- Drag chart node onto the workspace from the palette (dashboard)
- Connect it to Enter Value node
- Keep the default properties and place it in the second group category

- Deploy and Comment on the obtained results in the interface?

…………….
- Drag audio node onto the workspace from the palette (dashboard)
- Reproduce the following flow

IoT 3
Getting started with Node-RED

- Edit the Red button property to generate a string payload

- Press the Red button from the web page interface and check the sound
- Reproduce the following flow

- Edit the function node as follows

- Edit gauge node as follows

- Add a new tab and add some buttons and outputs

…………..

IoT 3