Widget-Referenz

IronFlock-Boards bestehen aus Widgets. Jeder Widget-Typ erfüllt einen bestimmten Zweck — von der Anzeige von Live-Daten bis zur Erfassung von Nutzereingaben. Fügen Sie ein beliebiges Widget hinzu, indem Sie es aus dem Widget-Panel auf Ihre Board-Arbeitsfläche ziehen, und konfigurieren Sie es dann über das Einstellungs-Panel.

Widgets sind in vier Gruppen unterteilt: Datenvisualisierung für Diagramme und Statusanzeigen, Inhalte & Medien für statische und formatierte Inhalte, Eingabe & Steuerung zur Erfassung von Eingaben und zum Senden von Befehlen sowie Navigation zum Wechseln zwischen Board-Seiten.

Datenvisualisierung

Widgets, die Live- und historische Daten in Diagramme, Anzeigen und Statusdarstellungen umwandeln.

Kartesisches Diagramm

Zeigt Zeitreihen- oder Kategoriendaten als Liniendiagramme, Balkendiagramme oder eine Kombination daraus an. Unterstützt mehrere Datenreihen im selben Diagramm.

Wann verwenden: Sensorwerte über die Zeit verfolgen, mehrere Signale nebeneinander vergleichen, Tagessummen als Balken darstellen.

Was Sie konfigurieren:

• Eine oder mehrere Datenreihen, die jeweils auf eine Datenspalte Ihrer App zeigen
• Diagrammtyp pro Reihe: Linie, Balken oder Bubble
• X-Achsen-Typ: zeitbasiert oder kategorisch
• Y-Achsen-Beschriftung und Zeitfenster (z. B. letzte 5 Minuten aggregiert nach Minute)
• Farben pro Reihe

Gauge

Ein radialer Tachometer, der einen einzelnen Live-Wert mit farbigen Schwellenwertzonen anzeigt.

Wann verwenden: Temperatur, Druck, Füllstand oder jeder Wert, bei dem Sie den Status auf einen Blick mit grünen/gelben/roten Zonen sehen möchten.

Was Sie konfigurieren:

• Die Datenspalte zum Auslesen (zeigt immer den aktuellsten Wert)
• Einheit und Dezimalgenauigkeit
• Farbzonen-Grenzen (z. B. sicher: 0–60, Warnung: 60–80, kritisch: 80–120)
• Optional: Durchschnitt der letzten N Messwerte zur Rauschglättung

Wertanzeige

Zeigt einen oder mehrere Einzelwerte mit Beschriftungen und Einheiten an. Klar und minimalistisch — ideal für KPI-Kacheln.

Wann verwenden: Aktuelle Temperatur, Betriebszeit, letztes Ereignis oder jede Schlüsselkennzahl als Zahl anzeigen.

Was Sie konfigurieren:

• Eine oder mehrere Datenspalten, jeweils mit Beschriftung und Einheit
• Dezimalgenauigkeit
• Textfarben pro Wert

Signal

Kompakte Statusindikatoren — Kreise oder Quadrate — die ihre Farbe basierend auf dem aktuellen Wert ändern und so eine Status-Übersicht auf einen Blick ermöglichen.

Wann verwenden: Geräte-Online/Offline-Übersichten, OK/Warnung/Fehler-Zustände über viele Anlagen, schwellenwertbasierte Statusleuchten.

Was Sie konfigurieren:

• Ein oder mehrere Signale, die jeweils eine Datenspalte auslesen
• Farbzuweisungsregeln pro Signal: exakte Übereinstimmungen (z. B. ONLINE) oder numerische Vergleiche (z. B. >=70)
• Layout (horizontal oder vertikal) und Form (Kreis oder Quadrat)
• Optionaler Titel und Untertitel

Ringdiagramm

Ein kreisförmiges Diagramm mit proportionalen Segmenten.

Wann verwenden: Verteilungen darstellen — z. B. Geräte online vs. offline, Produktionsanteil nach Produkttyp.

Was Sie konfigurieren:

• Segmente, jeweils mit Beschriftung, Farbe und Datenspalte (oder festem Wert)
• Ausschnittgröße (steuert den Innenloch-Durchmesser)

Tabelle

Zeigt Datenzeilen in tabellarischer Form mit konfigurierbaren Spalten an.

Wann verwenden: Liste von Maschinen, aktuelle Ereignisse, Prüfprotokolle oder beliebige strukturierte Datensätze anzeigen.

Was Sie konfigurieren:

• Spalten, jeweils mit Überschrift, Datenspalte und Anzeigetyp
• Zeilenhöhe und Schriftgröße der Überschrift
• Anzahl der anzuzeigenden Zeilen

Spalten-Anzeigetypen: Klartext, Zahl, Status (ordnet Werten Farben zu), Boolean, Bild oder Button (klickbarer Link).

Heatmap

Eine rasterbasierte Heatmap zur Visualisierung von Intensitäten über zwei Dimensionen.

Wann verwenden: Energieverbrauch nach Stunde und Wochentag, Maschinenauslastung pro Schicht, Anomalie-Muster über die Zeit.

Was Sie konfigurieren:

• X-Achse (z. B. Stunde des Tages) und Y-Achse (z. B. Wochentag) Spalten
• Die Wertspalte für die Wärmeintensität
• Min/Max-Skala und ob ein kontinuierlicher oder abgestufter Farbverlauf verwendet werden soll

Statushistorie

Eine horizontale Zeitleiste, die anzeigt, wann sich Zustände über die Zeit geändert haben, eine Zeile pro Anlage.

Wann verwenden: Maschinenstatushistorie (Betrieb / Stillstand / Wartung), Schichtprotokolle, Ereignis-Zeitachsen.

Was Sie konfigurieren:

• Statusnamen und ihre Farben (z. B. Betrieb = grün, Störung = rot)
• Die Datenspalten für Zeitstempel, Statuswert und Anlagenname

Karte

Zeigt geografische Daten auf einer interaktiven Karte an. Unterstützt Kreismarkierungen und Tracking-Linien.

Wann verwenden: Gerätestandorte, Fahrzeugverfolgung, Feldanlagen-Positionen anzeigen.

Was Sie konfigurieren:

• Kartenstil (hell oder dunkel)
• Eine oder mehrere Reihen: Kreise (aktuelle Positionsmarkierungen) oder Linien (Bewegungspfade)
• Die Datenspalten für Breitengrad und Längengrad
• Eine Pivot-Spalte zur Aufteilung der Daten nach Gerät oder Anlage

SCADA

Rendert interaktive industrielle SVG-Symbole — Pumpen, Ventile, Tanks, Motoren, Rohrleitungen, Messgeräte — aus der ThingsBoard-SCADA-Bibliothek, mit Live-Datenbindungen und zustandsbasierter Einfärbung.

Wann verwenden: Prozessdiagramme und Anlagenmimiken — um den Live-Zustand von Pumpen, Ventilen, Tanks und Strömen in einem Schaltbild darzustellen.

Was Sie konfigurieren:

• Den anzuzeigenden Symboltyp
• Datenbindungen, die den Zustand des Symbols steuern (laufend/gestoppt, offen/geschlossen, Füllstände)
• Zustandsfarben (laufend, gestoppt, Warnung, kritisch) und weitere symbolspezifische Gestaltung

Informationen zum Erstellen vollständiger Prozessbildschirme finden Sie unter SCADA.

Inhalte & Medien

Widgets für statische und formatierte Inhalte — Bilder, formatierten Text und eingebettete Webseiten.

Bild

Zeigt ein statisches Bild von einer URL an. Nützlich für Logos, Diagramme oder Anleitungsgrafiken.

Bild-Overlay

Platziert Live-Datenwerte über einem Hintergrundbild — ideal für Grundrisse, Diagramme oder Schemata.

Wann verwenden: Temperaturen auf einem Fabrik-Grundriss einblenden, Füllstände auf einem Tankdiagramm anzeigen.

Was Sie konfigurieren:

• Hintergrundbild-URL
• Overlay-Pins: Fortschrittsbalken oder Textbeschriftungen, die an relativen Koordinaten auf dem Bild positioniert werden
• Datenspalte für jeden Pin (Live-Wert oder fest)

Markdown

Rendert Markdown (CommonMark und GitHub Flavored Markdown) mit syntaxhervorgehobenen Codeblöcken und Live-Variableninterpolation.

Wann verwenden: Dokumentationspanels, Anleitungen oder dynamische Notizen, die formatierten Text mit Live-Datenwerten kombinieren.

Was Sie konfigurieren:

• Den Markdown-Quelltext
• Im Text referenzierte Variablen über {{variableName}}, die jeweils an eine Datenspalte oder einen festen Wert gebunden sind

Label

Zeigt eine einzelne konfigurierbare Textbeschriftung mit vollständiger Kontrolle über Typografie und Ausrichtung an.

Wann verwenden: Abschnittstitel, Bildunterschriften, statische Anmerkungen oder ein einzelner dynamischer Wert als Text dargestellt.

Was Sie konfigurieren:

• Den anzuzeigenden Text (Zeilenumbrüche werden beibehalten)
• Schriftgröße, Farbe, Gewicht und Stil
• Horizontale und vertikale Ausrichtung sowie Hintergrundfarbe

Embed

Bettet externe Webinhalte in einem isolierten iframe ein — eine einzelne Seite oder mehrere in einem responsiven Raster angeordnet.

Wann verwenden: Integration von Drittanbieter-Dashboards, Dokumentationen, externen Tools oder beliebigen webzugänglichen Seiten in ein Board.

Was Sie konfigurieren:

• Die einzubettende URL (die Zielseite muss iframe-Einbettung erlauben)
• Ein optionaler Titel, der über dem Inhalt angezeigt wird
• Multi-Embed-Modus: mehrere URLs in einem Raster angeordnet, mit konfigurierbarem Abstand

Eingabe & Steuerung

Widgets, die Nutzereingaben erfassen oder Befehle und Filter an die Plattform zurücksenden.

Form

Ein konfigurierbares Dateneingabe-Formular, das Nutzereingaben in das Daten-Backend Ihrer App schreibt.

Wann verwenden: Manuelle Datenerfassung — Prüfprotokolle, Wartungsberichte, Bedienereingaben, Parametersollwerte.

Was Sie konfigurieren:

• Formularfelder verschiedener Typen: Text, Zahl, Checkbox, Textarea, Dropdown, Datum/Uhrzeit
• Feldspezifische Optionen: Beschriftung, Pflichtfeld, Standardwert, Validierung, Min/Max und Ziel-Datenspalte
• Optionaler Titel, Untertitel und ob das Formular in einem Dialog geöffnet wird

Switch

Ein oder mehrere Material-Design-Kippschalter, die einen Live-Wert widerspiegeln und beim Umlegen eine Geräteaktion auslösen.

Wann verwenden: Geräte ein-/ausschalten, binäre Geräteeinstellungen umschalten, Steuerbefehle vom Dashboard senden.

Was Sie konfigurieren:

• Ein oder mehrere Schalter, die jeweils eine Datenspalte auslesen
• Zustandszuordnung für EIN/AUS: exakte Werte oder numerische Vergleiche (z. B. >50)
• Die Ziel-App, das Zielgerät und das Aktions-Topic, das beim Umschalten aufgerufen wird
• Beschriftung und Wertfarben pro Schalter

Filter Dropdown

Ein Dropdown mit vordefinierten Optionen, das den ausgewählten Wert als Filterparameter für andere Widgets bereitstellt.

Wann verwenden: Nutzern ermöglichen, ein ganzes Board nach Gerätetyp, Linie, Standort oder einer beliebigen Kategorie zu filtern.

Was Sie konfigurieren:

• Die Beschriftung, die über dem Dropdown angezeigt wird
• Der Parameterschlüssel, auf den andere Widgets in ihren Datenabfragen verweisen
• Die Liste der Optionen, jeweils mit Beschriftung und Wert

Filter Calendar

Eine Datums-/Uhrzeitbereichsauswahl — einzelnes Datum oder Bereich — die die ausgewählten Zeitstempel als Filterparameter für andere Widgets speichert.

Wann verwenden: Zeitreihen-Dashboards, historische Analysen und Berichte mit einem vom Nutzer wählbaren Zeitfenster.

Was Sie konfigurieren:

• Die Start- und End-Parameterschlüssel (einen für den Einzeldatum-Modus, beide für einen Bereich verwenden)
• Die Anzahl der gleichzeitig angezeigten Monate (1–3)
• Die Eingabebeschriftung

Navigation

Widgets zum Wechseln zwischen den Seiten und Abschnitten eines mehrseitigen Boards.

Navbar

Eine horizontale obere Navigationsleiste mit einem klickbaren Titel oder Brand und mehreren gerouteten Einträgen.

Wann verwenden: Navigation auf oberster Ebene zwischen den Seiten eines mehrseitigen Boards.

Was Sie konfigurieren:

• Der Titel-/Brand-Text und seine Zielroute
• Navigationselemente, jeweils mit Beschriftung, Material-Icon und Route
• Schriftgröße, Gewicht und Farben
• Dynamische Routensegmente über {{variable}}-Substitution

Nav Button

Ein einzelner klickbarer Button, der zu einer anderen Seite weiterleitet oder eine Browser-Zurück-Navigation ausführt.

Wann verwenden: Zurück-Buttons, Call-to-Action-Links oder das Springen zu einer bestimmten Board-Ansicht.

Was Sie konfigurieren:

• Die Button-Beschriftung und ein optionales Material-Icon
• Die Zielroute (leer lassen für automatische Zurück-Navigation)
• Schriftgröße und Farben
• Dynamische Routensegmente über {{variable}}-Substitution

Side Navigation

Ein vertikales Seitenmenü mit Material-Icons und routenbasierter Hervorhebung des aktiven Eintrags.

Wann verwenden: Persistente Seitennavigation für Dashboards mit mehreren Abschnitten oder Ansichten.

Was Sie konfigurieren:

• Ein Titel mit optionaler Route
• Navigationselemente, jeweils mit Beschriftung, Material-Icon und Route
• Hervorhebung des aktiven Eintrags basierend auf der aktuellen Route
• Schriftgröße, Gewicht und Farben