Tabs, Gruppen und Grid¶

Diese Seite beschreibt die sichtbare Dashboard-Struktur und das Packing der Widgets ins Raster.

Tabs¶

Tabs sind optionale Reiter. Wenn keine Tabs definiert sind, erstellt die App intern einen Default-Tab mit dem Titel Dashboard.

Sortierung der Tabs¶

Tabs werden in dieser Reihenfolge sortiert:

1. dashboard.tabs[].order
2. dashboard.tabs[].title
3. dashboard.tabs[].id

Automatischer Inhalt eines Tabs¶

Wenn ein Tab weder widgetIds noch groupIds definiert:

• zeigt er alle ungruppierten Widgets
• und alle Gruppen

Das ist praktisch für ein Haupt-Dashboard, in dem alles sichtbar sein soll.

Gruppen¶

Gruppen erzeugen optisch zusammenhängende Bereiche mit eigener Breite im Raster.

Eine Gruppe:

• hat widgetIds
• hat order
• kann optional title tragen
• kann optional expandable: true als 1/1 Link-Kachel im Grid erscheinen
• kann optional ein icon für diese eingeklappte Kachel tragen
• kann optional über valueWidgetId den value eines Gruppen-Widgets auf der eingeklappten Kachel spiegeln
• kann optional über valuePattern mehrere Gruppen-Values auf der eingeklappten Kachel kombinieren; die benötigten Widget-IDs werden direkt aus den Platzhaltern extrahiert
• kann optional highlightColor und borderColor tragen
• begrenzt ihren Inhalt über widthColumns
• begrenzt bei expandable: true optional auch die Popup-Breite, wenn widthColumns explizit gesetzt ist

Die Breite bezieht sich auf die aktuell verfügbare Spaltenzahl des Grids.

Für expandable-Gruppen gilt abweichend:

• im Haupt-Grid belegen sie immer genau 1x1
• optional zeigen sie unter dem Icon den aufgelösten value eines per valueWidgetId referenzierten Widgets
• alternativ rendern sie ein valuePattern mit den aufgelösten value-Texten der darin referenzierten Widget-IDs
• ein Klick öffnet die eigentlichen Widgets in einem Popup
• das Popup verwendet dieselbe Widgetgrösse wie das Haupt-Grid
• die Popup-Breite nutzt dieselbe Spaltenzahl wie das Haupt-Grid, aber höchstens 5

Beispiel:

• widthColumns: 3 nutzt drei Raster-Spalten
• ein Wert grösser als die aktuell verfügbaren Spalten verhält sich wie Vollbreite

Sortierung innerhalb eines Tabs¶

Der Tab-Inhalt wird in ResolvedDashboardContentBlock aufgelöst.

Es gibt zwei Blockarten:

• freie Widget-Blöcke
• Gruppenblöcke

Alle Einträge werden gemeinsam nach:

1. order
2. Deklarationsreihenfolge innerhalb des Tabs

sortiert.

Wichtig:

• gleiche order-Werte bleiben stabil in der JSON-Reihenfolge
• das gilt für Widgets und Gruppen

Grid-Packing¶

Im eigentlichen Raster passiert danach ein zweiter Schritt:

1. Widgets eines Blocks werden nach layout.order sortiert
2. das Packing sucht die erste freie Position von oben nach unten und von links nach rechts
3. Grösse und aktuelle Spaltenzahl bestimmen die konkrete Platzierung

Orientierung¶

Die Spaltenzahl hängt von der Geräteausrichtung ab:

• Hochformat: portraitColumns
• Querformat: landscapeColumns

Bei Drehung wird das Grid neu gepackt. Die logische Reihenfolge bleibt erhalten, die konkrete Position kann sich ändern.

Zusätzlich können beide Werte im Reiter Optik lokal pro Gerät überschrieben werden. Ein leerer Override fällt wieder auf den JSON-Wert zurück.

Vollbreite mit full/n¶

Vollbreiten-Widgets sind speziell:

• sie nutzen immer alle aktuell verfügbaren Spalten
• sie starten auf einer neuen Zeile
• nachfolgende Widgets dürfen Lücken vor diesem Widget nicht auffüllen

Dadurch kann full/1 oder full/2 bewusst als Zeilenumbruch oder Abschnittskarte verwendet werden.

Gruppen und Vollbreite zusammen¶

Sinnvolle Kombinationen:

• Gruppe für thematisch zusammenhängende Widgets
• innerhalb der Gruppe ein full/1-Widget als Trenner oder grosser Statusbanner

Beispiel¶

{
  "dashboard": {
    "groups": [
      {
        "id": "living-room-windows",
        "title": "Fenster",
        "order": 30,
        "widthColumns": 4,
        "highlightColor": "#C88A43",
        "borderColor": "#8A4A17",
        "widgetIds": [
          "window-left",
          "window-right",
          "door-garden"
        ]
      }
    ],
    "tabs": [
      {
        "id": "living",
        "title": "Wohnzimmer",
        "order": 20,
        "groupIds": [
          "living-room-windows"
        ],
        "widgetIds": [
          "main-light",
          "ambient-light",
          "energy-banner"
        ]
      }
    ]
  }
}

Wenn energy-banner die Grösse full/1 hat, bildet es innerhalb des freien Widget-Blocks einen harten Zeilenumbruch.

Layout-Empfehlungen¶

• 1/1 für viele kleine Statuswerte
• 2/1 für interaktive Widgets mit etwas mehr Text
• 3/1 oder 4/1 für Übersichten
• full/1 für Trennkacheln, Bereichsüberschriften oder grosse Summenwerte
• Gruppen für physische Räumlichkeiten oder thematische Bereiche
• borderColor für Räume oder Sicherheitsbereiche, die im Layout klar abgegrenzt sein sollen

Verwandte Themen¶

• Dashboard
• Widgets