| layout | toc | title |
|---|---|---|
docs-dashboard |
toc-dashboard.html |
Layouting Dashboard |
The Node-RED Dashboard consists of Widget,Group, and Tab. Widget is a GUI element such as button or chart. Tab represents the entire dashboard screen displayed on the Web browser. Multiple Tabs can be defined, and one tab can be displayed by selecting from the side menu or switched with the ui_control node. Group is used to define the area where multiple widgets will be placed. Group and Tab are defined as configuration nodes.
The dashboard layout is defined using a grid with fixed size element. The widget has the height and width, and the group has the width in units of the number of grid elements. The size in pixels of the grid's unit element can be set by '1x1 Widget Size' of the Site tab of the dashboard sidebar.
On the Site tab, spacing between widgets and the spacing and paddings between groups can also be specified.
The widgets are arranged in the group and the group in the tab so that they fit within their respective widths. The hierarchical relationship of these elements can be managed in the Layout tab of the dashboard sidebar.
While layouting the dashboard screen, placements of screen elements are determined as follows:
-
place widgets in each group from top to bottom and left to right,
-
place groups in each tab from top to bottom and left to right.
To place the widgets on the belonging group and the groups on the belonging tab, free space that can place the element is searched from top to bottom and from left to right, and the first found area is used to place it. If the browser that is displaying the dashboard is resized, the placement of the goups within the displayed tab will be adjusted automatically.
The order and belonging relation of UI elements on the Layout tab can be changed by drag & drop of an element.
The group to place a widget can be set by the Group item of Properties of the UI node corresponding to the widget. The Size item is used for setting the widget size.
The Group setting specify the belonging tab and the width of the group in the same way.
A new tab can be added by pressing the +tab button on the Layout tab of the dashboard sidebar, and a new group can be added by pressing the +group button that appears while mouse over the group element.
The size of widget and tab is set by the Size item. Selecting the Size item will display a popup interface for specifying UI element size. The size of the UI elemt can be specified by the grid area of this popup UI.
Pressing the auto button indicate to set the widget size automatically. Its behaviour depends on implementation of each UI widgets. Typically, the width of the widget is set to the same width of the belonging group, and the height is set to appropriate value.
Clicking W xH at the top of the UI will display the following interface for changing the widget size using digits input. This UI is useful to specify the size for large widget.
The Spacer node can be used for fine-tuning the placement of widgets in a group. The Spacer node is a special widget for filling in the area with the specified size.
To add a Spacer to a group, use the +spacer button displayed while mouse over the group on the Layout tab.
While layouting a complicated dashboard screen, GUI-based Layout Editor can be used. The layout editor can be opened by pressing the layout button displayed while mouse over on a tab on the Layout tab.
The Layout Editor displays the grid layout of the groups that make up the specified tab.
The width of each group can be changed by the Width item displayed on the top right.
The placement of widgets in a group can be changed by drag & dropping a widget. The lock mark on the upper right of the widget indicates whether the widget size is auto or not. If the key is unlocked, the widget size can be changed by dragging the arrow at the bottom right.
After finishing layout with the Layout Editor, Spacer nodes are automatically inserted at appropriate positions.
A link to a web page instead of tab can be added to side menu using +Link button of the Layout tab. The specified link can be selected from the side menu of dashboard or the ui_control node and can redirect to the page or can embed it in the dashboard using iframe.
The group name is displayed at the top of the group on the dashboard by default. It can be disabled by unselecting the'Display group name' check box of the group settings panel.
At the top of the dashboard screen, a title bar that displays side menus etc. is shown by default. This can be hidden by the Site tab settings. Also, the side menu can be configured to be always shown or shown in icon only from the Site tab settings.
Title and icons of each tab and whether to display the tab on the side menu can be set from the settings paneg of each tab.
Material Design icon (e.g. 'check', 'close'), a Font Awesome icon (e.g. 'fa-fire'), a Weather icon (e.g. 'wi-wu-sunny'), or a Google material icon (e.g. 'mi-videogame_asset') can be used as an icon for a tab.