In diesem Thread können Theman rund um die HomeAssistant-Oberfläche (Lovelace) diskutiert werden.
Dazu gehören z.B.
Dazu können gern hilfreiche Controls oder Beispiele der Oberflächengestaltung vorgestellt werden.
Strukturierung der Oberfläche:
Bevor ihr eine neue Oberfläche gestaltet, solltet ihr euch Gedanken um die Aufteilung der Elemente machen. Werden die Elemente nur einzeln in die Oberfläche aufgenommen, so werden diese recht zufällig angeordnet und verschieben sich gegenseitig beim Ändern der Fenstergröße im Browser.
Um ein festes Layout zu erhalten, bieten sich Vertikaler- und Horizontaler Stapel an.
In diesem Dashboard habe ich zuerst 3 Vertikale Stapel eingefügt. Das ergibt die 3-spaltige Aufteilung:
Innerhalb der 3 Stapel verwende ich wiederum weitere Stapel, um die einzelnen Elemente zu gruppieren:
Hier ein Beispiel mit einem horizontalen Stapel, darin wiederum jeweils eine Entitätsliste und darin die einzelnen Entitäten:
In der Konfigurationsansicht sieht man die Hierarchie:
Diese Aufteilung hat noch weitere Vorteile:
1. CustomControls in HA verwenden
CustomControls erweitern die Möglichkeiten von HA um ein Vielfaches. Die normalen Entitäten bieten z.B. nur die Möglichkeit, eine Bezeichnung und einen Wert oder Schalter darzustellen. CustomControls bieten mehr Möglichkeiten, z.B. die Darstellung mehrer Entitäten/Attribute in einer Entitätszeile:
Im Vergleich eine Stanard-Eintität:
2. CustomControls installieren
Ein CustomControl könnt ihr manuell oder über HACS installieren.
2.a Manuelle Installation
2.b Installation über HACS
HACS-Konfiguration aufrufen:
Hier könnt ihr das Repository durchsuchen:
Ein Klick auf ein Control öffnet die Beschreibung:
Ein Klick auf den Benutzername öffnet das GitHub-Repository des Entwicklers.
Unten gibt es Schaltflächen zum Absprung auf das GitHub-Repository des Controls sowie den Button zum Installieren.
Für die spätere Einrichtung in Lovelace bietet es sich an, die GitHub-Seite im Browser in einem weiteren Tab aufzurufen. So kann man immer zwischen Beschreibung/Beispielen und dem Lovelace-Dashboard wechseln.
Link zum Repository dieses Beispiels:
Bei “Installieren” erscheint dieser Dialog mit der Angabe des Installationspfades.
Diesen Pfad könnt ihr euch hier direkt kopieren. Den müsst ihr noch in die Lovelace-Konfig eintragen.
Nach der Installation wird das Control in der HACS-Liste angezeigt:
Nun noch das Control in HA registrieren (Einstellungen/Lovelace/Ressourcen):
Hier den zuvor kopierten Pfad zum Control und den Typ angeben:
Alternativ könnt ihr aber auch den HACS-Pfad angeben (HACS verwendet dynamische Pfad-Variablen):
Anschließend am besten nochmal HA neu starten. Sonst kann es sein, dass in der Lovelace-Konfig das Control noch nicht gefunden wird.
Die Registrierung der Controls in HA (als JacvaScript-Modul) ist erst seit den 2021er-Versionen nötig. Zuvor wurden die Einträge von HACS selbst erstellt. Das ist vermutlich ein Tribut an die Sicherheit (oder an DAUs, die nicht mit HA umgehen können und unwissentlich irgendwelche “bösartigen” Controls installiert hatten).
Evtl. verhalten sich andere HA-Varianten anders und tragen die Ressourcen automatisch ein. Probiert es einfach mal aus und prüft die Ressourcen-Liste nach der Installation des Controls in HACS.
CustomControls in Lovelace einfügen
Ich beschreibe die Methode am Beispiel dieses Controls:
Beispiel:
HACS-Frontend:
GitHub-Repository:
Schaut euch zuerst die Beispiele, Attribute und YAML-Beispiele im GitHub-Repository an.
Da seht ihr Verwendungsbeispiele des Controls und wie man das jeweils in YAML definiert.
Zuerst lege ich eine neue Seite im Dashboard an:
Aber zuerst: Vertikalen Stapel einfügen 
Aus der Elemenliste den vertikalen Stapel wählen:
Dem Stapel muss jetzt ein Control hinzugefügt werden.
Dazu muss ein “manuelles” Element eingefügt werden:
Jetzt sieht man den Konfigurationseditor mit dem Stapel (die “1” oben zeigt das erste Control im Stapel).
Dazu muss man die Beispiele aus der GitHub-Beschreibung verweden und anpassen.
Jetzt ein paar Details zu dem Beispiel:
Icons:
Hier noch ein Link, wo ihr die MDI-Icons (material design icons) suchen könnt:
https://materialdesignicons.com/
Dazu nach einer Bezeichnung suchen, Icon anklicken, Text kopieren:
Wo findet man die Entitäten?
Unter Einstellungen/Eintitäten kann man nach den Entitäten suchen (Sensoren, Schalter usw.). Alternativ über Einstellungen/Geräte können Geräte mit deren Entitäten angezeigt werden.
Wenn man Homey-Geräte verwendet, dann findet man die Entität normalerweise über den Homey-Gerätename. Dieser wird über den Homes-MQTT-Hub per MQTT an HA übertragen.
Der Entitätsname kann hier kopiert werden:
Hallo, danke für die Beschreibung aber wie bekomme ich diese Kachel hin?
Hi,
dazu brauchst du dieses CustomControl:
Am besten installierst du das Control über HACS (alternativ manuell). Dann kannst du dein Dashboard analog zum vorherigen Post einrichten.
Das Control ermöglich es, in einer Zeile mehrere Entities/Attribute anzuzeigen.
Das habe ich soweit alles installiert, habe ein Entität die mir die Temperatur anzeigt und eine zweite, eine Schalter, der betätigt werden soll wenn die Temperatur einen bestimmten wert unterschreitet und abschaltet wenn der Wert erreicht ist. Und ich möchte, wie bei dir einen Sollwert angezeigt bekommen den ich mit hoch/runter einstellen kann. Bis jetzt sehe ich nur den Istwert. Bin das mit der Programmieren noch am lernen.
Das Tbermostat selbst hat Soll- und Istwert (als Attrinut der climate Entity).
Die kann man sich mit diesem Element nur anzeigen lassen.
Die hoch/runter Buttons sind nur Icons, mit denen ein Script gestartet wird, das wiederumg den Sollwert des Thermostats einstellt (in 0,5°-Schritten).
Ist aber schon lange her, muss ich selbst erstmal raussuchen 
Hast du zufällig mal nachgesehen wie die Einstellungen sind? Ansonsten könntest du mir deine einfach schicken dann kann ich die als Vorlage nehmen, wäre das möglich?
