Getting started with Node-RED AY: 2022-2023

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.

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

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.

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.

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

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 node-v16.17.1 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. This version is recommended for most users.
- 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, depending on the
installed Node-RED version.

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:

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

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.
-As with running Node-RED locally, you can use the node-red command to run
Node-RED in a terminal. It can then be stopped by pressing Ctrl-C or by closing the
terminal window

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, depending on installed version:

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

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:

 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

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

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

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.

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

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.

- 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?

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

………..
- 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

- Comment on the obtained results in the debug window?

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

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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 with the two function examples

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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.

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

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.

- 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

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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

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

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

- Click on update
- Edit group Name property

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

*
- 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

- 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

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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)

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

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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

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

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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

- Connect these nodes as follows:

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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

- 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

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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

- Edit the Red button property to generate a string payload

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

Dr. Hanen SHALL, ISTIC Level: IoT 3

Getting started with Node-RED AY: 2022-2023

- 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

…………..

Dr. Hanen SHALL, ISTIC Level: IoT 3