diff --git a/_includes/toc-dashboard.html b/_includes/toc-dashboard.html index d9ce27a1..a32fdb7f 100644 --- a/_includes/toc-dashboard.html +++ b/_includes/toc-dashboard.html @@ -10,7 +10,7 @@
  • The first step of dashboard
  • Widget
  • Layouting Dashboard
    • + %}class="active"{% endif%}>Laying out Dashboard
  • node-red-dashboard nodes
  • Dashboard extra nodes
    • diff --git a/docs/dashboard/layout.md b/docs/dashboard/layout.md index d958af23..0091a098 100644 --- a/docs/dashboard/layout.md +++ b/docs/dashboard/layout.md @@ -1,7 +1,7 @@ --- layout: docs-dashboard toc: toc-dashboard.html -title: Layouting Dashboard +title: Laying out Dashboard --- @@ -10,11 +10,11 @@ title: 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 Node-RED Dashboard consists of `Widget`,`Group`, and `Tab`. Widget is a GUI element such as button or chart. Group is used to define the area where multiple widgets will be placed. Tab may contain multiple groups and 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 and Tab are defined as configuration nodes. -### Layouting Dashboard Elements +### Laying out Dashboard Elements @@ -26,7 +26,7 @@ title: Layouting Dashboard -On the `Site` tab, spacing between widgets and the spacing and paddings between groups can also be specified. +On the `Site` tab, the spacing between widgets and the spacing and paddings between groups can also be specified.
    @@ -42,11 +42,11 @@ On the `Site` tab, spacing between widgets and the spacing and paddings between 2. 各グループについて、上から下、左から右にTabに配置する。--> -While layouting the dashboard screen, placements of screen elements are determined as follows: +While laying out the dashboard screen, the placements of screen element is determined as follows: -1. place widgets in each group from top to bottom and left to right, +1. place widgets in each group from left to right then top to bottom, -2. place groups in each tab from top to bottom and left to right. +2. place groups in each tab from left to right then top to bottom. - 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. + 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 left to right then top to bottom, and the first found area is used to place it. If the browser that is displaying the dashboard is resized, the placement of the groups 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. @@ -92,17 +92,17 @@ While layouting the dashboard screen, placements of screen elements are determin - 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. + 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 element 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. + Pressing the `auto` button indicate to set the widget size automatically. Its behavior 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. + Clicking *6 x 4* , the size of widget, at the top left 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. ElementSizerNum.png @@ -128,7 +128,7 @@ The `Spacer` node can be used for fine-tuning the placement of widgets in a grou - 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. + While laying out 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.
    @@ -144,7 +144,7 @@ The `Spacer` node can be used for fine-tuning the placement of widgets in a grou 　Layout Editorでレイアウトを行うと、必要な位置にSpacerノードを自動的に挿入します。--> - 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. + 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 locked, 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. @@ -176,7 +176,7 @@ At the top of the dashboard screen, a title bar that displays side menus etc. is -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. +The title and icon of each tab and whether to display the tab on the side menu can be set from the settings panel of each tab.