In this class, you will become familiar with basic Node-RED terms, concepts, and the editor window, and understand the process for creating flows.
...
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.
...
...
| title | 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 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 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 .
The and enter the flow name in the Edit flow view appears.
Enter the flow name.
- Click Done.
The workspace appears.
- Drag the slider node and gauge node onto the workspace.
- Connect the slider and gauge nodes together.
- Click Depending on your Node-RED version, click the Dashboard button (
) or select select the Dashboard menu option.
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 (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 2 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.
Note Prior to SmartServer 3.0, DASHBOARD appears as FLOWS on the first use.
Note 
) will appear on the dashboard allowing you to select the tab/group from a list as shown in the example below.
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.
...