Widgets¶

Diese Seite beschreibt die vollständige Widget-Struktur unabhängig vom konkreten Widget-Typ.

WidgetConfig¶

WidgetLayoutConfig¶

WidgetSize¶

Zulässige Werte:

• 1/1 bis 4/4
• full/1 bis full/4

Semantik:

• 2/1 belegt zwei Spalten und eine Zeile
• 3/2 belegt drei Spalten und zwei Zeilen
• full/1 belegt immer die gesamte aktuell verfügbare Dashboard-Breite
• full/n startet auf einer neuen Zeile und wirkt wie ein Layout-Umbruch

WidgetContentConfig¶

Wichtige Laufzeitregeln:

• wenn title nicht gesetzt ist, rendert die App keinen automatisch erzeugten Default-Titel
• wenn value nicht gesetzt ist, bleibt der Wertbereich leer
• icon_text kann ohne status als reiner Button modelliert werden
• shutter darf ebenfalls ohne status vorkommen, wenn das Widget nur Befehle auslösen soll

WidgetRenderMode¶

WidgetTypographyConfig¶

Wirkung:

• wenn null, verwendet die App die Material-Theme-Typografie
• wenn gesetzt, werden fontSize und lineHeight passend angepasst

WidgetColorsConfig¶

Wirkung:

• wenn nur tileColor gesetzt ist, verwendet die App automatisch eine kontrastreiche Standard-Schriftfarbe
• titleColor und valueColor bleiben optional und überschreiben nur die jeweilige Textart
• tileColorRules, titleColorRules und valueColorRules funktionieren wie bei Icons: die erste passende Regel gewinnt
• wenn keine Farbregel passt, verwendet die App die statischen Werte aus tileColor, titleColor und valueColor als Fallback
• Farbwerte sollten als #RRGGBB oder #AARRGGBB angegeben werden

WidgetIconConfig¶

Wichtige Laufzeitregeln:

• namePath hat Vorrang vor name
• wenn kein icon gesetzt ist, wird kein Fallback-Icon gerendert
• wenn kein Material-Icon aufgelöst werden kann, wird ein vorhandenes emoji gezeigt
• sizeDp überschreibt die Standardgrösse des führenden Icons
• Emojis lassen sich technisch nicht wie Material-Icons tinten, deshalb sind icon.name-basierte Widgets für dynamische Farben vorzuziehen

ColorRuleConfig¶

Die erste passende Regel gewinnt.

WidgetConditionConfig¶

Alle gesetzten Bedingungen müssen gleichzeitig zutreffen.

TextSourceConfig¶

TextSourceMode¶

Besonderheit:

• wenn title fehlt oder leer bleibt, rendert die App keinen Titeltext
• Dialoge für Slider, Select, Rollladen und Bestätigungen fallen intern auf die Widget-ID zurück, wenn kein Titel aufgelöst werden kann

WidgetImageConfig¶

WidgetImageScale¶

Typabhängige Pflichtfelder¶

Hinweis zum Rollladen-Schema:

• auch bei shutter ohne status bleibt content.shutter.valuePath im aktuellen Schema ein Pflichtfeld

Beispiel: Reiner Aktionsbutton ohne Status¶

{
  "id": "hot-water-boost",
  "content": {
    "mode": "icon_text",
    "icon": {
      "name": "water",
      "defaultColor": "#0E7490"
    },
    "title": {
      "mode": "static",
      "value": "Warmwasser jetzt"
    }
  },
  "action": {
    "request": {
      "url": "http://192.168.1.20/api/hot-water/boost-now"
    },
    "prompt": true
  }
}

Beispiel¶

{
  "id": "power-overview",
  "layout": {
    "order": 30,
    "size": "3/1"
  },
  "content": {
    "mode": "icon_text",
    "icon": {
      "name": "bolt",
      "namePath": "grid.icon_name",
      "defaultColor": "#C96C1A",
      "colorRules": [
        {
          "when": {
            "path": "grid.draw_watts",
            "greaterThan": 0.0
          },
          "color": "#D9485F"
        }
      ]
    },
    "title": {
      "mode": "static",
      "value": "Netzbezug"
    },
    "value": {
      "mode": "template",
      "value": "{{grid.draw_watts}} W | PV {{pv.watts}} W"
    },
    "colors": {
      "tileColor": "#1E293B",
      "titleColor": "#E2E8F0",
      "valueColor": "#F8FAFC",
      "tileColorRules": [
        {
          "when": {
            "path": "grid.draw_watts",
            "greaterThan": 0.0
          },
          "color": "#FFF4D8"
        }
      ],
      "titleColorRules": [
        {
          "when": {
            "path": "grid.draw_watts",
            "greaterThan": 0.0
          },
          "color": "#4A3412"
        }
      ],
      "valueColorRules": [
        {
          "when": {
            "path": "grid.draw_watts",
            "greaterThan": 0.0
          },
          "color": "#B45309"
        }
      ]
    },
    "typography": {
      "titleSizeSp": 18,
      "valueSizeSp": 22
    }
  },
  "status": {
    "request": {
      "url": "https://example.org/api/energy/current"
    }
  }
}

Weiterführend¶

• Icon und Text
• Bild
• Slider
• Select
• Rollladen