In this class, you will become familiar with basic Node-RED terms, concepts, and the editor window, and understand the process for creating flows.

This section consists of:

Class Contents

Node-RED Concepts

Review Node-RED Concepts to gain an understanding of Node-RED basics, common terms, and the system model.

Node-RED Editor

Review Node-RED Editor and watch the videos to become familiar with the Node-RED workspace and the parts of the editor window, including:

Header – located at the top and contains the Deploy button, main menu, and user menu (if user authentication is enabled)
Palette – contains the nodes used in the workflows
Workspace – main space used for creating flow
Sidebar – contains tools for displaying node information, viewing debug logs, managing configuration nodes, and viewing context contents

The Node-RED editor is available as a frame within the Sequencing Widget so you can create and launch flows within the SmartServer IoT CMS.

Adding Nodes to the Palette

Review Node-RED's Adding nodes to the palette to learn how to manage the palette by adding nodes as well as community nodes available through the Node-RED library.

Node-RED References

See Node-RED's Q&A website for more information.

Exercise 1.1 – Basic Node-RED Flow

With this exercise, you will create two, basic Node-RED flows. Click on the links below and follow the steps to create your first and second flow.

Review and complete Node-RED's Creating your first flow that introduces Inject, Debug, and Function nodes.
Review and complete Node-RED's Creating your second flow that expands on the first flow concepts and utilizes data from external sources for local use.

Exercise 1.2 – Basic Node-RED Dashboard

In this exercise, you will configure the dashboard layout for the slider and gauge nodes by defining groups and tabs.

Tabs and Groups in Node-RED Dashboard

Dashboards in Node-RED are organized in Tabs and Groups, where a Tab is used to organize multiple web dashboards, and a Group is used to define a collection of UI elements (widgets in Node-RED terminology) that are related and placed in a common grid area of a webpage. For more information, refer to the Node-RED dashboard documentation.

To create this flow, perform the following steps:

Download Exercise 1.2 from the SmartServer GitHub Repository → Node-RED Tutorial folder and import it into the Sequencing widget.

This downloaded flow will serve as a template for the flow that you will be creating in this exercise, and will look similar to the following in your workspace:

Flows downloaded from the SmartServer GitHub repository will be disabled when they are imported into the Sequencing widget.
Click Deploy to save the flow.
Click the Add Flow button () to begin creating a new flow.

A new flow tab is added to the workspace.
Double-click the new tab on the workspace.

The Edit flow view appears.
Enter the flow name.
Click Done.
Drag the slider node and gauge node onto the workspace.
Connect the slider and gauge nodes together.
Click the Dashboard button ().

The dashboard layout appears.
Click the add tab button.

A new tab is added to the dashboard layout.
Place your cursor over the new tab and select the edit option.

The Edit dashboard tab node view appears allowing you to set the properties including the tab name (New Tab 2 in this example).
Click Update.
Place your cursor over the new tab again and select the +group option.

A new group is added to the dashboard layout just below the new tab.
Place your cursor over the new group and select the edit option.

The Edit dashboard group node view appears allowing you to set the properties including the group name (New Group 2 in this example).
Click Update.
Double-click the slider node on the workspace.

The Edit slider node view appears.
Use Group dropdown list to select the newly created tab and group.
Click Done.
Double-click the gauge node.

The Edit gauge node view appears.
Use Group dropdown list to select the newly created tab and group.
Click Done.

The workspace is displayed.
Click Deploy to save the flow.
Click DASHBOARD to generate the visual display.

Note: On the first use, DASHBOARD appears as FLOWS.

Note: As you create multiple tabs/groups, a Menu button () will appear on the dashboard allowing you to select the tab/group from a list as shown in the example below.
Use the slider to change the value.
Click FLOWS to return to the Sequencing widget workspace.

The slider node reflects the value setting change in the workspace.