From ae1600b9a19ee78bd344dc36058d2af4678dde8e Mon Sep 17 00:00:00 2001 From: sumitshinde-84 Date: Fri, 24 Jul 2026 17:08:09 +0530 Subject: [PATCH 1/2] docs: fix broken internal links and add missing German translations --- docs/de/contributing/widgets/core-widgets.md | 6 +- docs/de/contributing/widgets/third-party.md | 4 +- docs/de/nodes/config/ui-group.md | 2 +- docs/de/nodes/widgets/ui-chart.md | 2 +- docs/de/nodes/widgets/ui-progress.md | 82 ++++++++++++++++++++ docs/de/user/home-assistant.md | 28 +++++++ docs/de/user/migration.md | 4 +- docs/de/user/pwa.md | 2 +- docs/en/contributing/widgets/core-widgets.md | 4 +- docs/en/contributing/widgets/third-party.md | 4 +- docs/en/nodes/widgets/ui-chart.md | 2 +- docs/en/nodes/widgets/ui-file-input.md | 2 +- docs/en/user/migration.md | 4 +- docs/en/user/pwa.md | 2 +- 14 files changed, 129 insertions(+), 19 deletions(-) create mode 100644 docs/de/nodes/widgets/ui-progress.md create mode 100644 docs/de/user/home-assistant.md diff --git a/docs/de/contributing/widgets/core-widgets.md b/docs/de/contributing/widgets/core-widgets.md index 73a5083f6..1f8f6d2af 100644 --- a/docs/de/contributing/widgets/core-widgets.md +++ b/docs/de/contributing/widgets/core-widgets.md @@ -21,8 +21,8 @@ In der linken Navigation finden Sie einen Abschnitt "Nützliche Anleitungen". Wi Insbesondere werden die folgenden empfohlen: -- [Ereignisarchitektur](/en/contributing/guides/state-management.html) -- [Zustandsverwaltung](/en/contributing/guides/state-management.html) +- [Ereignisarchitektur](/de/contributing/guides/events.html) +- [Zustandsverwaltung](/de/contributing/guides/state-management.html) ## Checkliste @@ -270,4 +270,4 @@ Jeder Knoten hat eine entsprechende `/locales//.html`-Datei, die e ### Debugging dynamischer Eigenschaften -Dashboard 2.0 verfügt über eine [Debug-Ansicht](/en/contributing/widgets/debugging.html), die ein [Spezialpanel](/en/contributing/widgets/debugging.html#dynamic-properties) enthält, um alle dynamischen Eigenschaften zu überwachen, die einem Widget zugewiesen sind. Dies kann ein sehr nützliches Werkzeug sein, um zu überprüfen, ob der Client über alle dynamischen Eigenschaften informiert ist, die gesendet wurden. \ No newline at end of file +Dashboard 2.0 verfügt über eine [Debug-Ansicht](/de/contributing/widgets/debugging.html), die ein [Spezialpanel](/de/contributing/widgets/debugging.html#dynamic-properties) enthält, um alle dynamischen Eigenschaften zu überwachen, die einem Widget zugewiesen sind. Dies kann ein sehr nützliches Werkzeug sein, um zu überprüfen, ob der Client über alle dynamischen Eigenschaften informiert ist, die gesendet wurden. \ No newline at end of file diff --git a/docs/de/contributing/widgets/third-party.md b/docs/de/contributing/widgets/third-party.md index 111f484c9..a2a7f9af7 100644 --- a/docs/de/contributing/widgets/third-party.md +++ b/docs/de/contributing/widgets/third-party.md @@ -22,8 +22,8 @@ Auf der linken Seite der Navigation finden Sie einen Abschnitt "Nützliche Anlei Insbesondere werden die folgenden empfohlen: -- [Ereignisarchitektur](/en/contributing/guides/state-management.html) -- [Zustandsverwaltung](/en/contributing/guides/state-management.html) +- [Ereignisarchitektur](/de/contributing/guides/events.html) +- [Zustandsverwaltung](/de/contributing/guides/state-management.html) ## Wie Widgets geladen werden diff --git a/docs/de/nodes/config/ui-group.md b/docs/de/nodes/config/ui-group.md index da728d621..bfecd0969 100644 --- a/docs/de/nodes/config/ui-group.md +++ b/docs/de/nodes/config/ui-group.md @@ -30,7 +30,7 @@ Jede Gruppe wird innerhalb einer `ui-page` als Teil eines [Layouts](../../contri ## Typ -Definiert, wie die Gruppe angezeigt wird. Entweder als reguläre (**Standard**) Gruppe oder als **Dialog** Gruppe. Eine 'Standard' Gruppe ist standardmäßig sichtbar, während eine 'Dialog' Gruppe manuell mit dem `ui-control` Knoten ausgelöst werden muss ([siehe Dokumentation](/en/nodes/widgets/ui-control.html#show-hide)). Sie können zwischen diesen beiden Optionen basierend auf Ihren Layoutanforderungen wählen. +Definiert, wie die Gruppe angezeigt wird. Entweder als reguläre (**Standard**) Gruppe oder als **Dialog** Gruppe. Eine 'Standard' Gruppe ist standardmäßig sichtbar, während eine 'Dialog' Gruppe manuell mit dem `ui-control` Knoten ausgelöst werden muss ([siehe Dokumentation](/de/nodes/widgets/ui-control.html#show-hide)). Sie können zwischen diesen beiden Optionen basierend auf Ihren Layoutanforderungen wählen. ### Standardgruppen diff --git a/docs/de/nodes/widgets/ui-chart.md b/docs/de/nodes/widgets/ui-chart.md index cbdf6d9b3..cd766df82 100644 --- a/docs/de/nodes/widgets/ui-chart.md +++ b/docs/de/nodes/widgets/ui-chart.md @@ -428,7 +428,7 @@ Wo Sie die `y`-Eigenschaft auf `key:value` setzen könnten. Der `x`-Wert, wenn e ChartJS bietet eine Vielzahl von Konfigurationsoptionen, von denen wir nur einen kleinen Teil über die Node-RED-Konfiguration bereitstellen. Wenn Sie das Erscheinungsbild Ihres Diagramms weiter anpassen oder sogar Diagramme rendern möchten, die wir noch nicht unterstützen, können Sie dies mit einem UI-Template-Knoten tun. -Derzeit müssen wir, obwohl es nicht ideal ist, die ChartJS-Bibliothek von einem CDN laden und dann darauf warten, dass die Datei geladen wurde, bevor wir sie verwenden können, wie in den [Externe Abhängigkeiten laden](/en/nodes/widgets/ui-template.html#loading-external-dependencies) Details in der UI-Template-Dokumentation beschrieben. +Derzeit müssen wir, obwohl es nicht ideal ist, die ChartJS-Bibliothek von einem CDN laden und dann darauf warten, dass die Datei geladen wurde, bevor wir sie verwenden können, wie in den [Externe Abhängigkeiten laden](/de/nodes/widgets/ui-template.html#loading-external-dependencies) Details in der UI-Template-Dokumentation beschrieben. ### Beispiel: Statische Daten diff --git a/docs/de/nodes/widgets/ui-progress.md b/docs/de/nodes/widgets/ui-progress.md new file mode 100644 index 000000000..30c457f74 --- /dev/null +++ b/docs/de/nodes/widgets/ui-progress.md @@ -0,0 +1,82 @@ +--- +description: "Zeigen Sie Fortschritt und Abschlussstatus mit ui-progress im Node-RED Dashboard 2.0 anhand einer visuellen Fortschrittsleiste an." +props: + Gruppe: Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird. + Größe: Steuert die Breite der Fortschrittsleiste in Bezug auf die übergeordnete Gruppe. Der Maximalwert ist die Breite der Gruppe. + Beschriftung: + description: "Der Text, der neben dem Fortschrittsprozentsatz angezeigt wird. Falls angegeben, wird er als \"Beschriftung: XX%\" innerhalb der Fortschrittsleiste dargestellt." + dynamic: true + Farbe: + description: Farbe der Fortschrittsleiste, gültige Werte sind Vuetify-Themenfarben (primary, secondary, success, error, warning, info) oder benutzerdefinierte Farben (green, #a5a5a5, rgb(165,165,165), green-darken-2). Standardmäßig "primary". + dynamic: true + Klasse: + description: Optionale CSS-Klassennamen, die auf die Fortschrittsleiste angewendet werden, um sie individuell zu gestalten. + dynamic: false +controls: + aktiviert: + example: true | false + description: Ermöglicht die Steuerung darüber, ob Aktualisierungen der Fortschrittsleiste verarbeitet werden. +dynamic: + Beschriftung: + payload: msg.ui_update.label + structure: ["String"] + Farbe: + payload: msg.ui_update.color + structure: ["String"] +--- + +# Fortschritt `ui-progress` + +Zeigt eine visuelle Fortschrittsleiste an, um den Abschlussstatus oder laufende Prozesse auf Ihrem Dashboard darzustellen. + +## Eigenschaften + + + +## Dynamische Eigenschaften + + + +## Steuerungen + + + +## Eingabe + +Die Fortschrittsleiste akzeptiert numerische Werte über `msg.payload`: + +- **Nutzlasttyp**: Zahl (0-100) +- **Beschreibung**: Stellt den Abschlussprozentsatz dar. Werte werden automatisch auf den Bereich 0-100 begrenzt. +- **Beispiel**: `msg.payload = 75` zeigt eine zu 75% abgeschlossene Fortschrittsleiste an + +## Beispiel + +### Einfache Fortschrittsleiste + +![Beispiel einer Fortschrittsleiste](/images/node-examples/ui-progress.png "Beispiel einer Fortschrittsleiste"){data-zoomable} +*Beispiel einer gerenderten Fortschrittsleiste in einem Dashboard mit 79% Abschluss.* + +### Dynamische Aktualisierungen + +Die Fortschrittsleiste kann in Echtzeit aktualisiert werden, indem Nachrichten mit numerischen Nutzlasten gesendet werden. Sie können auch dynamisch die Beschriftung und Farbe ändern: + +```javascript +// Fortschritt auf 80% aktualisieren +msg.payload = 80; +return msg; + +// Fortschritt aktualisieren und Beschriftung/Farbe ändern +msg.payload = 45; +msg.ui_update = { + label: "Daten werden geladen", + color: "warning" +}; +return msg; +``` + +Die Fortschrittsleiste wird häufig verwendet für: +- Upload-/Download-Fortschritt von Dateien +- Aufgabenabschlussstatus +- Datenverarbeitungsanzeigen +- Systemzustandsmetriken +- Batteriestandsanzeigen diff --git a/docs/de/user/home-assistant.md b/docs/de/user/home-assistant.md new file mode 100644 index 000000000..ac985cfd8 --- /dev/null +++ b/docs/de/user/home-assistant.md @@ -0,0 +1,28 @@ +# Node-RED mit Home Assistant ausführen + +Node-RED kann auf zwei Arten mit Home Assistant (**HA**) integriert werden: +1. Node-RED auf einem separaten Host ausführen und über HTTP-Messaging oder über das `node-red-contrib-home-assistant-websocket`-Node-Set eine Verbindung zum HA-Server herstellen + +2. Verwendung des internen Node-RED-Add-ons innerhalb von HA, das Teil der Standard-HA-Installation ist + +### Konfigurieren von FlowFuse Dashboard (Node-RED Dashboard 2.0) in Home Assistant + +Aktuell enthält das Node-RED-Add-on innerhalb von HA die Node-RED Dashboard 1.0-Knoten (`node-red-dashboard`) und stellt dessen Basis-URL (`.../ui`) bereit. Node-RED Dashboard 1.0 ist jedoch mittlerweile veraltet und wurde durch FlowFuse Dashboard ersetzt. + +Nachfolgend finden Sie Anleitungen zur Installation & Konfiguration von FlowFuse Dashboard im Node-RED-Add-on innerhalb von HA + +1. Installieren Sie innerhalb des Node-RED-Add-ons das FlowFuse Dashboard-Node-Set (`@flowfuse/node-red-dashboard`) über die Option "Manage Palette". + +2. Erstellen Sie einen neuen iframe-Container zum Hosten der FlowFuse Dashboard-Clients: + - Gehen Sie in HA zu **Einstellungen->Dashboards->Dashboard hinzufügen** und wählen Sie **Webseite** + + Hinzufügen eines neuen Dashboard-iFrames
*Hinzufügen eines neuen Dashboard-iFrames*

+ - Legen Sie die Basis-URL des Dashboards fest, z. B. `:1880/endpoint/dashboard` + + Festlegen der Basis-URL
*Festlegen der Basis-URL*

+ - Legen Sie den iframe-Titel & ein optionales Symbol fest (das in der HA-Seitenleiste angezeigt wird) und klicken Sie auf **Erstellen** + + Festlegen von Titel & Symbol
*Festlegen von Titel & Symbol*

+ - Sie können das FlowFuse Dashboard nun über die HA-Seitenleiste oder direkt über die oben angegebene Endpoint-URL öffnen + + Anzeigen des FlowFuse-Dashboards
*Anzeigen des FlowFuse-Dashboards* diff --git a/docs/de/user/migration.md b/docs/de/user/migration.md index 6a1e2db6d..7e3abe69e 100644 --- a/docs/de/user/migration.md +++ b/docs/de/user/migration.md @@ -159,7 +159,7 @@ Obwohl es derzeit kein explizites `ui_colour_picker`-Widget gibt, kann das `ui_t Alle Steuerungen von Dashboard 1.0 werden in Dashboard 2.0 unterstützt, mit Ausnahme der `open/close`-Steuerung für eine Gruppe, die derzeit nicht unterstützt wird. -Detaillierte Dokumentation der verfügbaren Steuerungen und ausgelösten Ereignisse finden Sie [hier](/en/nodes/widgets/ui-control.html). +Detaillierte Dokumentation der verfügbaren Steuerungen und ausgelösten Ereignisse finden Sie [hier](/de/nodes/widgets/ui-control.html). ### `ui_date_picker` @@ -248,4 +248,4 @@ Wir haben auch zukünftige Pläne, die Injektion von Drittanbieter-Layouts und s Alle Addons, die für Dashboard 1.0 erstellt wurden (z.B. `ui-svg`, `ui-worldmap`), werden in Dashboard 2.0 nicht unterstützt. -Wir benötigen Community-Beiträge, um sie auf die "Dashboard 2.0 Weise" neu zu erstellen. Wenn Sie daran interessiert sind, uns bei dieser Übung zu helfen, haben wir einen [Leitfaden zum Erstellen benutzerdefinierter Widgets](/en/contributing/widgets/third-party.md), um Ihnen den Einstieg zu erleichtern. \ No newline at end of file +Wir benötigen Community-Beiträge, um sie auf die "Dashboard 2.0 Weise" neu zu erstellen. Wenn Sie daran interessiert sind, uns bei dieser Übung zu helfen, haben wir einen [Leitfaden zum Erstellen benutzerdefinierter Widgets](/de/contributing/widgets/third-party.html), um Ihnen den Einstieg zu erleichtern. \ No newline at end of file diff --git a/docs/de/user/pwa.md b/docs/de/user/pwa.md index 949504aa2..6cf383f0c 100644 --- a/docs/de/user/pwa.md +++ b/docs/de/user/pwa.md @@ -42,4 +42,4 @@ Um den Namen anzupassen, wählen Sie "Einstellungen bearbeiten" in der Dashboard ### Icon -Sie können das App-Symbol Ihres Dashboards personalisieren, um das Branding zu verbessern und es leicht erkennbar zu machen. Um das Symbol anzupassen, fügen Sie einfach eine URL zum Bild im App-Symbolfeld unter der ui-base-Konfiguration hinzu. Für detaillierte Anweisungen besuchen Sie die [UI Base Dokumentation](/en/nodes/config/ui-base.html#application-icon). \ No newline at end of file +Sie können das App-Symbol Ihres Dashboards personalisieren, um das Branding zu verbessern und es leicht erkennbar zu machen. Um das Symbol anzupassen, fügen Sie einfach eine URL zum Bild im App-Symbolfeld unter der ui-base-Konfiguration hinzu. Für detaillierte Anweisungen besuchen Sie die [UI Base Dokumentation](/de/nodes/config/ui-base.html#application-icon). \ No newline at end of file diff --git a/docs/en/contributing/widgets/core-widgets.md b/docs/en/contributing/widgets/core-widgets.md index 8f0af84d6..5857ff558 100644 --- a/docs/en/contributing/widgets/core-widgets.md +++ b/docs/en/contributing/widgets/core-widgets.md @@ -21,8 +21,8 @@ On the left-side navigation you'll find a "Useful Guides" section, we recommend In particular, the following are recommended: -- [Events Architecture](/en/contributing/guides/state-management.html) -- [State Management](/en/contributing/guides/state-management.html) +- [Events Architecture](/contributing/guides/events.html) +- [State Management](/contributing/guides/state-management.html) ## Checklist diff --git a/docs/en/contributing/widgets/third-party.md b/docs/en/contributing/widgets/third-party.md index 766caa370..039a66b8e 100644 --- a/docs/en/contributing/widgets/third-party.md +++ b/docs/en/contributing/widgets/third-party.md @@ -22,8 +22,8 @@ On the left-side navigation you'll find a "Useful Guides" section, we recommend In particular, the following are recommended: -- [Events Architecture](/en/contributing/guides/state-management.html) -- [State Management](/en/contributing/guides/state-management.html) +- [Events Architecture](/contributing/guides/events.html) +- [State Management](/contributing/guides/state-management.html) ## How Widgets are Loaded diff --git a/docs/en/nodes/widgets/ui-chart.md b/docs/en/nodes/widgets/ui-chart.md index 387bc5016..b085521f9 100644 --- a/docs/en/nodes/widgets/ui-chart.md +++ b/docs/en/nodes/widgets/ui-chart.md @@ -541,7 +541,7 @@ Any such message should always contain the series name and type for each series. ## Building Custom Charts For even further customisataion such as rendering charts we don't yet support, you can use a UI Template node. -Currently, although not ideal, we do need to load the ChartJS library from a CDN, and then watch for the file to have been loaded before we can use it, as per the [Loading External Dependencies](/en/nodes/widgets/ui-template.html#loading-external-dependencies) details in the UI Template documentation. +Currently, although not ideal, we do need to load the ChartJS library from a CDN, and then watch for the file to have been loaded before we can use it, as per the [Loading External Dependencies](/nodes/widgets/ui-template.html#loading-external-dependencies) details in the UI Template documentation. ### Example: Static Data diff --git a/docs/en/nodes/widgets/ui-file-input.md b/docs/en/nodes/widgets/ui-file-input.md index bdb6fc69c..deb32db46 100644 --- a/docs/en/nodes/widgets/ui-file-input.md +++ b/docs/en/nodes/widgets/ui-file-input.md @@ -54,7 +54,7 @@ dashboard: { } ``` -Read more about Dashboard configuration in the `settings.js` [here](/en/user/settings.html#maxhttpbuffersize). +Read more about Dashboard configuration in the `settings.js` [here](/user/settings.html#maxhttpbuffersize). Note that we do have plans to improve this behavior by chunking files into smaller parts, and reassembling them on the server side. This will allow for larger files to be uploaded, and will be implemented in a future release. diff --git a/docs/en/user/migration.md b/docs/en/user/migration.md index 2cf1c65fa..88bd03e8e 100644 --- a/docs/en/user/migration.md +++ b/docs/en/user/migration.md @@ -79,7 +79,7 @@ In Audio Player mode, a `group` property is present, so that an audio player can In TTS mode, the `group` property is no longer required, and has been replaced with a `ui` property, which defines which `ui-page` this widget will be rendered on. -Refer to the [ui-audio documentation](/en/nodes/widgets/ui-audio.html) and the nodes built-in help for more details. +Refer to the [ui-audio documentation](/nodes/widgets/ui-audio.html) and the nodes built-in help for more details. ### `ui_button` @@ -165,7 +165,7 @@ Whilst there is currently not an explicit `ui_colour_picker` widget, the `ui_tex All Node-RED Dashboard controls are supported in FlowFuse Dashboard, with the exception of the `open/close` control for a group, which is currently not supported. -You can see detailed documentation of the available controls, and emitted events [here](/en/nodes/widgets/ui-control.html). +You can see detailed documentation of the available controls, and emitted events [here](/nodes/widgets/ui-control.html). ### `ui_date_picker` diff --git a/docs/en/user/pwa.md b/docs/en/user/pwa.md index 62d9d31c5..a2ab4a939 100644 --- a/docs/en/user/pwa.md +++ b/docs/en/user/pwa.md @@ -43,4 +43,4 @@ To customize the name, select "Edit Settings" in the Dashboard 2.0 sidebar. Then ### Icon -You can personalize your Dashboard's App Icon to enhance branding and make it easily recognizable. To customize the icon, simply add a URL to the image in the App Icon field under the ui-base configuration. For detailed instructions, visit the [UI Base documentation](/en/nodes/config/ui-base.html#application-icon). +You can personalize your Dashboard's App Icon to enhance branding and make it easily recognizable. To customize the icon, simply add a URL to the image in the App Icon field under the ui-base configuration. For detailed instructions, visit the [UI Base documentation](/nodes/config/ui-base.html#application-icon). From 3ae57fb82e12d19dae588ff1541599573836a714 Mon Sep 17 00:00:00 2001 From: sumitshinde-84 Date: Fri, 24 Jul 2026 17:44:23 +0530 Subject: [PATCH 2/2] fix broken links --- docs/de/nodes/widgets/ui-progress.md | 82 ---------------------------- docs/de/user/home-assistant.md | 28 ---------- 2 files changed, 110 deletions(-) delete mode 100644 docs/de/nodes/widgets/ui-progress.md delete mode 100644 docs/de/user/home-assistant.md diff --git a/docs/de/nodes/widgets/ui-progress.md b/docs/de/nodes/widgets/ui-progress.md deleted file mode 100644 index 30c457f74..000000000 --- a/docs/de/nodes/widgets/ui-progress.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -description: "Zeigen Sie Fortschritt und Abschlussstatus mit ui-progress im Node-RED Dashboard 2.0 anhand einer visuellen Fortschrittsleiste an." -props: - Gruppe: Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird. - Größe: Steuert die Breite der Fortschrittsleiste in Bezug auf die übergeordnete Gruppe. Der Maximalwert ist die Breite der Gruppe. - Beschriftung: - description: "Der Text, der neben dem Fortschrittsprozentsatz angezeigt wird. Falls angegeben, wird er als \"Beschriftung: XX%\" innerhalb der Fortschrittsleiste dargestellt." - dynamic: true - Farbe: - description: Farbe der Fortschrittsleiste, gültige Werte sind Vuetify-Themenfarben (primary, secondary, success, error, warning, info) oder benutzerdefinierte Farben (green, #a5a5a5, rgb(165,165,165), green-darken-2). Standardmäßig "primary". - dynamic: true - Klasse: - description: Optionale CSS-Klassennamen, die auf die Fortschrittsleiste angewendet werden, um sie individuell zu gestalten. - dynamic: false -controls: - aktiviert: - example: true | false - description: Ermöglicht die Steuerung darüber, ob Aktualisierungen der Fortschrittsleiste verarbeitet werden. -dynamic: - Beschriftung: - payload: msg.ui_update.label - structure: ["String"] - Farbe: - payload: msg.ui_update.color - structure: ["String"] ---- - -# Fortschritt `ui-progress` - -Zeigt eine visuelle Fortschrittsleiste an, um den Abschlussstatus oder laufende Prozesse auf Ihrem Dashboard darzustellen. - -## Eigenschaften - - - -## Dynamische Eigenschaften - - - -## Steuerungen - - - -## Eingabe - -Die Fortschrittsleiste akzeptiert numerische Werte über `msg.payload`: - -- **Nutzlasttyp**: Zahl (0-100) -- **Beschreibung**: Stellt den Abschlussprozentsatz dar. Werte werden automatisch auf den Bereich 0-100 begrenzt. -- **Beispiel**: `msg.payload = 75` zeigt eine zu 75% abgeschlossene Fortschrittsleiste an - -## Beispiel - -### Einfache Fortschrittsleiste - -![Beispiel einer Fortschrittsleiste](/images/node-examples/ui-progress.png "Beispiel einer Fortschrittsleiste"){data-zoomable} -*Beispiel einer gerenderten Fortschrittsleiste in einem Dashboard mit 79% Abschluss.* - -### Dynamische Aktualisierungen - -Die Fortschrittsleiste kann in Echtzeit aktualisiert werden, indem Nachrichten mit numerischen Nutzlasten gesendet werden. Sie können auch dynamisch die Beschriftung und Farbe ändern: - -```javascript -// Fortschritt auf 80% aktualisieren -msg.payload = 80; -return msg; - -// Fortschritt aktualisieren und Beschriftung/Farbe ändern -msg.payload = 45; -msg.ui_update = { - label: "Daten werden geladen", - color: "warning" -}; -return msg; -``` - -Die Fortschrittsleiste wird häufig verwendet für: -- Upload-/Download-Fortschritt von Dateien -- Aufgabenabschlussstatus -- Datenverarbeitungsanzeigen -- Systemzustandsmetriken -- Batteriestandsanzeigen diff --git a/docs/de/user/home-assistant.md b/docs/de/user/home-assistant.md deleted file mode 100644 index ac985cfd8..000000000 --- a/docs/de/user/home-assistant.md +++ /dev/null @@ -1,28 +0,0 @@ -# Node-RED mit Home Assistant ausführen - -Node-RED kann auf zwei Arten mit Home Assistant (**HA**) integriert werden: -1. Node-RED auf einem separaten Host ausführen und über HTTP-Messaging oder über das `node-red-contrib-home-assistant-websocket`-Node-Set eine Verbindung zum HA-Server herstellen - -2. Verwendung des internen Node-RED-Add-ons innerhalb von HA, das Teil der Standard-HA-Installation ist - -### Konfigurieren von FlowFuse Dashboard (Node-RED Dashboard 2.0) in Home Assistant - -Aktuell enthält das Node-RED-Add-on innerhalb von HA die Node-RED Dashboard 1.0-Knoten (`node-red-dashboard`) und stellt dessen Basis-URL (`.../ui`) bereit. Node-RED Dashboard 1.0 ist jedoch mittlerweile veraltet und wurde durch FlowFuse Dashboard ersetzt. - -Nachfolgend finden Sie Anleitungen zur Installation & Konfiguration von FlowFuse Dashboard im Node-RED-Add-on innerhalb von HA - -1. Installieren Sie innerhalb des Node-RED-Add-ons das FlowFuse Dashboard-Node-Set (`@flowfuse/node-red-dashboard`) über die Option "Manage Palette". - -2. Erstellen Sie einen neuen iframe-Container zum Hosten der FlowFuse Dashboard-Clients: - - Gehen Sie in HA zu **Einstellungen->Dashboards->Dashboard hinzufügen** und wählen Sie **Webseite** - - Hinzufügen eines neuen Dashboard-iFrames
*Hinzufügen eines neuen Dashboard-iFrames*

- - Legen Sie die Basis-URL des Dashboards fest, z. B. `:1880/endpoint/dashboard` - - Festlegen der Basis-URL
*Festlegen der Basis-URL*

- - Legen Sie den iframe-Titel & ein optionales Symbol fest (das in der HA-Seitenleiste angezeigt wird) und klicken Sie auf **Erstellen** - - Festlegen von Titel & Symbol
*Festlegen von Titel & Symbol*

- - Sie können das FlowFuse Dashboard nun über die HA-Seitenleiste oder direkt über die oben angegebene Endpoint-URL öffnen - - Anzeigen des FlowFuse-Dashboards
*Anzeigen des FlowFuse-Dashboards*