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.

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 figure shown below. 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.

For SmartServer 4.0 Update 1 and prior, the Sequencing widget buttons appear as follows:

For SmartServer 4.1 (Beta) and higher, the Sequencing widget appears as follows:

A new flow tab is added to the workspace.
Double-click the new tab on the workspace and enter the flow name in the Edit flow view.
Click Done.

The workspace appears.
Drag the slider node and gauge node onto the workspace.
Connect the slider and gauge nodes together.
Depending on your Node-RED version, click the Dashboard button () or select select the Dashboard menu option.

The dashboard layout appears.
Click the +tab button.

A new tab is added to the dashboard layout.
Place your cursor over the new tab (Tab 2) 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 1 in this example).
Click Update.

The workspace appears.
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. Prior to SmartServer 3.0, DASHBOARD appears as FLOWS on the first use.

The FLOWS view appears.
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.

Next Step

Once you have completed the exercises in this section, continue with Class 2 - Contexts and IAP Nodes.

Browser not supported