diff --git a/_includes/toc-dashboard.html b/_includes/toc-dashboard.html new file mode 100644 index 00000000..a32fdb7f --- /dev/null +++ b/_includes/toc-dashboard.html @@ -0,0 +1,26 @@ + + diff --git a/_layouts/docs-dashboard.html b/_layouts/docs-dashboard.html new file mode 100644 index 00000000..a73c1183 --- /dev/null +++ b/_layouts/docs-dashboard.html @@ -0,0 +1,3 @@ +{% assign parent_url = '/docs/dashboard' %} +{% assign parent_slug = 'dashboard' %} +{% include docs-content.html %} diff --git a/docs/dashboard/configuration-ja.md b/docs/dashboard/configuration-ja.md new file mode 100644 index 00000000..ff8d7336 --- /dev/null +++ b/docs/dashboard/configuration-ja.md @@ -0,0 +1,14 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Dashbord configuration (ダッシュボードを設定する) +--- + +### Changing URL for dashboard (ダッシュボードのURL変更) +text + +### Authentication of dashboard (ダッシュボード表示前に認証を行う) +text + +### Readonly setting for dashboard (ダッシュボードをreadonlyに設定する) +text diff --git a/docs/dashboard/configuration.md b/docs/dashboard/configuration.md new file mode 100644 index 00000000..ea1920f5 --- /dev/null +++ b/docs/dashboard/configuration.md @@ -0,0 +1,14 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Dashboard configuration +--- + +### Changing URL for dashboard +text + +### Authentication of dashboard +text + +### Readonly setting for dashboard +text diff --git a/docs/dashboard/extranodes-ja.md b/docs/dashboard/extranodes-ja.md new file mode 100644 index 00000000..4b8ba5fc --- /dev/null +++ b/docs/dashboard/extranodes-ja.md @@ -0,0 +1,15 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Dashboard extra nodes +--- + +### Show richer table (リッチなテーブルを表示する) +text + +### Show list (リストを表示する) +text + +### Plot data on the map (地図上にデータを重ねて表示する) +text + diff --git a/docs/dashboard/extranodes.md b/docs/dashboard/extranodes.md new file mode 100644 index 00000000..9f23e764 --- /dev/null +++ b/docs/dashboard/extranodes.md @@ -0,0 +1,15 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Dashboard extra nodes +--- + +### Show richer table +text + +### Show list +text + +### Plot data on the map +text + diff --git a/docs/dashboard/firststep-ja.md b/docs/dashboard/firststep-ja.md new file mode 100644 index 00000000..9aff9ab4 --- /dev/null +++ b/docs/dashboard/firststep-ja.md @@ -0,0 +1,26 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: The first step of dashboard (はじめてのダッシュボード) +--- + +### Overview (Creating dashboard to monitor temperature data) (概要(気温データを監視するdashboadを作成する)) +text + +### Description of flow handling (フローの処理概要) +text + +### Adding UI nodes to the workspace (UIノードをワークスペースに追加する) +text + +### Layouting UI nodes by the dashboard layout editor (UIノードをダッシュボードレイアウトエディタで配置する) +text + +### Configuration of the UI node properties (UIノードのプロパティを設定する) +text + +### Source of the flow (ソース) +text + +### References (関連するドキュメント) +text diff --git a/docs/dashboard/firststep.md b/docs/dashboard/firststep.md new file mode 100644 index 00000000..bef6f755 --- /dev/null +++ b/docs/dashboard/firststep.md @@ -0,0 +1,26 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: The first step of dashboard +--- + +### Overview (Creating dashboard to monitor temperature data) +text + +### Description of flow handling +text + +### Adding UI nodes to the workspace +text + +### Layouting UI nodes by the dashboard layout editor +text + +### Configuration of the UI node properties +text + +### Source of the flow +text + +### References +text diff --git a/docs/dashboard/images/layout/ElementSizerNum.png b/docs/dashboard/images/layout/ElementSizerNum.png new file mode 100644 index 00000000..27c5e800 Binary files /dev/null and b/docs/dashboard/images/layout/ElementSizerNum.png differ diff --git a/docs/dashboard/images/layout/ElementSizert.png b/docs/dashboard/images/layout/ElementSizert.png new file mode 100644 index 00000000..bea9e4ff Binary files /dev/null and b/docs/dashboard/images/layout/ElementSizert.png differ diff --git a/docs/dashboard/images/layout/Group-Properties.png b/docs/dashboard/images/layout/Group-Properties.png new file mode 100644 index 00000000..2c932aa7 Binary files /dev/null and b/docs/dashboard/images/layout/Group-Properties.png differ diff --git a/docs/dashboard/images/layout/Layout.png b/docs/dashboard/images/layout/Layout.png new file mode 100644 index 00000000..ed8e041d Binary files /dev/null and b/docs/dashboard/images/layout/Layout.png differ diff --git a/docs/dashboard/images/layout/LayoutButton.png b/docs/dashboard/images/layout/LayoutButton.png new file mode 100644 index 00000000..1c17003f Binary files /dev/null and b/docs/dashboard/images/layout/LayoutButton.png differ diff --git a/docs/dashboard/images/layout/LayoutEditor.png b/docs/dashboard/images/layout/LayoutEditor.png new file mode 100644 index 00000000..dfa04f2a Binary files /dev/null and b/docs/dashboard/images/layout/LayoutEditor.png differ diff --git a/docs/dashboard/images/layout/Link.png b/docs/dashboard/images/layout/Link.png new file mode 100644 index 00000000..7173cfa0 Binary files /dev/null and b/docs/dashboard/images/layout/Link.png differ diff --git a/docs/dashboard/images/layout/OLD/ElementSizerNum.png b/docs/dashboard/images/layout/OLD/ElementSizerNum.png new file mode 100644 index 00000000..f378e491 Binary files /dev/null and b/docs/dashboard/images/layout/OLD/ElementSizerNum.png differ diff --git a/docs/dashboard/images/layout/OLD/ElementSizert.png b/docs/dashboard/images/layout/OLD/ElementSizert.png new file mode 100644 index 00000000..29053904 Binary files /dev/null and b/docs/dashboard/images/layout/OLD/ElementSizert.png differ diff --git a/docs/dashboard/images/layout/OLD/Group-Properties.png b/docs/dashboard/images/layout/OLD/Group-Properties.png new file mode 100644 index 00000000..369b6787 Binary files /dev/null and b/docs/dashboard/images/layout/OLD/Group-Properties.png differ diff --git a/docs/dashboard/images/layout/OLD/Layout.png b/docs/dashboard/images/layout/OLD/Layout.png new file mode 100644 index 00000000..cb9a7ee8 Binary files /dev/null and b/docs/dashboard/images/layout/OLD/Layout.png differ diff --git a/docs/dashboard/images/layout/OLD/Link.png b/docs/dashboard/images/layout/OLD/Link.png new file mode 100644 index 00000000..cb9b156f Binary files /dev/null and b/docs/dashboard/images/layout/OLD/Link.png differ diff --git a/docs/dashboard/images/layout/OLD/Site.png b/docs/dashboard/images/layout/OLD/Site.png new file mode 100644 index 00000000..6feb7efa Binary files /dev/null and b/docs/dashboard/images/layout/OLD/Site.png differ diff --git a/docs/dashboard/images/layout/OLD/Spacer.png b/docs/dashboard/images/layout/OLD/Spacer.png new file mode 100644 index 00000000..550d7299 Binary files /dev/null and b/docs/dashboard/images/layout/OLD/Spacer.png differ diff --git a/docs/dashboard/images/layout/OLD/Tab-Group-button.png b/docs/dashboard/images/layout/OLD/Tab-Group-button.png new file mode 100644 index 00000000..a42f2a77 Binary files /dev/null and b/docs/dashboard/images/layout/OLD/Tab-Group-button.png differ diff --git a/docs/dashboard/images/layout/OLD/Widget-Properties.png b/docs/dashboard/images/layout/OLD/Widget-Properties.png new file mode 100644 index 00000000..ec335a87 Binary files /dev/null and b/docs/dashboard/images/layout/OLD/Widget-Properties.png differ diff --git a/docs/dashboard/images/layout/Site.png b/docs/dashboard/images/layout/Site.png new file mode 100644 index 00000000..fbdbf24d Binary files /dev/null and b/docs/dashboard/images/layout/Site.png differ diff --git a/docs/dashboard/images/layout/Spacer.png b/docs/dashboard/images/layout/Spacer.png new file mode 100644 index 00000000..0eeaac02 Binary files /dev/null and b/docs/dashboard/images/layout/Spacer.png differ diff --git a/docs/dashboard/images/layout/Tab-Group-button.png b/docs/dashboard/images/layout/Tab-Group-button.png new file mode 100644 index 00000000..994b43e0 Binary files /dev/null and b/docs/dashboard/images/layout/Tab-Group-button.png differ diff --git a/docs/dashboard/images/layout/Widget-Properties.png b/docs/dashboard/images/layout/Widget-Properties.png new file mode 100644 index 00000000..11feed26 Binary files /dev/null and b/docs/dashboard/images/layout/Widget-Properties.png differ diff --git a/docs/dashboard/index-ja.md b/docs/dashboard/index-ja.md new file mode 100644 index 00000000..611c9613 --- /dev/null +++ b/docs/dashboard/index-ja.md @@ -0,0 +1,6 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Dashboard user guide +--- + diff --git a/docs/dashboard/index.md b/docs/dashboard/index.md new file mode 100644 index 00000000..611c9613 --- /dev/null +++ b/docs/dashboard/index.md @@ -0,0 +1,6 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Dashboard user guide +--- + diff --git a/docs/dashboard/installation-ja.md b/docs/dashboard/installation-ja.md new file mode 100644 index 00000000..1b289362 --- /dev/null +++ b/docs/dashboard/installation-ja.md @@ -0,0 +1,8 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Installation of dashboard (ダッシュボードをインストールする) +--- + +### Installing node-red-dashboard (node-red-dashboadのインストール) +text diff --git a/docs/dashboard/installation.md b/docs/dashboard/installation.md new file mode 100644 index 00000000..810cd453 --- /dev/null +++ b/docs/dashboard/installation.md @@ -0,0 +1,8 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Installation of dashboard +--- + +### Installing node-red-dashboard +text diff --git a/docs/dashboard/introduction-ja.md b/docs/dashboard/introduction-ja.md new file mode 100644 index 00000000..cd95b369 --- /dev/null +++ b/docs/dashboard/introduction-ja.md @@ -0,0 +1,8 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Introduction (はじめに) +--- + +### What is dashboard? (ダッシュボードとは) +text diff --git a/docs/dashboard/introduction.md b/docs/dashboard/introduction.md new file mode 100644 index 00000000..dc69d4ea --- /dev/null +++ b/docs/dashboard/introduction.md @@ -0,0 +1,8 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Introduction +--- + +### What is dashboard? +text diff --git a/docs/dashboard/layout.md b/docs/dashboard/layout.md new file mode 100644 index 00000000..0091a098 --- /dev/null +++ b/docs/dashboard/layout.md @@ -0,0 +1,183 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Laying out Dashboard +--- + + + +### Basic UI Elements of Dashboard + + + + + + 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. + +### Laying out Dashboard Elements + + + + + + + + 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, the 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 laying out the dashboard screen, the placements of screen element is determined as follows: + +1. place widgets in each group from left to right then top to bottom, + +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 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. + +
+ +### Adding a Widget to Dashboard + + + + + + 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. + +![Widget-Properties.png](images/layout/Widget-Properties.png) + + + + The *Group* setting specify the belonging tab and the width of the group in the same way. + +![Group-Properties.png](images/layout/Group-Properties.png) + + + + + + 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. + +
+ +### Setting UI Element 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 element can be specified by the grid area of this popup UI. + + + + 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 *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 + +### Adjusting Layout using Spacer + + + + + + + +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. + +
+ +### Layout Editor + + + + + + 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. + +
+ + + + 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 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. + +![LayoutEditor.png](images/layout/LayoutEditor.png) + +
+ +### Link to Web Page + + + +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. + +### Configuring Group Title + + + + + + 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. + +### Configuring Title Bar & Side Menu + + + + + +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. + + + +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. + + + + [Material Design icon](https://klarsys.github.io/angular-material-icons/) *(e.g. 'check', 'close')*, a [Font Awesome icon](https://fontawesome.com/v4.7.0/icons/) *(e.g. 'fa-fire')*, a [Weather icon](https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md) *(e.g. 'wi-wu-sunny')*, or a [Google material icon](https://fonts.google.com/icons) *(e.g. 'mi-videogame_asset')* can be used as an icon for a tab. diff --git a/docs/dashboard/nodes-ja.md b/docs/dashboard/nodes-ja.md new file mode 100644 index 00000000..79c98f58 --- /dev/null +++ b/docs/dashboard/nodes-ja.md @@ -0,0 +1,26 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: node-red-dashboard nodes +--- + +### Visualize data in real-time (リアルタイムデータを表示する) +text + +### Show time-series data (時系列データを表示する) +text + +### Switch status on dashboard (画面の状態を切り替える) +text + +### Show table (テーブルを表示する) +text + +### Show button with label (ラベル付きボタンを表示する) +text + +### Change setting values on dashboard (画面から設定値を変更する) +text + +### Move dashboard using switching tabs (複数のタブを切り替えて画面を遷移する) +text diff --git a/docs/dashboard/nodes.md b/docs/dashboard/nodes.md new file mode 100644 index 00000000..af4dd1b3 --- /dev/null +++ b/docs/dashboard/nodes.md @@ -0,0 +1,26 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: node-red-dashboard nodes +--- + +### Visualize data in real-time +text + +### Show time-series data +text + +### Switch status on dashboard +text + +### Show simple table +text + +### Show button with label +text + +### Change setting values on dashboard +text + +### Move dashboard using switching tabs +text diff --git a/docs/dashboard/usage-ja.md b/docs/dashboard/usage-ja.md new file mode 100644 index 00000000..f5f7d048 --- /dev/null +++ b/docs/dashboard/usage-ja.md @@ -0,0 +1,29 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Dashboard usage (ダッシュボードを利用する) +--- + +### Adding tabs and settings (タブの追加と設定) +text + +### Creating groups and settings (グループの作成と設定) +text + +### Setting sites (サイトの設定) +text + +### Theme settings (テーマの設定) +text + +### Creating links and settings (リンクの作成と設定) +text + +### Adding Widget to group (Widgetをグループへ追加する) +text + +### Width and height settings of widget (Widgetの幅と高さの設定) +text + +### Layout setting of widget (Widgetの配置の設定) +text diff --git a/docs/dashboard/usage.md b/docs/dashboard/usage.md new file mode 100644 index 00000000..0d07ec8c --- /dev/null +++ b/docs/dashboard/usage.md @@ -0,0 +1,29 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Dashboard usage +--- + +### Adding tabs and settings +text + +### Creating groups and settings +text + +### Setting sites +text + +### Theme settings +text + +### Creating links and settings +text + +### Adding widget to group +text + +### Width and height settings of widget +text + +### Layout setting of widget +text diff --git a/docs/dashboard/widget-ja.md b/docs/dashboard/widget-ja.md new file mode 100644 index 00000000..b296b146 --- /dev/null +++ b/docs/dashboard/widget-ja.md @@ -0,0 +1,11 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Widget +--- + +### Widget list (Widget一覧) +text + +### How to select widgets (Widgetの選び方) +text diff --git a/docs/dashboard/widget.md b/docs/dashboard/widget.md new file mode 100644 index 00000000..e2325401 --- /dev/null +++ b/docs/dashboard/widget.md @@ -0,0 +1,11 @@ +--- +layout: docs-dashboard +toc: toc-dashboard.html +title: Widget +--- + +### Widget list +text + +### How to select widgets +text diff --git a/docs/index.html b/docs/index.html index b75cf959..ef73a1cf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -27,12 +27,17 @@

Frequently Asked Questions

Tutorials

Examples of what you can do, taken one step at a time

-
  • -
    -

    Cookbook

    -

    Recipes to help you get things done with Node-RED

    -
    • +
  • +
    +

    Cookbook

    +

    Recipes to help you get things done with Node-RED

    +
    • +
  • +
    +

    Dashboard

    +

    The definitive guide to using Node-RED Dashboard

    +