Skip to content

Widget-Typ: Bild

Bild-Widgets stellen PNG- und JPG-Antworten direkt im Dashboard dar. Sie eignen sich vor allem für Kameras, Visualisierungen oder Snapshots.

Zwei Wege zum Bild-Widget

Explizit

"content": {
  "mode": "image"
}

Automatisch

"content": {
  "mode": "auto"
}

auto ist praktisch, wenn ein Endpoint sicher ein PNG liefert und dasselbe Widget im Fehlerfall dennoch als Icon/Text behandelt werden soll.

Statusquelle

Typischerweise liefert status.request.url direkt ein PNG:

"status": {
  "request": {
    "url": "https://example.org/camera/frontdoor/latest.png"
  }
}

Optional kann responseKind = "png" oder responseKind = "jpg" gesetzt werden, wenn der Typ strikt erzwungen werden soll.

Overlay von Titel und Value

Bild-Widgets können unten links ein Text-Overlay anzeigen:

  • title
  • value

Das Overlay wird nur gerendert, wenn mindestens einer der beiden Texte vorhanden ist.

Beispiel:

"title": {
  "mode": "static",
  "value": "Eingang"
},
"value": {
  "mode": "template",
  "value": "{{temperature}} C"
}

WidgetImageConfig

Aktuell gibt es einen Parameter:

Feld Typ Default Bedeutung
contentScale crop, fit, fill_bounds crop Skalierung des Bildes

Beispiel

{
  "id": "outdoor-camera",
  "layout": {
    "order": 20,
    "size": "2/1"
  },
  "content": {
    "mode": "image",
    "icon": {
      "name": "camera",
      "defaultColor": "#2F4C57"
    },
    "title": {
      "mode": "static",
      "value": "Eingang"
    },
    "value": {
      "mode": "static",
      "value": "Live"
    },
    "image": {
      "contentScale": "crop"
    }
  },
  "status": {
    "request": {
      "url": "https://example.org/camera/frontdoor/latest.jpg"
    },
    "responseKind": "jpg"
  }
}

Fehler- und Fallback-Verhalten

  • bei mode = "image" und echter PNG- oder JPG-Antwort wird das Bild gezeigt
  • bei mode = "image" ohne Bilddaten fällt das Widget auf Icon/Text zurück
  • bei mode = "auto" entscheidet die Antwortart
  • bei Fehlern wird das Widget wie alle anderen ausgegraut

Empfehlungen

  • Kamerabilder eher in 2/1, 3/1, 2/2 oder full/1 platzieren
  • Overlay-Texte kurz halten
  • für Kamera-Links zusätzlich eine open_url-Aktion nutzen

Siehe auch