diff --git a/_includes/docs-content.html b/_includes/docs-content.html index bf8ab7b6..37df893f 100644 --- a/_includes/docs-content.html +++ b/_includes/docs-content.html @@ -13,6 +13,9 @@
{% endif %}
+{% if banner %} +
{{ banner}}
+{% endif %}

{{ page.title }}

{{ content }}
diff --git a/_includes/toc-editor-guide.html b/_includes/toc-editor-guide.html index fc8e89a9..33af8209 100644 --- a/_includes/toc-editor-guide.html +++ b/_includes/toc-editor-guide.html @@ -4,6 +4,8 @@
- ### Running locally @@ -104,6 +103,7 @@ Once Node-RED is running you can access the editor in a browser. If you are using the browser on the Pi desktop, you can open the address: .
We recommend using a browser outside of the Pi and pointing it at Node-RED running on the Pi. However you can use the built in browser and if so we recommend Chromium or Firefox. +
When browsing from another machine you should use the hostname or IP-address of the Pi: `http://:1880`. You can find the IP address by running `hostname -I` on the Pi. diff --git a/docs/user-guide/editor/images/editor-actions-menu.png b/docs/user-guide/editor/images/editor-actions-menu.png new file mode 100644 index 00000000..21a3a7d1 Binary files /dev/null and b/docs/user-guide/editor/images/editor-actions-menu.png differ diff --git a/docs/user-guide/editor/images/editor-default.png b/docs/user-guide/editor/images/editor-default.png index 64e5a95b..c9a09285 100644 Binary files a/docs/user-guide/editor/images/editor-default.png and b/docs/user-guide/editor/images/editor-default.png differ diff --git a/docs/user-guide/editor/images/editor-deploy-menu.png b/docs/user-guide/editor/images/editor-deploy-menu.png index 4dabec30..3ccddbc9 100644 Binary files a/docs/user-guide/editor/images/editor-deploy-menu.png and b/docs/user-guide/editor/images/editor-deploy-menu.png differ diff --git a/docs/user-guide/editor/images/editor-edit-config-node.png b/docs/user-guide/editor/images/editor-edit-config-node.png index ad6585c8..a9bd6f5e 100644 Binary files a/docs/user-guide/editor/images/editor-edit-config-node.png and b/docs/user-guide/editor/images/editor-edit-config-node.png differ diff --git a/docs/user-guide/editor/images/editor-edit-flow.png b/docs/user-guide/editor/images/editor-edit-flow.png index b5f50596..db1e3057 100644 Binary files a/docs/user-guide/editor/images/editor-edit-flow.png and b/docs/user-guide/editor/images/editor-edit-flow.png differ diff --git a/docs/user-guide/editor/images/editor-edit-node-appearance.png b/docs/user-guide/editor/images/editor-edit-node-appearance.png index f4b180f3..e653c2b8 100644 Binary files a/docs/user-guide/editor/images/editor-edit-node-appearance.png and b/docs/user-guide/editor/images/editor-edit-node-appearance.png differ diff --git a/docs/user-guide/editor/images/editor-edit-node-config-node.png b/docs/user-guide/editor/images/editor-edit-node-config-node.png index c7b498b1..f0a20741 100644 Binary files a/docs/user-guide/editor/images/editor-edit-node-config-node.png and b/docs/user-guide/editor/images/editor-edit-node-config-node.png differ diff --git a/docs/user-guide/editor/images/editor-edit-node-description.png b/docs/user-guide/editor/images/editor-edit-node-description.png index 15ab9d45..93112674 100644 Binary files a/docs/user-guide/editor/images/editor-edit-node-description.png and b/docs/user-guide/editor/images/editor-edit-node-description.png differ diff --git a/docs/user-guide/editor/images/editor-edit-node.png b/docs/user-guide/editor/images/editor-edit-node.png index f0f93b35..9b50c106 100644 Binary files a/docs/user-guide/editor/images/editor-edit-node.png and b/docs/user-guide/editor/images/editor-edit-node.png differ diff --git a/docs/user-guide/editor/images/editor-edit-subflow.png b/docs/user-guide/editor/images/editor-edit-subflow.png index bdec9842..82e37fec 100644 Binary files a/docs/user-guide/editor/images/editor-edit-subflow.png and b/docs/user-guide/editor/images/editor-edit-subflow.png differ diff --git a/docs/user-guide/editor/images/editor-flow-search-tabs.png b/docs/user-guide/editor/images/editor-flow-search-tabs.png index ba2c5c9e..c1f972ec 100644 Binary files a/docs/user-guide/editor/images/editor-flow-search-tabs.png and b/docs/user-guide/editor/images/editor-flow-search-tabs.png differ diff --git a/docs/user-guide/editor/images/editor-flow-tabs.png b/docs/user-guide/editor/images/editor-flow-tabs.png index 29625cae..5efb3744 100644 Binary files a/docs/user-guide/editor/images/editor-flow-tabs.png and b/docs/user-guide/editor/images/editor-flow-tabs.png differ diff --git a/docs/user-guide/editor/images/editor-node-details.png b/docs/user-guide/editor/images/editor-node-details.png index a8e34c60..ad0b7d63 100644 Binary files a/docs/user-guide/editor/images/editor-node-details.png and b/docs/user-guide/editor/images/editor-node-details.png differ diff --git a/docs/user-guide/editor/images/editor-node-docs.png b/docs/user-guide/editor/images/editor-node-docs.png new file mode 100644 index 00000000..10d1de8e Binary files /dev/null and b/docs/user-guide/editor/images/editor-node-docs.png differ diff --git a/docs/user-guide/editor/images/editor-node-errors.png b/docs/user-guide/editor/images/editor-node-errors.png new file mode 100644 index 00000000..cd0e43fc Binary files /dev/null and b/docs/user-guide/editor/images/editor-node-errors.png differ diff --git a/docs/user-guide/editor/images/editor-node-port-label.png b/docs/user-guide/editor/images/editor-node-port-label.png index 811ed62b..e4cd7d37 100644 Binary files a/docs/user-guide/editor/images/editor-node-port-label.png and b/docs/user-guide/editor/images/editor-node-port-label.png differ diff --git a/docs/user-guide/editor/images/editor-node-wire.png b/docs/user-guide/editor/images/editor-node-wire.png index 9019ae7e..17b0a962 100644 Binary files a/docs/user-guide/editor/images/editor-node-wire.png and b/docs/user-guide/editor/images/editor-node-wire.png differ diff --git a/docs/user-guide/editor/images/editor-palette.png b/docs/user-guide/editor/images/editor-palette.png index 9ff247e2..21c5807b 100644 Binary files a/docs/user-guide/editor/images/editor-palette.png and b/docs/user-guide/editor/images/editor-palette.png differ diff --git a/docs/user-guide/editor/images/editor-quick-add.png b/docs/user-guide/editor/images/editor-quick-add.png index f8247d8c..5a882c49 100644 Binary files a/docs/user-guide/editor/images/editor-quick-add.png and b/docs/user-guide/editor/images/editor-quick-add.png differ diff --git a/docs/user-guide/editor/images/editor-search-menu.png b/docs/user-guide/editor/images/editor-search-menu.png new file mode 100644 index 00000000..24d46243 Binary files /dev/null and b/docs/user-guide/editor/images/editor-search-menu.png differ diff --git a/docs/user-guide/editor/images/editor-search-toolbar.png b/docs/user-guide/editor/images/editor-search-toolbar.png new file mode 100644 index 00000000..ce9a6e36 Binary files /dev/null and b/docs/user-guide/editor/images/editor-search-toolbar.png differ diff --git a/docs/user-guide/editor/images/editor-search.png b/docs/user-guide/editor/images/editor-search.png index 543aeb05..3faa1a0d 100644 Binary files a/docs/user-guide/editor/images/editor-search.png and b/docs/user-guide/editor/images/editor-search.png differ diff --git a/docs/user-guide/editor/images/editor-settings-keyboard-edit.png b/docs/user-guide/editor/images/editor-settings-keyboard-edit.png new file mode 100644 index 00000000..dba03446 Binary files /dev/null and b/docs/user-guide/editor/images/editor-settings-keyboard-edit.png differ diff --git a/docs/user-guide/editor/images/editor-settings-keyboard.png b/docs/user-guide/editor/images/editor-settings-keyboard.png new file mode 100644 index 00000000..df13078e Binary files /dev/null and b/docs/user-guide/editor/images/editor-settings-keyboard.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-config-nodes.png b/docs/user-guide/editor/images/editor-sidebar-config-nodes.png index 99236206..620f171c 100644 Binary files a/docs/user-guide/editor/images/editor-sidebar-config-nodes.png and b/docs/user-guide/editor/images/editor-sidebar-config-nodes.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-context.png b/docs/user-guide/editor/images/editor-sidebar-context.png index 74f38427..58843bfc 100644 Binary files a/docs/user-guide/editor/images/editor-sidebar-context.png and b/docs/user-guide/editor/images/editor-sidebar-context.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-debug-filter.png b/docs/user-guide/editor/images/editor-sidebar-debug-filter.png index 04d1837a..f9aaf0b6 100644 Binary files a/docs/user-guide/editor/images/editor-sidebar-debug-filter.png and b/docs/user-guide/editor/images/editor-sidebar-debug-filter.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-debug-pause.png b/docs/user-guide/editor/images/editor-sidebar-debug-pause.png new file mode 100644 index 00000000..7109dd96 Binary files /dev/null and b/docs/user-guide/editor/images/editor-sidebar-debug-pause.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-debug.png b/docs/user-guide/editor/images/editor-sidebar-debug.png index 237ebff9..10a1ed24 100644 Binary files a/docs/user-guide/editor/images/editor-sidebar-debug.png and b/docs/user-guide/editor/images/editor-sidebar-debug.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-explorer.png b/docs/user-guide/editor/images/editor-sidebar-explorer.png new file mode 100644 index 00000000..272ce407 Binary files /dev/null and b/docs/user-guide/editor/images/editor-sidebar-explorer.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-help.png b/docs/user-guide/editor/images/editor-sidebar-help.png index 3c8cf3c6..00132f76 100644 Binary files a/docs/user-guide/editor/images/editor-sidebar-help.png and b/docs/user-guide/editor/images/editor-sidebar-help.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-info.png b/docs/user-guide/editor/images/editor-sidebar-info.png index c93db219..b9bfe30b 100644 Binary files a/docs/user-guide/editor/images/editor-sidebar-info.png and b/docs/user-guide/editor/images/editor-sidebar-info.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-panels.png b/docs/user-guide/editor/images/editor-sidebar-panels.png new file mode 100644 index 00000000..86ef8e3c Binary files /dev/null and b/docs/user-guide/editor/images/editor-sidebar-panels.png differ diff --git a/docs/user-guide/editor/images/editor-sidebar-toolbar.png b/docs/user-guide/editor/images/editor-sidebar-toolbar.png new file mode 100644 index 00000000..9441d555 Binary files /dev/null and b/docs/user-guide/editor/images/editor-sidebar-toolbar.png differ diff --git a/docs/user-guide/editor/images/editor-user-settings-view.png b/docs/user-guide/editor/images/editor-user-settings-view.png index 310c9253..4bc9814a 100644 Binary files a/docs/user-guide/editor/images/editor-user-settings-view.png and b/docs/user-guide/editor/images/editor-user-settings-view.png differ diff --git a/docs/user-guide/editor/images/editor-wiring-splice.png b/docs/user-guide/editor/images/editor-wiring-splice.png index cf62e2bc..b3ced790 100644 Binary files a/docs/user-guide/editor/images/editor-wiring-splice.png and b/docs/user-guide/editor/images/editor-wiring-splice.png differ diff --git a/docs/user-guide/editor/images/editor-workspace-navigator.png b/docs/user-guide/editor/images/editor-workspace-navigator.png index 286bf2c5..c9961958 100644 Binary files a/docs/user-guide/editor/images/editor-workspace-navigator.png and b/docs/user-guide/editor/images/editor-workspace-navigator.png differ diff --git a/docs/user-guide/editor/images/select-multiple-wires.png b/docs/user-guide/editor/images/select-multiple-wires.png deleted file mode 100644 index b8c218a9..00000000 Binary files a/docs/user-guide/editor/images/select-multiple-wires.png and /dev/null differ diff --git a/docs/user-guide/editor/index.md b/docs/user-guide/editor/index.md index c5994598..a829a961 100644 --- a/docs/user-guide/editor/index.md +++ b/docs/user-guide/editor/index.md @@ -5,24 +5,29 @@ slug: editor toc: toc-editor-guide.html --- - +
+
+ Editor window +

Editor window

+
+
-The editor window consists of four components: - - The header at the top, containing the deploy button, main menu, and, if user - authentication is enabled, the user menu. - - The [palette](palette) on the left, containing the nodes available to use. - - The main [workspace](workspace) in the middle, where flows are created. - - The [sidebar](sidebar) on the right. +Welcome to the Node-RED editor - the place where you'll build, wire together, and run your flows. If you're just getting started, this guide will help you find your way around. -Follow the links above to learn more about each component. +Everything happens inside the editor window, which is organised into three main areas: -
- Editor window -

Editor window

-
+ - The header, running along the top, holds the deploy button and main menu - and the user menu too, if authentication is enabled. + - The [workspace](workspace) in the middle is where the work happens: this is where you build your flows. + - The [sidebars](sidebar) sit on either side of the workspace. They hold a set of panels - tools and information to support you as you work - and you can move any panel between the left and right sides to arrange the editor the way that suits you best. -
- Editor components -

Editor components

-
+One panel worth knowing from the start is the [palette](palette), which lists all the nodes you have available to drag onto your canvas. It's where most flows begin. By default it lives in the left sidebar, but like any panel you can move it to wherever feels right. + +Follow the links above to dig into any of these in more detail. There's no need to read everything at once - feel free to explore the editor as you go. + + +### Node-RED Essentials on YouTube + +We also have a series of videos to help get you started. They haven't been updated for Node-RED 5 yet, but they still cover everything you need for working with Node-RED. + + diff --git a/docs/user-guide/editor/palette/index.md b/docs/user-guide/editor/palette/index.md index 3128e501..50477dca 100644 --- a/docs/user-guide/editor/palette/index.md +++ b/docs/user-guide/editor/palette/index.md @@ -21,24 +21,14 @@ the palette. Categories can be expanded or collapsed by clicking its header. -The and - +The and + buttons at the bottom of the palette can be used to collapse or expand all categories. Above the palette is an input that can be used to filter the list of nodes. - -
- Palette toggle -

Palette toggle

-
- -The entire palette can be hidden by clicking the palette toggle that is shown when -the mouse is over the palette. - - - - + +
Reference
Key shortcutCtrl/⌘-p
Menu optionView -> Show Palette
Actioncore:toggle-palette
Actioncore:show-palette-tab
Key shortcutCtrl/⌘-g p
diff --git a/docs/user-guide/editor/sidebar/debug.md b/docs/user-guide/editor/sidebar/debug.md index ad58e2f9..07f1df78 100644 --- a/docs/user-guide/editor/sidebar/debug.md +++ b/docs/user-guide/editor/sidebar/debug.md @@ -27,15 +27,17 @@ of messages, read the [Working with messages](/docs/user-guide/messages) guide. Key shortcutCtrl/⌘-g d +### Filtering the messages + By default, the Debug sidebar shows all messages passed to it. This can be filtered -by clicking the button to open the filter options panel. +by clicking the button to open the filter options menu. -
+
Debug filter options

Debug filter options

-The panel provides three options: +The menu provides three options: - *all nodes* - displays all messages - *selected nodes* - select particular Debug nodes from a list of all available nodes @@ -46,7 +48,25 @@ is currently showing a filtered list of messages, the hidden messages still coun the 100 limit. If a flow has noisy Debug nodes, rather than filter them from the sidebar it can be better to disable them by clicking their button in the workspace. -The sidebar can be cleared at any time by clicking the button. +### Pausing messages + + +
+ Debug paused +

Debug paused

+
+ + +The button can be used to pause the debug output. Whilst paused, any new message will be dropped by the sidebar and the panel will report how many messages have been dropped. + + + + +
Reference
Actioncore:toggle-debug-messages
+ +### Clearing messages + +The sidebar can be cleared at any time by clicking the button. The button also provides a menu to choose whether to clear all debug messages, or just those that are currently shown. @@ -54,13 +74,14 @@ The sidebar can be cleared at any time by clicking the button +The button in the sidebar footer can be used to open a separate browser window containing the Debug sidebar. +### Additional actions - - +The debug sidebar registers the following actions that can be accessed from the [action menu](../workspace/actions) or have a [keyboard shortcut](../workspace/keyboard) assigned.
Reference
diff --git a/docs/user-guide/editor/sidebar/explorer.md b/docs/user-guide/editor/sidebar/explorer.md new file mode 100644 index 00000000..873857a6 --- /dev/null +++ b/docs/user-guide/editor/sidebar/explorer.md @@ -0,0 +1,42 @@ +--- +layout: docs-editor-guide +slug: + - url: /docs/user-guide/editor + label: editor + - url: "/docs/user-guide/editor/sidebar" + label: "sidebar" + - "info" +toc: toc-editor-guide.html +title: 'Sidebar: Explorer' +--- + +
+ Explorer Sidebar +

Explorer Sidebar

+
+ +The Explorer sidebar shows an outline view of all flows and nodes, + +The outline view can be searched using the same syntax as the [main search dialog](../workspace/search). + +Hovering over an entry in the outline reveals a set of options. + +
+ Outline entry options +

Outline entry options

+
+ +The button will reveal the node/flow in the main workspace. + +If the node has a button, such as the Debug and Inject nodes, the button can be used to trigger that button. + + +The button can be used to enable or disable the node/flow. + + + +
Reference
+ + + +
Reference
Actioncore:show-explorer-tab
Key shortcutCtrl/⌘-g e
diff --git a/docs/user-guide/editor/sidebar/help.md b/docs/user-guide/editor/sidebar/help.md index 4d124a9f..16d7f999 100644 --- a/docs/user-guide/editor/sidebar/help.md +++ b/docs/user-guide/editor/sidebar/help.md @@ -15,16 +15,10 @@ title: 'Sidebar: Help'

Help Sidebar

-*Since Node-RED 1.1.0* - -In previous versions of Node-RED, the help text for the currently selected node -was displayed in the Information sidebar. - -Introduced in Node-RED 1.1.0, the Help sidebar provides access to the help content -for all nodes in the editor - not just the current selection. +The Help sidebar provides access to the help content for all nodes in the editor. The top section provides a full table of contents, that can be toggled using the - button. + button. diff --git a/docs/user-guide/editor/sidebar/index.md b/docs/user-guide/editor/sidebar/index.md index 1998f1f3..6c0393a8 100644 --- a/docs/user-guide/editor/sidebar/index.md +++ b/docs/user-guide/editor/sidebar/index.md @@ -8,32 +8,52 @@ toc: toc-editor-guide.html title: Sidebar --- -
- Editor Sidebar -

Editor Sidebar

-
- -The sidebar contains panels that provide a number of useful tools within the editor. +The sidebars contain panels that provide a number of useful tools within the editor. The sidebar panels can be +arranged on both sides of the workspace. + - [Explorer](explorer) - navigate the flows - [Information](info) - view information about nodes and their help - [Debug](debug) - view messages passed to Debug nodes + - [Help](help) - view Node help - [Configuration Nodes](config) - manage configuration nodes - [Context data](context) - view the contents of context -Some nodes contribute their own sidebar panels, such as [node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard). +Some nodes and plugins can contribute their own sidebar panels, such as the [Node-RED Debugger](https://flows.nodered.org/node/node-red-debugger). + +The sidebar panels can be accessed by the sidebar toolbar. The panel buttons are grouped according to which sidebar section the panel is in. + +
+ Editor Sidebar Toolbar +

Editor Sidebar Toolbar

+
+ +### Arranging sidebar panels + +
+ Editor Sidebar Panels +

Editor Sidebar Panels

+
+ +Each sidebar can be split to show two panels at the same time. -The panels are opened by clicking their icon in the header of the sidebar, or by -selecting them in the drop-down list shown by clicking the button. +The panels can be arranged by dragging the panel by its header to the required sidebar section. If a section contains multiple panels, only one will be shown. The others can be shown by clicking its button in the sidebar toolbar. The sidebar can be resized by dragging its edge across the workspace. -If the edge is dragged close to the right-hand edge, the sidebar will be hidden. -It can be shown again by selecting the 'Show sidebar' option in the View menu, -or using the Ctrl/⌘-Space shortcut. +If the edge is dragged close to the window edge, the sidebar will be hidden. + +It can be shown again by selecting the corresponding 'Show sidebar' option in the View menu, or using the toggle button in the sidebar toolbar. + +
+ + + + +
Reference
Key shortcutCtrl/⌘-Alt-Space
Menu optionView -> Show left sidebar
Actioncore:toggle-left-sidebar
- - + +
Reference
Key shortcutCtrl/⌘-Space
Menu optionView -> Show sidebar
Actioncore:toggle-sidebar
Menu optionView -> Show right sidebar
Actioncore:toggle-right-sidebar
diff --git a/docs/user-guide/editor/sidebar/info.md b/docs/user-guide/editor/sidebar/info.md index 08fd00f2..04f0cefc 100644 --- a/docs/user-guide/editor/sidebar/info.md +++ b/docs/user-guide/editor/sidebar/info.md @@ -10,48 +10,28 @@ toc: toc-editor-guide.html title: 'Sidebar: Information' --- -
+
Information Sidebar

Information Sidebar

-*Since Node-RED 1.1.0* +The Information sidebar shows information about the current selection. -The Information sidebar shows information about the flows. This includes an outline -view of all flows and nodes, as well as details of the current selection. +This includes: -The outline view can be searched using the same syntax as the [main search dialog](../workspace/search). - -Hovering over an entry in the outline reveals a set of options. - -
- Outline entry options -

Outline entry options

-
- -The button will reveal the node/flow in the main workspace. - -If the node has a button, such as the Debug and Inject nodes, the button can be used to trigger that button. - - -The button can be used to enable or disable the node/flow. - - - -In the bottom section of the Information sidebar, details of the current selection are shown. - -This will include: - - - a summary of its properties + - a summary of its properties - the 'show more' link expands the table to show all of the properties - the [user-provided description of node/flow](../workspace/nodes#editing-node-properties) - - a link to the [node's help](./help) + + The toolbar in the header provides the following options: + - Copy the url for the node to the clipboard + - Open the [node's help](./help) + - Reveal the node/flow in the main workspace and highlight it in the [explorer sidebar](./explorer) If nothing is selected, it displays the description of the current flow - which can be edited in the [Flow Properties edit dialog](../workspace/flows#editing-flow-properties). - diff --git a/docs/user-guide/editor/workspace/actions.md b/docs/user-guide/editor/workspace/actions.md new file mode 100644 index 00000000..44139c1c --- /dev/null +++ b/docs/user-guide/editor/workspace/actions.md @@ -0,0 +1,33 @@ +--- +layout: docs-editor-guide +slug: + - url: /docs/user-guide/editor + label: editor + - url: "/docs/user-guide/editor/workspace" + label: "workspace" + - actions +toc: toc-editor-guide.html +title: Editor Actions +--- + +
+ Actions list +

Actions list

+
+ +Many of the tasks that can completed in the editor are exposed as Actions that can be assigned to keyboard shortcuts. + +A full list of available actions can be found by opening the Action list. This is done via the `View -> Action list` menu +item, or the default `Ctrl/⌘-Shift-p` shortcut. + +Throughout this user-guide, relevant actions are highlighted, along with any default keyboard shortcut that is preassigned. + +
+
Reference
Actioncore:show-info-tab
+ + + + +
Reference
Key shortcutCtrl/⌘-Shift-p
Menu optionView -> Action list
Actioncore:show-action-list
+
+ diff --git a/docs/user-guide/editor/workspace/arrange.md b/docs/user-guide/editor/workspace/arrange.md index 54192957..e34e9b0b 100644 --- a/docs/user-guide/editor/workspace/arrange.md +++ b/docs/user-guide/editor/workspace/arrange.md @@ -10,8 +10,6 @@ toc: toc-editor-guide.html title: Arranging Nodes --- -*Since Node-RED 2.1* - The editor provides a number of actions to help arrange nodes in the workspace. They can be used to align and distribute nodes. diff --git a/docs/user-guide/editor/workspace/flows.md b/docs/user-guide/editor/workspace/flows.md index b601025e..ad0d0378 100644 --- a/docs/user-guide/editor/workspace/flows.md +++ b/docs/user-guide/editor/workspace/flows.md @@ -49,7 +49,7 @@ Flows can be reordered in the workspace by dragging their tabs around in the tab
Flow properties editor

Flow properties editor

- Information Sidebar + Explorer Sidebar

Information Sidebar

@@ -59,7 +59,7 @@ open the Flow Properties dialog. @@ -76,7 +76,7 @@ The flow can be enabled or disabled using the toggle button at the bottom of the dialog. If a flow is disabled, none of the nodes it contains will be created when the flow is deployed. -The button in the [Information sidebar](../sidebar/info) can also be used to enable or disable the node/flow. +The button in the [Explorer sidebar](../sidebar/explorer) can also be used to enable or disable the node/flow. @@ -99,7 +99,7 @@ The icon next to it. Clicking that icon will show the flow again. +When hidden, the [Explorer sidebar](../sidebar/explorer) will show an icon next to it. Clicking that icon will show the flow again.
Reference
diff --git a/docs/user-guide/editor/workspace/groups.md b/docs/user-guide/editor/workspace/groups.md index 491f5da7..09069cef 100644 --- a/docs/user-guide/editor/workspace/groups.md +++ b/docs/user-guide/editor/workspace/groups.md @@ -10,8 +10,6 @@ toc: toc-editor-guide.html title: Groups --- -*Since Node-RED 1.1.0* - Nodes can be joined together to form a group. They can then be moved or copied as a single object within the editor. @@ -43,7 +41,7 @@ The edit dialog contains two tabs: @@ -83,16 +81,14 @@ To apply that style to another group, select the group and press `Ctrl/⌘-Shift ### Adding nodes to a group -Nodes can be added to an existing group by dragging them into the group. Before Node-RED 3.1, this -could only be done one node at a time. Since Node-RED 3.1, a whole selection of nodes/groups can be -dragged into a group in one go. +Nodes can be added to an existing group by dragging them into the group. ### Removing from a group To remove a node from a group, select the node then select the 'Groups -> Remove from group' option in the menu. -Since Node-RED 3.1 you can press and hold the `Alt` key when dragging a selection and it will be +Alternatively, press and hold the `Alt` key when dragging a selection and it will be removed from the parent group.
Reference
diff --git a/docs/user-guide/editor/workspace/keyboard.md b/docs/user-guide/editor/workspace/keyboard.md new file mode 100644 index 00000000..c625e162 --- /dev/null +++ b/docs/user-guide/editor/workspace/keyboard.md @@ -0,0 +1,49 @@ +--- +layout: docs-editor-guide +slug: + - url: /docs/user-guide/editor + label: editor + - url: "/docs/user-guide/editor/workspace" + label: "workspace" + - keyboard +toc: toc-editor-guide.html +title: Keyboard Shortcuts +--- + +
+ Keyboard settings +

Keyboard settings

+
+ +All of the [actions](./actions) in the editor can be assigned to keyboard shortcuts. Not all of the core actions have preassigned +shortcuts. + +The shortcuts can be customised in the Keyboard settings via the `View -> Keyboard shortcuts` menu. + +This lists all of the available actions and what shortcuts are currently assigned to them. + +
+ +To customise any shortcut, click on the row, enter the desired shortcut, select the scope of the shortcut then click on the tick to save the change. +The reverse arrow can be used to revert the shortcut back to the default value. + +
+ Editing a shortcut +

Editing a shortcut

+
+ +The scope of the shortcut determines what part of the editor should have focus for the shortcut to apply. There are three scope options: + - `global` - the whole editor UI + - `workspace` - the inner workspace area + - `edit dialog` - any edit dialog + + +
+
+ + + + +
Reference
Key shortcutShift-?
Menu optionView -> Keyboard shortcuts
Actioncore:show-keyboard-settings
+ + diff --git a/docs/user-guide/editor/workspace/nodes.md b/docs/user-guide/editor/workspace/nodes.md index 1a15daa9..bb4a0713 100644 --- a/docs/user-guide/editor/workspace/nodes.md +++ b/docs/user-guide/editor/workspace/nodes.md @@ -30,21 +30,38 @@ in the node edit dialog. Some nodes display a status message and icon below the node. This is used to indicate the runtime state of the node - for example, the MQTT nodes indicate if they are -currently connected or not. +currently connected or not. The Status node can be used to trigger flows when a node's status +changes.
- + Node elements

Node elements

If a node has any undeployed changes, it displays a blue circle above it. If there -are errors with its configuration, it displays a red triangle. +are errors with its configuration, it displays a red triangle. Hovering the mouse +over the triangle will show a tooltip with details of the errors. + +
+ Node error tooltip +

Node error tooltip

+
+ +If a node has additional documentation, it will show a docs badge. Clicking on the badge will +show a popup containing the documentation. This is also shown in the [Information Sidebar](../sidebar/info) when +the node is selected. Clicking the pencil button in the popup will open the Description edit panel for the node. + +
+ Node documentation +

Node documentation

+
+ Some nodes include a button on either its left or right edge. These allow some interaction with the node from within the editor. The Inject and Debug nodes are the only core nodes that have buttons. -#### Quick-Add dialog +### Quick-Add dialog The Quick-Add dialog provides an easy way to add a node to the workspace wherever the mouse is, without having to drag it over from the palette. @@ -71,7 +88,7 @@ in the flow. If a wire is clicked on when triggering the dialog, the added node will be spliced into the wire. -#### Editing node properties +### Editing node properties A node's configuration can be edited by double clicking on the node, or pressing `Enter` when the workspace has focus. If multiple nodes are selected, the *first* @@ -80,9 +97,9 @@ node in the selection will be edited. The edit dialog contains three tabs:
@@ -111,7 +128,7 @@ The Appearance tab provides options to: - provide custom port labels. -#### Enabling or disabling a node +### Enabling or disabling a node
@@ -129,7 +146,7 @@ An node can be enabled or disabled using the toggle button at the bottom of the dialog. If a node is disabled it will not be created when the flow is deployed. If a disabled node sits in the middle of a flow, no messages will pass through it. -#### Configuration nodes +### Configuration nodes A Configuration (config) Node is a special type of node that holds reusable configuration that can be shared by regular nodes in a flow. diff --git a/docs/user-guide/editor/workspace/search.md b/docs/user-guide/editor/workspace/search.md index 8b7d0cf2..d6d4f4f1 100644 --- a/docs/user-guide/editor/workspace/search.md +++ b/docs/user-guide/editor/workspace/search.md @@ -10,10 +10,17 @@ toc: toc-editor-guide.html title: Searching flows --- -
+
+
Search dialog

Search dialog

+
+
+ Search menu +

Search menu

+
+
The Search dialog can be used to find nodes within the workspace, including configuration nodes. @@ -21,9 +28,7 @@ configuration nodes. It indexes all properties of the nodes, so it can be used to search for a node by its id, type, name or any other property. -Selecting a node in the result list will reveal that node within the editor. - -
+
@@ -32,8 +37,31 @@ Selecting a node in the result list will reveal that node within the editor.
Reference
Key shortcutCtrl/⌘-f
-Clicking the -button will copy the current search over to the Information sidebar search. +Selecting a node in the result list will reveal that node within the editor. + +The button on each result will reveal that node without closing the search window. + + +The +button in the header will copy the current search over to the [Explorer sidebar](../sidebar/explorer) search. + + +A number of predefined searches are available under the search menu dropdown. + + + +
+ + +### Search toolbar + +
+ Search toolbar +

Search toolbar

+
+ +When a search has multiple results and you select one, the search toolbar will appear to allow you to navigate between the search results without having to reopen the main search window. + ### Search syntax @@ -45,4 +73,5 @@ Filter | Description | `is:subflow` | Limits the results to Subflows | `is:unused` | Matches Configuration nodes or Subflows that are unused | `is:invalid` | Matches nodes that contain configuration errors | -`uses:` | Limits the results to nodes that depend on the specific configuration node | \ No newline at end of file +`uses:` | Limits the results to nodes that depend on the specific configuration node | + diff --git a/docs/user-guide/editor/workspace/subflows.md b/docs/user-guide/editor/workspace/subflows.md index e022a85d..63478f8f 100644 --- a/docs/user-guide/editor/workspace/subflows.md +++ b/docs/user-guide/editor/workspace/subflows.md @@ -99,7 +99,7 @@ properties dialog, the name and description of the subflow can be set.
  • : Properties - per-instance properties that are exposed as environment variables within the subflow.
    • -
  • : Module Properties - metadata about the subflow. Since Node-RED 1.3
    • +
  • : Module Properties - metadata about the subflow.
  • : Description - per-node documentation formatted using Markdown. This is displayed in the Information sidebar when the node is selected.
  • : Appearance - options to customise the appearance of the node.
diff --git a/docs/user-guide/editor/workspace/wires.md b/docs/user-guide/editor/workspace/wires.md index 89dc95c7..7867a826 100644 --- a/docs/user-guide/editor/workspace/wires.md +++ b/docs/user-guide/editor/workspace/wires.md @@ -57,12 +57,6 @@ You can also select multiple wires by holding `Ctrl/Command` while clicking on t When you select multiple nodes, we also highlight any wires between them. This can make it easier to follow a flow once you have selected it. -
- -

Selecting multiple wires

-
- - #### Deleting wires 1. Select one or more wires @@ -109,8 +103,8 @@ You can also detach a node from the flow without deleting it: - +
Reference
Actioncore:detach-selected-nodes
Key shortcut*Not assigned
Key shortcutNot assigned
-\* There is no default shortcut for **Detach Node from wires**, but you can assign one yourself in the Keyboard pane of the Settings dialog. +There is no default shortcut for **Detach Node from wires**, but you can assign one yourself in the [keyboard settings](./keyboard). diff --git a/docs/user-guide/images/function-linkcall-flow.png b/docs/user-guide/images/function-linkcall-flow.png new file mode 100644 index 00000000..9150756f Binary files /dev/null and b/docs/user-guide/images/function-linkcall-flow.png differ diff --git a/docs/user-guide/writing-functions.md b/docs/user-guide/writing-functions.md index 9d6d1fd2..4bd827c0 100644 --- a/docs/user-guide/writing-functions.md +++ b/docs/user-guide/writing-functions.md @@ -35,7 +35,7 @@ the function can construct a completely new object before returning it. For example: {% highlight javascript %} -var newMsg = { payload: msg.payload.length }; +const newMsg = { payload: msg.payload.length }; return newMsg; {% endhighlight %} @@ -49,7 +49,7 @@ changes to its properties. Use node.warn() to show warnings in the sidebar to help you debug. For example: {% highlight javascript %} -node.warn("my var xyz = " + xyz); +node.warn("my value xyz = " + xyz); {% endhighlight %} See logging section below for more details. @@ -76,14 +76,12 @@ The following example passes the original message as-is on the first output and a message containing the payload length is passed to the second output: {% highlight javascript %} -var newMsg = { payload: msg.payload.length }; +const newMsg = { payload: msg.payload.length }; return [msg, newMsg]; {% endhighlight %} #### Handling arbitrary number of outputs -*Since Node-RED 1.3* - `node.outputCount` contains the number of outputs configured for the function node. This makes it possible to write generic functions that can handle variable number of outputs set from the edit dialog. @@ -114,10 +112,10 @@ In the following example, `msg1`, `msg2`, `msg3` will be sent to the first outpu `msg4` will be sent to the second output. {% highlight javascript %} -var msg1 = { payload:"first out of output 1" }; -var msg2 = { payload:"second out of output 1" }; -var msg3 = { payload:"third out of output 1" }; -var msg4 = { payload:"only message from output 2" }; +const msg1 = { payload:"first out of output 1" }; +const msg2 = { payload:"second out of output 1" }; +const msg3 = { payload:"third out of output 1" }; +const msg4 = { payload:"only message from output 2" }; return [ [ msg1, msg2, msg3 ], msg4 ]; {% endhighlight %} @@ -125,9 +123,9 @@ The following example splits the received payload into individual words and returns a message for each of the words. {% highlight javascript %} -var outputMsgs = []; -var words = msg.payload.split(" "); -for (var w in words) { +const outputMsgs = []; +const words = msg.payload.split(" "); +for (const w in words) { outputMsgs.push({payload:words[w]}); } return [ outputMsgs ]; @@ -169,8 +167,6 @@ node.send(msg,false); #### Finishing with a message -*Since Node-RED 1.0* - If a Function node does asynchronous work with a message, the runtime will not automatically know when it has finished handling the message. @@ -188,19 +184,18 @@ return; ### Running code on start -*Since Node-RED 1.1.0* - With the 1.1.0 release, the Function node provides an `On Start` tab (labeled `Setup` before 1.3.0) where you can provide code that will run whenever the node is started. This can be used to setup any state the Function node requires. For example, it can initialise values in local context that the main Function will use: -``` + +{% highlight javascript %} if (context.get("counter") === undefined) { context.set("counter", 0) } -``` +{% endhighlight %} The On Start function can return a Promise if it needs to complete asynchronous work before the main Function can start processing messages. Any messages that arrive @@ -220,8 +215,7 @@ node.on('close', function() { }); {% endhighlight %} -Or, *since Node-RED 1.1.0*, you can add code to the `On Stop` tab (previously labelled `Close`) in the node's edit -dialog. +Or you can add code to the `On Stop` tab in the node's edit dialog. ### Logging events @@ -278,7 +272,7 @@ asynchronous access and will throw an error if they are accessed synchronously. To get a value from context: {% highlight javascript %} -var myCount = flow.get("count"); +let myCount = flow.get("count"); {% endhighlight %} To set a value: @@ -292,7 +286,7 @@ run: {% highlight javascript %} // initialise the counter to 0 if it doesn't exist already -var count = context.get('count')||0; +let count = context.get('count')||0; count += 1; // store the value back context.set('count',count); @@ -303,18 +297,16 @@ return msg; #### Get/Set multiple values -Since Node-RED 0.19, it is also possible to get or set multiple values in one go: +It is also possible to get or set multiple values in one go: {% highlight javascript %} -// Node-RED 0.19 or later -var values = flow.get(["count", "colour", "temperature"]); +let values = flow.get(["count", "colour", "temperature"]); // values[0] is the 'count' value // values[1] is the 'colour' value // values[2] is the 'temperature' value {% endhighlight %} {% highlight javascript %} -// Node-RED 0.19 or later flow.set(["count", "colour", "temperature"], [123, "red", "12.5"]); {% endhighlight %} @@ -378,7 +370,7 @@ to use. {% highlight javascript %} // Get value - sync -var myCount = flow.get("count", "storeName"); +let myCount = flow.get("count", "storeName"); // Get value - async flow.get("count", "storeName", function(err, myCount) { ... }); @@ -447,8 +439,6 @@ the settings file. For most users that will be the default user directory - `~/. ### Using the `functionExternalModules` option -*Since Node-RED 1.3.0* - By setting `functionExternalModules` to `true` in you *settings.js* file, the Function node's edit dialog will provide a list where you can add additional modules that should be available to the node. You also specify the variable that will @@ -458,18 +448,61 @@ be used to refer to the module in the node's code. The modules are automatically installed under `~/.node-red/node_modules/` when the node is deployed. - - ### Handling a Timeout -*Since Node-RED 3.1.0* - It is possible to set a timeout for the function node on the Setup tab. This value, in seconds, is how long the runtime will allow the Function node to run for before raising an error. If set to 0, the default, no timeout is applied. NOTE: The timeout functionality only applies to synchronous code. +### Calling Link Nodes + +*Since Node-RED 5* + +The Function node is able to make in-line calls to other flows and receive a response before continuing. + +This can be useful where want to have resuable utility flows without having to deal with the state management +of doing it in a pure flow-based approach. + +For example, you want to be able to interact with a database from your Function node without having to resort +to writing all of the code yourself; this is what Node-RED excels at. You can create a flow using one of the +many database nodes available that the Function node can call directly. + +#### Link In/Return flows + +Utility flows are created using the `Link` nodes. + + + +The `link out` node is configured with the option `return to calling link node` option. + +#### Using `node.linkcall` + +A Function node can call a link node using the `node.linkcall` function: + +{% highlight javascript %} +// Set a query for the sqlite node to use +msg.topic = 'select * from orders'; +// Call the `database-query` link node and await a response +const result = await node.linkcall('database-query', msg); + +// result.payload contains the result of the database query + +{% endhighlight %} + +#### `node.linkcall(target, message, options)` + + - `target` is a string identifier for the `link in` node that should be called. It is either the `id` or `name` of the node. + - `msg` is the message object to pass the flow. + - `options` is an optional object with the following properties: + - `timeout` : set a timeout for the call, in milliseconds. Default: `5000` (5 seconds) + - `clone` : whether to clone the message before sending. Default: `true`. + + + + + *** ### API Reference @@ -477,9 +510,9 @@ NOTE: The timeout functionality only applies to synchronous code. The following objects are available within the Function node. #### `node` - * `node.id` : the id of the Function node - *added in 0.19* - * `node.name` : the name of the Function node - *added in 0.19* - * `node.outputCount` : number of outputs set for Function node - *added in 1.3* + * `node.id` : the id of the Function node + * `node.name` : the name of the Function node + * `node.outputCount` : number of outputs set for Function node * `node.log(..)` : [log a message](#logging-events) * `node.warn(..)` : [log a warning message](#logging-events) * `node.error(..)` : [log an error message](#logging-events) @@ -489,6 +522,7 @@ The following objects are available within the Function node. * `node.status(..)` : [update the node status](#adding-status) * `node.send(..)` : [send a message](#sending-messages-asynchronously) * `node.done(..)` : [finish with a message](#finishing-with-a-message) + * `node.linkcall(..)` : [call a `link in` node and await a response](#calling-link-nodes) - *added in 5.0* #### `context` * `context.get(..)` : get a node-scoped context property