Add dashboard user guide by kazuhitoyokoi · Pull Request #167 · node-red/node-red.github.io · GitHub

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.

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

Just some tidy up comments.

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

Layouting... -> Laying out...

On the Site tab, the spacing...

-> When laying out the dashboard screen, the placement of screen elements is ....

Precedence is left to right first then top to bottom...

elemt -> element

I can't see the wxh text that you need to click in the image ?

layouting -> laying out

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)

Title and icons of... -> The title and icon of...
paneg -> panel

Fix according to suggestions from @dceejay

Just some tidy up comments.

Thank you for your review.
I have corrected the document according to your suggestions.

Add dashboard user guide

4bb5e7c

kazuhitoyokoi and others added 6 commits September 18, 2020 20:49

Changed sample because previous one needs extra node to get CPU data

d63683a

Add layout section of dashboard document

aefe5b4

Merge pull request #1 from node-red-hitachi/update-layout

02ffe81

Add layout section of dashboard document

fix typos

957dd6a

update typos in layout document

246bf6f

Merge pull request #2 from node-red-hitachi/fix-typos-in-layout

e43514a

Fix typos in layout

dceejay reviewed Jun 22, 2021

View reviewed changes

HiroyasuNishiyama added 2 commits June 24, 2021 18:32

fixed according to suggestions from @dceejay

8e72c77

Merge pull request #3 from node-red-hitachi/fix-comments

fc5e2fc

Fix according to suggestions from @dceejay


		<!--　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.


		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


		<!-- SIteタブでは、Widget間の間隔およびおよびグループ間の間隔と余白も設定できます。 -->

		On the `Site` tab, spacing between widgets and the spacing and paddings between groups can also be specified.


		2. 各グループについて、上から下、左から右にTabに配置する。-->

		While layouting the dashboard screen, placements of screen elements are determined as follows:


		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,


		<!--　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.


		<!--　複雑なダッシュボード画面を構成する場合、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.


		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.


		<!-- 各タブの設定から、タブの名称とアイコン、メニューへのタブの表示するか否かを設定できます。-->

		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.

Add dashboard user guide by kazuhitoyokoi · Pull Request #167 · node-red/node-red.github.io · GitHub

Uh oh!

Add dashboard user guide - #167

Add dashboard user guide#167kazuhitoyokoi wants to merge 9 commits intonode-red:mainnode-red/node-red.github.io:mainfrom node-red-hitachi:master-adddashboardnode-red-hitachi/node-red.github.io:master-adddashboardCopy head branch name to clipboard

Conversation

kazuhitoyokoi commented Aug 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kazuhitoyokoi commented Aug 5, 2020

Uh oh!

dceejay left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HiroyasuNishiyama commented Jun 24, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add dashboard user guide#167
kazuhitoyokoi wants to merge 9 commits into
node-red:mainfrom
node-red-hitachi:master-adddashboard

kazuhitoyokoi commented Aug 5, 2020 •
edited
Loading