Interaktiver Flurplan

[FloBi]

Guten Abend zusammen,

ich versuche gerade einen interaktivten Flurplan zu erstellen.
Ich will also ein Bild/Grundriss hcohladen und in diesem dann Infos, wie z. B. Temperaturen, Stauts Lampen usw. anzeigen lassen.

Das Ganze soll über eine config-template-card erfolgen.
Das Bild habe ich nach www/floorplan kopiert.

Hier mein Code im Raw Konfigurationseditor:

views:
  - title: EG
    path: Flurplan
    type: panel
    icon: null
    badges: []
    cards:
      - type: custom:config-template-card
        entities:
          - switch.buro_decke
          - switch.buro_schreibtisch
        card:
          type: picture-elements
          image: /local/floorplan/haus_eg.png​

Leider scheint der Pfad nicht zu passen, bzw. Homeassistant mein Bild nicht zu finden.
Ich bekomme folgende Meldung:

Elements required

type: picture-elements
image: /local/floorplan/haus_eg.png​

Das Bild ist aber definitv in diesem Pfad abgelegt.

Hab ihr hier vielleicht einen Ansatzpunkt für mich?

Vielen Dank für Eure Unterstützung!

[zenvy]

Die `picture-elements` Karte braucht `elements`. Siehe auch hier

[Sargon]

Zudem musst du es umdrehen mit der custom:config-template-card, du musst sie auf Ebene der Elements definieren sonst flackert der Floorplan bei jedem Entitäten Update.

Licht:

      - type: image
        entity: light.wohnzimmer_couch_spots
        title: Couch Spots
        image: /local/floorplan/PixelTransparent.png
        state_image:
          "on": /local/floorplan/EG/Wohnzimmer_Couch_Spots.png
        style:
          mix-blend-mode: lighten
          pointer-events: none
          left: 50%
          top: 45%
          width: 160%
          opacity: 1​​

Schalter zum Licht

      - type: custom:config-template-card
        entities:
          - light.wohnzimmer_spots
        element:
          type: state-icon
          state_color: false
          entity: light.wohnzimmer_spots
          tap_action:
            action: toggle
        style:
          top: 39%
          left: 45%
          border-radius: 50%
          "--paper-item-icon-color": >-
            ${states['light.wohnzimmer_spots'].state === 'on' ? 'var(--light-button-active-state-colour)' : 'var(--light-button-inactive-state-colour)'}
          background-color: >-
            ${states['light.wohnzimmer_spots'].state === 'on' ? 'var(--light-button-active-state-background-colour)' : 'var(--light-button-inactive-state-background-colour)'}

Farben per Card-Mod

type: vertical-stack
cards:
  - type: picture-elements
    image: /local/floorplan/EG/Night.png
    style:
      left: 50%
      top: 45%
      width: 160%
    card_mod:
      style: |
        ha-card {
          color: #ffffff; border: solid 2px #A0A2A8; box-shadow: none;
        
          --light-button-inactive-state-colour: white;
          --light-button-inactive-state-background-colour: #66666699;
          --light-button-active-state-colour: yellow;
          --light-button-active-state-background-colour: #fafacd66;
          --power-button-background-colour: #66666699;
          --power-button-inactive-state-colour: white;
          --power-button-active-state-colour: green;
        }​

image.png

[FloBi]

Oh, da hab ich wohl zu einfach gedacht....

Ich wollte nur den Grundriss als Hintergrund und mir in diesem Grundriss Sensorwerte, Status und Schalter anzeigen lassen, bzw. bedienen.
Geht sowas nicht einfacher?