Home Assistant Community Store oraz Button-Card tutorial - własne przyciski na panelu HA

Button-Card to przydatny dodatek do Home Assistant oferujący szerokie możliwości tworzenia własnych przycisków sterujących na panelu użytkownika. Pozwala na pełną personalizację wyglądu oraz działania przycisków - od kolorów i ikon po dynamiczne reakcje na stany urządzeń. Dzięki integracji z HACS jego instalacja i aktualizacja są szybkie i wygodne. Tutaj pokaże krok po kroku jak go zainstalować oraz przedstawię mniej i bardziej zaawansowane przykłady jakie przyciski można na nim utworzyć.

Instalacja HACS
Zaczynamy od instalacji Home Assistant Community Store, czyli w wolnym tłumaczeniu Sklepu Społeczności Home Assistanta. Jest to rozszerzenie, które umożliwia łatwe przeglądanie i instalowanie dodatków, integracji oraz kart interfejsu (Lovelace) tworzonych przez społeczność użytkowników. Dzięki HACS zyskujemy dostęp do ogromnej bazy nieoficjalnych, ale bardzo przydatnych rozszerzeń, których nie znajdziesz w standardowej instalacji HA.
Otwieramy terminal i wykonujemy komendę:

Pobierze i wykona ona skrypt instalacyjny HACS.

Czekamy aż instalacja się zakończy.

Potem restartujemy Home Assisant - polecam pełny restart.


Od teraz mamy nową zakładkę w menu po lewej stronie.




Instalacja button-card
Sklepik społeczności już mamy, więc pora zainstalować pożądany dodatek. Wyszukujemy button-card:

Otwieramy stronę dodatku:

Pobieramy i instalujemy:

Na koniec jeszcze trzeba odświeżyć:


Pierwsze kroki z button-card
Wchodzimy w przegląd i edycję naszego Dashboardu.

Dodajemy kartę. Tu są dwie opcje.

Można wybrać typ manual i wkleić kod Yaml:


Tyle, że jeśli nie zainstalowaliśmy button-card to otrzymamy błąd:

Natomiast jeśli poprawnie zainstalowaliśmy button-card, to pewnie przed opcją manual też będzie przycisk od poszukiwanego przez nas dodatku:

Od tego momentu możemy tworzyć naszą kartę w polu po lewej i podglądać jej działanie po prawej stronie ekranu.


Urządzenie użyte do demonstracji
Do demonstracji użyłem lampki LED RGBCW sterowanej przez Zigbee. Jest ona w stanie świecić kolorowo, wedle barw RGB, albo świecić temperaturami bieli - od ciepłej do zimnej.


Przykłady przycisków button-card
Zacznijmy od prostego przykładu. Wystawmy na panel kontrolę mojej lampy LED. Jej nazwa encji to zlight. Poniższy kod tworzy przycisk powiązany z jej encją oraz dodaje akcję wciśnięcia (tap), którą jest toggle (przełączenie stanu lampy).

Rezultat:


Do kodu można dopisać state - określenie stanu przycisku. W ten sposób można zmienić jego kolor w zależności od stanu urządzenia.



Do przycisku można osobno określić różne akcje. Najpopularniejsze jest tapnięcie - ono nawet domyślnie przełącza stan urządzenia. Można jednak oskryptować też przykładowo dłuższe wciśnięcie. Kod poniżej wyświetla wtedy szczegółową konfigurację urządzenia.

W razie potrzeby mamy też double_tap_action.



Kartę można stylować kodem CSS, tak jak inne obiekty HTML w przeglądarce. Poniżej przykładowo zaokrągliłem rogi karty i dodałem jej cień.



Tak jak wcześniej pokazałem zmianę koloru zależnie od stanu, tak można również zmieniać inne parametry - przykładowo ikonkę.




W przycisku można też używać kodu Javascript. Poniżej mamy przycisk wyświetlający bieżącą wartość atrybutu z encji, a dokładniej poziom jasności. Dodatkowo jest ona skalowana, bo w HA jest od 0 do 255, a chcę wyświetlać procentowo...



W przyciskach jest też łatwo opcja na pobranie bieżącego koloru urządzenia. Poniżej przykład ikony śledzącej barwę światła:




Pokazałem już jak można "składać" różne wartości w zależności od stanów na wygląd docelowego przycisku. W podobny sposób można też "składać" w jedną kompozycję różne przyciski. Mamy do tego odpowiednie szablony, horyzontalny, wertykalny i siatkę. Poniżej przykład horyzontalnego szablonu w którym umieściłem trzy przyciski. Dwa z nich ustawiają na sztywno wybrany kolor, a trzeci to stan urządzenia tak jak wcześniej.



To teraz szablon siatki, czyli grid. Trzeba mu podać też ilość kolumn. Do środka upakowałem troszkę opcji, obejmują one ustawienie koloru oraz wyświetlanie stanu urządzenia.

Rezultaty:



Na koniec wróćmy jednak do krótszych przykładów. Pokazywałem już wybór ikonki na bazie stanu urządzenia, ale wyboru można dokonać też w JS - przykładowo porównując poziom jasności oświetlenia.

W zależności od niego zmienia się teraz ikonka:



W ten sposób można pokazywać stan i zapewniać kontrolę dla wszystkich typów urządzeń, nie tylko dla oświetlenia.


Animacja ikonki może też być dynamiczna. Przykładowo, w sytuacji gdy chcemy kontrolować lampki choinkowe lub podobny gadżet zmieniający szybko kolory. Wystarczy taki kod, aby przewijać kolory z podanej listy:

Rezultat (przycisk samoczynnie się animuje):


Podobną logikę można oprzeć na bieżącym kolorze z encji. Wtedy każde kliknięcie włącza następny kolor z predefiniowanej listy. Każda akcja wyszukuje bieżący kolor na tej liście a potem pobiera następny.

Rezultat (przycisk zmienia kolory na następny z każdym naciśnięciem):


Podsumowując, to były podstawy Button-Card dla Home Assistant. Nie pokazałem tu jednak wszystkiego, między innymi można jeszcze tworzyć złożone komunikaty Toast, animacje oraz zabezpieczać akcje pinem, dlatego polecam zapoznać się z oficjalną dokumentacją dodatku:
https://github.com/custom-cards/button-card
https://custom-cards.github.io/button-card/stable/#some-features
Czy korzystacie z Button-Card, a jeśli tak, to do czego?