Add dashboard user guide #167
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Currently, there is a table of contents only but we are going to publish the first commit (Introduction to dashboard) at the end of August. |
Add layout section of dashboard document
Fix typos in layout
dceejay
reviewed
Jun 22, 2021
docs/dashboard/layout.md
Outdated
|
|
||
| <!-- Node-RED Dashboardは`Widget`、`Group`、および、`Tab`から構成されます。WidgetはButton、ChartなどGUI部品です。TabはWebブラウザ上に表示するダッシュボード画面全体を表します。Tabは複数定義でき、サイドメニューからの選択、もしくは、ui_controlノードで切り替えて一つのタブを表示できます。Groupは複数のWidgetを配置する領域を定義するために使用します。GroupおよびTabはConfigノードです。--> | ||
|
|
||
| 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. |
There was a problem hiding this comment.
I would keep the logical order. So once you introduce widgets, groups and then tabs. I would then follow with what a widget is (as you have) , then groups... and then tabs
docs/dashboard/layout.md
Outdated
|
|
||
| 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. | ||
|
|
||
| ### Layouting Dashboard Elements |
docs/dashboard/layout.md
Outdated
|
|
||
| <!-- SIteタブでは、Widget間の間隔およびおよびグループ間の間隔と余白も設定できます。 --> | ||
|
|
||
| On the `Site` tab, spacing between widgets and the spacing and paddings between groups can also be specified. |
There was a problem hiding this comment.
On the Site tab, the spacing...
docs/dashboard/layout.md
Outdated
|
|
||
| 2. 各グループについて、上から下、左から右にTabに配置する。--> | ||
|
|
||
| While layouting the dashboard screen, placements of screen elements are determined as follows: |
There was a problem hiding this comment.
-> When laying out the dashboard screen, the placement of screen elements is ....
docs/dashboard/layout.md
Outdated
|
|
||
| While layouting the dashboard screen, placements of screen elements are determined as follows: | ||
|
|
||
| 1. place widgets in each group from top to bottom and left to right, |
There was a problem hiding this comment.
Precedence is left to right first then top to bottom...
docs/dashboard/layout.md
Outdated
|
|
||
| <!-- Widgetおよびtabのサイズは、*Size*項目により設定します。Size項目を選択すると、サイズ洗濯のためのポップアップインターフェイスが表示されます。サイズをグリッド領域で指定します。--> | ||
|
|
||
| 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. |
| <!-- ポップアップ上部の*W x H*をクリックすると、以下の数値入力ポップアップに変化します。大きな固定数値のサイズを指定する場合はこちらが便利です。--> | ||
|
|
||
| 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. | ||
|
|
There was a problem hiding this comment.
I can't see the wxh text that you need to click in the image ?
docs/dashboard/layout.md
Outdated
|
|
||
| <!-- 複雑なダッシュボード画面を構成する場合、Layout Editorを用いることで、GUIによってWidgetの配置を行うことができます。Layout EditorはLayoutタブのTab上のマウス オーバで表示される*layout*ボタンを押すことで起動します。--> | ||
|
|
||
| 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. |
docs/dashboard/layout.md
Outdated
|
|
||
| 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. |
There was a problem hiding this comment.
unlocked -> If the key is locked....
(it is fixed size when locked so you can set the size... if unlocked then it is auto sized)
docs/dashboard/layout.md
Outdated
|
|
||
| <!-- 各タブの設定から、タブの名称とアイコン、メニューへのタブの表示するか否かを設定できます。--> | ||
|
|
||
| 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. |
There was a problem hiding this comment.
Title and icons of... -> The title and icon of...
paneg -> panel
Fix according to suggestions from @dceejay
Thank you for your review. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hitachi colleagues have started to write a dashboard user guide because it is a little difficult for beginners to use the Node-RED dashboard. To share our progress with Node-RED community, I created this draft pull request. Comments from the community are always welcome.