Dashboard 1.0 Migrationsleitfaden

Warum migrieren?

Das ursprüngliche Node-RED Dashboard wird nicht mehr aktiv entwickelt, mit folgendem Hinweis im GH-Repository:

Dieses Projekt basiert auf Angular v1 - Da dies nun nicht mehr gewartet wird, sollte dieses Projekt als "lebensunterstützend" betrachtet werden. Kleine Patches werden nach bestem Können angewendet, aber es wird keine größeren Funktions-Upgrades geben, und es können grundlegende Sicherheitslücken auftreten.

Dieser Leitfaden soll Benutzern helfen, vom ursprünglichen Dashboard (1.0) zu diesem neuen Projekt, Dashboard 2.0, zu migrieren.

Wir haben, wo möglich, die Funktionalität von Dashboard 1.0 repliziert und in einigen Fällen verbessert. Wenn es Funktionen gibt, die Ihnen fehlen, melden Sie bitte ein Problem im GitHub-Repository.

Wo anfangen

Obwohl wir viel Zeit damit verbracht haben, herauszufinden, wie wir Dashboard 2.0 rückwärtskompatibel mit Dashboard 1.0 machen könnten, ist es uns leider nicht gelungen. Daher ist das erneute Erstellen von Dashboards in Dashboard 2.0 (derzeit) ein manueller Prozess.

Installation

Sie können beginnen, indem Sie das Dashboard 2.0-Modul über den Palettenmanager von Node-RED installieren - suchen Sie nach @flowfuse/node-red-dashboard.

Dashboard 2.0 funktioniert parallel zu Dashboard 1.0, sodass Sie Ihr neues Dashboard parallel zu Ihrem bestehenden erstellen können, wobei das neue Dashboard unter http://<node-red-host>:<node-red-port>/dashboard verfügbar ist.

Migrationsskript

Wir haben einen Migrationsdienst verfügbar, um Ihnen den Einstieg in die Migration Ihres bestehenden Dashboards 1.0 zu Dashboard 2.0 zu erleichtern.

Obwohl es nicht alles migrieren wird, gibt es Ihnen einen erheblichen Vorsprung und automatisiert den Großteil davon für Sie. Alles, was nicht automatisch migriert werden kann, bleibt im Flow, wird aber deaktiviert, sodass sie als manuelle Eingriffe gekennzeichnet sind.

Dashboard 1.0 Knoten

Im Folgenden finden Sie einen direkten Vergleich aller verfügbaren Eigenschaften auf jedem Knoten in Dashboard 1.0 und welche Änderungen, falls vorhanden, in Dashboard 2.0 vorgenommen wurden.

`ui_audio`

This node has not yet been migrated to FlowFuse Dashboard

Sie können den Fortschritt verfolgen und Gedanken und Ideen dazu hier einbringen: Widget: Audio #52

`ui_button`

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
label	no changes
group	no changes
size	no changes
icon	no changes
tooltip	not yet supported	Problem #374
color	verbessert	Getrennte Eigenschaft für Textfarbe und Symbolfarbe
background	no changes
payload	no changes
topic	no changes
emulate click	no changes
class	no changes

Dynamic Properties

The following are Node-RED Dashboard msg.<property> values that could be sent to the node to affect functionality & contents of the node.

Property	Status	Notes
label	no changes
icon	no changes
enabled/disabled	no changes
visible/hidden	no changes

`ui_chart`

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
group	no changes
size	no changes
class	no changes
type	partly supported	Linie, Balken (V), Kreis und Donut sind bereits migriert. Es gibt noch Arbeiten zur Unterstützung von Balken (H), Polar und Radar Diagrammen. Streudiagramme wurden ebenfalls hinzugefügt.
legend	no changes
cutout	verbessert	Wir unterstützen jetzt sowohl die 'Größe' als auch die 'Form' von Punkten in einem Streu- und Liniendiagramm.
interpolate	not yet supported	Problem #384
x-axis limit	no changes
x-axis label	no changes
y-axis min/max	no changes
colors	no changes
blank label	not yet supported	Problem #383

New Properties

The following details newly implemented properties and features in FlowFuse Dashboard for this node.

Property	Notes
x-axis type	'Zeit', 'Linear' oder 'Kategorisch' sind je nach Diagrammtyp verfügbar.
series	Ermöglicht die Anpassung der msg-Eigenschaft oder des verschachtelten JSON-Schlüssels, der definiert, zu welcher 'Serie' ein bestimmter Datenpunkt gehört. In Dashboard 1.0 war dies immer `msg.topic`.
x-property	Beim Bereitstellen von Objekten oder Arrays von Daten in ein Diagramm kann diese Eigenschaft verwendet werden, um zu definieren, welcher Schlüssel in den Daten verwendet werden soll, um die x-Achse zu füllen. Zum Beispiel mit dem folgenden Datenpunkt: `{date: '2023-10-30', value: 6}` würde das Setzen dieser Eigenschaft auf `date` den `x`-Wert auf `2023-10-30` setzen.
y-property	Beim Bereitstellen von Objekten oder Arrays von Daten in ein Diagramm kann diese Eigenschaft verwendet werden, um zu definieren, welcher Schlüssel in den Daten verwendet werden soll, um die y-Achse zu füllen. Zum Beispiel mit dem folgenden Datenpunkt: `{date: '2023-10-30', value: 6}` würde das Setzen dieser Eigenschaft auf `value` den `y`-Wert auf `6` setzen.

Daten injizieren

Es gibt eine signifikante Überschneidung zwischen Dashboard 1.0 und 2.0, wie Sie Daten in ein Diagramm injizieren können, aber einige wichtige und bemerkenswerte Unterschiede, die die neuen series- und property-Optionen nutzen.

Rohdaten können mit folgenden Methoden injiziert werden:

msg.payload = <value>
- In diesem Fall wird der vom Diagramm empfangene Wert als y-Wert verwendet, und der x-Wert wird automatisch als aktuelles Datum/Uhrzeit hinzugefügt.
msg.payload = { y: <value> }
- In diesem Fall wird der y-Wert wie definiert verwendet, und der x-Wert wird als aktuelles Datum/Uhrzeit berechnet.
msg.payload = { x: <value>, y: <value> }
- In diesem Fall werden die x- und y-Werte als x- und y-Werte des Datenpunkts verwendet.
msg.payload = [{ x: <value>, y: <value> }, { x: <value>, y: <value> }]
- In diesem Fall werden mehrere Punkte in einer einzigen Linie geplottet.
msg.payload = [{ x: <value>, y: <value>, line: <value> }, { x: <value>, y: <value>, line: <value> }]
- In diesem Fall werden mehrere Punkte geplottet, und wenn die series-Eigenschaft auf property:line gesetzt ist, wird die line-Eigenschaft verwendet, um zu bestimmen, auf welcher Linie jeder Datenpunkt geplottet werden soll.

Wenn Sie Daten in mehrere series in Dashboard 1.0 aufteilen möchten, mussten Sie ein entsprechendes msg.topic definieren. Dies ist jetzt eine konfigurierbare Option in Dashboard 2.0, mit dem Standardwert wie in Dashboard 1.0. Das bedeutet, dass Sie, wenn Sie mehrere Datenpunkte injizieren möchten, jetzt senden könnten:

msg.payload = [{
    "category": "cat-1",
    "value": 2,
    "date": "2023-10-23"
}, {
    "category": "cat-2",
    "value": 3,
    "date": "2023-10-23"
}, {
    "category": "cat-1",
    "value": 1,
    "date": "2023-10-24"
}, {
    "category": "cat-2",
    "value": 6,
    "date": "2023-10-24"
}]

Wo die series-Eigenschaft dieses Diagramms auf key:category gesetzt werden könnte.

Diagramme speichern jetzt Daten auf Nachrichtenbasis für eine klarere Prüfung und speichern daher nicht wie in Dashboard 1.0. Das bedeutet, dass das Format:

[{
    "series": ["A", "B"],
    "data": [
        [
            { "x": 1504029632890, "y": 5 },
            { "x": 1504029636001, "y": 4 },
            { "x": 1504029638656, "y": 2 }
        ],
        [
            { "x": 1504029633514, "y": 6 },
            { "x": 1504029636622, "y": 7 },
            { "x": 1504029639539, "y": 6 }
        ]
    ],
    "labels": [""]
}]

derzeit nicht unterstützt wird. Wenn dies von besonderer Bedeutung ist, äußern Sie bitte Ihre Unterstützung hier.

`ui_colour_picker`

Obwohl es derzeit kein explizites ui_colour_picker-Widget gibt, kann das ui_text_input-Widget verwendet werden, um dasselbe Ergebnis zu erzielen, indem der "type" auf "color" gesetzt wird.

`ui_control`

Senden Sie Ereignisse an das Dashboard, um Inhalte anzuzeigen/auszublenden, Inhalte zu deaktivieren/aktivieren und zwischen Seiten zu navigieren

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
events	no changes	Alle Ereignisse werden unterstützt, außer den Gruppen öffnen/schließen Ereignissen. Verfolgen Sie den #406 Fortschritt hier.

Steuerungsliste

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.

`ui_date_picker`

Obwohl es derzeit kein explizites ui_date_picker-Widget gibt, kann das ui_text_input-Widget verwendet werden, um dasselbe Ergebnis zu erzielen, indem der "type" auf "date", "time", "week" oder "month" gesetzt wird.

Es gibt auch eine Anfrage für eine Zeit-/Datumsbereichskomponente, die in Planung ist.

`ui_dropdown`

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
group	no changes
size	no changes
label	no changes
tooltip	not yet supported	Problem #385
placeholder	zusammengeführt	Kombiniert mit der 'Label'-Eigenschaft im neuen Design
options	no changes
multiselect	no changes
passthru	no changes
topic	no changes
class	no changes

Dynamic Properties

The following are Node-RED Dashboard msg.<property> values that could be sent to the node to affect functionality & contents of the node.

Property	Status	Notes
msg.payload	no changes	Ermöglicht die dynamische Auswahl einer Option (Dokumentation)
msg.options	no changes	Ermöglicht die dynamische Definition einer Option (Dokumentation)

`ui_form`

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
group	no changes
size	no changes
label	no changes
class	no changes
elements	no changes
submit text	no changes
clear text	no changes
two-columns	no changes
topic	no changes

New Properties

The following details newly implemented properties and features in FlowFuse Dashboard for this node.

Property	Notes
reset	Bei 'Absenden' definiert diese Eigenschaft, ob das Formular seine Daten im Dashboard löscht oder nicht.

Dynamic Properties

The following are Node-RED Dashboard msg.<property> values that could be sent to the node to affect functionality & contents of the node.

Property	Status	Notes
msg.properties	geändert	Jetzt `msg.ui_update.options`.
msg.payload	no changes

`ui_gauge`

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
group	no changes
size	no changes
title	no changes
gtype	partly supported	Halb- und 3/4-Anzeigen werden unterstützt, derzeit keine Unterstützung für 'Kompass', 'Levels' und 'Donut'
label	no changes	Geändert zu 'Einheiten'
format	no plan to support	Ersetzt durch 'Präfix'- und 'Suffix'-Optionen
seg1	no plan to support	Ersetzt durch flexiblere Segmentierungssysteme
seg2	no plan to support	Ersetzt durch flexiblere Segmentierungssysteme
colors	no plan to support	Ersetzt durch flexiblere Segmentierungssysteme
diff	no plan to support
class	no changes

New Properties

The following details newly implemented properties and features in FlowFuse Dashboard for this node.

Property	Notes
gstyle	Ermöglicht die Kontrolle darüber, ob der Bogen abgerundet oder im 'Nadel'-Stil ist
prefix	Text, der vor dem Wert in der Mitte der Anzeige angezeigt wird
suffix	Text, der nach dem Wert in der Mitte der Anzeige angezeigt wird
segments	Array von Objekten, die die Segmente der Anzeige definieren
icon	Symbol, das unter der Anzeige angezeigt wird (von MDI)

`ui_link`

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
path	no changes
icon	no changes

`ui_numeric`

Obwohl dieses Widget nicht explizit in Dashboard 2.0 übertragen wurde, ist die Funktionalität weiterhin im ui-text-input-Widget verfügbar, wo Sie den "type" auf "number" setzen können.

Sie können den Fortschritt dieser Entwicklung hier verfolgen: Issue #41

`ui_slider`

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
group	no changes
size	no changes
label	no changes
class	no changes
tooltip	not yet supported	Problem #388
range	no changes
output	no changes
passthru	no changes
topic	no changes

New Properties

The following details newly implemented properties and features in FlowFuse Dashboard for this node.

Property	Notes
show thumb	Definiert, ob das Tooltip/der Daumen auf dem Schieberegler angezeigt wird, wenn der Wert geändert wird.

`ui_switch`

Schalter Sachen

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
group	no changes
size	no changes
label	no changes
class	no changes
tooltip	not yet supported	Problem #389
icon	no changes
off icon	no changes
off icon color	no changes
on icon	no changes
on icon color	no changes
passthru	no changes
indicator	no changes
'on' payload	no changes
'off' payload	no changes
topic	no changes

New Properties

The following details newly implemented properties and features in FlowFuse Dashboard for this node.

Property	Notes
show thumb	Definiert, ob das Tooltip/der Daumen auf dem Schieberegler angezeigt wird, wenn der Wert geändert wird.

`ui_template`

Wir haben kurzfristig große Pläne für weitere Verbesserungen an `ui-template`. Dies konzentriert sich hauptsächlich auf die Möglichkeit, vollständiges Vue-Komponentenverhalten, bidirektionale Bindung und die Einbindung von Drittanbieter-JS-Bibliotheken zu ermöglichen.

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
group	no changes
type	geändert	'Widget in Gruppe' ist immer noch der Standard, aber wir haben die `<head>`-Einbindung (vorübergehend) entfernt und durch zwei Optionen zum Einfügen von CSS ersetzt, eine für alle Seiten und eine andere für eine einzelne Seite.
size	no changes
class	no changes
template	geändert	Es gibt keine Unterstützung mehr für Angular-basierte Templates. Stattdessen sollten Templates mit VueJS geschrieben werden. Vuetify-Komponenten werden ebenfalls nativ unterstützt und bieten ein reichhaltiges Ökosystem verfügbarer Widgets.
passthru	not yet supported	Problem #354
reload on refresh	geändert	Das Standardverhalten ist, dass, wenn ein bekannter Zustand vorliegt, dieser automatisch wiederhergestellt wird.
store output	geändert	Wenn die neue eingebaute 'send'-Funktion innerhalb eines Templates verwendet wird, speichert dies die Ausgabe der send-Funktion im Zustand des Knotens.

`ui_text`

Text Sachen

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
group	no changes
size	no changes
class	no changes
format	not yet supported	Problem #390
layout	no changes
apply style	no changes
font	no changes
text size	no changes
text color	no changes

`ui_text_input`

Text Sachen

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
group	no changes
size	no changes
label	no changes
class	no changes
tooltip	not yet supported	Problem #393
mode	no changes	Option für mehrzeilige Texteingabe ebenfalls hinzugefügt
delay	no changes
passthru	no changes
send on blur	no changes
payload	no plan to support
topic	no changes

New Properties

The following details newly implemented properties and features in FlowFuse Dashboard for this node.

Property	Notes
send on delay	Dies überschreibt die 'Verzögerung'-Einstellung und bietet explizite Kontrolle darüber, wann die Nachricht gesendet wird.
send on enter	Dies sendet eine Nachricht, wenn der Benutzer in der Texteingabe drückt.

`ui_toast`

'UI Toast' wurde in Dashboard 2.0 in 'UI Notification' umbenannt, aber die meisten Funktionen sind identisch.

Property Migration Status

The following table lists the Node-RED Dashboard properties, and details any changes, or whether that property has not yet been migrated, into FlowFuse Dashboard.

Property	Status	Notes
name	no changes
position	no changes
class	no changes
timeout	no changes	Der Countdown-Timer wird jetzt auch als Teil des oberen Randes der Benachrichtigung angezeigt.
highlight	color	Anstatt nur eine einzelne 'Rand'-Farbe zu definieren, wird das 'Highlight' jetzt auf der linken Seite der Benachrichtigung verwendet.
raw injection	no changes	Erlaubt das Einfügen von rohem HTML- und JS-Inhalt in die Widgets.
topic	no changes

New Properties

The following details newly implemented properties and features in FlowFuse Dashboard for this node.

Property	Notes
allow manual	Definiert, ob die Benachrichtigung manuell geschlossen werden kann oder nicht.
show countdown	Wenn ein Timer bereitgestellt wird, zeigt er, wenn dies wahr ist, einen abnehmenden farbigen Balken über dem oberen Rand des Dashboards-Modals an.

Themen

Wir haben versucht, das Thema in Dashboard 2.0 benutzerfreundlicher zu gestalten, indem wir eine Reihe von freigelegten Eigenschaften und einen umschließenden ui-theme-Konfigurationsknoten bereitstellen, der auf der ui-page-Ebene zugewiesen wird.

Beispiel für das Bearbeiten eines Themas Beispiel der im Node-RED Editor freigelegten Eigenschaften beim Definieren eines Themas

Wir haben Pläne, diese Themenkonfiguration weiter auszubauen, sodass Sie auch Rasterabstände, Schriftarten usw. definieren können.

Jede weitere Anpassung des gesamten Layouts und Themas des Dashboards erfordert benutzerdefiniertes CSS, das über den ui_template-Knoten injiziert werden kann.

Layouts

Dashboard 2.0 folgt einer ähnlichen Architektur wie Dashboard 1.0 zur Verwaltung der Hierarchie in der Benutzeroberfläche. Die Unterschiede können gesehen werden, wenn wir sie nebeneinander vergleichen:

Dashboard 1.0	Dashboard 2.0	Unterschied
`ui-base`	`ui-base`	Wir haben dies als Konfigurationsknoten in Dashboard 2.0 freigelegt, wo eine `ui-page` einem übergeordneten `ui-base` zugewiesen wird. Obwohl noch nicht unterstützt, möchten wir schließlich mehrere Basis-Dashboards in derselben Node-RED-Instanz unterstützen.
`ui-tab`	`ui-page`	Zusätzlich zu einer Umbenennung hier haben wir auch die Unterstützung für eine `ui-page` hinzugefügt, um ein definiertes "Thema" zu haben (gesteuert durch unsere neuen `ui-theme`-Konfigurationsknoten). Jede `ui-page` hat auch eine neue "Layout" Option, die seitenweise eingestellt werden kann.
`ui-group`	`ui-group`	Derzeit kein "Zusammenklappen"-Verhalten, aber andere Funktionalität ist gleich.

Wir haben derzeit drei Layouts in Dashboard 2.0 verfügbar:

Raster - Modelliert mit dem CSS-grid-Layout, ist dies das Standardlayout und verwendet einen festen 12-Spalten-Ansatz, bei dem der Inhalt horizontal mit der Bildschirmbreite skaliert wird, was es viel freundlicher für reaktionsfähige Layouts macht.
Fest - Dies verwendet ein CSS-Flex-Layout und ist das ähnlichste, was wir derzeit zum einzigen Layout in Dashboard 1.0 haben. Verbesserungen sind hier erforderlich, um die "Pack"-Natur des Layouts zu verbessern.
Notizbuch - Nachahmung eines Jupyter-Notizbuch-Layouts, bietet dies Inhalte mit einer maximalen Breite, skaliert mit mobilen Geräten und ermöglicht es, Inhalte vertikal zu stapeln.

Wir haben auch zukünftige Pläne, die Injektion von Drittanbieter-Layouts und sogar clientseitig bearbeitbare Layouts (z.B. Drag-and-Drop-Layout-Design) zu unterstützen.

Drittanbieter-Widgets

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, um Ihnen den Einstieg zu erleichtern.

Dashboard 1.0 Migrationsleitfaden ​

Warum migrieren? ​

Wo anfangen ​

Installation ​

Migrationsskript ​

Dashboard 1.0 Knoten ​

ui_audio ​

ui_button ​

Property Migration Status

Dynamic Properties

ui_chart ​

Property Migration Status

New Properties

Daten injizieren ​

ui_colour_picker ​

ui_control ​

Property Migration Status

Steuerungsliste ​

ui_date_picker ​

ui_dropdown ​

Property Migration Status

Dynamic Properties

ui_form ​

Property Migration Status

New Properties

Dynamic Properties

ui_gauge ​

Property Migration Status

New Properties

ui_link ​

Property Migration Status

ui_numeric ​

ui_slider ​

Property Migration Status

New Properties

ui_switch ​

Property Migration Status

New Properties

ui_template ​

Property Migration Status

ui_text ​

Property Migration Status

ui_text_input ​

Property Migration Status

New Properties

ui_toast ​

Property Migration Status

New Properties

Themen ​

Layouts ​

Drittanbieter-Widgets ​

Dashboard 1.0 Migrationsleitfaden

Warum migrieren?

Wo anfangen

Installation

Migrationsskript

Dashboard 1.0 Knoten

`ui_audio`

`ui_button`

`ui_chart`

Daten injizieren

`ui_colour_picker`

`ui_control`

Steuerungsliste

`ui_date_picker`

`ui_dropdown`

`ui_form`

`ui_gauge`

`ui_link`

`ui_numeric`

`ui_slider`

`ui_switch`

`ui_template`

`ui_text`

`ui_text_input`

`ui_toast`

Themen

Layouts

Drittanbieter-Widgets