Installation Schritt für Schritt

Inhalt

Diese Anleitung führt dich vom ZIP bis zu den fertigen Dashboards. Sie ist für eine laufende Home-Assistant-Instanz geschrieben, egal ob als Home Assistant OS, im Container oder als Core. Du brauchst ungefähr eine halbe Stunde und zwei Neustarts deiner Instanz.

Lies die Schritte einmal komplett durch, bevor du anfängst. Der Assistent prüft vieles selbst und sagt dir, was fehlt, aber die ersten vier Schritte kann er nicht für dich übernehmen.

Bevor du anfängst

  • Home Assistant ab Version 2025.
  • HACS ist installiert. Falls nicht, findest du die Anleitung auf hacs.xyz.
  • Du kannst Dateien nach /config kopieren. Das Add-on „File editor“ reicht dafür aus, bequemer sind eine Samba-Freigabe oder SSH.
  • Du bist mit einem Administrator-Konto angemeldet.

Schritt 1 · Karten aus HACS installieren

Das Desktop-Dashboard baut auf sieben Karten aus HACS auf. Die drei anderen Dashboards brauchen davon nur Kiosk Mode, damit Kopfzeile und Seitenleiste von Home Assistant verschwinden und die Karte wie eine App aussieht. Installiere trotzdem alle sieben, dann läuft die Prüfung im Assistenten ohne Meldungen durch.

Öffne HACS, suche jede Karte und klicke auf „Herunterladen“. HACS trägt die Karte anschließend selbst als Dashboard-Ressource ein.

Karte Name in HACS Wofür
Button Card button-card Fast alle Karten des Desktop-Dashboards
Navbar Card navbar-card Die Leiste links im Desktop
Expander Card expander-card Aufklappbare Bereiche, etwa Lichtgruppen
Mini Graph Card mini-graph-card Verläufe für Temperatur und Energie
Stack In Card stack-in-card Mehrere Karten in einem Rahmen
Card-mod card-mod Feinschliff an nativen Karten
Kiosk Mode kiosk-mode Blendet Kopfzeile und Seitenleiste aus

Schritt 2 · ZIP entpacken und Dateien kopieren

Lade das ZIP von der Download-Seite und entpacke es. Du siehst die Ordner www, themes und packages, dazu assistent.html und LIESMICH.md.

Kopiere jetzt in dein Home Assistant

  • den kompletten Ordner www nach /config/www. Gibt es dort schon einen Ordner www, kommen die Unterordner iw-brand, iw-mobile, iw-flur, iw-tablet und iw-heizung einfach dazu.
  • die beiden Dateien aus themes nach /config/themes. Den Ordner legst du an, falls er noch nicht existiert.

Den Ordner packages aus dem ZIP brauchst du nicht zu kopieren. Er enthält nur ein Beispiel, die passende Datei erzeugt der Assistent später für dich.

Gab es den Ordner /config/www vor diesem Schritt noch nicht, liefert Home Assistant die Dateien darunter erst nach einem Neustart aus. Der Neustart kommt in Schritt 4 ohnehin.

Schritt 3 · configuration.yaml ergänzen

Home Assistant muss Themes aus dem Ordner themes und Pakete aus dem Ordner packages laden. Öffne die configuration.yaml und sorge dafür, dass diese beiden Blöcke enthalten sind.

frontend:
  themes: !include_dir_merge_named themes

homeassistant:
  packages: !include_dir_named packages

Steht in deiner Datei schon ein Block frontend: oder homeassistant:, ergänzt du nur die fehlende Zeile darunter. Ein Block darf in YAML nur einmal vorkommen. Lege außerdem den Ordner /config/packages an, falls er fehlt, er darf für den Moment leer sein.

Prüfe die Konfiguration unter „Entwicklerwerkzeuge“, Reiter „YAML“, mit „Konfiguration prüfen“, bevor du neu startest.

Schritt 4 · Home Assistant neu starten

Starte Home Assistant über „Einstellungen“, „System“, Knopf oben rechts, „Neu starten“. Nach dem Start kannst du zwei Dinge kontrollieren.

  • Rufe im Browser http://deine-instanz:8123/local/iw-brand/mindmap-mask.png auf. Erscheint die Grafik, werden die kopierten Dateien ausgeliefert.
  • Öffne dein Profil und schau unter „Design“ nach. Dort stehen jetzt „ITSWEBER Teal“ und „ITSWEBER Salbei“ zur Auswahl. Du musst dort nichts einstellen, die Dashboards setzen ihr Theme selbst.

Schritt 5 · Zugangstoken anlegen

Der Assistent spricht über die Schnittstelle von Home Assistant und braucht dafür einen langlebigen Zugangstoken von einem Administrator.

  1. Klicke unten links in der Seitenleiste auf deinen Namen.
  2. Wechsle in den Reiter „Sicherheit“.
  3. Scrolle zu „Langlebige Zugangstoken“ und klicke auf „Token erstellen“.
  4. Gib einen Namen wie „Dashboard-Assistent“ ein und kopiere den Token. Er wird nur einmal angezeigt.

Der Token bleibt später nur im Browserfenster des Assistenten, er wird nirgends gespeichert. Wenn du fertig bist, kannst du ihn in deinem Profil wieder löschen.

Schritt 6 · Assistent öffnen und verbinden

Öffne die Datei assistent.html aus dem ZIP mit einem Doppelklick. Sie startet in deinem Browser und braucht keinen Server. Trage die Adresse deiner Instanz mit http:// oder https:// und Port ein, füge den Token ein und klicke auf „Verbinden“.

Schritt 1 des Assistenten, Adresse und Token

Die Adresse ist dieselbe, die du im Browser für Home Assistant benutzt, also etwa http://homeassistant.local:8123 oder deine Nabu-Casa-Adresse. Bei einer eigenen HTTPS-Adresse mit selbst ausgestelltem Zertifikat öffnest du Home Assistant vorher einmal im selben Browser und akzeptierst das Zertifikat.

Schritt 7 · Voraussetzungen prüfen

Nach dem Verbinden liest der Assistent deine Instanz aus und zeigt eine Liste. Grün heißt erledigt, gelb heißt fehlt noch. Zu jedem gelben Punkt steht dabei, was zu tun ist.

Schritt 2 des Assistenten, die Prüfliste

Geprüft werden die Version von Home Assistant, die sieben Karten aus HACS, die kopierten Dateien unter /config/www, die beiden Themes, das Paket und ob der Token die Nutzerliste lesen darf. Das Paket ist an dieser Stelle noch gelb, das ist richtig so, es entsteht erst in Schritt 10. Wenn du etwas nachgeholt hast, klicke auf „Erneut prüfen“.

Schritt 8 · Dashboards und Farbwelt auswählen

Hake an, welche Dashboards du willst. Die Pfade sind vorgegeben und tauchen später in der Adresse auf, etwa /zuhause-mobil/home. Du kannst sie ändern, solange sie nur aus Kleinbuchstaben und Bindestrichen bestehen.

Schritt 3 des Assistenten, Auswahl der Dashboards

Die Farbwelt gilt für alle Dashboards zusammen. Vorausgewählt ist „ITSWEBER Teal“, die Alternative heißt „ITSWEBER Salbei“. Beide gibt es hell und dunkel, und du kannst später jederzeit wechseln, siehe Farbwelten.

Die Heizungskarte lohnt sich mit einer Wärmepumpe und einem Pufferspeicher. Ohne beides lässt du den Haken weg, dann zeigt der Desktop deine Thermostate.

Schritt 9 · Dein Zuhause zuordnen

Jetzt ordnest du deine Entitäten den Feldern der Karten zu. Klicke zuerst auf „Vorschläge übernehmen“. Der Assistent sucht anhand von Namen und Typen, was passt, und füllt die Felder vor. Danach gehst du die Felder durch, korrigierst und ergänzt. Tippen in ein Feld filtert die Liste.

Schritt 4 des Assistenten, Zuordnung der Entitäten

Pflicht sind nur wenige Felder, sie sind mit einem Stern markiert.

  • Wetter, deine Wetter-Entität, etwa weather.forecast_home.
  • Außentemperatur, ein Temperatursensor draußen. Es geht auch ein Wert aus der Wetter-Entität, ein eigener Sensor ist genauer.
  • Personen, alle person-Entitäten, die auf den Dashboards erscheinen sollen.

Alles andere darf leer bleiben. Fehlt das Türschloss, gibt es keine Türknöpfe. Fehlen Kameras, gibt es keine Kameraseite. Die Karten zeigen, was da ist, statt leere Stellen zu lassen.

Weiter unten ordnest du jedem Nutzer von Home Assistant eine Rolle zu, dazu seine Person und sein eigenes Zimmer. Administratoren sind als „Eltern“ vorgeschlagen, alle anderen als „Kinder“. Was die Rollen bewirken, steht unter Rollen.

Mit „Zuordnung sichern (JSON)“ lädst du deine Auswahl als Datei herunter. Beim nächsten Lauf des Assistenten kannst du sie mit „Zuordnung laden“ wieder einspielen und musst nicht von vorn anfangen.

Schritt 10 · Einrichten

Der Assistent zeigt, was er gleich anlegt. Klicke auf „Jetzt einrichten“.

Schritt 5 des Assistenten, die Zusammenfassung

Im Hintergrund passiert Folgendes. Der Assistent trägt die vier Karten als Ressourcen ein, legt die gewählten Dashboards an und schreibt ihre Konfiguration. Das Desktop-Dashboard entsteht dabei aus deinen Bereichen, Etagen, Personen und Geräten. Zum Schluss erzeugt er das Paket und lädt es herunter.

In deinem Download-Ordner liegen danach

  • itsweber_dashboards.yaml, das Paket für den nächsten Schritt
  • itsweber-dashboards-zuordnung.json, deine Zuordnung zum Wiederladen
  • gegebenenfalls sicherung-<pfad>-<zeit>.json, wenn unter einem Pfad schon ein Dashboard lag

Schritt 11 · Paket einspielen und noch einmal neu starten

Kopiere itsweber_dashboards.yaml nach /config/packages und starte Home Assistant erneut. Erst nach diesem Neustart gibt es den Sensor sensor.haus_check, die geprüften Tür-Skripte und den Küchentimer. Bis dahin zeigen die Karten für Mobil und Flur einen Hinweis, dass der Haus-Check fehlt.

Ob es geklappt hat, siehst du unter „Entwicklerwerkzeuge“, Reiter „Zustände“, wenn du nach sensor.haus_check filterst. Der Sensor hat einen Zustand wie ok oder hinweis und im Attribut satz den Text, den die Dashboards anzeigen. Was das Paket sonst enthält, steht unter Haus-Check und Paket.

Schritt 12 · Anschauen

In der Seitenleiste von Home Assistant stehen jetzt neue Einträge, je nach Auswahl „ITSWEBER Zuhause“, „Zuhause“, „Flur-Tablet“ und „Küchen-Tablet“. Der Assistent zeigt die Links auf seiner letzten Seite zusammen mit einer Liste, was noch von Hand ansteht.

Schritt 6 des Assistenten, fertig

Zwei Dinge fehlen noch, damit die Dashboards auf den Geräten ankommen. Wie du das Mobil-Dashboard in der Companion App zum Standard machst und die Tablets an die Wand bringst, steht unter Handy und Tablets einrichten. Und welche Leuchten die Dashboards zeigen, steuerst du über Labels.

Etwas passt nicht? Jede Karte hat einen Editor direkt im Dashboard, siehe Karten im Editor bearbeiten. Und den Assistenten kannst du jederzeit erneut laufen lassen, siehe Aktualisieren.