MeshBoards

MeshBoards sind anpassbare Dashboards in OctoMesh Refinery Studio, mit denen Sie Daten aus Ihren OctoMesh-Entitäten über verschiedene Widget-Typen visualisieren können. Sie bieten ein flexibles, rasterbasiertes Layout zum Erstellen von Monitoring-Dashboards, KPI-Anzeigen und Datenvisualisierungen.

Zugriff auf MeshBoards

Navigieren Sie zu UI > MeshBoards, um auf Ihre Dashboards zuzugreifen.

MeshBoard-Toolbar

Die MeshBoard-Toolbar bietet folgende Aktionen:

Schaltfläche	Beschreibung
Manage MeshBoards	Öffnet den Dialog zur MeshBoard-Verwaltung
MeshBoard Settings	Konfiguriert das aktuelle MeshBoard
Refresh All Widgets	Aktualisiert die Daten in allen Widgets
Enter/Cancel Edit Mode	Schaltet den Bearbeitungsmodus um
ADD WIDGET	Fügt dem Board ein neues Widget hinzu
SAVE	Speichert Änderungen (im Bearbeitungsmodus)

MeshBoards verwalten

Klicken Sie auf Manage MeshBoards, um den Verwaltungsdialog zu öffnen:

Von hier aus können Sie:

• IMPORT: Ein MeshBoard aus einer Datei importieren
• NEW MESHBOARD: Ein neues MeshBoard erstellen
• Bestehende MeshBoards anzeigen und verwalten

MeshBoard-Einstellungen

Konfigurieren Sie Ihr MeshBoard, indem Sie auf MeshBoard Settings klicken:

Grundeinstellungen

Einstellung	Beschreibung
Name	Anzeigename des MeshBoards
Description	Optionale Beschreibung
Well-Known Name	Eindeutiger Bezeichner für das Routing (z. B. 'cockpit', 'sales-dashboard')

Layout-Einstellungen

Einstellung	Bereich	Beschreibung
Columns	1-12	Anzahl der Spalten im Raster
Row Height	100-1000	Höhe jeder Zeile in Pixeln
Gap	0-100	Abstand zwischen Widgets in Pixeln

Variablen

Mit Variablen können Sie dynamische, parametrisierte Dashboards erstellen:

1. Klicken Sie auf ADD VARIABLE, um eine neue Variable zu erstellen
2. Definieren Sie den Variablennamen und den Standardwert
3. Referenzieren Sie Variablen in Widget-Filtern als $variableName

Beispielhafte Anwendungsfälle:

• Alle Widgets nach einem ausgewählten Zeitraum filtern
• Daten für eine bestimmte, vom Benutzer ausgewählte Entität anzeigen
• Dynamische Schwellenwerte für KPI-Widgets

Zeitzone

Die Option TIMEZONE (im Tab Time Filter) legt die Basis fest, die das MeshBoard sowohl für den Bereich des Zeitfilters als auch für die Art und Weise verwendet, wie jedes Widget Datums- und Zeitangaben darstellt, sodass beide konsistent bleiben:

Modus	Verhalten
Local time (browser) (default)	Bereiche und Zeitstempel verwenden die lokale Zeitzone des Betrachters. „Jahr 2026" umfasst das lokale Kalenderjahr, und ein Zeitstempel wird in lokaler Uhrzeit angezeigt.
UTC	Bereiche und Zeitstempel verwenden UTC. „Jahr 2026" umfasst das UTC-Kalenderjahr, und Zeitstempel werden in UTC angezeigt.
Specific time zone	Wählen Sie eine IANA-Zone (z. B. Europe/Vienna, Europe/Lisbon) aus der Dropdown-Liste. Bereiche und Zeitstempel verwenden die bürgerliche Zeit dieser Zone – „Jahr 2026" umfasst das Kalenderjahr dieser Zone und Zeitstempel werden in ihr dargestellt – DST-korrekt und unabhängig von der eigenen Browser-Zone des Betrachters. Dadurch können Sie aus einem Wiener Browser heraus nach „gestern in Europe/Lisbon" fragen und die richtige Antwort erhalten und Standorte in verschiedenen Zonen auf einem Board vergleichen. Bei Streamdaten wird dieselbe Zone an die Query gesendet, sodass passende Kalender-Rollups (Tag/Woche/Monat/Jahr) in ihr ausgewählt werden.

Da Filter und Anzeige eine gemeinsame Basis teilen, lassen sich die Randzeilen eines Bereichs sauber lesen – z. B. zeigt die erste Zeile von Jahr 2026 in beiden Modi 01.01.2026 00:00:00. Ohne diese Abstimmung würde ein Filter auf das lokale Jahr Zeilen auswählen, deren UTC-Zeitstempel in das benachbarte Kalenderjahr fallen (in Mitteleuropa beginnt das lokale Jahr 2026 um 2025-12-31T23:00:00Z), sodass eine Tabellenspalte verwirrenderweise einen 2025-Wert für Daten anzeigen könnte, die zu 2026 gehören.

tipp

Belassen Sie dies auf Local time, sofern Ihr Publikum nicht in UTC denkt oder Sie eine feste bürgerliche Zone benötigen (z. B. die lokale Zeit einer Anlage, unabhängig davon, wer sie betrachtet). Ein Moduswechsel wertet den aktiven Bereich neu aus und aktualisiert sofort alle Widgets.

Siehe Timezone-Aware Queries, um zu erfahren, wie die gewählte Zone die Auflösung des bürgerlichen Tages und die Auswahl der Kalender-Rollups auf dem Lesepfad der Streamdaten steuert.

Zeitfilter

Aktivieren Sie die Option TIME FILTER, um:

• Eine Zeitbereichsauswahl in der Toolbar anzuzeigen
• Automatisch die Variablen $timeRangeFrom und $timeRangeTo zu setzen
• Zeitreihendaten über alle Widgets hinweg zu filtern

Die Auswahl löst Bereiche auf Basis der konfigurierten Zeitzone auf.

Widgets hinzufügen

Klicken Sie auf ADD WIDGET, um den Dialog zur Widget-Auswahl zu öffnen:

Verfügbare Widget-Typen

Widgets zur Datenanzeige

Widget	Beschreibung
Entity Card	Zeigt eine einzelne Entität mit ihren Attributen in einem Karten-Layout an
KPI	Zeigt einen einzelnen Leistungskennzahl-Wert (numerisch oder Text) an
Entity with Associations	Zeigt eine Entität mit ihren zugehörigen Beziehungen an
Table	Zeigt mehrere Entitäten in einer Tabelle mit Sortierung und Filterung an
Stats Grid	Zeigt mehrere KPIs in einem Raster-Layout an
Summary Card	Zeigt eine Reihe kompakter Wertkacheln in einer Karte an
Widget Group	Rendert dynamisch mehrere Widgets aus Query-Ergebnissen

Visualisierungs-Widgets

Widget	Beschreibung
Gauge	Visualisiert einen numerischen Wert als Anzeige (Bogen, kreisförmig, linear oder radial)
Line Chart	Stellt eine oder mehrere Reihen über die Zeit dar; reduziert Streamdaten automatisch auf die Diagrammbreite
Pie Chart	Zeigt die Datenverteilung als Kreis- oder Donut-Diagramm an
Bar Chart	Zeigt Daten als vertikale oder horizontale Balken an

Status-Widgets

Widget	Beschreibung
Status Indicator	Zeigt einen booleschen Status mit visuellem Indikator an
Service Health	Zeigt den Zustand eines Dienstes mit Puls-Animation an

Integrations-Widgets

Widget	Beschreibung
Process Diagram	Bettet ein Process Diagram in das Dashboard ein; bindet seine exponierten Eigenschaften an eine Runtime-Entität oder an eine Persistent Query (Runtime oder Streamdaten)

Widgets konfigurieren

Nachdem Sie ein Widget hinzugefügt haben, sehen Sie es im Bearbeitungsmodus:

Jedes Widget verfügt über folgende Aktionen:

• Configure data source (required): Richtet die Datenbindung ein
• Edit position: Passt Größe und Position des Widgets im Raster an
• Delete widget: Entfernt das Widget vom Board

Konfiguration der Datenquelle

Die meisten Widgets erfordern eine Konfiguration der Datenquelle:

1. CK Type: Wählen Sie den Construction-Kit-Typ aus, der abgefragt werden soll
2. Filters: Definieren Sie Filter, um die Daten einzugrenzen
3. Attribute Mapping: Ordnen Sie Entitätsattribute den Widget-Eigenschaften zu

Position und Größe

Widgets werden in einem Raster angeordnet. Im Bearbeitungsmodus können Sie:

• Widgets ziehen, um sie neu zu positionieren
• Die Größe von Widgets durch Ziehen an ihren Rändern ändern
• Widgets rasten an den Rasterspalten ein

Widget-Details

KPI-Widget

Zeigt einen einzelnen Wert (numerisch oder Text) mit optionaler Formatierung und Trendindikatoren an.

Wertkonfiguration

Das KPI-Widget kann Werte aus verschiedenen Quellen anzeigen:

Wertattribut	Beschreibung
Entity Attributes	Jedes Attribut der konfigurierten Entität (z. B. temperature, status)
System Properties	Integrierte Eigenschaften, die für alle Runtime-Entitäten verfügbar sind
Query Results	Werte aus Persistent Queries (Aggregation, Zählung, gruppiert)

Systemeigenschaften

Die folgenden Systemeigenschaften sind für alle Runtime-Entitäten verfügbar:

Eigenschaft	Beschreibung	Beispiel
rtId	Runtime-ID der Entität	6789A00000000000000017D7
ckTypeId	Construction Kit Type ID	EnergyIQ/Space
rtDisplayName	Anzeigename der Entität, berechnet aus den Anzeigenamen-Regeln des CK-Typs	Main Building
rtDisplayDescription	Anzeigebeschreibung der Entität, berechnet aus den Anzeigenamen-Regeln des CK-Typs	Headquarters, Vienna
rtWellKnownName	Well-Known Name der Entität (technischer Bezeichner)	MainBuilding
rtCreationDateTime	Erstellungszeitstempel	2024-01-15T10:30:00Z
rtChangedDateTime	Zeitstempel der letzten Änderung	2024-01-20T14:45:00Z

tipp

Systemeigenschaften können mit oder ohne Unterstrich-Präfix angegeben werden: ckTypeId oder _ckTypeId

hinweis

Entitätsauswahlen und Picker in Refinery Studio beschriften Entitäten mit rtDisplayName / rtDisplayDescription, und die Suche in einem Picker filtert nach rtDisplayName. rtWellKnownName ist ein technischer Bezeichner (z. B. für die Adressierung von Blueprints und Migrationen), kein Anzeigename.

Werttypen

Das KPI-Widget erkennt und formatiert Werte automatisch:

Werttyp	Anzeige
Numbers	Mit Gebietsschema-Einstellungen formatiert (z. B. 1.234,56)
Strings	Unverändert angezeigt (z. B. EnergyIQ/Space, Active)
null/undefined	Als - angezeigt

Konfigurationsoptionen

Option	Beschreibung
Value Attribute	Das anzuzeigende Attribut oder die Systemeigenschaft
Label Attribute	Optionales Attribut für einen Untertitel/eine Beschriftung
Prefix	Text, der vor dem Wert angezeigt wird (z. B. €, $)
Suffix	Text, der nach dem Wert angezeigt wird (z. B. °C, %, kWh)
Trend	Optionaler Trendindikator (aufwärts, abwärts, neutral)

Query-Modi (Datenquelle „Persistent Query")

Bei Verwendung einer Persistent Query als Datenquelle:

Modus	Beschreibung
Simple Count	Zeigt die Gesamtanzahl der Query-Ergebnisse an
Aggregation	Zeigt einen einzelnen aggregierten Wert an (Summe, Durchschnitt, Min, Max)
Grouped Aggregation	Wählt eine Kategorie aus und zeigt ihren zugehörigen Wert an

Runtime- vs. Stream-Data-Queries

Eine Datenquelle vom Typ Persistent Query kann entweder eine Runtime-Data-Query oder eine Stream-Data-Query referenzieren (erstellt im Query Builder). Der Wechsel zwischen beiden ist eine Konfigurationsänderung – dasselbe Widget verarbeitet beide. Die drei oben genannten Query-Modi gelten jeweils für beide.

Wenn die ausgewählte Query eine Stream-Data-Query ist, erscheinen zwei zusätzliche Optionen:

Option	Beschreibung
Use board time filter	Standardmäßig aktiviert: Der Zeitfilter des MeshBoards grenzt die Stream-Data-Query auf den gewählten Bereich ein. Deaktivieren Sie ihn, um die eigenen intrinsischen Zeitgrenzen der Query beizubehalten.
Scope to entity selector	Bindet das Widget optional an einen Entitätsselektor, sodass die Query auf die Quelldaten des ausgewählten Assets eingeschränkt wird.

Diese Optionen sind bei Runtime-Queries ausgeblendet (die keinen Zeitbereich oder Asset-Scope verarbeiten).

Persistent-Query-Quellen – einschließlich Streamdaten – sind bei den Widgets KPI, Gauge, Stats Grid (pro Stat), Summary Card (pro Kachel), Table, Line Chart, Bar Chart, Pie Chart und Process Diagram verfügbar.

Gauge-Widget

Visualisiert numerische Werte in mehreren Stilen:

• Arc: Halbkreisförmige Anzeige
• Circular: Vollkreis-Anzeige
• Linear: Horizontaler oder vertikaler Balken
• Radial: Radialer Fortschrittsindikator

Konfigurieren Sie:

• Min./Max.-Werte
• Farbbereiche
• Zeigerstil
• Skalenbeschriftungen

Stats-Grid-Widget

Zeigt mehrere KPI-Werte nebeneinander in einem kompakten Raster an. Jede Stat wird unabhängig konfiguriert und kann ihren Wert aus einer von zwei Quellen beziehen:

Quelle	Beschreibung
Runtime aggregation (default)	Eine Zählung/Summe/Durchschnitt/Min/Max über einen Runtime-CK-Typ.
Persistent query	Eine gespeicherte Runtime- oder Stream-Data-Query, über die Query-Modi auf einen einzelnen Wert reduziert. Stream-Data-Queries stellen die Optionen für den Board-Zeitfilter und den Entitätsselektor-Scope bereit, die unter Runtime- vs. Stream-Data-Queries beschrieben sind.

Stats mit unterschiedlichen Quelltypen können im selben Widget gemischt werden.

Summary-Card-Widget

Zeigt eine Reihe kompakter Wert-Kacheln in einer einzigen Karte an. Wie beim Stats Grid wird jede Kachel unabhängig konfiguriert und kann ihren Wert aus einem Entitätsattribut, einer Runtime-Aggregation oder einer Persistent Query (Runtime oder Streamdaten) mit denselben Query-Modi und Stream-Data-Optionen beziehen.

Table-Widget

Zeigt mehrere Entitäten in tabellarischer Form an:

• Konfigurierbare Spalten
• Sortierung und Filterung
• Seitennummerierung
• Zeilenauswahl

Datums-/Zeitzellen (einschließlich Streamdaten-Archivspalten wie window_start / window_end) werden als dd.MM.yyyy HH:mm:ss auf Basis der Zeitzone des Boards dargestellt.

Entity-Card-Widget

Zeigt eine einzelne Entität an mit:

• Titel aus einem Entitätsattribut
• Konfigurierbarer Attributanzeige
• Optionen zur Kartengestaltung

Chart-Widgets

Line Chart:

• Eine oder mehrere Reihen über die Zeit dargestellt, mit optionaler Mehrfachachse (pro Einheit) und Referenzlinien
• Automatisches Downsampling für Streamdaten: Wenn die Datenquelle eine Stream-Data-Query mit aktivem Zeitfilter ist, fordert das Diagramm vom Backend nur so viele Punkte an, wie es anzeigen kann (etwa ein Bucket pro zwei Pixel Diagrammbreite), statt jede Rohzeile zu laden. Es fordert bei höherer Auflösung erneut an, wenn Sie das Widget breiter machen.
• Min/Max-Hüllkurve: Heruntergesampelte numerische Reihen werden als Durchschnittslinie mit einem schattierten Band gezeichnet, das das Minimum und Maximum jedes Buckets umspannt, sodass kurze Spikes sichtbar bleiben, anstatt weggemittelt zu werden. Das Band übernimmt die Farbe der Reihe und wird in der Legende weggelassen.
• Ein kleiner Zähler ‹rows› rows · ‹points› pts in der oberen rechten Ecke zeigt an, wie viele Zeilen geladen wurden gegenüber wie viele Punkte dargestellt werden – praktisch, um die Reduktion zu bestätigen.

Pie Chart:

• Datensegmentierung
• Legendenanzeige
• Donut-Option

Bar Chart:

• Vertikale oder horizontale Ausrichtung
• Unterstützung mehrerer Reihen
• Achsenkonfiguration

Status-Widgets

Status Indicator:

• Anzeige eines booleschen Werts
• Benutzerdefinierte Farben für Zustände
• Symbolauswahl

Service Health:

• Visualisierung des Gesundheitsstatus
• Puls-Animation für aktive Dienste
• Anzeige des Verbindungsstatus

Widget Group

Die Widget Group erstellt dynamisch untergeordnete Widgets auf Basis von Query-Ergebnissen. Dies ist nützlich, um mehrere ähnliche Widgets ohne manuelle Konfiguration anzuzeigen.

Anwendungsfälle

• KPI-Widgets für alle von einer Query zurückgegebenen Maschinen anzeigen
• Temperaturmesswerte für alle Räume eines Gebäudes anzeigen
• Statusindikatoren für alle aktiven Dienste erstellen

Konfiguration

Option	Beschreibung
Data Source	Persistent Query oder CK-Typ, der mehrere Elemente zurückgibt
Child Widget Type	Typ des Widgets, das für jedes Element gerendert wird (KPI, Entity Card, Gauge)
Layout	Grid- oder Flex-Layout zur Anordnung der untergeordneten Widgets
Grid Columns	Anzahl der Spalten im Grid-Layout (Standard: 4)
Value/Label Mapping	Ordnet Felder des Query-Ergebnisses den Widget-Eigenschaften zu

Funktionsweise

1. Die Widget Group führt eine Query aus (oder lädt Entitäten nach CK-Typ)
2. Für jede Ergebniszeile erstellt sie ein untergeordnetes Widget
3. Jedes untergeordnete Widget erhält Daten aus seiner entsprechenden Query-Zeile
4. Untergeordnete Widgets unterstützen dieselben Werttypen wie eigenständige Widgets (Zahlen, Zeichenketten, Systemeigenschaften)

Beispiel

Eine Query, die 5 Maschinen zurückgibt, erstellt 5 KPI-Widgets, die jeweils den Status der Maschine anzeigen:

Query Result:           Widget Group Output:
┌──────────────────┐    ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐
│ Machine A: 95%   │ -> │ 95% │ │ 87% │ │ 92% │ │ 78% │ │ 99% │
│ Machine B: 87%   │    └─────┘ └─────┘ └─────┘ └─────┘ └─────┘
│ Machine C: 92%   │    Machine Machine Machine Machine Machine
│ Machine D: 78%   │       A       B       C       D       E
│ Machine E: 99%   │
└──────────────────┘

Bearbeitungsmodus

Wechseln Sie in den Bearbeitungsmodus, um Ihr MeshBoard zu ändern:

1. Klicken Sie auf Enter Edit Mode
2. Widgets hinzufügen, konfigurieren oder entfernen
3. Widgets ziehen, um sie neu zu positionieren
4. Die Größe von Widgets nach Bedarf ändern
5. Klicken Sie auf SAVE, um Änderungen zu speichern
6. Klicken Sie auf Cancel Edit Mode, um Änderungen zu verwerfen

Well-Known Names

Well-Known Names ermöglichen es Ihnen, MeshBoards zu erstellen, die über bestimmte Routen erreichbar sind:

Well-Known Name	Verwendung
cockpit	Standard-Dashboard, das auf der Cockpit-Seite angezeigt wird
Benutzerdefinierte Namen	Erreichbar über /ui/meshboards/{well-known-name}

So richten Sie ein Cockpit-Dashboard ein:

1. Erstellen Sie ein MeshBoard
2. Öffnen Sie die MeshBoard-Einstellungen
3. Setzen Sie den Well-Known Name auf cockpit
4. Speichern Sie das MeshBoard

Best Practices

1. Planen Sie Ihr Layout: Skizzieren Sie das Layout Ihres Dashboards, bevor Sie es erstellen
2. Verwenden Sie einheitliche Größen: Halten Sie ähnliche Widgets in derselben Größe
3. Gruppieren Sie zusammengehörige Daten: Platzieren Sie zusammengehörige Widgets nahe beieinander
4. Legen Sie passende Aktualisierungsintervalle fest: Wägen Sie Datenaktualität gegen Performance ab
5. Verwenden Sie Variablen: Erstellen Sie wiederverwendbare, parametrisierte Dashboards
6. Testen Sie mit echten Daten: Überprüfen Sie, ob Widgets mit tatsächlichen Daten korrekt funktionieren
7. Dokumentieren Sie Ihre Dashboards: Fügen Sie Beschreibungen hinzu, um Benutzern den Zweck verständlich zu machen

Tastenkürzel

Tastenkürzel	Aktion
Escape	Bearbeitungsmodus verlassen (fragt nach dem Speichern)

Import/Export

MeshBoards können:

• Exportiert werden: Als JSON herunterladen zur Sicherung oder Freigabe
• Importiert werden: Aus einer JSON-Datei laden

Dies ermöglicht:

• Dashboards zwischen Tenants freizugeben
• Versionskontrolle von Dashboard-Konfigurationen
• Sicherungs- und Wiederherstellungsfunktionalität