Homey Community Forum

Home Assistant Teil 2 Lovelace, CustomControls, YAML

In diesem Thread können Theman rund um die HomeAssistant-Oberfläche (Lovelace) diskutiert werden.

Dazu gehören z.B.

  • Original-HA-Controls
  • CustomControls (selbst installiert oder über HACS eingebunden
  • Verwendung der YAML-Konfiguration zur Konfiguration der Controls

Dazu können gern hilfreiche Controls oder Beispiele der Oberflächengestaltung vorgestellt werden.

1 Like

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:


Die 3 Stapel sind damit die einizen Elemente auf oberster Ebene. Damit werden sie immer nebeneinander dargestellt. In einer Portrait-Darstellung (Telefon) werden die 3 Stapel untereinander angezeigt. Damit ist diese Gestaltung flexibel für verschiedene Bildschirm-Varianten.
Ihr könnt auch 2 oder 4 Stapel verwenden. Dazu müsste ihr testen, ob die darin enthaltenen Elemente komplett dargestellt werden oder evtl. aus dem Rahmen herausreichen und abgeschnitten werden.

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:


Im unteren Bereich ist nur ein Vertikaler Stapel mit Entitäten eingefügt.

In der Konfigurationsansicht sieht man die Hierarchie:

Diese Aufteilung hat noch weitere Vorteile:

  • die Elemente lassen sich in der Reihenfolge ändern (die grün markierten Pfeile)
  • bei CustomColntrols kann man den YAML-Text komplett kopieren und in andere Stapel als Vorlage einfügen und dort anpassen.

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:
grafik

grafik

Im Vergleich eine Stanard-Eintität:
grafik

2. CustomControls installieren
Ein CustomControl könnt ihr manuell oder über HACS installieren.

2.a Manuelle Installation

  • CustomControls in GitHub herunterladen, entpacken und in das CustomControl-Verzeichnis einfügen.
    Verzeichnis: Homeassistant-Konfig-Pfad/www/community
    grafik
  • Control in HA registrieren (Einstellungen/Lovelace/Ressourcen):
  • Hinzufügen wählen:
    grafik
  • Den Pfad zum Control und den Typ angeben. Ihr müsst vermutlich auch den JS-Dateiname angeben.
    grafik
  • HA neu starten

2.b Installation über HACS
HACS-Konfiguration aufrufen:
grafik

grafik

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.
grafik
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):

grafik

Hier den zuvor kopierten Pfad zum Control und den Typ angeben:
grafik

Alternativ könnt ihr aber auch den HACS-Pfad angeben (HACS verwendet dynamische Pfad-Variablen):
grafik

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:
grafik

HACS-Frontend:
grafik

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:


Nun können wir Controls einfügen:
grafik

Aber zuerst: Vertikalen Stapel einfügen :wink:
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).


Das Control muss nun im YAML-Format eingefügt werden.

Dazu muss man die Beispiele aus der GitHub-Beschreibung verweden und anpassen.

Jetzt ein paar Details zu dem Beispiel:

  • Ich habe als erstes ein Standard-Entity-Element eingefügt, um eine Entity-Liste zu erzeugen
    Unterhalb dieses Elements werden die Multiple-Entity-Row Entities eingefügt.
  • Das erste Entity-Element der Entity-Liste ist das eigentliche Element, das wir ausprägen wollen:
    grafik
  • Der Typ wird zu diesem Element angegeben. Das ist der Name des Custom-Controls (immer die Beispiele auf GitHub verwenden!)
    grafik
  • Beim diesem CustomControl kann man nun statt nur einer Entität mehrere Entitäten oder auch Attribute des Hauptentität verwenden. Die Hauptentitär (rot markiert) definiert das Hauptelement. Davon wird die Bezeichnung, Icon, Status (ggf. als Schalter) übernommen. Die Eigenschaften kann man auch ändern und eigene Icons verwenden (blau).
    grafik

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:


Die Werte der Entität kann man über das Icon rechts oben anzeigen. Dort sieht man, welche Inhalte verwendet/angezeigt werden können.