From c26614e1be6e6f01d7a6c9c8969ba64e3bf7628a Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Thu, 1 Aug 2024 10:48:14 +0530 Subject: [PATCH 1/7] Added button and button group examples --- docs/nodes/widgets/ui-button-group.md | 5 +++++ docs/nodes/widgets/ui-button.md | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/docs/nodes/widgets/ui-button-group.md b/docs/nodes/widgets/ui-button-group.md index 7385a98e3..20042c6f8 100644 --- a/docs/nodes/widgets/ui-button-group.md +++ b/docs/nodes/widgets/ui-button-group.md @@ -31,10 +31,15 @@ dynamic: + + # Button `ui-button-group` + + Adds a set of buttons that act as a multi-state switch to your dashboard. When an individual button is clicked, it will become active and all other buttons in the group will become inactive, with the newly selected value being emitted from the node in Node-RED. The selected option can be set by sending a `msg.payload` with the value of the button to be selected. diff --git a/docs/nodes/widgets/ui-button.md b/docs/nodes/widgets/ui-button.md index 48d78ed31..d2ac4b1e2 100644 --- a/docs/nodes/widgets/ui-button.md +++ b/docs/nodes/widgets/ui-button.md @@ -51,10 +51,16 @@ dynamic: --- + + + # Button `ui-button` + + Adds a clickable button to your dashboard. ## Properties From 727b645ba7db79d9fa742f2988394a807339bc04 Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Thu, 1 Aug 2024 18:56:11 +0530 Subject: [PATCH 2/7] Added dashboard docs --- docs/nodes/widgets/ui-dropdown.md | 5 +++++ docs/nodes/widgets/ui-file-input.md | 5 +++++ docs/nodes/widgets/ui-form.md | 5 +++++ docs/nodes/widgets/ui-gauge.md | 5 +++++ docs/nodes/widgets/ui-markdown.md | 8 +++++++- 5 files changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/nodes/widgets/ui-dropdown.md b/docs/nodes/widgets/ui-dropdown.md index b515f64fc..a3bef1e6f 100644 --- a/docs/nodes/widgets/ui-dropdown.md +++ b/docs/nodes/widgets/ui-dropdown.md @@ -36,10 +36,15 @@ dynamic: --- + + # Dropdown `ui-dropdown` + + Adds a dropdown to your dashboard that will emit values in Node-RED under `msg.payload` anytime it's value is changed. ## Programmatic Selections diff --git a/docs/nodes/widgets/ui-file-input.md b/docs/nodes/widgets/ui-file-input.md index eb78cdfd6..828b3cccf 100644 --- a/docs/nodes/widgets/ui-file-input.md +++ b/docs/nodes/widgets/ui-file-input.md @@ -15,10 +15,15 @@ props: + + # File Upload + + The File Upload widget allows users to upload files to Node-RED. The widget can be configured to accept specific file types and allow for multiple files. ## Properties diff --git a/docs/nodes/widgets/ui-form.md b/docs/nodes/widgets/ui-form.md index a1125f742..b82f532a8 100644 --- a/docs/nodes/widgets/ui-form.md +++ b/docs/nodes/widgets/ui-form.md @@ -32,10 +32,15 @@ dynamic: --- + + # Form `ui-form` + + Adds a form to user interface which helps to collect multiple value from the user on submit button click as an object in `msg.payload`. ## Properties diff --git a/docs/nodes/widgets/ui-gauge.md b/docs/nodes/widgets/ui-gauge.md index 104c2ef83..1417b73c9 100644 --- a/docs/nodes/widgets/ui-gauge.md +++ b/docs/nodes/widgets/ui-gauge.md @@ -21,10 +21,15 @@ props: + + # Gauge `ui-gauge` + + Adds a Gauge Chart to your Dashboard. This can be configured with custom types (half, 3/4), styles (rounded, needle) and segmentation with examples detailed [below](#examples). ![Screenshot showing each gauge type side-by-side](/images/node-examples/ui-gauge-types.png "Screenshot showing each gauge type side-by-side"){data-zoomable} diff --git a/docs/nodes/widgets/ui-markdown.md b/docs/nodes/widgets/ui-markdown.md index a08f3f3c4..e0d7e87fc 100644 --- a/docs/nodes/widgets/ui-markdown.md +++ b/docs/nodes/widgets/ui-markdown.md @@ -10,11 +10,17 @@ dynamic: --- + + + # Markdown Viewer `ui-markdown` + + Allows for markdown to be defined within Node-RED editor and rendered into the UI. Can be used for rendering labels, headers or even full blog articles. You can inject `msg` values into the markdown using: From 352ba74a5b7618422d79628d2520b8f6c9e7f496 Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Thu, 1 Aug 2024 18:57:58 +0530 Subject: [PATCH 3/7] hyperlink correction --- docs/nodes/widgets/ui-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/nodes/widgets/ui-form.md b/docs/nodes/widgets/ui-form.md index b82f532a8..ade6d9485 100644 --- a/docs/nodes/widgets/ui-form.md +++ b/docs/nodes/widgets/ui-form.md @@ -35,7 +35,7 @@ dynamic: import TryDemo from "./../../components/TryDemo.vue"; - + # Form `ui-form` From 7996c8a8b40af2b7aacff90a8aaf1da5bb53cdd6 Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Thu, 1 Aug 2024 20:32:16 +0530 Subject: [PATCH 4/7] Improved dashboard docs --- docs/nodes/widgets/ui-notification.md | 5 ++++- docs/nodes/widgets/ui-radio-group.md | 6 ++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/nodes/widgets/ui-notification.md b/docs/nodes/widgets/ui-notification.md index 03884dd67..74e41216f 100644 --- a/docs/nodes/widgets/ui-notification.md +++ b/docs/nodes/widgets/ui-notification.md @@ -12,11 +12,14 @@ props: --- # Notification `ui-notification` + + Known in Dashboard 1.0 as a "Toast", this widget displays text/HTML in a small window that will appear on the screen for a defined duration of time (`timeout`) and at a defined location on the screen (`position`). If you want to have the notification show indefinitely, you can set `timeout` to `0`. It will not be possible to close the notification manually unless you also set `allowDismiss` to `true`. diff --git a/docs/nodes/widgets/ui-radio-group.md b/docs/nodes/widgets/ui-radio-group.md index e79670c80..26a6f7ddd 100644 --- a/docs/nodes/widgets/ui-radio-group.md +++ b/docs/nodes/widgets/ui-radio-group.md @@ -16,10 +16,16 @@ dynamic: --- + + + # Radio Group `ui-radio-group` + + Adds a Radio Group to your dashboard that will emit values in Node-RED under `msg.payload` anytime a value is selected. ## Programmatic Selections From 3b1968fa5392ff03f734d29bfc73ee3ce5473d9e Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Thu, 1 Aug 2024 23:26:49 +0530 Subject: [PATCH 5/7] Added slider dashboard docs --- docs/nodes/widgets/ui-slider.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/nodes/widgets/ui-slider.md b/docs/nodes/widgets/ui-slider.md index b913a9a21..6ded24c40 100644 --- a/docs/nodes/widgets/ui-slider.md +++ b/docs/nodes/widgets/ui-slider.md @@ -62,10 +62,15 @@ dynamic: --- + + # Slider `ui-slider` + + Adds a slider to your dashboard that will emit values in Node-RED under `msg.payload` anytime it's value is changed. ## Properties From dee8e95faf2f7d44d18aafe386f70b261b12e8a6 Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Fri, 2 Aug 2024 00:03:18 +0530 Subject: [PATCH 6/7] Added switch dashboard docs --- docs/nodes/widgets/ui-switch.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/nodes/widgets/ui-switch.md b/docs/nodes/widgets/ui-switch.md index c07b73e74..f1f3b28c5 100644 --- a/docs/nodes/widgets/ui-switch.md +++ b/docs/nodes/widgets/ui-switch.md @@ -21,10 +21,16 @@ dynamic: --- + + + # Toggle Switch `ui-switch` + + Adds a toggle switch to the user interface. ## Properties From d51ce67133b353f57d99e2fc408d32ef8382e949 Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Fri, 2 Aug 2024 19:59:23 +0530 Subject: [PATCH 7/7] Added new widget docs to dashboard --- docs/nodes/widgets/ui-table.md | 5 +++++ docs/nodes/widgets/ui-template.md | 6 ++++++ docs/nodes/widgets/ui-text-input.md | 6 ++++++ docs/nodes/widgets/ui-text.md | 5 +++++ 4 files changed, 22 insertions(+) diff --git a/docs/nodes/widgets/ui-table.md b/docs/nodes/widgets/ui-table.md index 277646117..689079043 100644 --- a/docs/nodes/widgets/ui-table.md +++ b/docs/nodes/widgets/ui-table.md @@ -22,6 +22,7 @@ dynamic: import FlowViewer from '../../components/FlowViewer.vue' import AddedIn from '../../components/AddedIn.vue' + import TryDemo from "./../../components/TryDemo.vue"; const examples = ref({ 'cellTypes': ExampleCellTypes @@ -29,8 +30,12 @@ dynamic: + + # Data Table `ui-table` + + Renders a set of data in a tabular format. Expects an input (`msg.payload`) in the format of: ```json diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md index 2fa01ee66..773abf833 100644 --- a/docs/nodes/widgets/ui-template.md +++ b/docs/nodes/widgets/ui-template.md @@ -9,9 +9,15 @@ props: + + + # Template `ui-template` + + Provide custom JS and HTML (including any [Vuetify components](https://vuetifyjs.com/en/components/all/)) to render in the Dashboard. diff --git a/docs/nodes/widgets/ui-text-input.md b/docs/nodes/widgets/ui-text-input.md index 7875950a8..d186bef1b 100644 --- a/docs/nodes/widgets/ui-text-input.md +++ b/docs/nodes/widgets/ui-text-input.md @@ -27,10 +27,16 @@ dynamic: --- + + + # Text Input `ui-text-input` + + Adds a single text input row to your dashboard, with a configurable "type" (text, password, etc). ## Properties diff --git a/docs/nodes/widgets/ui-text.md b/docs/nodes/widgets/ui-text.md index fda2e1f2b..1f39d6d4e 100644 --- a/docs/nodes/widgets/ui-text.md +++ b/docs/nodes/widgets/ui-text.md @@ -20,6 +20,7 @@ dynamic: import FlowViewer from '../../components/FlowViewer.vue' import ExampleSuffix from '../../examples/ui-text-suffix.json' import ExampleHTMLInjection from '../../examples/ui-text-html-injection.json' + import TryDemo from "./../../components/TryDemo.vue" const examples = ref({ 'suffix': ExampleSuffix, @@ -28,7 +29,11 @@ dynamic: + + # Text `ui-text` + + Displays a non-editable text field on the user interface. Each received `msg.payload` will update the value shown alongside the (optional) label.