Grafiken als Buttons im Lovelace nutzen

Philips Hue 7146060PU Go LED Leuchte, tragbares, kabelloses Licht, dimmbar, bis zu 16 Millionen Farben, stuerbar via App, kompatibel mit Amazon Alexa, EU-Stecker (Echo, Echo Dot)
Philips Hue 7146060PU Go LED Leuchte, tragbares, kabelloses Licht, dimmbar, bis zu 16 Millionen Farben, stuerbar via App, kompatibel mit Amazon Alexa, EU-Stecker (Echo, Echo Dot)
--

Beim Dashboard Designen kommt man in Home Assistant schnell an den Punkt an dem man seine eigenen Grafiken als Schaltflächen verwenden möchte. Normalerweise werden auf den Buttons immer die Icons der Entitäten dargestellt. Wenn einem das aber nicht ausreicht ist man auf den ersten Blick vielleicht erst einmal aufgeschmissen.

Es gibt aber eine ganz einfache Lösung! Und zwar könnt Ihr beliebige Grafiken als Picture-Card auf euer Dashbord legen und über die tap_action die Aktion auswählen, die bei einem Klick auf das Bild ausgeführt werden soll. Die Grafik verhält sich anschließend also genau so wie ein Button.

Die Bilder die Ihr verwenden möchtet müsst Ihr dazu einfach unterhalb des Ordners “/config/www” platzieren. Dabei ist es egal ob direkt in dem Ordner oder ob Ihr lieber einen bzw. mehrere Unterordner erzeugt. Ihr müsst nur beachten, dass Ihr in der Pfadangabe des Parameters “image:” den Ordner “/config/www” durch den Eintrag “/local” erreicht.

Wenn Ihr also Beispielsweise einen Ordner “img” im Verzeichnis “/config/www” anlegt und dort eure Grafiken “haus.png” ablegt, muss der Pfad zu dem Bild /local/img/haus.png lauten

type: grid
cards:
  - type: picture
    image: /local/img/haus_ui.png
    tap_action:
      action: navigate
      navigation_path: /lovelace/Haus
  - type: picture
    image: /local/img/treppe.png
    tap_action:
      action: call-service
      service: light.toggle
      target:
        entity_id: light.treppen_licht
  - type: picture
    image: /local/img/pfote.png
    tap_action:
      action: call-service
      service: scene.turn_on
      target:
        entity_id: scene.chill
columns: 6
title: Navigation

Danke an Dr. Jones für die Anregung!