To nie tylko ma działać ale i wyglądać!

To nie tylko ma działać ale i wyglądać!

Niestety po pewnym czasie i dodaniu dużej ilości encji do naszego Home Assistanta na interfejsie może zapanować chaos i będzie on wyglądać na przykład jak ten na rysunku poniżej:

Niby nie ma jeszcze tragedii bo system świeży i mało urządzeń ale już widać że zaczyna to wszystko być mało czytelne. Sytuacja będzie ulegała pogorszeniu gdy zaczniemy dokładać kolejne urządzenia. Lepiej jakbyśmy mogli to trochę uporządkować aby wyglądało to na przykład tak:

Mamy zakładki, konkretne panele, wszystko czytelniejsze i bardziej przejrzyste. O wiele prościej się w tym wszystkim połapać. Jak to osiągnąć? Na szczęście HA umożliwia bardzo duże zmiany samego interfejsu. wiele z tych zmian nie wymaga dużej wiedzy technicznej. Cały interfejs oparty jest o szkielet który nazywa się Lovelace UI. Jest to konfigurowalny interfejs umożliwiający dodawanie kart dedykowanych dla różnego rodzaju encji. Część tych kart posiada sam Home Assistant jednak wiele z nich jest dostarczana przez społeczność. Często te od społeczności są tymi najciekawszymi wizualnie.

Jednak zanim zaczniemy w pełni korzystać z możliwości modyfikacji interfejsu to omówmy podstawy co własnie jest celem tego poradnika.

Zatem jak zacząć? Po pierwsze, musimy przełączyć nasz interfejs z działania automatycznego na ręczny. Klikamy więc na trzy kropki w prawym górnym rogu interfejsu i wybieramy pozycję Konfiguracja interfejsu użytkownika.

Naszym oczom pojawi się komunikat w którym potwierdzamy przejęcie kontroli.

Tutaj uwaga ode mnie. Gdy raz się zdecydujemy na ręczne przejęcie zarządzania interfejsem to nie ma łatwej drogi powrotnej. Więc od tej pory sami będziemy musieli dodawać nowe encje do interfejsu.

Po potwierdzeniu przejdziemy w tryb edycji interfejsu co symbolizowane jest przez zmianę koloru belki zakładek oraz dodatkowymi kontrolkami edycji. Tak jak to zaznaczyłem an poniższym ekranie.

Kontrolki na górnym panelu umożliwiają zmianę Tytułu interfejsu ale co ważniejsze umożliwiają dodawanie kolejnych zakładek. Dlatego łatwo możemy wprowadzić podział w którym każda zakładka to osobny pokój, a ekran pierwszy będzie wyświetlał najważniejsze informacje (oczywiście to tylko przykład, sugeruję aby każdy zrobił po swojemu). Po zmianach (szczegóły w filmie dodanym do tego artykułu) górna belka może wyglądać następująco.

Wyjście z trybu edycji odbywa się poprzez naciśnięcie zaznaczonego na powyższym obrazku przycisku X. Od tej pory mamy nowy pasek zakładek gotowy na dalsze zmiany. Zakładki oczywiście są puste więc pora uzupełnić je odpowiednimi danymi. Ponownie wchodzimy w tryb edycji (pamiętacie trzy kropki z początku tego poradnika). Następnie przełączamy się na zakładkę do której chcemy dodać nowe encje. No i ostatnim krokiem jest ich dodanie, służy do tego przycisk plus.

Po jego wciśnięciu pojawi się nam wybór rodzaju karty który chcemy dodać. Każda karta charakteryzuje się innym wyglądem i inną funkcjonalnością. Dlatego należy je dobierać zgodnie z potrzebami. Szczegółowy opis każdej z nich można znaleźć w dokumentacji interfejsu Lovelace UI. W tym poradniku dodamy kartę oświetlenia. Więc wybieramy rodzaj Światło i uzupełniamy pola konfiguracji. Przede wszystkim wybieramy encję oświetlenia z listy dostępnych encji, ewentualnie zmieniamy nazwę lub ikonę. Następnie zapisujemy i mamy gotową encję, która umożliwia nam zarządzanie oświetleniem. Wychodzimy z trybu edycji i nasza zakładka powinna wyglądać mniej więcej tak:

W ten sposób modyfikujemy cały wygląd i dostosowujemy go do swoich potrzeb. Najważniejsze w tym wszystkim jest to, że interfejs Lovelace jest w pełni skalowalny czyli wszystko będzie wyglądać identycznie zarówno na komputerze jak również na urządzeniach mobilnych. Dlatego nic nie stoi na przeszkodzie aby na telefonie bez dodatkowej aplikacji cieszyć się pełną funkcjonalnością interfejsu.

To tyle w tym artykule. Mam nadzieję, że dzięki temu każdy z Was będzie wstanie dostosować wygląd tak aby interfejs wyglądał naprawdę interesująco i wygodnie dla Was. Oczywiście powyższy poradnik ledwo dotyka możliwości edycyjne interfejsu ale nie da się tego wszystkiego upchać w jeden poradnik. Od czegoś trzeba zacząć. Dla bardziej ambitnych i chcących zagłębić się w tematykę polecam na początek wykorzystywanie kart społeczności, są one bardzo interesujące. Można o nich dowiedzieć się w tym miejscu. Na zachętę umieszczam kilka przykładów jak można zmienić interfejs HA.

I jeszcze jak to wygląda u mnie

Dodatkowo zapraszam do oglądania filmu dołączonego do tego poradnika opisuję w nim trochę szerzej możliwości edycyjne interfejsu.

Tradycyjnie już zachęcam do komentowania i kontaktu. Do przeczytania w kolejnym artykule.  

Read more