Basic design of Node-Red UI interface

1. UI interface introduction

The layout of the UI depends on the Tab and Group attributes in the node. Tab can be understood as a page, and Group is a group. Tab can contain Group.
When using the dashboard control, you can set the Tab and Group names of the nodes, and you can view them on the UI interface after setting.

2.dashboard label

When using the dashboard node, there will be a small label named dashboard next to the "Debug Window" on the right side of the screen, and there are three options of Layout, Theme and Site below it.
Layout means layout. In Layout, you can rearrange Tab, Group and controls, and edit their properties. You can also add other web pages to the Tab.
Site means the address, you can set the UI of the title, or select the title bar. You can also set the basic graphics of the grid layout in units of pixels, which is the "unit" that is 48 pixels by default, or set the controls separately. The size of the group Theme means the theme
. You can choose bright, dark, or custom.

（1）Layout

In the Layout tab, you can view the Tabs and Groups of all programs, and view the nodes contained in the corresponding tabs. Of course, the most important function is the revision of the layout. There are two revision methods here, which can be adjusted according to preference.

1. Layout modification-1
   Press and hold the node you want to move with the left button, and drag it to a suitable position. There will be a dotted line to mark the target position.
   Advantages: This method is faster to drag and easy to operate;
   Disadvantages: The size of the node needs to be set when setting Tab or Group, and it will automatically fill in the vacant position according to the size of the node. When the size of the node is not uniform , the interface is not beautiful.
   
2. Layout modification-2
   Click Layout after the Tab name to adjust the layout of the nodes in the entire interface. When the node is not locked, it means auto , and the size cannot be adjusted; when the node is locked, you can drag and drop the node at will, and modify the length and width of the node.
   Advantages: When using this method to modify the layout, modify the layout of the interface and the layout viewed for the UI interface, and have a high degree of overall grasp of the layout; Disadvantages: You can only
   modify the nodes in this Tab. When the UI interface displays multiple Tabs, The order of tabs cannot be adjusted.
   

（2）Site

There are many modifiable contents in the Site design interface

1. Title: The name of the UI interface can be modified. The name mentioned here refers to the name of the browser tab;
2. Options：

• In the option menu, you can modify the display or hide the label frame. The label frame is the horizontal part that displays the Tab name on the UI interface. The default color is blue; the following is a comparison effect diagram of the two options;
  

• Choose to display or hide the menu name, the menu name is the vertical part of the displayed Tab name;
  

3. Date Format is the date format. For details, you can check the details in the upper left corner of the input box and enter the details interface to view;
4. Sizes can adjust the 1x1 window size, window spacing, etc.

（3）Theme

Node-red can also set different themes for the UI interface, including day, night, and customization; under the day or night theme, you can also customize the color of bar, tab font color, node default background coloring, etc.; you can also modify all The font of the numbers or letters of the UI interface.