Grafische Dashboards

graphical-dashboards

Grafische Dashboards ermöglichen den Aufbau vollständig anpassbarer Panels, die aus Live-Daten-Widgets und dynamischen Visualisierungen bestehen. Diese Dashboards passen sich an Themen an, reagieren auf Datenänderungen und bieten interaktive Funktionen für Echtzeitüberwachung und benutzerfreundliche Bedienung.

Grafische Dashboards bieten eine Reihe interaktiver und reaktionsschneller Funktionen, die über das einfache Layout hinausgehen. Dieser Abschnitt hebt hervor, was Sie mit Dashboards tun können, insbesondere Dinge, die nicht sofort sichtbar sind.

Themen ohne Duplikation

Jedes Dashboard unterstützt automatisches Thematisieren, das sich an das Benutzeroberflächenthema des Benutzers (hell oder dunkel) anpasst. Sie müssen nicht zwei Versionen desselben Dashboards erstellen—NetCrunch rendert automatisch Farben, Hintergründe und Widget-Styling.

Standardmäßig befindet sich das Dashboard im Auto-Modus und passt sich den Anwendungseinstellungen des Betrachters an. Sie können es dauerhaft Hell oder Dunkel machen.

Anpassbares Panel-Zoom

Dashboards sind so konzipiert, dass sie auf Bildschirmen jeder Größe sauber angezeigt werden. Über das Skalieren zum Seitenverhältnis hinaus passt die Auto-Zoom-Option den sichtbaren Bereich dynamisch an:

• Wenn aktiviert, zoomt die Ansicht so, dass nur die von Ihnen platzierten Widgets fokussiert werden, zentriert mit entsprechendem Abstand.
• Dies macht das Dashboard perfekt für mobile oder teilbildschirmige Anwendungsfälle, bei denen ungenutzter Raum besser verborgen bleibt.

Widget-basierte Visualisierung

Während Dashboards Etiketten, Symbole oder Formen enthalten können, liegt ihre wahre Stärke in datengebundenen Widgets. Diese umfassen:

• Wert-Panels – zeigen eine einzelne Metrik mit optionaler Beschriftung und Symbol
• Balken – zeigen lineare Vergleiche oder Schwellenwerte
• Messgeräte – visuelle Skalen (rund oder linear) mit mehreren Anzeigemodi
• Mini-Diagramme – eingebettete Trenddiagramme innerhalb eines Widgets

Die meisten Widgets werden standardmäßig im "Themed"-Stil eingefügt:

• Sie enthalten Hintergründe und Beschriftungen
• Sie passen sich automatisch dem aktuellen Thema des Dashboards an
• Sie verwenden für die Lesbarkeit optimierte Abstände und Polsterungen

Verborgene Macht in Widget-Optionen

Jedes Widget enthält viele leistungsstarke Optionen, die nach Funktion gruppiert sind. Diese sind nicht immer sichtbar, es sei denn, das Widget ist ausgewählt und im Editor erweitert:

• Anzeigestatus-Logik – zeigt Status über Farbe, Pfeile oder Füllung
• Schwellenwertbereiche – definieren Farbbänder für Wertebereiche
• Änderungsindikatoren – visualisieren Aufwärts-/Abwärtstrends
• Symbol-Overlays – ersetzen den Hintergrund oder fügen alarmähnliche Visualisierungen hinzu
• Skalierung & Einheitenumrechnung – transformieren Rohwerte im Handumdrehen

Diese Optionen machen Widgets intelligenter und selbsterklärend, wenn sie richtig konfiguriert sind.

Klickbare, Live-Elemente

Alle Dashboard-Widgets können interaktiv sein: - Durch Klicken auf ein Wert-Widget oder einen Balken öffnet sich ein Tooltip mit einer Live-Vorschau (z.B. Trend oder Knotenzustand) - Vom Tooltip aus können Benutzer den Trend-Viewer, den Knotenstatus öffnen oder Aktionen ausführen - Visualisierungen reagieren auf Echtzeitänderungen: Blinken, Farbverläufe oder Symbolwechsel

Das Dashboard ist nicht statisch—es ist ein Live-Bedienfeld, das auf Daten reagiert.

Raster, Gitter & Ebenen

Der Editor unterstützt professionelle Design-Tools im Hintergrund:

• Raster-Snapping (umschaltbar)
• Ausrichtungs- und Abstands-Tools
• In den Vordergrund / In den Hintergrund-Schichtung
• Gruppenauswahl und Mehrfachbewegung
• Tastenkombinationen für Ausrichtung, Duplizierung und Sperren

Obwohl diese Funktionen Tools wie Figma oder Illustrator nachahmen, sind sie auf Administrator-Workflows zugeschnitten, nicht auf Designer.

Visuelle Logik & zustandsbasierte Anpassung

Grafische Dashboards unterstützen zwei Hauptklassen von Widgets:

Daten-Widgets

Diese zeigen Live-Daten von Zählern oder Status an:

• Balken
• Messgerät (linear oder kreisförmig)
• Liniendiagramm
• Knotensymbol
• Kameraschnappschuss

Sie enthalten einen Datenquellen-Abschnitt, in dem der Benutzer binden kann:

• Knoten oder Objekt (z.B. Sensor, Schnittstelle)
• Zähler oder Metrik (z.B. % Speichernutzung, Verkehr)
• Skalierung, Einheitenumrechnung oder Rundung

Die meisten unterstützen Tooltips mit Live-Daten-Vorschauen und Zugriff auf den Trend-Viewer oder Knotenaktionen.

Referenzbasierte Widgets (Visuelle Elemente)

Diese sind standardmäßig statisch, werden jedoch dynamisch, wenn sie an eine Zustandsreferenz gebunden sind: - Formen (Rechteck, Dreieck, Blob, etc.) - Symbole (schriftbasiert) - Symbole (vektorartige Bilder) - Bilder - Verbindungslinien - Text und Beschriftungen

Benutzer können aus 11 Objekttypen wählen, wie:

• Knoten
• Schnittstelle
• Sensor
• Anderes Widget
• Überwachungspaket
• …und mehr

Einrichten eines Referenz-Widgets

Um diese Elemente zustandsbewusst zu machen:

1. Zustandsreferenz zuweisen
   • Objekttyp wählen
   • Knoten und zugehöriges Objekt auswählen (z.B. Sensor)
2. Objektzustand auswählen
   • Zustand zur Anpassung wählen (OK, Warnung, Fehler, etc.)
3. Visualisierungen anpassen
   • Deckkraft ändern (kann das Element vollständig ausblenden)
   • Füllung, Linie, Strich, Rand ändern
   • Dynamische Farbe, Symbole oder Effekte verwenden
   • Pro Zustand anpassen oder einige Eigenschaften gemeinsam halten

Standardstile werden bereitgestellt, aber Benutzer können jeden visuellen Aspekt überschreiben.

Damit können Sie dashboards mit Formen oder Symbolen erstellen, die präzise auf Live-Bedingungen reagieren.

Animation & Aufmerksamkeits-Effekte

Sie können Animationen hinzufügen, die durch Zustandsänderungen ausgelöst werden:

• Animieren (z.B. blinken, drehen, pulsieren, Herzschlag, wackeln)
• Transformieren (z.B. kippen, drehen, skalieren)
• Auslösermodus (immer oder bei Zustandsänderung)

Diese subtilen Effekte helfen, die Aufmerksamkeit auf kritische Elemente wie fehlerhafte Verbindungen oder überhitzende Knoten zu lenken.

Praxisbeispiel

Eine Form oder ein Symbol kann:

• Einen Sensor oder Schalter darstellen
• Rot blinken, wenn ein Fehler erkannt wird
• Sich ausblenden, wenn es deaktiviert ist
• Sein Symbol oder den Beschriftungstext dynamisch ändern
• Trenddiagramme oder Alarmdetails beim Klicken öffnen

NetCrunch ermöglicht es Ihnen, SCADA-ähnliches Verhalten mit weit weniger Aufwand zu erstellen.

Visuelle Ressourcen

Dashboards unterstützen reichhaltige visuelle Bibliotheken zur Verbesserung des Layouts und der Klarheit.

Bilder (Pictures)

Bilder können für Hintergrunddiagramme, Branding oder visuelle Overlays verwendet werden.

Sie können gespeichert werden in: - Document (lokale Ansicht nur) - Shared (über mehrere Ansichten hinweg) - Public (globale Nutzung innerhalb der Organisation)

Dieses System reduziert Duplikationen und erleichtert die Wiederverwendung von Assets.

Symbole

Symbole sind vektorartige Bilder, die IT-Assets und -Dienste darstellen:

• Kategorien: Azure, Cisco, Google, VMware, AWS, etc.
• Vollständig durchsuchbar und gruppiert
• Werden mehr wie Bilder als Symbole behandelt (nicht schriftbasiert)
• Farblich angepasst, aber behalten mehrfarbiges Aussehen

Symbole (Schriftbasiert)

NetCrunch unterstützt über 3.000 Symbole über Font Awesome.

• Unterstützt Stil: leicht, regulär, solide
• Hintergrundform: Kreis, Hex, Quadrat, etc.
• Symbolgröße und Position kontrollieren
• Kann den Zustand widerspiegeln, wenn gebunden

Diese Symbole eignen sich ideal für kompakte Zustandsindikatoren.

Vektorformen

Ein vollständiges Set von Vektorformen ist enthalten:

• Geometrische Formen: Rechteck, Kreis, Dreieck
• Flussdiagrammelemente: Prozess, Entscheidung, Eingabe
• Organische Formen: Blobs, Wolken, Verbinder

Formen sind vollständig editierbar und animierbar. Sie können auch den Systemzustand widerspiegeln.

Interaktivität

Alle visuellen Elemente können:

• An den Zustand gebunden werden
• Statusspezifisch gestylt werden
• Zum Drill-Down anklickbar sein
• Als Teil von zusammengesetzten Widgets verwendet werden

Ein einfaches Symbol oder eine Form kann zu einer Alarmquelle oder einem dynamischen Indikator werden.

Bearbeitungsgrundlagen

Grafische Dashboards enthalten einen visuellen Editor mit optimierten Auswahl-, Verknüpfungs- und Widget-Erstellungstools. Die Werkzeugleiste auf der linken Seite enthält drei kontextsensitive Selektoren:

• Auswahlwerkzeug – zum Auswählen, Bewegen, Ändern der Größe und Bearbeiten bestehender Widgets
• Verbindungswerkzeug – ermöglicht das Erstellen von Verbindungen zwischen beliebigen Widgets
• Widget-Hinzufügen-Werkzeug (+) – öffnet die Widget-Galerie zum Einfügen neuer visueller oder datengestützter Elemente

Wenn ein neues Widget auf die Leinwand gezogen wird, öffnet der Editor automatisch ein fokussiertes Konfigurationspanel. Dies vermeidet die Notwendigkeit, anfangs durch Hunderte von Einstellungen zu blättern.

Zum Beispiel:

• Das Einfügen eines Daten-Widgets öffnet einen Dialog zur Auswahl eines Knotens und Zählers
• Das Einfügen eines Symbols startet den Symbolauswahl mit Kategoriefilterung und Suche

Dieser Ansatz macht die Erfahrung intuitiv, selbst für Benutzer, die mit visuellen Editoren nicht vertraut sind.

Multi-Diagramm-Einfügung

Der Editor unterstützt die intelligente Erstellung von Diagrammen. Beim Hinzufügen eines Grafik-Widgets können Sie es auf zwei flexible Arten konfigurieren:

• Mehrere Serien für einen einzelnen Knoten – hilfreich beim Vergleich verschiedener Zähler (z.B. CPU, Speicher, Festplatten-I/O) auf einem Gerät
• Einzelne Serie über mehrere Knoten – Vergleich derselben Metrik über mehrere Knoten hinweg (z.B. Bandbreitennutzung)

Sie können auch die Option "Auf separaten Diagrammen platzieren" aktivieren, um automatisch mehrere Grafik-Widgets gleichzeitig einzufügen, jedes mit einer konfigurierten Serie.

Dies macht den Aufbau visueller Vergleiche schnell und vermeidet manuelle Duplikationen.

Kontextmenüs, Sperren & Power-Shortcuts

Der Editor von NetCrunch enthält ein Popup-Menü mit Rechtsklick, das erweiterte Objektaktionen und Auswahlwerkzeuge enthüllt, modelliert nach Designanwendungen wie Adobe XD oder Illustrator.

Kontextmenüaktionen

Wenn Sie mit der rechten Maustaste auf ein Widget klicken, finden Sie:

• Auswählen... – wählen Sie alle Widgets eines bestimmten Typs (z.B. alle Formen, alle Rechtecke)
• Ausrichten – an Kanten, Zentren ausrichten oder gleichmäßig verteilen (siehe Shortcuts unten)
• Größe ändern – Größe auf die kleinste oder größte normalisieren
• Kopieren / Duplizieren / Löschen
• Sperren – Widget an Ort und Stelle einfrieren, damit es nicht versehentlich verschoben oder bearbeitet werden kann
• In den Vordergrund / In den Hintergrund – visuelle Stapelung von Elementen steuern

Das Sperren ist unerlässlich für geschichtete Dashboards oder Hintergrund-Assets wie Bilder und Formen.

Ausrichtungs-Shortcuts

NetCrunch verwendet Adobe-ähnliche Shortcuts für Ausrichtungsoperationen:

• Strg + Umschalt + Links – Links ausrichten
• Strg + Umschalt + Rechts – Rechts ausrichten
• Strg + Umschalt + Oben – Oben ausrichten
• Strg + Umschalt + Unten – Unten ausrichten
• Strg + Umschalt + C – Horizontal zentrieren
• Strg + Umschalt + M – Vertikal zentrieren
• Strg + Umschalt + V – Vertikal verteilen
• Strg + Umschalt + H – Horizontal verteilen

Diese Shortcuts funktionieren mit mehreren ausgewählten Widgets, um das Layout schnell zu verfeinern.

Typbasierte Auswahl

Im Kontextmenü können Sie auch alle Widgets eines bestimmten Typs auswählen, wie:

• Alle Rechtecke
• Alle Formen
• Alle Symbole oder Diagramme

Dies erleichtert das Anwenden von Stil- oder Layoutänderungen auf mehrere Elemente, ohne diese manuell auszuwählen.

In Kombination mit Sperren und Ausrichtung können Benutzer schnell über komplexe Dashboards arbeiten, ohne wichtige visuelle Komponenten zu verschieben.

Mehrfachauswahl, Zoomen & Leinwandsteuerung

Der Dashboard-Editor unterstützt flexible Mehrfachauswahl, Layoutduplizierung und Ansichtssteuerung, um komplexe Designaufgaben zu beschleunigen.

Auswählen mehrerer Elemente

Sie können mehrere Widgets mit mehreren intuitiven Methoden auswählen:

• Auswahlrechteck – klicken und ziehen, um alles innerhalb des blauen Rahmens auszuwählen
• Umschalt + Klicken – bestimmte Elemente zu Ihrer Auswahl hinzufügen oder daraus entfernen
• Kontextmenü → Nach Typ auswählen – wählen Sie alle Rechtecke, alle Formen, etc.
• Strg + A – alles auf dem Dashboard auswählen

Diese Tools ermöglichen effiziente Massenoperationen wie das gleichzeitige Verschieben, Ausrichten oder Stylen mehrerer Elemente.

Leinwandnavigation

Die Leinwand unterstützt das Verschieben und Zoomen für große Ansichten:

• Hintergrund mit Strg ziehen – verschiebt den sichtbaren Leinwandbereich
• Mausrad – zoomt sanft ein und aus
• Zoom-Schieberegler (oben rechts) – manuell den Zoomlevel einstellen

Dies macht das Navigieren in großen oder grenzenlosen Ansichten schnell und natürlich.

Kopieren, Einfügen & Duplizieren

• Strg + C / Strg + V – Standard-Kopieren & Einfügen zwischen Ansichten
• Strg + D – dupliziert ausgewählte Elemente an Ort und Stelle
• Alt + Ziehen – erstellt ein Duplikat beim Verschieben des Originals

Wenn ein Element Verbindungen hat, behält jede duplizierte Version diese Verbindungen bei. Dies ist besonders nützlich zum Replizieren von statusverknüpften Layouts oder strukturierten Diagrammen, ohne Linien manuell neu zu verbinden.

Widgets bewahren auch ihre Konfiguration und Referenzen, wenn sie dupliziert oder eingefügt werden, was die schnelle Wiederverwendung gängiger visueller Elemente oder Layouts ermöglicht.

Diese erweiterten Auswahl- und Navigationsmöglichkeiten machen das Dashboard-Design flüssig und leistungsstark, ideal für den schnellen Aufbau reicher Ansichten mit präziser Kontrolle.

animated widgetsauto zoomdashboard themingdata widgetsdynamic iconsgraphical dashboardslive visualizationnetcrunch editornode tooltipreal-time monitoringshape stylingstate referencethemed widgetstrend popupvisual logic