Floorplan Dashboard NEU in 2023 mit Picture Elements Card

Inhaltsverzeichnis

Floorplan

Um sich ein Dashboard mit einem Floorplan also einer Haus- bzw. Wohnungs- Ansicht zu erstellen, sind grundsätzlich nur ein 3D Zeichenprogram und alternativ ein Program zur Fotobearbeitung notwendig.
Ich zeige in diesem Beitrag wie und mit welchem Aufwand mein Floorplan entstanden ist und wie man mit etwas Zeitaufwand sein eigenes Dashboard erstellten kann.

Die von mir benutzten Programme:

Sweet Home 3D ist ein kostenloses 3D Planungsprogramm mit welchem mit einfachen Mitteln ein Floorplan erstellt werden kann.

Gimp ist ein Programm zur Fotobearbeitung ähnlich wie Photoshop, allerdings kostenenlos

Sketchup ist ebenfalls ein 3D Planungsprogramm, allerdings nicht nur um Gebäudeübersichten zu erstellen, sondern hier können auch Möbel udg. geplant und gezeichnet werden. Mit der älteren (nicht mehr upgedateten) Version von 2017 ist auch eine kostenlose Nutzung möglich.

Mit Trimble bzw. einem Account auf dieser Seite kann man Sketchup auch in der Browserversion kostenlos nutzen, sowie dessen 3D Warehouse, um sich fertige 3D Modelle herunter zu laden.

Adobe Photoshop ist das einzige der hier angeführten Programme welches kostenpflichtig ist. Zur Erstellung der für den Floorplan notwendigen Bilder, ist es aber nicht zwingend notwendig. Da ich allerdings vermehrt Fotos bearbeite ist es von Hause aus in meinem Sortiment.

Nach der Installation der Programme können wir nun mit der Erstellung des Floorplan beginnen.

Grundriss zeichnen

Mobiliar für Floorplan

Um den Grundriss so detailgetreu wie möglich zu gestallten, habe ich im Vorfeld mein Mobiliar in SketchUp gezeichnet. Wie ich das gemacht habe, zeige ich in diesem Video.

Please accept statistik, Marketing cookies to watch this video.

3D Wohnungsansicht

Im nächsten Schritt habe ich den Grundriss in Sweet Home 3D gezeichnet. Dazu wurde das Mobiliar aus SketchUp exportiert und in SH3D importiert. Die 3D Wohnungsansicht wurde so genau wie möglich bearbeitet und mit einer Menge an Details bestückt. Einzelne Modelle habe ich aus dem 3D Warehaus heruntergeladen und eingefügt. Auch zu diesem Arbeitsschritt gibt es ein eigenes Video.

Please accept statistik, Marketing cookies to watch this video.

Please accept statistik, Marketing cookies to watch this video.

WICHTIGER HINWEIS!

Um sich eine zusätzliche Bildbearbeitung mit einem Fotobearbeitungsprogramm zu sparen, ist es wichtig die Bilder mit der passenden Tageszeit zu rendern.
Daher wähle wie folgt:

Einfärbiger Hintergrund

Alle Lampen und Leuchten ausschalten und mit Uhrzeit
01:00
rendern

Floorplan Hintergrund Nacht

Nacht Hintergrund

Alle Lampen und Leuchten ausschalten und mit Uhrzeit
07:30
rendern
Die Helligkeit kann mit der Uhrzeit angepasst werden

Licht-Entitäten Bilder

Jeweils eine Lampe, Leuchte oder Beleuchtungsgruppe aktivieren und mit Uhrzeit
01:00
rendern

RGB-Entitäten Bilder
(Farbwechsler)

Jeweils eine Lampe, Leuchte oder Beleuchtungsgruppe
(unbedingt mit rotem Licht)
aktivieren und mit Uhrzeit
01:00
rendern

RGBW-Entitäten Bilder
(Farbwechsler+Farbtemperatur)

Jeweils eine Lampe, Leuchte oder Beleuchtungsgruppe
1 x in Rot
1x in Weiß

aktivieren und mit Uhrzeit
01:00
rendern

Je nach Einstellung der Leuchte wird in Home Assistant dann entweder Farbe oder Weiß gewählt.

Die schwarzen Segmente bei den Bildern sind durch die Art der Programierung kein Problem. Diese werden automatisch von Home Assistant ausgeblendet.
Dies sieht, mit diesen Entitäten so aus:

Left ImageRight Image

Die exportierten Bilder habe ich einerseits auf meinem PC mit eindeutigen Namen und dann natürlich im Homeassistant „www“-Ordner gespeichert.
Wichtig ist, dass du dir den Speicherpfad leicht merken kannst, um bei der Programmierung nicht immer nachsehen zu müssen.

Picture Elements Card einrichten

Please accept statistik, Marketing cookies to watch this video.

Um nun die fertigen Bilder in Home Assistant zur Anzeige zu bringen, erstellst du dir am Besten ein neues Dashboard bzw. eine neue Seite.
Diese soll notwendigerweise im Panel-Modus konfiguriert sein.

Eine Erklärung, wie man ein Dashboard anlegt, findest du hier

Wenn das Dashboard angelegt ist, füge eine neue Karte hinzu

und im aufgepoppten Fenster suche nach

wähle es aus und nun kannst du bereits den ersten Code für den Hintergrund eingeben.

Start Code

type: picture-elements  
  
 ######  ########    ###    ########  ######## 
##    ##    ##      ## ##   ##     ##    ##    
##          ##     ##   ##  ##     ##    ##    
 ######     ##    ##     ## ########     ##    
      ##    ##    ######### ##   ##      ##    
##    ##    ##    ##     ## ##    ##     ##    
 ######     ##    ##     ## ##     ##    ##     
  

image: /local/<DEIN-PFAD>/<DEIN-EINFÄRBIGER-HINTERGRUND>.png
      
      #----------------------------------------------- 
      #----------------------------------------------- 
      #  Start mit Übersicht Elements
      #-----------------------------------------------         
      #-----------------------------------------------         
      

elements:

##     ## #### ##    ## ######## ######## ########   ######   ########  ##     ## ##    ## ########  
##     ##  ##  ###   ##    ##    ##       ##     ## ##    ##  ##     ## ##     ## ###   ## ##     ## 
##     ##  ##  ####  ##    ##    ##       ##     ## ##        ##     ## ##     ## ####  ## ##     ## 
#########  ##  ## ## ##    ##    ######   ########  ##   #### ########  ##     ## ## ## ## ##     ## 
##     ##  ##  ##  ####    ##    ##       ##   ##   ##    ##  ##   ##   ##     ## ##  #### ##     ## 
##     ##  ##  ##   ###    ##    ##       ##    ##  ##    ##  ##    ##  ##     ## ##   ### ##     ## 
##     ## #### ##    ##    ##    ######## ##     ##  ######   ##     ##  #######  ##    ## ########         

      #-----------------------------------------------         
      #----------------------------------------------- 
      #  HINTERGRUND-BILD-NACHT
      #-----------------------------------------------         
      #----------------------------------------------- 

  - type: image
    image: /local/<DEIN-PFAD>/<DEIN-NACHT-HINTERGRUNDBILD>.png
    style:
      pointer-events: none
      left: 50%
      top: 50%
      width: 100%
      opacity: 1

Korrigiere noch den Speicherpfad und den Namen von beiden Bildern und nun müsste nach dem Speicher dein Hintergrund bereits angezeigt werden.

TIP: Speicher dir den Code in einem externen Programm (Notepad++, StudioCodeServer)

Wenn du eine tageslichtabhängige Ansicht einfügen möchtest, kannst du dir in diesem Beitrag ansehen wie ich das gemacht habe und was du dazu benötigst.

Als nächstes kannst du deine Entitäts-Bilder hinzufügen

Entitäts-Bild Code

      #-----------------------------------------------         
      #----------------------------------------------- 
      #  ENTITÄTS-BILD
      #-----------------------------------------------         
      #----------------------------------------------- 

  - type: image
    entity: <DEINE-LICHT-ODER-SCHALTER-ENTITÄT>
    title: <DEIN-TITEL>
    image: /local/<DEIN-PFAD>/<DEIN-TRANSPARENTES-1x1-PIXEL-BILD>.png
    state_image:
      'on': /local/<DEIN-PFAD>/<DEIN-ENTITÄTS-BILD>.png
    style:
      mix-blend-mode: lighten
      pointer-events: none
      left: 50%
      top: 50%
      width: 100%
      opacity: 1

Wenn du keine Möglichkeit hast, dir ein 1×1 Pixel Bild (transparent) zu erstellen, kannst du es dir hier herunterladen.

RGB Entitäts-Bild Code

Für den Fall, dass du Farbwechsler-Entitäten in deinem Smarthome betreibst, wie z.B. RGB Leuchten, kannst du folgenden Code benutzen

      #-----------------------------------------------         
      #----------------------------------------------- 
      #  FARBWECHSLER-ENTITÄTS-BILD RGB
      #-----------------------------------------------         
      #----------------------------------------------- 

  - type: custom:config-template-card
    variables:
      LEUCHTENSTATUS: states['light.<DEINE-RGB-LICHT-ENTITÄT>'].state
      FARBMODUS: states['light.<DEINE-RGB-LICHT-ENTITÄT>'].attributes.color_mode
      LICHTFARBE: states['light.<DEINE-RGB-LICHT-ENTITÄT>'].attributes.hs_color
      HELLIGKEIT: states['light.<DEINE-RGB-LICHT-ENTITÄT>'].attributes.brightness
    entities:
      - light.<DEINE-RGB-LICHT-ENTITÄT>
    element:
      type: image
      image: /local/<DEIN-PFAD>/<DEIN-TRANSPARENTES-1x1-PIXEL-BILD>.png
      state_image:
        'on': /local/local/<DEIN-PFAD>/<DEIN-RGB-ENTITÄTS-BILD-ROT>.png
      entity: light.<DEINE-RGB-LICHT-ENTITÄT>
    style:
      filter: >-
        ${ "hue-rotate(" + (LICHTFARBE ? LICHTFARBE[0] : 0) + "deg)"}
      opacity: >-
        ${LEUCHTENSTATUS === 'on' ? (HELLIGKEIT / 254) : '1'}
      mix-blend-mode: lighten
      pointer-events: none
      left: 50%
      top: 50%
      width: 100%

RGBW Entitäts-Bild Code

Bei der Verwendung von RGBW Leuchten und vorhandenen Entitäts-Bildern in „ROT“ und „WEISS“ kann dieser Code zur Darstellung am Floorplan verwendet werden.

      #-----------------------------------------------         
      #----------------------------------------------- 
      #  FARBWECHSLER-ENTITÄTS-BILD RGBW
      #-----------------------------------------------         
      #----------------------------------------------- 

      
  - type: custom:config-template-card
    variables:
      LEUCHTENSTATUS: states['light.<DEINE-RGBW-LICHT-ENTITÄT>'].state
      FARBMODUS: states['light.<DEINE-RGBW-LICHT-ENTITÄT>'].attributes.color_mode
      LICHTFARBE: states['light.<DEINE-RGBW-LICHT-ENTITÄT>'].attributes.hs_color
      HELLIGKEIT: states['light.<DEINE-RGBW-LICHT-ENTITÄT>'].attributes.brightness
    entities:
      - light.<DEINE-RGBW-LICHT-ENTITÄT>
    element:
      type: image
      image: /local/<DEIN-PFAD>/<DEIN-TRANSPARENTES-1x1-PIXEL-BILD>.png
      state_image:
        'on': >-
          ${FARBMODUS === 'color_temp' ?
          '/local/<DEIN-PFAD>/<DEIN-RGBW-ENTITÄTS-BILD-WEISS>.png' :
          '/local/<DEIN-PFAD>/<DEIN-RGBW-ENTITÄTS-BILD-ROT>.png' }
      entity: light.<DEINE-RGBW-LICHT-ENTITÄT>
    style:
      filter: >-
        ${ "hue-rotate(" + (LICHTFARBE ? LICHTFARBE[0] : 0) + "deg)"}
      opacity: >-
        ${LEUCHTENSTATUS === 'on' ? (HELLIGKEIT / 254) : '100'}
      mix-blend-mode: lighten
      pointer-events: none
      left: 50%
      top: 50%
      width: 100%

Button einfügen

Um unsere Entitäten am Floorplan schalten zu können benötigen wir sogenannte Buttons. Dem Design dieser Buttons sind im Grunde keine Grenzen gesetzt. Als Grundlage dazu nutze ich PNG Bilder die ich mir selber erstellt habe.

Falls du wissen möchtest wie man solche Buttons erstellt oder du dir meine erstellten Herunterladen möchtest, folge diesem Beitrag.

Please accept statistik, Marketing cookies to watch this video.

Bevor du die Buttons in deinem Floorplan integrieren kannst ist es vom Vorteil sich die genaue Position der einzelnen Buttons herauszusuchen bzw. auszurechnen. Zu diesem Thema habe ich einen Work around geschaffen um sich das in gewisser Weise zu vereinfachen.

Wenn du die Positionen und die Bilder für deine Buttons erstellt und berechnet hast kannst du dir folgenden Code in deine Konfiguration eintragen.

  - type: image
    entity: <DEINE-ENTITÄT>
    title: <INDIVIDUELLER-TITEL-DEINES-BUTTONS>
    image: /local/<PFAD-NAME-DEINES-STANDARD-BUTTON-BILDES>
    state_image:
      'on': /local/<PFAD-NAME-DEINES-ON-BILDES>
      'off': /local/<PFAD-NAME-DEINES-OFF-BILDES>
    state_filter:
      'on': brightness(100%) saturate(1.2)
      'off': brightness(80%) saturate(0.8)
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      left: 50% # Trage hier deine berechnete Position von links in % ein
      top: 50% # Trage hier deine berechnete Position von oben in % ein
      width: 2% # Korrigiere hier die Größe deines Buttons

Dieser Beitrag hat 7 Kommentare

  1. Huub Huveneers

    Markus, vielen Dank für deine umfassende Anleitung zur Erstellung eines schönen Dashboards. Im Internet sehe ich viele englischsprachige Beiträge, was manchmal vergessen lässt, dass es auch hochwertige Beiträge aus fremdsprachigen Ländern wie dem Ihren gibt. Ich habe jetzt erfolgreich mein eigenes Dashboard erstellt, auch mit einer interessanten Schaltfläche, die eine Wabe aktiviert. Vielleicht ist das auch für Sie interessant.

    https://smarthomescene.com/guides/honeycomb-module-hex-popup-menu-for-home-assistant/

    Grüße aus den Niederlanden

    Übersetzt mit DeepL.com (kostenlose Version)

  2. Julian

    Hallo Markus,

    bei mir wird in Picture Element der Floorplan nicht angezeigt. Stattdessen habe ich ein grauen Hintergrund mit „fehler“ Icon. Ich komme nicht weiter.

  3. Achim

    Hallo, ich bin Grand dabei den Floorplan ins Homeassistant zu integrieren. Jetzt habe ich folgendes Problem: Wollte den RGB Code übernehmen, bekomme aber immer die Fehlermeldung das die config-template-card nicht gefunden wird obwohl ich sie über Haus installiert habe. Was kann das sein?

  4. Wulf Flierenbaum

    Hey Markus,
    hatte dich auf Discord nochmal zum Thema Dashboards um Unterstützung gebeten!
    Leider keine Antwort von dir! Bist du in Urlaub oder gerade mit anderen Problemen am Kämpfen?
    Die Frage die ich dir gestellt habe war:
    Die RGB und die RGBW Darstellung aus deinem Video Floorplan Teil 4 (Video 10 aus deiner Dashboard Reihe) klappt diese nur mit HUE Leuchten? Denn ich müsste RGBW-Leuchten darstellen die per DMX-Treiber oder LED-Treibern angesteuert werdenund möchte gerne auch den Farbwechsel auf dem Dashboard darstellen.

  5. Marco W.

    Super How to 👍🏼

    Ich hätte da ein Problem und finde keine Lösung. Gibt es die Möglichkeit den Tag / Nacht Übergang (also das der Floorplan langsam dunkler und heller wird durch Sonne oder Wolken)
    auch auf entity anwenden?

    Z.B. es gibt den Status „on“ und „off“ und für jeden Zustand ist ein PNG hinterlegt.

    Das Problem ist jetzt das die PNG sich nicht der Dämmerung anpasst. Es müssten also ein ON bei Tag PNG / OFF bei Nacht PNG und dann noch mal eins für ON bei Nacht / OFF bei Nacht. Und dies zwei müssten sich so wie der Floorplan dann dynamisch mit dem Sonnenlicht / Dämmerung anpassen.

    Ich bekomme das einfach nicht zum laufen.

    Für Tipps oder Hilfe wäre ich sehr sehr dankbar.

  6. MiMa

    tolles Video und eine schöne Erklärung.
    Wie hast du denn die saubere Linie der led stripes hinbekommen?
    Ein Video der Positionierung mit gimp wäre klasse! Ich nutze paint.net, da ist das aber sehr umständlich gemacht.
    Besten dank

    1. Micha

      Ich finde gimp hingegen viel zu umständlich und mag paint.net sehr.
      Es ist für mich wesentlich intuitiver.
      Aber wusstet ihr, dass es online einen kostenlosen PhotoShop Clone gibt: https://www.photopea.com/
      Vielleicht ist das ja dann für euch?! 🙂

Kommentare sind geschlossen.