Zurück zur Startseite und zum Inhaltsverzeichnis
Voriges Kapitel: #02.04 Grundkonfiguration von HA
Nächstes Kapitel: #02.06 Installation am Bediengerät
Version: 2024-03-12
Gut, wir sind jetzt schon sehr weit gekommen. Zeit für erste Erfolgserlebnisse!
Ich hoffe ich kann mit dem folgenden Kapitel eure Kreativität anregen. Mir taugt das Dashboard-Designing jedenfalls.
Hinweis für Quereinsteiger: Wir benötigen hier jetzt <custom:button_card>. Die installation ist im vorherigen Kapitel beschrieben.
Beginnen wir mit einem neuen und leeren Dashboard:
=> Dashboards => ADD DASHBOARD => New dashboard from scratch =>
- Title: HKV-Demo
- Show in sidebar: aktivieren
=> CREATE
Es erscheint danach in der Sidebar ein neuer Eintrag „HKV-Demo“
Klicken wir darauf sehen wir gähnende Leere.
Nur rechts-oben wird uns neben der Lupe ein Stift angezeigt, darauf klicken wir.
Es wird der Dashboard-Editor-Modus gestartet.
Jetzt gibt es schon etwas mehr zu sehen.
- Wir können den Namen dieses Dashboards ändern (dieser ist nicht zwangsläufig der gleich wie jener in der Sidebar) und
- es wurde eine leere View namens „HOME“ erstellt.
- In dieser View können wir nun Karten (CARDs) hinzufügen.
Zusammengefasst:
Wir können in HA "beliebig viele" Dashboards erstellen, die ihrerseits "beliebig viele" Views enthalten können und View enthalten Cards.
In den Cards können wir dann noch weitere Cards, Stacks und Controls verschachteln.
Am Endgerät kommt dann immer genau eine VIEW zur Ansicht. Zwischen den View kann man dann mit Links navigieren.
EIne Karte aufbauen
Zu den Einstellungen der View (Stift nehmen dem Namen der View) kommen wir später.
Wir fügen zunächst eine neue Karte zur View "Home" hinzu.
=> ADD CARD
Uns wird eine lange Liste an verfügbaren Kartentypen angezeigt.
Für dieses HKS-Projekt benötigen wir nur drei Typen von Karten
- Horizontal stack
- Vertical stack
- Custom: Button-Card
Die „Horizontal stack“-Karte stapelt darin enthaltene Elememte horiziontal.
Die „Vertical stack“-Karte stapelt darin enthaltene Elememte vertical.
"Horizontal" und "Vertical stacks"-Karten lassen sich beliebig ineinander verschachteln.
Zur Veranschaulichung hier eine einfache Karte mit 3 Zeilen und 4 Spalten,
aufgebaut aus einem "Vertical stack" welcher mit 3 "Horiziontal stacks" enthält und jeder "Horiziontal stack" enthält 4 minialistische "custom:button-cards".
Mit dem Visual-Editor kann man gut in diesen Ebenen navigieren und die einzelnen Elemente bearbeiten.
Klickt man unten auf „SHOW CODE EDITOR“ wird er entsprechende YAML-Code der gesamten Karte angezeigt.
Kurzer Abstecher zum YAML-Syntax für mutige
Zurück zum YAML-Editor
Der YAML-Editor im Dashboard zeigt uns an, ob wir den YAML-Syntax richtig geschrieben haben.
Ist die vertikale Linie, rechts neben den Zeilennummern, blau, ist der Syntax durchgängig korrekt, ist sie rot gibt es einen Syntax-Fehler und der Fehlercode steht unterhalb.
Was ist hier der Fehler?
Hier fehlt in Zeile 7 das Minus-Zeichen vor dem Listen-Item.
Daher würden die Zeilen 5 bis 8 zu einem Dictionary gehören, was aber nicht korrekt sein kann, da in einem Dictionary jeder Key nur einmal vorkommen darf und hier wären dann die Keys <type> und <name> jeweils doppelt vorhanden. Dies sagt uns auch die rote Fehlermeldung "duplicated mapping key (7:9)"
Auch wenn im YAML-Code Einrückungen nicht korrekt sind, wird ein roter Fehlercode unterhalb angezeigt und zeigt meist den richtigen Ort an wo man den Fehler suchen muss.
Aber warum interessiert uns das?
Wie gesagt, bauen wir unsere Dashboards mit der „Custom: Button-Card“ auf. Dafür gibt es keinen GUI-Assistenten.
Wir müssen die Button-Cards also mit YAML konfigurieren!
Das ist aber am Ende kein Nachteil!
