Styling & Theming

Jedes Board in IronFlock hat ein Standard-Erscheinungsbild, aber Sie haben die volle Kontrolle über dessen Darstellung. Die Dashboard-Stil-Einstellungen ermöglichen es Ihnen, ein Theme anzuwenden, das Grid-Layout anzupassen und das Aussehen von Widgets zu steuern — alles über ein einziges Einstellungspanel. Für einzelne Widgets, die ein anderes Aussehen benötigen, können Sie den globalen Stil direkt im Widget-Editor überschreiben.

Themes

Ein Theme legt den gesamten visuellen Stil Ihres Boards mit einem Klick fest. IronFlock wird mit einer Reihe integrierter Themes ausgeliefert — jedes definiert eine abgestimmte Palette aus Farben, Hintergründen und Stil-Vorgaben, die auf das gesamte Dashboard angewendet werden.

So wenden Sie ein Theme an:

1. Öffnen Sie das Board Settings-Panel (Zahnradsymbol in der oberen Werkzeugleiste).
2. Gehen Sie zum Abschnitt Theme.
3. Wählen Sie ein Theme aus der Liste.

Alle Widgets, Hintergründe und Textfarben werden sofort an das ausgewählte Theme angepasst.

Themes sind ein Ausgangspunkt — keine endgültige Festlegung. Nach der Auswahl eines Themes können Sie jede einzelne Einstellung (Farben, Rahmen, Hintergründe) überschreiben, und diese Überschreibungen haben Vorrang vor den Theme-Standardwerten.

Layout

Die Board-Leinwand verfügt über mehrere Layout-Eigenschaften, die steuern, wie Widgets positioniert werden, wie sich die Leinwand bei verschiedenen Bildschirmgrößen verhält und ob das Board scrollt oder skaliert. Diese Eigenschaften wirken zusammen, um das räumliche Verhalten Ihres Dashboards zu definieren.

Grid Snap

Wenn Grid Snap aktiviert ist, rasten Widgets beim Platzieren oder Verschieben am nächsten Rasterpunkt ein. Das Raster unterteilt die Leinwand in eine Matrix aus Zeilen und Spalten — Widgets richten sich immer an Zellgrenzen aus, was das Layout strukturiert und ordentlich hält.

Wenn Grid Snap deaktiviert ist, können Widgets frei an beliebiger Stelle auf der Leinwand mit pixelgenauer Präzision positioniert werden. Dies ist der Modus für SCADA-artige Layouts, bei denen Symbole an exakten Positionen platziert werden müssen, um ein Prozessdiagramm, einen Grundriss oder ein Anlagenschema abzubilden.

Grid Snap-Eigenschaften:

• Columns — Die Anzahl der vertikalen Unterteilungen auf der Leinwand. Eine höhere Spaltenanzahl ermöglicht feinere horizontale Positionierung. Eine niedrigere Anzahl rastet Widgets an breiteren Positionen ein.
• Rows — Die Anzahl der horizontalen Unterteilungen. Mehr Zeilen bedeuten feinere vertikale Kontrolle; weniger Zeilen bedeuten gröberes vertikales Einrasten.

Tipp: Konfigurieren Sie für SCADA-Boards mit Grid Snap eine hohe Anzahl von Zeilen und Spalten (z. B. 48×32 oder mehr), um feinkörnige Kontrolle über die Symbolplatzierung zu erhalten und gleichzeitig von der Rasterausrichtung zu profitieren.

Overflow X / Overflow Y

Diese Eigenschaften steuern, ob die Leinwand über den sichtbaren Viewport hinausreicht.

• Overflow X — Wenn aktiviert, kann die Leinwand über den rechten Bildschirmrand hinausragen. Ein horizontaler Scrollbalken erscheint, damit Benutzer zu Inhalten scrollen können, die außerhalb der anfänglichen Viewport-Breite platziert sind. Widgets skalieren nicht horizontal, wenn die Bildschirmgröße geändert wird.
• Overflow Y — Wenn aktiviert, kann die Leinwand über den unteren Bildschirmrand hinausragen. Ein vertikaler Scrollbalken erscheint für Inhalte, die unterhalb der anfänglichen Viewport-Höhe platziert sind. Widgets skalieren nicht vertikal, wenn die Bildschirmgröße geändert wird.

Overflow funktioniert sowohl mit aktiviertem als auch deaktiviertem Grid Snap. Wenn Overflow in einer Richtung aktiv ist, wird das Layout in dieser Richtung nicht-responsiv — Widgets behalten ihre Größe bei, anstatt sich mit dem Fenster zu strecken oder zu schrumpfen. Dies ist nützlich für große SCADA-Diagramme, breite Prozessabläufe oder hohe Anlagenschemata, bei denen das vollständige Layout nicht komprimiert werden soll, um in das Fenster zu passen.

Wenn beide Overflow-Optionen deaktiviert sind, werden Widgets auf den sichtbaren Bereich beschränkt und skalieren responsiv mit dem Bildschirm.

Scale to Fit

Scale to Fit lässt das gesamte Board proportional skalieren, um den verfügbaren Bildschirmplatz auszufüllen. Sie definieren ein festes Seitenverhältnis für die Leinwand, und das Board skaliert hoch oder herunter, um in das Browserfenster zu passen, wobei dieses Verhältnis beibehalten wird.

Scale to Fit-Eigenschaften:

• Aspect Ratio — Das Breite-zu-Höhe-Verhältnis der Leinwand (z. B. 16:9, 4:3 oder ein benutzerdefinierter Wert). Das Board behält dieses Verhältnis unabhängig von den tatsächlichen Bildschirmabmessungen bei. Leerer Raum (Letterboxing) erscheint an den Seiten oder oben/unten, wenn das Seitenverhältnis des Bildschirms nicht übereinstimmt.

Scale to Fit funktioniert sowohl mit aktiviertem als auch deaktiviertem Grid Snap. Es schließt sich gegenseitig mit Overflow aus — wenn Scale to Fit aktiv ist, scrollt die Leinwand nicht, da das gesamte Layout immer sichtbar ist.

Dieser Modus ist ideal für:

• Leitstellen-Displays — Das Dashboard füllt jeden Monitor sauber aus, ohne Scrollen oder Verzerrung
• Kiosk-Bildschirme — Ein festes Layout, das sich automatisch an verschiedene Bildschirmgrößen anpasst
• Präsentations-Dashboards — Einheitliches Erscheinungsbild auf Laptops, Projektoren und wandmontierten Bildschirmen

Widget Fixed Size

Jedes Widget verfügt über optionale Eigenschaften Fixed Width und Fixed Height, die einzeln umgeschaltet werden können. Wenn aktiviert, ändert das Widget in dieser Richtung seine Größe nicht, wenn der Bildschirm verändert wird — es wird in dieser Achse nicht-responsiv, während der Rest des Board-Layouts flexibel bleibt.

Dies ist nützlich, wenn bestimmte Elemente unabhängig von den Bildschirmabmessungen eine stabile Größe benötigen. Beispielsweise sollte eine Navigationsleiste mit Textbeschriftungen eine feste Breite beibehalten, damit der Text lesbar bleibt, auch wenn der Rest des Boards responsiv skaliert.

So setzen Sie eine feste Größe für ein Widget:

1. Wählen Sie das Widget auf der Leinwand aus.
2. Öffnen Sie den Widget Editor.
3. Aktivieren Sie Fixed Width und/oder Fixed Height.

SCADA-Symbole und feste Größe

Wenn SCADA-Symbole auf einem Board platziert werden, erhalten sie standardmäßig sowohl Fixed Width als auch Fixed Height aktiviert. Die hervorgehobenen Symbole in der Widget-Werkzeugleiste zeigen die aktiven Größenbeschränkungen an:

SCADA-Symbole repräsentieren physische Geräte und Prozesselemente — sie müssen ihre Proportionen und relativen Positionen beibehalten, um ein reales Layout korrekt darzustellen. Im responsiven Grid Snap-Modus ist dies nur möglich, wenn die Symbolabmessungen fixiert sind. Ohne feste Größenanpassung würde die responsive Skalierung die Symbole verzerren und aus der Ausrichtung verschieben.

Siehe die SCADA Board-Layout-Optionen für einen Überblick darüber, wie diese Layout-Modi speziell auf SCADA-Dashboards angewendet werden.

Zusammenfassung der Layout-Modi

So konfigurieren Sie Layout-Eigenschaften:

1. Öffnen Sie das Board Settings-Panel.
2. Suchen Sie den Abschnitt Layout.
3. Schalten Sie Grid Snap um und legen Sie Zeilen/Spalten fest, oder deaktivieren Sie es und konfigurieren Sie Overflow oder Scale to Fit mit dem gewünschten Seitenverhältnis.

Globales Widget-Styling

Über das Theme hinaus können Sie das Aussehen aller Widgets über die Dashboard-Stil-Einstellungen feinjustieren. Diese Einstellungen gelten global — jedes Widget auf dem Board erbt sie, sofern sie nicht individuell überschrieben werden.

Was Sie anpassen können:

• Rahmen — Steuern Sie die Rahmenbreite und -farbe um Widgets. Setzen Sie sie auf Null für ein rahmenloses Aussehen oder machen Sie sie auffällig, um Widgets visuell voneinander zu trennen.
• Eckenrundung — Passen Sie den Rahmenradius an, von scharfen rechteckigen Ecken bis hin zu vollständig abgerundeten Karten.
• Hintergründe — Legen Sie die Widget-Hintergrundfarbe fest oder machen Sie Widgets transparent, damit der Board-Hintergrund durchscheint.

So setzen Sie globale Widget-Stile:

1. Öffnen Sie das Board Settings-Panel.
2. Gehen Sie zum Abschnitt Style.
3. Passen Sie Rahmen, Eckenrundung und Hintergrundeinstellungen nach Bedarf an.

Diese Änderungen werden sofort auf alle Widgets im Board angewendet.

Widget-spezifische Stil-Überschreibungen

Manchmal muss ein einzelnes Widget hervorstechen — ein Statusindikator mit farbigem Hintergrund, eine Kopfzeilen-Karte ohne Rahmen oder ein Diagramm mit zusätzlichem Abstand. Anstatt den globalen Stil zu ändern, können Sie ihn für dieses spezifische Widget überschreiben.

So überschreiben Sie Stile für ein einzelnes Widget:

1. Klicken Sie auf das Widget auf der Leinwand, um es auszuwählen.
2. Öffnen Sie den Widget Editor (das Einstellungspanel des Widgets).
3. Suchen Sie die Stil- oder Erscheinungseinstellungen im Widget-Editor.
4. Passen Sie Rahmen, Eckenrundung oder Hintergrund nur für dieses Widget an.

Die Widget-spezifischen Einstellungen haben Vorrang vor dem globalen Dashboard-Stil. Wenn Sie später den globalen Stil ändern oder das Theme wechseln, behalten Widgets mit Überschreibungen ihr individuelles Aussehen.

Tipp: Verwenden Sie globale Stile, um eine einheitliche Basis zu schaffen, und nutzen Sie Widget-spezifische Überschreibungen sparsam für Elemente, die eine besondere Behandlung benötigen.

Alles zusammenführen

Ein typischer Styling-Workflow sieht folgendermaßen aus:

1. Wählen Sie ein Theme, das zur visuellen Identität Ihres Projekts passt.
2. Passen Sie das Raster an, wenn Sie eine präzisere Kontrolle über die Widget-Platzierung benötigen.
3. Setzen Sie globale Widget-Stile für Rahmen, Ecken und Hintergründe, um das Theme feinjustieren.
4. Überschreiben Sie einzelne Widgets im Widget-Editor, wo bestimmte Elemente ein anderes Aussehen benötigen.

Dieser schichtweise Ansatz — Theme → globale Stile → Widget-spezifische Überschreibungen — hält Ihre Boards konsistent und bietet Ihnen gleichzeitig volle Flexibilität, wo es darauf ankommt.