ioBroker Node-RED – Teil 9.1 – Aufbau der Visualisierung

Matthias Korte

vor 4 Jahren

In diesem Teil der ioBroker Node-RED Artikelreihe zeige ich Dir, wie Du Node-Red in ioBroker verwenden kannst.

Im Teil 9.1 der ioBroker Node-RED Artikelreihe werden wir uns den Aufbau und die Strukturierung der Visualisierung ansehen.

Bevor wir mit dem Aufbau der Visualisierung beginnen, möchte ich zunächst den grundsätzlichen Aufbau zeigen und die jeweiligen Bereiche und Begriffe erklären.
Die Visualisierung ist grundsätzlich in Tabs und Groups unterteilt. Die Tabs werden als primäres Navigationsmenü verwendet. Die Menüleiste auf der linken Seite der Visualisierung kann dabei fixiert oder bei Bedarf eingeblendet werden. Zudem können wir auch die obere Leiste ein- oder ausblenden. Ich werde die Einstellungen dazu im Verlauf des Artikels erklären. Wichtig ist zunächst, das dieses Prinzip soweit klar ist.

Nun beginnen wir mit der Erstellung einer kleinen Visualisierung. Im ersten Schritt habe ich eine neuen Flow angelegt und die Bezeichnung des Flows auf Visualisierung angepasst. Im nächsten Schritt beginnen wir mit der Konfiguration der Tabs und Groups. Dazu klicken wir auf das Dashboard-Symbol (gelb markiert).

Node-RED öffnet jetzt die Dashboard-Einstellungen, über die wir unsere Visualisierung aufbauen können. Im Bereich Dashboard finden wir drei neue Tab-Laschen (Layout, Site und Theme). Wir werden nun im ersten Schritt auf der Lasche Layout die Tabs und Groups definieren. Im ersten Schritt erstellen wir nun eine neue Tab-Lasche in dem wir auf die Plus-Schaltfläche tab (gelb markiert) klicken.

Die neue Tab-Lasche wurde jetzt eingefügt und kann im nächsten Schritt bearbeitet werden. Für die Bearbeitung einer Tab-Lasche klicken wir auf die Lasche und auf das Edit-Symbol (gelb markiert).

Auf den Einstellungen des Tab können wir nun die Bezeichnung sowie ein Icon definieren.

Als Icon können wir hier Material Design Icons auswählen. Mit einem Klick auf den Link im gelb markieren Erklärungsbereich können wir hier optional auch ein anderes Icon wählen.

Nach dem wir nun unsere erste Tab-Lasche angelegt und konfiguriert haben, erstellen wir im nächsten Schritt eine Gruppe (Group) innerhalb des Tabs. Dazu einfach auf die Plus-Schaltfläche (gelb markiert) klicken.

Auf der Gruppe können wir ebenfalls den Namen sowie die Tab-Lasche definieren, auf dem die Gruppe angezeigt werden soll. Zudem können wir die Breite der Gruppe anpassen. Hierzu einfach den Wert Width erhöhen. Über die weiteren Optionen können wir zudem definieren, ob die Bezeichnung der Gruppe eingeblendet werden soll und ob die Gruppe zugeklappt werden darf.

Ich habe nun alle Tabs und Gruppen angelegt und definiert, welche ich für meine Visualisierung verwenden möchte. An dieser Stelle empfehle ich Dir, zunächst den eigenen Aufbau der Visualisierung zu erstellen und dann erst mit dem nächsten Artikel fortzufahren.