Dashboard Home Assistant – jak stworzyć czytelny panel sterowania

Dashboard to część Home Assistant, z którą użytkownik ma kontakt najczęściej. Pokazuje stan domu, pozwala sterować urządzeniami, uruchamiać określone działania i szybko przechodzić do informacji potrzebnych w danym momencie.

Home Assistant może przygotować podstawowy panel automatycznie, ale własny dashboard daje znacznie większą kontrolę nad tym, co jest widoczne, w jakiej kolejności oraz w jaki sposób użytkownik może sterować systemem.

Prosty panel można przygotować bez pisania kodu. Gdy jednak dochodzą różne widoki, telefon, tablet ścienny, warunkowo wyświetlane elementy, własna nawigacja, niestandardowe karty czy bardziej zaawansowane akcje, konfiguracja szybko staje się bardziej rozbudowana.

W tym poradniku pokazuję, jak zbudowany jest dashboard Home Assistant, jak utworzyć własny panel od zera i jakie możliwości można wykorzystać przy bardziej zaawansowanych układach.

Home Assistant posiada wbudowane dashboardy, które mogą automatycznie prezentować urządzenia i informacje dostępne w systemie.

Jeżeli potrzebujesz własnego układu, lepszym rozwiązaniem jest utworzenie osobnego dashboardu zamiast przebudowywania podstawowego widoku tylko po to, aby dopasować go do konkretnego telefonu, tabletu lub sposobu korzystania z domu.

Nowy dashboard można utworzyć przez:

Ustawienia → Dashboardy → Dodaj dashboard

Jeżeli panel ma być całkowicie własny, wybierz:

New dashboard from scratch

czyli utworzenie dashboardu od zera.

Podczas tworzenia można nadać mu nazwę i ikonę oraz zdecydować, czy ma być widoczny w bocznym menu Home Assistant.

Dostępne są również warianty zawierające już przygotowane elementy. Przy własnym panelu budowanym pod konkretny sposób użytkowania pusty dashboard daje jednak największą kontrolę nad późniejszym układem. Home Assistant oficjalnie pozwala tworzyć wiele osobnych dashboardów i zaleca utworzenie nowego przy bardziej indywidualnej konfiguracji zamiast modyfikowania podstawowego panelu.

Te pojęcia łatwo pomylić.

Dashboard jest całym panelem sterowania.

Widok jest zakładką wewnątrz dashboardu. Jeden dashboard może mieć na przykład osobny widok dla parteru, piętra, ogrzewania, energii albo multimediów.

Karta jest konkretnym elementem umieszczonym w widoku. Może przedstawiać światło, temperaturę, termostat, wykres, pogodę, przycisk, listę encji albo inne informacje.

Przykładowa struktura może wyglądać tak:

Dashboard „Dom” → widok „Salon” → karta światła, karta temperatury i karta multimediów.

Dzięki takiemu podziałowi nie trzeba umieszczać wszystkich urządzeń i informacji na jednym ekranie.

Home Assistant udostępnia cztery podstawowe typy widoków:

Sections – domyślny obecnie typ widoku. Pozwala dzielić dashboard na sekcje i układać karty w siatce. Dobrze nadaje się do paneli, które mają zachować uporządkowany układ przy różnych szerokościach ekranu.

Masonry – rozmieszcza karty w kolumnach zależnie od ich rozmiaru. Może być wygodny przy panelach składających się z kart o różnej wysokości.

Panel – przeznacza praktycznie cały widok na jedną kartę. Przydaje się na przykład przy dużej mapie, obrazie albo innym elemencie, który ma zajmować całą dostępną szerokość.

Sidebar – tworzy układ z dwiema kolumnami: główną szeroką częścią oraz węższym obszarem bocznym.

Typ widoku wpływa nie tylko na wygląd, ale również na późniejsze zachowanie kart na różnych ekranach. Nie ma potrzeby używania tego samego typu widoku w każdej części dashboardu.

W widoku Sections karty można grupować w logiczne sekcje.

Przykładowo dashboard może zawierać:

• sekcję oświetlenia,
• sekcję temperatury i ogrzewania,
• sekcję rolet,
• sekcję bezpieczeństwa,
• sekcję multimediów.

Nie oznacza to, że każda kategoria musi mieć własny blok. Podział powinien wynikać ze sposobu korzystania z panelu.

W Sections można również zmieniać rozmiar kart w siatce. Dzięki temu element ważniejszy może zajmować więcej miejsca, a prosty status lub przycisk mniej.

Nie warto jednak wykorzystywać całej dostępnej przestrzeni tylko dlatego, że można. Dashboard powinien przede wszystkim pozwalać szybko znaleźć informację lub funkcję.

Po wejściu w tryb edycji dashboardu kartę można dodać na dwa podstawowe sposoby.

Pierwszy sposób to wybór encji. Wskazujesz encję, którą chcesz pokazać, a Home Assistant proponuje odpowiedni sposób jej prezentacji.

Drugi sposób to wybór rodzaju karty. Najpierw wybierasz typ elementu, a następnie określasz, jakie encje lub dane mają się w nim znaleźć.

W zależności od potrzeb można użyć między innymi kart do:

• sterowania światłem,
• prezentowania sensorów,
• obsługi termostatu,
• wyświetlania pogody,
• przedstawiania wykresów,
• grupowania encji,
• tworzenia przycisków,
• wyświetlania obrazów,
• prezentowania stron internetowych.

Home Assistant pozwala również dodawać kartę bezpośrednio z informacji o urządzeniu i wskazać dashboard oraz widok, do którego ma trafić.

Integracja jednego urządzenia może utworzyć wiele encji. Nie oznacza to, że każdą z nich trzeba pokazywać na głównym dashboardzie.

Na ekranie używanym na co dzień powinny znajdować się przede wszystkim informacje i funkcje, które rzeczywiście są regularnie potrzebne.

Przykładowo główny panel może pokazywać temperaturę pomieszczenia i sterowanie ogrzewaniem, ale techniczne sensory diagnostyczne urządzenia nie muszą zajmować obok nich miejsca.

Podobnie kilkadziesiąt encji związanych z poziomami baterii można umieścić w osobnym widoku technicznym zamiast mieszać je z codziennym sterowaniem światłami i roletami.

Więcej danych na ekranie nie zawsze oznacza lepszy dashboard. Jeżeli najważniejsze informacje giną pomiędzy elementami używanymi raz na kilka miesięcy, panel przestaje spełniać swoją podstawową funkcję.

W wielu kartach można określić, co ma wydarzyć się po interakcji użytkownika.

Home Assistant rozróżnia między innymi:

• tap – zwykłe dotknięcie lub kliknięcie,
• hold – przytrzymanie,
• double tap – dwukrotne dotknięcie.

W zależności od konfiguracji można na przykład:

• przełączyć stan urządzenia,
• otworzyć szczegółowe informacje,
• wykonać określoną akcję,
• przejść do innego widoku dashboardu,
• otworzyć adres URL,
• uruchomić Assist.

Dzięki temu jedna karta może służyć nie tylko jako prosty przycisk, ale również jako element nawigacji lub wejście do bardziej szczegółowego sterowania.

Nie należy jednak przypisywać wielu ukrytych działań bez wyraźnej potrzeby. Jeżeli użytkownik nie wie, że przytrzymanie przycisku wykonuje inną czynność niż jego dotknięcie, panel może stać się mniej intuicyjny zamiast bardziej funkcjonalny.

Home Assistant pozwala określić warunki widoczności kart.

Przykładowo informacja o otwartym oknie może pojawić się wtedy, gdy okno rzeczywiście jest otwarte, a element dotyczący ładowania samochodu może być widoczny tylko wtedy, gdy ładowarka jest używana.

Można również ograniczać widoczność elementów do określonych użytkowników.

Takie rozwiązanie pozwala ograniczyć ilość informacji wyświetlanych jednocześnie i pokazywać niektóre elementy dopiero wtedy, gdy stają się potrzebne.

Warunkowa widoczność nie powinna jednak zastępować automatyzacji. To, że informacja pojawia się na ekranie, nie oznacza jeszcze, że użytkownik powinien za każdym razem ręcznie reagować na sytuację.

Home Assistant posiada również Webpage dashboard.

Nie jest to drugi sposób budowania tego samego panelu z kart Home Assistant. Jego zadaniem jest osadzenie strony internetowej wewnątrz interfejsu Home Assistant.

Może to być na przykład:

• strona dostępna w internecie,
• panel urządzenia działającego w sieci lokalnej,
• interfejs NAS-a lub routera,
• własna lokalna strona,
• inny interfejs, który można poprawnie osadzić.

Webpage dashboard wykorzystuje kartę Webpage.

Nie każda strona pozwala jednak na osadzenie. Część serwisów blokuje działanie w ramce ze względów bezpieczeństwa. Dodatkowo Home Assistant używany przez HTTPS nie może w ten sposób osadzić strony dostępnej wyłącznie przez HTTP.

Webpage dashboard jest całym dashboardem przeznaczonym do prezentowania strony internetowej.

Webpage card jest natomiast kartą, którą można wykorzystać jako element dashboardu.

Pozwala to osadzić stronę w wybranym miejscu interfejsu zamiast przeznaczać na nią cały osobny panel.

Webpage card może również wyświetlać pliki umieszczone lokalnie w katalogu www Home Assistant i udostępnione przez ścieżkę /local/.

Przy takim rozwiązaniu nadal obowiązują ograniczenia bezpieczeństwa przeglądarki. Sam fakt, że strona otwiera się normalnie w osobnej karcie przeglądarki, nie oznacza jeszcze, że będzie mogła zostać osadzona w dashboardzie.

Dashboard wygodny na dużym monitorze nie zawsze będzie wygodny na telefonie.

Na telefonie ważne jest szybkie dotarcie do najczęściej używanych funkcji, odpowiednia szerokość kart i ograniczenie liczby elementów wymagających przewijania w poziomie.

Tablet ścienny daje więcej miejsca i może jednocześnie pokazywać stan domu, sterowanie światłem, pogodę, alarm czy temperaturę.

Home Assistant pozwala tworzyć wiele dashboardów. Można więc przygotować osobny panel dla tabletu zamiast próbować zmieścić wszystkie zastosowania w jednym układzie.

Jeżeli tablet ścienny ma korzystać z innego domyślnego dashboardu niż telefon użytkownika, można również użyć osobnego profilu użytkownika dla tabletu i przypisać mu właściwy dashboard.

Osoba konfigurująca Home Assistant może chcieć widzieć stany techniczne, diagnostykę, poziomy baterii, informacje o sieci i dodatkowe sensory.

Pozostali domownicy mogą potrzebować przede wszystkim prostego sterowania światłem, roletami, temperaturą, alarmem czy multimediami.

Nie ma potrzeby umieszczania tych dwóch sposobów korzystania z systemu na jednym ekranie.

Rozdzielenie codziennego panelu od widoku technicznego często upraszcza obsługę i zmniejsza ryzyko przypadkowego uruchomienia funkcji, które nie są potrzebne na co dzień.

Dobry dashboard daje możliwość kontroli systemu i ręcznej korekty jego działania.

Jeżeli jednak każdego wieczoru użytkownik musi ręcznie wyłączyć kilka świateł, opuścić rolety, zmienić temperaturę i przełączyć kilka urządzeń, problem nie zawsze należy rozwiązywać przez dodanie kolejnych przycisków na panelu.

Część takich czynności może lepiej pasować do automatyzacji albo skryptu.

Dashboard może wtedy zawierać jedną odpowiednią funkcję albo jedynie pokazywać rezultat działania systemu.

Automatyzacje Home Assistant →

Home Assistant posiada wiele wbudowanych kart i dla dużej części paneli są one wystarczające.

Istnieją jednak również niestandardowe elementy tworzone przez społeczność. Mogą rozszerzać wygląd dashboardu, dodawać dodatkowe sposoby prezentowania danych albo umożliwiać rozwiązania niedostępne w standardowych kartach.

Do pobierania i aktualizowania takich elementów często wykorzystywany jest HACS. HACS obsługuje elementy dashboardów tworzone przez społeczność, w tym między innymi własne karty i inne komponenty interfejsu.

Nie oznacza to, że każdy dashboard powinien być zbudowany z niestandardowych kart.

Każdy dodatkowy element społecznościowy jest kolejną zależnością, którą trzeba później aktualizować i sprawdzać pod kątem zgodności z nowymi wersjami Home Assistant.

Najpierw warto więc sprawdzić, czy potrzebny efekt można uzyskać przy użyciu standardowych możliwości.

Nie. Typowy dashboard można zbudować przez graficzny interfejs Home Assistant.

Można dodawać widoki, karty, encje, zmieniać ich rozmiary oraz konfigurować wiele zachowań bez ręcznego tworzenia całej konfiguracji YAML.

YAML nadal może być przydatny przy bardziej technicznych rozwiązaniach, ręcznej edycji konfiguracji kart lub wtedy, gdy dashboard ma być zarządzany w plikach konfiguracyjnych.

Home Assistant pozwala również definiować osobne dashboardy YAML. Jest to bardziej zaawansowany sposób zarządzania panelem i nie jest wymagany do rozpoczęcia pracy z dashboardami.

YAML nie jest rozwiązaniem „lepszym”. To dodatkowy poziom kontroli, który ma sens w określonych konfiguracjach.

Przykładowy panel można rozpocząć od utworzenia nowego, pustego dashboardu.

Następnie:

• utwórz pierwszy widok typu Sections,
• podziel go na kilka logicznych sekcji,
• dodaj najważniejsze encje używane na co dzień,
• wybierz karty odpowiadające sposobowi sterowania urządzeniami,
• ustaw rozmiary najważniejszych elementów,
• usuń z głównego widoku informacje techniczne, które nie są potrzebne na co dzień,
• jeżeli potrzebujesz dodatkowych informacji, utwórz kolejny widok zamiast przeciążać pierwszy,
• skonfiguruj akcje kart tylko tam, gdzie rzeczywiście ułatwiają obsługę,
• zastosuj warunkową widoczność dla informacji, które są potrzebne wyłącznie w określonych sytuacjach,
• sprawdź panel zarówno na komputerze, jak i telefonie.

Dopiero po zbudowaniu czytelnej podstawy warto zastanawiać się nad dodatkowymi kartami społecznościowymi, własnym YAML-em albo bardziej rozbudowaną nawigacją.

Jeżeli panel ma działać na stałym tablecie, sprawdź go również bezpośrednio na tym urządzeniu. Układ, który wygląda poprawnie w oknie przeglądarki na komputerze, nie musi zachowywać się identycznie na ekranie o innych proporcjach.

Na początku dashboard często zawiera kilka świateł, temperaturę i rolety.

Wraz z rozbudową systemu dochodzą kolejne sensory, urządzenia, wykresy, multimedia, alarm, energia, baterie oraz elementy diagnostyczne.

Jeżeli każdy nowy element trafia na ten sam ekran, po pewnym czasie znalezienie konkretnej funkcji zaczyna zajmować więcej czasu niż jej wykonanie.

Zamiast dodawać kolejne karty do jednego widoku, warto ustalić hierarchię:

• najważniejsze informacje na początku,
• codzienne sterowanie w łatwo dostępnych miejscach,
• rzadziej używane funkcje w osobnych widokach,
• diagnostykę poza głównym ekranem.

Panel nie powinien być katalogiem wszystkich encji Home Assistant. Powinien być interfejsem przygotowanym do konkretnego sposobu korzystania z systemu.

Podstawowy panel z kilkoma kartami można przygotować stosunkowo szybko.

Więcej planowania wymaga sytuacja, gdy panel ma:

• działać dobrze na kilku różnych ekranach,
• mieć osobne widoki dla różnych użytkowników,
• ukrywać i pokazywać elementy zależnie od stanu systemu,
• prowadzić pomiędzy wieloma widokami,
• korzystać z własnych akcji przy kliknięciu i przytrzymaniu,
• prezentować zewnętrzne strony lub lokalne interfejsy,
• wykorzystywać niestandardowe karty,
• łączyć sterowanie z automatyzacjami i skryptami,
• zachować spójny wygląd mimo dużej liczby urządzeń.

W takim przypadku dashboard przestaje być tylko zbiorem przycisków. Staje się osobnym interfejsem użytkownika, którego układ trzeba zaplanować podobnie jak logikę pozostałej części systemu.

Jeżeli chcesz zobaczyć przykład bardziej rozbudowanego panelu Home Assistant, możesz otworzyć przygotowane demo.

Zobacz demo Home Assistant →

Dashboard Home Assistant może być prostym ekranem z kilkoma najważniejszymi funkcjami albo rozbudowanym interfejsem przygotowanym dla telefonu, tabletu i różnych użytkowników.

Najważniejsze jest jednak nie to, ile kart uda się umieścić na ekranie, lecz czy potrzebną informację lub funkcję można szybko znaleźć i zrozumieć.

Warto zacząć od prostego układu, podzielić panel na logiczne widoki i sekcje, a dopiero później dodawać warunkową widoczność, dodatkowe akcje, HACS, Webpage dashboard czy konfigurację YAML.

Jeżeli dashboard zaczyna być trudniejszy w obsłudze wraz z każdą kolejną kartą, lepszym rozwiązaniem jest uporządkowanie jego struktury niż dalsze dokładanie elementów.

Jeśli chcesz zbudować panel od zera, uporządkować obecny dashboard, przygotować wygodny widok na telefon lub tablet albo wdrożyć bardziej zaawansowany układ, mogę pomóc zaplanować strukturę i skonfigurować rozwiązanie dopasowane do sposobu korzystania z systemu.

Skontaktuj się ze mną.Wstępna ocena zgłoszenia jest bezpłatna i bez zobowiązań. → kliknij tutaj