Installieren und konfigurieren Sie "Button CardAuf Lovelace UI von Home Assistant

4 Minuten des Lesens
Führungszwecke:
  • Definiere Götter grafische Tasten auf der Lovelace-Benutzeroberfläche um bestimmte Funktionen zu steuern anwesend auf der proerste Hausautomation basierend auf Home Assistant
  • Schwierigkeitsgrad: media
Konzepte behandelt mit:
  • Software-Konfiguration
Verwendete Softwarekomponenten:

Voraussetzungen:

Verwendete physikalische Geräte:
GUIDE mehr angezeigt für:

Alle Umgebungen

Hinweise und Haftungsausschluss
  • qualsiasi eventuale modifica agli impianti domestici dev'essere progettata ed realizzata SOLO da personale qualificato;
  • Änderungen in provorher ist a proEigenverantwortung sowie a proerstes Risiko und erste Gefahr (der Inhalt dieser Seite ist rein lehrreich);
  • Änderungen in provor einem gerät erlischt die garantie, die qualitätszulassungen und die zertifizierungen.
Fahrbericht: 1

Abstrakt

Standardmäßig 'SHUB für die persönliche Heimautomation Home Assistant (ab 2019) verfügt über eine grafische Oberfläche (verfügbar über das Internet als über app) angerufen Lovelace UI. An sich ist diese Schnittstelle in r mehr als nützlichappgrafische Ressentiments und in der Betriebsführung der pronach persönlicher Hausautomation; Einige Benutzer aber appRezzano die Fähigkeit, es anzupassen wie sie am besten sehen dank der anwesenheit des Benutzerdefinierte-Karte, der Elemente, die ermöglichen, appgesalbt, dieser Raum für Manöver.

Taste Card"Ist eine benutzerdefinierte Komponente (eine inoffizielle Komponente, daher manuell hinzuzufügen), die mit dem Hebel der Benutzerdefinierte-Karteermöglicht dem Benutzer leicht Schaltflächen erstellen (auch von Knopfgittern wie rapp(siehe Bild unten) zur Überprüfung Wesen, Automatisierungen, Skript, Szene und noch etwas.

Home Assistant - Knopf Card

Installation von “Button Card"

Zunächst muss die benutzerdefinierte Komponente installiert und aktiviert werden. Dazu haben Sie zwei Möglichkeiten: die manuelle und die automatische über HACS- (Home Assistant Community Store), praktischer und einfacher (in diesem Handbuch werden wir Letzteres veranschaulichen).

Nb So installieren Sie “Button Card"Über HACS muss dieses Tool installiert sein (es ist selbst eine benutzerdefinierte Komponente). Dies ist eine einmalige Operation hier erklärt was sicherlich für andere Zwecke nützlich sein wird.

So installieren Sie “Button Card"Geh einfach zu"CommunityAnwesend am Home Assistant (nur in Gegenwart von aktivem HACS), dann unter "PLUGINS“. Suchen Sie im Suchfeld nach "Button-Card": Wenn Sie die benutzerdefinierte Komponente gefunden haben, klicken Sie darauf:

Home Assistant - Knopf Card Installation über HACS - 1

Sobald Sie das Detailblatt eingegeben haben, klicken Sie auf „INSTALLIEREN":

Home Assistant - Knopf Card Installation über HACS - 2

Konfiguration

Am Ende der Installation befindet sich die Komponente proaktiviert werden. Anders als Sie vielleicht denken, ist es nicht erforderlich, auf die Konfigurationsdatei von zu reagieren Home Assistant aber auf dem von Lovelace: das ist möglich von Hand (durch Öffnen des "raw" -Editors) durch Einfügen unten den folgenden Code:

resources:
  - url: /community_plugin/button-card/button-card.js
    type: module

sonstwird es einfacher sein, auf “ZU LOVELACE HINZUFÜGEN”Immer aus dem Detailblatt, aus dem Sie stammen progesehen zu installieren “Taste Card":

Home Assistant - Knopf Card Installation über HACS - 3

Dies geschah, die Komponente “Taste Card”Wird effektiv installiert und betriebsbereit sein.

Verwenden

Uhr Home Assistant è pronto Die Aufnahme von Schaltflächen, die von dieser Komponente definiert werden, ist im einfachsten Fall äußerst banal, aber auch recht komplex, wenn Sie sich für mutigere Schemata oder feinere Konfigurationen entscheiden.

Grundsätzlich genügt es, um eine Schaltfläche hinzuzufügen, den visuellen Editor von Lovelace (i drei Punkte in der oberen rechten Ecke im Web-Frontend /appdann "Konfigurieren Sie die Benutzeroberfläche") Und klicken Sie auf"+", Auswahl als Typ"MANUELLE KARTE".

An dieser Stelle im Konfigurationstext der Karte müssen Sie einen Code einfügen, der dem Frontend anzeigt, was und wie angezeigt werden soll, zum Beispiel:

type: "custom:button-card"
entity: light.artemide
icon: mdi:lightbulb
color: rgb(28, 128, 199)

Nach dem Speichern wird im obigen Beispiel eine Schaltfläche generiert, die die Entität steuert light.artemide:

Home Assistant - Knopf Card  -  Light Birne

Eine Variante, was bedeutet, dass im Zustand "WOW!"Das Schaltflächensymbol wird rot und sieht folgendermaßen aus:

type: "custom:button-card"
entity: light.artemide
icon: mdi:air-conditioner
color: rgb(28, 128, 199)
state:
  - value: "off"
    color: rgb(255, 0, 0)

Ein weiteres Beispiel ist das eines Knopfes ohne Symbol das schaltet zum Beispiel alle Lichter von a ein oder aus Gruppe:

type: "custom:button-card"
entity: group.luci
show_icon: false
show_state: true

Diese Konfiguration generiert eine Schaltfläche, die folgendermaßen erstellt wurde:

Home Assistant - Knopf Card - Kein Icon


Lassen Sie uns noch einmal sehen, wie man organisiert in einem horizontalen Stapel mehr Tasten als erwartet:

  • 2x leere Karten
  • 1x Lauter-Taste mit Serviceruf
  • 1x Lautstärketaste mit Serviceabruf
  • 2x leere Karten
type: horizontal-stack
cards:
  - type: "custom:button-card"
    color_type: blank-card
  - type: "custom:button-card"
    color_type: blank-card
  - type: "custom:button-card"
    color_type: card
    color: rgb(223, 255, 97)
    icon: mdi:volume-plus
    tap_action:
      action: call-service
      service: media_player.volume_up
      service_data:
        entity_id: media_player.livimg_room_speaker
  - type: "custom:button-card"
    color_type: card
    color: rgb(223, 255, 97)
    icon: mdi:volume-minus
    tap_action:
      action: call-service
      service: media_player.volume_down
      service_data:
        entity_id: media_player.livimg_room_speaker
  - type: "custom:button-card"
    color_type: blank-card
  - type: "custom:button-card"
    color_type: blank-card

mit Ergebnis:

Home Assistant - Knopf Card - Volume


Ein Beispiel für eine vertikale Schichtung mit:

  • 1x Kartenetikett
  • Ein horizontaler Stapel mit:
    • 1x Abendessenknopf 1
    • 1x Taste für Szene 2
    • 1x Taste für Szene 3
    • 1x Taste für Szene 4
    • 1x Scene Off-Taste
type: vertical-stack
cards:
  - type: "custom:button-card"
    color_type: label-card
    color: rgb(44, 109, 214)
    name: Kitchen
  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        entity: switch.kitchen_scene_1
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:numeric-1-box-outline
      - type: "custom:button-card"
        entity: switch.kitchen_scene_2
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:numeric-2-box-outline
      - type: "custom:button-card"
        entity: switch.kitchen_scene_3
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:numeric-3-box-outline
      - type: "custom:button-card"
        entity: switch.kitchen_scene_4
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:numeric-4-box-outline
      - type: "custom:button-card"
        entity: switch.kitchen_off
        color_type: card
        color: rgb(66, 134, 244)
        icon: mdi:eye-off-outline

Mit Ergebnis:

Home Assistant - Knopf Card - Vertikaler Stapel

Ikon

Wir werden oft gefragt "Woher sollen die zu verwendenden Symbole stammen? Home Assistant“. Einfach: auf materialdesignicons.com Über die interne Suchmaschine können Sie die Symbole finden, die dies für Sie tun. Um sie zu benutzen, müssen sie nicht heruntergeladen werden, aber es reicht aus, ihren Namen herauszufinden (z. B. “die Glühbirne") Und in der Konfiguration diesen Namen mit dem Suffix"mdi:"(Mit einem Leerzeichen durchsetzt): zB. "mdi: Glühbirne"(Wie Sie auch beim Lesen der obigen Konfigurationen erraten können, in den verschiedenen Elementen"Symbol").

Schlussfolgerungen

Der von dieser Komponente garantierte Rangierraum Es ist wirklich riesig. Die dadurch erstellten Schaltflächen können in Größe, Farbe und Position variierennamento, in den abgebildeten Icons und Farben und vielem mehr - weshalb wir nicht alle möglichen Kombinationen auflisten, die natürlich praktisch unendlich sind.

WichtigLesen Sie für diejenigen, die sich in die Definition dieser Schaltflächen wagen, sorgfältig durch die Liste der möglichen Konfigurationen, gefolgt von den Beispielen, die auch von uns und vielen, vielen anderen berichtet wurden.


Home Assistant Offizielles LogoATTENZIONE: Denken Sie daran, dass es in unserer FORUM-Community gibt ein Ad-hoc-Bereich für Home Assistantfür jeden Zweifel, Frage, Information auf dem spezifischen Verdienst dieser Komponenten.

inDomus-Telegrammkanal