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:
| Table of Contents |
|---|
Class Contents
Node-RED Concepts
Review Node-RED Concepts to gain an understanding of Node-RED basics, common terms, and the system model.
...
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.
| Info | ||
|---|---|---|
| ||
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:Note 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 Note: On the first use, DASHBOARD appears as FLOWS.
Note 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.
...