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.
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.
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

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:


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
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.
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
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)
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.
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?
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.
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.
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
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.