4. SVG-Grundriss im Dashboard mit mehreren Räumen und Funktionen verknüpfen

Bevor du einzelne Räume im SVG-Grundriss mit Sensoren und Funktionen verknüpfen kannst, musst du zuerst eine eigene Dashboard-Ansicht (View) anlegen. Ohne diese View wird die floorplan-card nicht angezeigt.

Die Konfiguration erfolgt im YAML-Modus deines Dashboards (z. B. in dashboard.yaml) und sieht grundsätzlich so aus:

views:
  - title: Erdgeschoss
    path: floorplan
    panel: true
    cards:
      - type: custom:floorplan-card
        full_height: true
        config:
          image: /local/floorplan/Grundriss_BBS_Erdgeschoss.svg
          stylesheet: /local/floorplan/floorplan.css
          log_level: info
          console_log_level: debug
          defaults:
            hover_action: hover-info
            tap_action: more-info

• Ersetze den Eintrag bei image: mit dem genauen Namen deiner SVG-Datei, z. B. /local/floorplan/dein_grundriss.svg

• Dasselbe gilt für stylesheet:  – trage hier den tatsächlichen Namen deiner CSS-Datei ein

• Wenn du mehrere Etagen hast, kannst du für jede eine eigene View anlegen

Jeder Raum erhält dabei zwei Regeln:

1. Eine für den Fensterstatus 

2. Eine für die Heizung (über die climate-Entität)

Beispiel: Raum C001

rules:
  # Regel 1: Fensterstatus → Raum färben
  - entities: 
      - binary_sensor.fenster_c001a
      - binary_sensor.fenster_c001b
    element: raum_C001
    state_action:
      action: call-service
      service: floorplan.class_set
      service_data: |
        ${entity.state === "on" ? "fenster_offen" : ""}

  # Regel 2: Beim Tippen Heizung anzeigen
  - entity: climate.c001_raum_int0000001
    elements:
      - raum_C001
      - text_C001
    tap_action:
      action: more-info