Skip to content

Widget-Typ: Icon und Text

icon_text ist der Standard-Widget-Typ für kompakte Statusanzeigen, einfache Klickaktionen und reine Aktionsbuttons ohne Status.

Typische Einsatzfälle

  • Lampe an oder aus
  • Energiefluss
  • WLAN- oder Routerstatus
  • Temperatur oder Luftqualität
  • Sofortaktionen mit Bestätigung
  • Schaltflächen für Tab-Wechsel oder Browser-Links

Darstellung

Ein icon_text-Widget besteht aus:

  • einem führenden Icon oder Emoji
  • einem Titel
  • optional einem Value-Text

Wenn kein title vorhanden ist, bleibt der Titelbereich leer.

Wenn kein value vorhanden ist, bleibt der untere Wertbereich leer.

Dynamisches Icon

Der Icon-Name kann statisch oder dynamisch sein.

Statisch

"icon": {
  "name": "lightbulb",
  "sizeDp": 28,
  "defaultColor": "#F59E0B"
}

Dynamisch aus der Antwort

"icon": {
  "name": "home",
  "namePath": "device.icon",
  "defaultColor": "#0E7490"
}

Wenn device.icon etwa "window" liefert, wird window statt home gerendert.

Dynamische Farbe

"icon": {
  "name": "window",
  "defaultColor": "#64748B",
  "colorRules": [
    {
      "when": {
        "path": "open",
        "truthy": true
      },
      "color": "#DC2626"
    }
  ]
}

Individuelle Icongrösse

"icon": {
  "name": "window",
  "sizeDp": 24,
  "defaultColor": "#64748B"
}

Titel und Value

Statisch

"title": {
  "mode": "static",
  "value": "Wohnzimmer"
}

Direkt aus JSON-Pfad

"value": {
  "mode": "path",
  "value": "scene_label",
  "fallback": "unbekannt"
}

Template

"value": {
  "mode": "template",
  "value": "{{grid.draw_watts}} W | PV {{pv.watts}} W"
}

Individuelle Kachel- und Schriftfarben

"colors": {
  "tileColor": "#FFF4D8",
  "titleColor": "#4A3412",
  "valueColor": "#B45309",
  "tileColorRules": [
    {
      "when": {
        "path": "state",
        "equals": "on"
      },
      "color": "#FEF3C7"
    }
  ],
  "titleColorRules": [
    {
      "when": {
        "path": "state",
        "equals": "on"
      },
      "color": "#78350F"
    }
  ],
  "valueColorRules": [
    {
      "when": {
        "path": "state",
        "equals": "on"
      },
      "color": "#B45309"
    }
  ]
}

Wenn nur tileColor gesetzt ist, ergänzt die App automatisch kontrastreiche Textfarben. Wenn eine Farbregel greift, überschreibt sie die statische Farbe des jeweiligen Bereichs.

Ohne Icon

Wenn content.icon nicht gesetzt ist:

  • wird kein Fallback-Icon gerendert
  • auch kein implizites Default-Icon

Das ist nützlich für sehr textlastige Widgets.

Reiner Button ohne Status

Ein icon_text-Widget kann komplett ohne status auskommen.

{
  "content": {
    "mode": "icon_text",
    "icon": {
      "name": "power",
      "defaultColor": "#DC2626"
    },
    "title": {
      "mode": "static",
      "value": "Lichtwecker aus"
    }
  },
  "action": {
    "request": {
      "url": "http://192.168.1.20/api/alarm-clock/off"
    }
  }
}

Bestätigung vor der Aktion

Für sensible Aktionen kann action.prompt = true gesetzt werden.

{
  "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,
    "refreshAfterAction": true
  }
}

Text-Response mit Root-Pfad

Wenn ein Endpoint nur einen primitiven Textwert liefert, kann direkt $ gelesen werden.

{
  "content": {
    "mode": "icon_text",
    "title": {
      "mode": "static",
      "value": "API-Status"
    },
    "value": {
      "mode": "path",
      "value": "$"
    }
  },
  "status": {
    "request": {
      "url": "https://example.org/api/healthz"
    },
    "responseKind": "text"
  }
}

Beispiel: Statusanzeige mit Toggle-Action

{
  "id": "living-room-light",
  "layout": {
    "order": 10,
    "size": "1/1"
  },
  "content": {
    "mode": "icon_text",
    "icon": {
      "name": "lightbulb",
      "defaultColor": "#64748B",
      "colorRules": [
        {
          "when": {
            "path": "state",
            "equals": "on"
          },
          "color": "#F59E0B"
        }
      ]
    },
    "title": {
      "mode": "static",
      "value": "Wohnzimmer"
    },
    "value": {
      "mode": "template",
      "value": "{{brightness}} %"
    },
    "colors": {
      "tileColor": "#FFF4D8",
      "titleColor": "#4A3412",
      "valueColor": "#B45309"
    }
  },
  "status": {
    "sharedRequestId": "living-room-light-state"
  },
  "action": {
    "request": {
      "url": "http://192.168.1.20/api/lights/living-room/toggle"
    }
  }
}

Sinnvolle Grössen

Häufig bewährt:

  • 1/1 für kompakte Statusfelder
  • 2/1 für Status plus etwas längeren Value
  • 3/1 für breite Systemanzeigen
  • full/1 für Abschnittskarten oder Zeilenumbrüche

Verwandte Themen