Jak stworzyć piękny interfejs Home Assistant za pomocą UI Lovelace Minimalist (YAML)?

UI Lovelace Minimalist to prężnie rozwijający się projekt "motywu" dla Home Assistanta. Pozwala on na utworzenie pięknęgo, minimalistycznego interfejsu do sterowania naszymi urządzeniami. To coś, czego Lovelace potrzebowało już od dawna!

Jak zainstalować UI Lovelace Minimalist?

Najnowszą instrukcję instalacji znajdzesz w dokumentacji tego dodatku. Ale nie jest ona skomplikowana jeżeli masz zainstalowane HACS w swoim Home Assistancie. Do działania powinno wystarczyć wykonanie tych kilku kroków:

1. Zainstaluj niestandardową integracje browser-mod przez HACS
2. Opcjonalnie zainstaluj następujące elementy interfejsu również przez HACS (dodatek może również automatycznie dodać je za ciebie):
   - button-card
   - lovelace-card-mod
   - mini-graph-card
   - mini-media-player
   - my-cards-slider-card
   - light-entity-card
3. Zainstaluj za pomocą HACS integracje UI Lovelace Minimalist
4. Zrestartuj Home Assistanta
5. Przejdź do panelu integracji i dodaj nową integrację o nazwie UI Lovelace Minimalist. Następnie możesz skonfigurować kilka opcji tej integracji (aktualnie znany jest błąd, z powodu którego te opcję nie zostaną zapisane za pierwszym razem, dlatego najpierw dodaj integracje, a później edytuj jej konfigurację)
6. Wybierz język. Zaznacz checkboxa, aby utworzyć panel dla inteferjsu. Jeśli chcesz możesz wybrać jego nazwę i ikonę. Możesz również wybrać motyw.
7. Jeżeli nie instalowałeś wszystkich zależności wymienionych w punkcie 2 to zaznacz również checkbox na dole. Wtedy dodatek zainstaluje je za ciebie.
8. Gotowe! Na bocznym panelu powinieneś zauważyć nową zakładkę która pokaże ci nowy interfejs

Jak edytować utworzony interfejs?

Aktualnie interfejsy UI Lovelace Minimalist mogą być edytowane jedynie w trybie tekstowym YAML. Aby więc zedytować interfejs który został dla nas utworzony musimy przejść do File Editor'a a następnie przejść do pliku o następującej ścieżce:

/config/ui_lovelace_minimalist/dashboard/ui-lovelace.yaml

Najwygodniej będzie umieścić każdy widok w osobnym pliku dlatego możemy je utworzyć w folderze views. Widoki zostaną utworzone według alfabetycznej kolejności plików, dlatego do plików możemy dodać kolejne litery alfabetu albo cyfry aby wymusić konkretną kolejność. Następnie wystarczy że w pliku ui-lovelace.yaml ustawimy następującą wartość w polu views:

views: !include_dir_merge_list "views/"

Teraz możemy rozpocząć tworzenie widoków w folderze views:

  - title: "Główny"
    path: 'home'
    cards:
      - type: vertical-stack
        cards: 
          - ...
      - type: vertical-stack # Druga kolumna
        cards: 
          - ...

Następnie możemy dodać nasze karty. Pamiętaj, że po każdej zmianie musimy odświeżyć widok aby go zaktualizować. Robimy to za pomocą przycisku odśwież w menu z prawego górnego rogu w interfejsie Lovelace.

Wszystkie możliwości znajdziesz w dokumentacji UI Lovelace Minimalist. Oto przykładowe karty z których korzystam w moim interfejsie:

Tytuł i podtytuł

- type: 'custom:button-card'
  template: card_title
  name: Pokój Martina
  label: Oświetlenie

Istnieje możliwość dodania samego tytułu, samego podtytułu oraz obu naraz.

Oświetlenie

- type: "custom:button-card"
  template: card_light
  entity: light.desk_lamp
  variables:
    ulm_card_light_enable_slider: true
    ulm_card_light_enable_color: true
    ulm_card_light_enable_horizontal: true

Karta ta ma kilka możliwości konfiguracji, może posiadać suwak jasności u dołu lub po prawej stronie karty. Karta może również przybierać kolor naszego oświetlenia

Przykładowy układ kart oświetlenia

- type: horizontal-stack
  cards:
    - type: "custom:button-card"
      template: card_light
      entity: light.main_lights
    - type: "custom:button-card"
      template: card_light
      entity: light.side_lights
    - type: "custom:button-card"
      template: card_light
      entity: light.desk_lampb
	  variables:
        ulm_card_light_enable_slider: true
        ulm_card_light_enable_color: true
        ulm_card_light_enable_horizontal: true

Prawie wszystkie karty możemy bardzo ładnie ułożyć obok siebie za pomocą zwykłej karty horizontal-stack.

Wykresy

- type: 'custom:button-card'
  template: card_graph
  variables:
    ulm_card_graph_color: "var(--google-red)"
    ulm_card_graph_name: Temperatura
    ulm_card_graph_entity: sensor.temperature_sensor_temperature
    ulm_card_graph_type: fill
    ulm_card_graph_hours: 24

Karta wykresu pozwala na wybranie koloru, nazwy, wyglądu oraz zakresu czasu z jakiego wyświetlany jest wykres. Jest również możliwość nałożenia dwóch wykresów na siebie.

Plakietka z ikoną i statusem encji

- type: "custom:button-card"
  template: chip_mdi_icon_state
  variables:
    ulm_chip_mdi_icon_state_entity: sensor.temperature_sensor_battery
    ulm_chip_mdi_icon_state_icon: mdi:battery

UI Lovelace Minimalist posiada również mniejsze plakietki, dla których możemy wybrać ikonę oraz encje której status chcemy wyświetlać.

Przykładowy układ dla termometru Zigbee

- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      template: card_title
      label: Klimat
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      template: chip_mdi_icon_state
      variables:
      ulm_chip_mdi_icon_state_entity: sensor.temperature_sensor_battery
      ulm_chip_mdi_icon_state_icon: mdi:battery
- type: 'custom:button-card'
  template: card_graph
  variables:
    ulm_card_graph_color: "var(--google-red)"
    ulm_card_graph_name: Temperatura
    ulm_card_graph_entity: sensor.temperature_sensor_temperature
    ulm_card_graph_type: fill
    ulm_card_graph_hours: 24
- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      template: card_graph
      variables:
        ulm_card_graph_color: "var(--google-blue)"
        ulm_card_graph_name: Wilgotność
        ulm_card_graph_entity: sensor.temperature_sensor_humidity
        ulm_card_graph_type: fill
        ulm_card_graph_hours: 24
    - type: 'custom:button-card'
      template: card_graph
      variables:
        ulm_card_graph_color: "var(--google-green)"
        ulm_card_graph_name: Ciśnienie
        ulm_card_graph_entity: sensor.temperature_sensor_pressure
        ulm_card_graph_type: fill
        ulm_card_graph_hours: 24

Odkurzacz

- type: "custom:button-card"
  template: "card_vacuum"
  entity: vacuum.helena

Termostat

- type: "custom:button-card"
  template: card_thermostat
  entity: climate.martins_room
  variables:
    ulm_card_thermostat_name: "Ogrzewanie"
    ulm_card_thermostat_enable_controls: true

Odtwarzacz mediów

- type: "custom:button-card"
  template: card_media_player
  entity: media_player.nesthub2ec5_7
  variables:
    ulm_card_media_player_enable_art: true
    ulm_card_media_player_enable_controls: true

Karta ma możliwość wyświetlania grafiki aktualnie odtwarzanego utworu.

Pionowy przycisk

- type: 'custom:button-card'
  template: card_vertical_button
  entity: light.main_lights
  name: Martin - Główne
  variables:
    ulm_card_vertical_button_color: yellow

Pionowy przycisk pozwala na sterowanie stanem oświetlenia, przełącznika, scenami, oraz pomocnikami typu input_select czy input_booelan. Możemy również wybrać kolor karty gdy encja jest włączona.

Przykładowy układ pionowych przycisków

 - type: grid
   square: false
   cards:
     - type: 'custom:button-card'
       template: card_vertical_button
       entity: light.main_lights
       name: Martin - Główne
       variables:
         ulm_card_vertical_button_color: yellow
     - type: 'custom:button-card'
       template: card_vertical_button
       entity: light.side_lights
       name: Martin - Boczne
       variables:
         ulm_card_vertical_button_color: yellow
     - type: 'custom:button-card'
       template: card_vertical_button
       entity: light.desk_lamp
       name: Martin - Biurko
       variables:
         ulm_card_vertical_button_color: yellow
     - type: 'custom:button-card'
       template: card_vertical_button
       entity: light.pokoj_mileny
       name: Milena - Główne
       variables:
         ulm_card_vertical_button_color: yellow
     - type: 'custom:button-card'
       template: card_vertical_button
       entity: light.pokoj_mileny_ledy
       name: Milena - Ledy
       variables:
         ulm_card_vertical_button_color: yellow
     - type: 'custom:button-card'
       template: card_vertical_button
       entity: light.corridor_lights_group
       name: Korytarz
       variables:
         ulm_card_vertical_button_color: yellow

Nawigacja

Kilka elementów które ułatwią ci poruszanie się pomiędzy widokami w twoim interfejsie. Musisz do nich dodać ścieżkę na którą mają przenosić.

Strzałka powrotu

- type: 'custom:button-card'
  template: chip_back
  variables:
    ulm_chip_back_path: /ui-lovelace-minimalist/home

Plakietka nawigacji

- type: 'custom:button-card'
  template: chip_navigate
  label: 'Parter'
  variables:
    ulm_chip_navigate_path: /ui-lovelace-minimalist/parter
    ulm_chip_navigate_icon: mdi:stairs-down

Oprócz ścieżki i nazwy możemy wybrać również ikonkę.

Karta nawigacji

- type: 'custom:button-card'
  template: card_navigate
  variables:
    ulm_card_navigate_path: /ui-lovelace-minimalist/parter
    ulm_card_navigate_title: Parter
    ulm_card_navigate_icon: mdi:stairs-down

Tutaj również opcjonalnie możemy wybrać ikonę.

Układ plakietek nawigacji

- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      template: chip_back
      variables:
        ulm_chip_back_path: /ui-lovelace-minimalist/home
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Parter'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/parter
        ulm_chip_navigate_icon: mdi:stairs-down
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Podwórko'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/podworko
        ulm_chip_navigate_icon: mdi:flower-tulip
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Ogrzewanie'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/ogrzewanie
        ulm_chip_navigate_icon: mdi:home-thermometer

Tytuł z kartą nawigacji

- type: grid
  columns: 2
  square: false
  cards:
    - type: 'custom:button-card'
      template: card_title
      name: Pokój Martina
    - type: custom:button-card
      template: card_navigate
      variables:
        ulm_card_navigate_path: /ui-lovelace-minimalist/pokoj-martina
        ulm_card_navigate_title: Pokój Martina

Pusta karta

W UI Lovelace Minimalist znajdziemy również pustą kartę, która nic nie wyświetla. Służy ona jako pomocnik aby zmodyfikować układ elementów, który domyślnie jest od lewej do prawej. Sposoby jej użycia znajdziesz w dokumentacji.

 - type: "custom:button-card"
   color_type: blank-card

Karty niestandardowe

UI Lovelace Minimalist pozwala również na tworzenie i dodawanie niestandardowych kart. Znajdziemy je w zakładce "Custom cards" w dokumentacji.

Dodawanie przykładowej karty niestandardowej

Spróbujmy dodać kartę niestandardową o nazwie "Power details". Wystarczy że wykonamy kilka kroków:

1. Pobieramy repozytorium UI Lovelace Minimalist z Githuba
2. Szukamy folderu naszej karty w folderze "custom_cards" (w tym przypadku jest on nazwany "custom_card_damix48_power_details"
3. Kopiujemy folder do plików Home Assistanta do ścieżki
   /config/ui_lovelace_minimalist/custom_cards/
4. Ponownie wczytujemy konfigurację UI Lovelace Minimalist. Możemy to zrobić w konfiguracji Home Assistanta w menu "Kontrola serwera", aby tam przejść możesz skorzystać z tego przycisku:

Teraz już możemy dodać naszą niestandardową kartę do naszego widoku według instrukcji w dokumentacji:

- type: "custom:button-card"
  template: custom_card_damix48_power_details
  variables:
    ulm_card_power_details_name: Produkcja energii
    ulm_card_power_details_entity: sensor.inverter_power_ac
    ulm_card_power_details_hours: 12
    ulm_card_power_details_24hour: true
    ulm_card_power_details_height: 90
    ulm_card_power_details_thresholds:
      - value: 0
        color: "#43A047"
      - value: 3000
        color: "#FFA600"
      - value: 3500
        color: "#DB4437"

A prezentuje się ona tak:

Rozwiązywanie problemów z ładowaniem custom-componentów

Zauważyłem że podczas castowania interfejsu na Nest Huba niestandardowe karty nie wyświetlają się wcale, lub wyrzucają błąd. Na szczęście na ten problem istnieje łatwe rozwiązanie. Problem prawdopodobnie występuje tylko, gdy zaznaczyliśmy opcję automatycznego dołączenia wszystkich zależności podczas konfiguracji integracji UI Lovelace Minimalist.

Wystarczy że przejdziesz do konfiguracji Home Assistanta, następnie wejdziesz w Dashboardy i przejdziesz w zakładkę Zasoby. Możesz tam się szybko dostać za pomocą tego przycisku:

Następnie za pomocą przycisku w dolnym rogu dodaj dwa nowe zasoby jako "Moduł JavaScript" o następujących adresach:

• /ui_lovelace_minimalist/cards/button-card/button-card.js
• /ui_lovelace_minimalist/cards/mini-graph-card/mini-graph-card-bundle.js

Po tym zabiegu karty powinny ładować się poprawnie.

Innym rozwiązaniem tego problemu jest odznaczenie w konfiguracji integracji UI Lovelace Minimalist ostatniej opcji "Dołącz zasoby wymagane przez niestandardowe karty" i dodanie ręcznie wszystkich zależności (punkt 2 instalacji) poprzez HACS.

Podsumowanie

W ten oto sposób UI Lovelace Minimalist pozwoliło nam na stworzenie naprawdę ładnego interfejsu. Mam nadzieje że ten okazał się pomocny. Jeżeli Tobie również udało się odmienić wygląd twojego dashboardu koniecznie podziel się twoim widokiem w komentarzu poniżej.