Node-Red-Basics

Table of Contents

General Information

To-do: Download Node-RED for your device and follow the Quick Start introduction: Node-RED Windows Guide. For other OS, please refer to this link: Node-RED Local Guide.

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. (Reference: Node-RED)

Node-RED UI Guide

Start/Stop Commands

To start Node-RED, use the following command in Command Prompt (CMD):

node-red

To stop Node-RED, use the following keyboard combination in the same CMD window:

Ctrl-C

Once you start Node-RED, you can then access the Node-RED UI using the IP address. It is usually http://localhost:1880 or http://[IP_ADDRESS_OF_PC]:1880 (REMEMBER TO REPLACE [IP_ADDRESS_OF_PC] WITH YOUR PC'S IP! To find it, use ipconfig).

About

Node-RED includes the following concepts (Reference: Node-RED):

Concept Description
Node Basic building block of a flow. You use these to form the flow of your code.
Configuration Node Used to store and initialize configuration information. For example, providing the IP address of a PC if you want to receive data via LAN or WiFi.
Palette Contains the available nodes which can be used to create the flow.
Flow Nodes interconnected to form a logical data path. It has input, processing functions, and output. The flow tab on the top bar shows the workspace which can have multiple flow diagrams.
Message Data which gets passed inside a flow.
Context Way to store information which can be shared between nodes without using messages that pass through a flow.
Subflow Creating an abstraction layer for a set of nodes. It helps to group certain nodes and represent them by a single node.
Wire Connector between nodes.
Workspace Area where you drag and drop nodes and make flows.
Sidebar (on the right side) Provides tools and settings to manage and debug the nodes and the messages related to them.

All available nodes are listed on the left side of the window. Each node accepts and/or emits a message. By dragging a node into the flow (middle), it is added to the message processing.

On the right side, the info, debug, and dashboard tabs can be found. Info displays information about nodes and their documentation, and debug shows debug messages.

The red Deploy button starts the execution of the flow and applies changes.

When you deploy your flow, it automatically gets saved. You do not need to find a save button. When you open Node-RED next time, your flows will load automatically.

Node-RED UI

To-do: Please refer to the following link for complete information: Node-RED User Guide.

Hint: Node-RED is based on JavaScript. You need not know in-depth about JavaScript but can have a basic idea from here: W3Schools JavaScript Guide.

Help

You can access the help function inside Node-RED. To do so, click on the book icon (📕) from the sidebar. Then click on the node you want information about.

To use this, click on the node -> then click on the Book Icon.

Nodes

To add a node, simply drag them from the panel on the left. There are a few core nodes which act as building blocks. These are:

Node Description
Inject Pushes fixed data into a flow. You can set repeat intervals in its node settings. Supports different types of message types like string, number, and timestamp (Source Node).
Debug Receives all types of messages and displays them in the Debug sidebar. Used to analyze messages and find issues (Sink Node).
Function To manipulate the message using JavaScript as a programming language.
Change To modify message properties as per requirement.
Switch Switch statement as in programming terms. Switch message to different output as per given condition.
Template Creates a text string which fills a specified blank. Example: The temperature today is {{payload}} degrees.

To configure a node, double-click on it. A panel will open usually on the right side.

Hint: Quick-Add dialog provides an easy way to add a node to the workspace by holding the Ctrl or Command key when clicking on the workspace.

Flows

After adding multiple nodes, connect the output of start nodes to the input of end nodes. This is how you can create a flow.

Node-RED Intro 1

Hint: You can comment/disable a flow by selecting all the nodes in that flow and then open Action List. You can do this by following the key combination CTRL + SHIFT + P. If this doesn't work, change the keyboard shortcuts for Show Action List from the ☰ menu (top right corner).

Messages

Messages in Node-RED usually have a payload property. This payload consists of the required data. All the messages are in a JavaScript Object format. A _msgid is added automatically as an identifier. This means that the message will be in the following format:

{
    "_msgid": "12345",
    "payload": "..."
}

To access the useful information of the message, i.e., the payload, you will use the dot (.) command. For example:

msg.payload

If you have other properties in your message, you can access them as well using the same concept of the dot (.) command.

Messages support all the JavaScript accepted data types. A few of them are mentioned below:

Data Type Example
Boolean true, false
Number 0, 123.4
String "hello"
Array [1, 2, 3, 4]
Object {"a": 1, "b": 2}
Null null

Message Structure Debug

Information and Debug

Information

The Information sidebar shows information about the flows. This includes an outline view of all flows and nodes, as well as details of the current selection.

Information

Debug

The data from the debug node gets printed inside the Debug sidebar. This can be found on the sidebar with an icon or a bug.

By default, it is selected to all nodes, but you can set it to required nodes if you have multiple debug nodes in your flow.

Debug

Hint: You can disable the debug node by clicking on the box on the node. You need not deploy after enabling/disabling only the debug node.

Palette Manager

It is used to install new palettes to your interface. This is like the library manager of the Arduino environment.

To access this, click on ☰ from the top right corner. Then click on Manage Palette.

To install a new palette, click on Install and search for the required palette. Once found, click on the Install button next to that palette.

Hint: Before installing a new palette, it is always good to export all the flows. To do so, click on ☰ from the top right corner, then Export. Click on all flows and then Download. Save the file to your PC as a backup file.

Functions

The Function node allows writing custom codes using the JavaScript language. The message is passed inside the function as an object called msg. You can access all the properties in the message object using the dot (.) command. For example, msg.payload.

Node-RED Intro 2

All the functions already have a return msg; statement. This sends the message out of the function. You can also pass null if your function returns nothing, i.e., a void function. It is important to always return a msg object. DO NOT RETURN STRINGS OR NUMBERS.

// WRONG IMPLEMENTATION
var newMsg = msg.payload.length; // sends integer value out of function as length is number
return newMsg;
// CORRECT IMPLEMENTATION
var newMsg = { payload: msg.payload.length }; // sending length as a property
return newMsg;

More information about functions can be found here: Node-RED Writing Functions Guide.

Tasks

The tasks below are designed to teach Node-RED UI and its basics.

Task 1

Task 1.1

To-do: Create a flow with an inject node and debug node.

Follow the steps below:

  1. Add the nodes on the workspace and join them.
  2. Deploy the flow.
  3. Open the Debug window from the sidebar.
  4. Click on the square button on the inject node and observe the output on the debug window. You must see some numbers in the debug. Check the help to find what these numbers mean.

Task 1.2

To-do: Inject automatically after 2 seconds. See the complete message in Debug.

Follow the steps below:

  1. Open the node configuration of the inject and set it to repeat every 2 seconds.
  2. Open the node configuration of the debug and set it to display the complete message.
  3. Deploy the changes and observe the Debug window. You must see the complete message between {} brackets.

Task 1.3

To-do: Use a function to add a property to a message.

Follow the steps below:

  1. Add a function node between the inject node and debug node.

  2. Add the following code to the function. This function adds a property called name to the message and then returns it from the function.

    msg.name = "[YOUR NAME]";
return msg;

  3. Deploy the changes and observe the Debug window. You must see your name on the debug window.

Task 2

Note: You would need the following palettes installed.

To-do: Use a random function to publish values between 15 to 35. It must repeat every 5 seconds. Add a function to convert these values from Celsius to Fahrenheit. Name the function Temp Converter. Use the output of this function to display values on a chart.

The label of the chart must be "room temperature." Set the value of the x-axis to the last 10 minutes.

Note: To open the dashboard, look for a bar chart icon on the side panel. Click on it and then find an icon as in the image below.

Dashboard Icon

Hint: You will need to add an inject node before the random function generator to repeat values at the specified interval.

Task 3

To-do: Create an HTTP endpoint which responds to GET requests and handles the parameters passed in the URL.

Example: http://example.com/hello-query?PARAMETER_1=VALUE_1

Task Flow Structure

Tips for the First Flow are provided below:

  1. In the template node from the function section, enter the following code in the editor:

    <html>
    <head></head>
    <body>
        <h1>Hello {{req.query.name}}!</h1>
    </body>
</html>

Tips for the Second Flow are provided below:

  1. In the HTTP request node, in the URL, enter the following and keep the rest of the settings unchanged:

    http://localhost:1880/hello-query?name={{{payload}}}

    Or this if the above doesn't work:

    http://127.0.0.1:1880/hello-query?name={{{payload}}}

The output must look like this: Remember to see the blue highlighted text below. Your output must be as in blue color.

Task Output

Task 4

To-do: Create a user input form on the dashboard. The form should take the following inputs from the user: Name, Email-ID, and Favorite number. Use this form to save data to a .txt file.

Use the Node-RED help book icon (📕).