Dashboard Floorplan dla Home Assistant Plan Domu Cz.2 #OdZeraDoAutomatykiDomu #14
Witajcie w serii Od Zera Do Automatycznego Domu. Zabiorę was razem ze mną na przygodę tworzenia od podstaw automatycznego domu na bazie Home Assistant. Postaram się wrzucać do tej serii wszystkie rzeczy które robię na moim nowym sprzęcie. Robię wszystko od nowa! Będzie tego naprawdę sporo…
W tym odcinku pokażę wam jak stworzyć interaktywny plan domu w Home Assistant jako dashboard do sterowania waszym domem i go monitorować. Każdy etap staram się omówić w szczegółach i dawać wiele cennych wskazówek.
Strony:
Program do modelowania: https://www.sweethome3d.com/
Modele 3D: https://www.sweethome3d.com/importModels.jsp
Tekstury: https://www.sweethome3d.com/importTextures.jsp
Narzędzie do renderów: https://sourceforge.net/p/sweethome3d/plug-ins/33/
Program graficzny: https://www.gimp.org/
Kod z materiału:
Configuration.yaml
lovelace:
mode: storage
# Add yaml dashboards
dashboards:
lovelace-yaml:
title: Parter
mode: yaml
icon: mdi:floor-plan
show_in_sidebar: true
filename: panel-parter.yamlpanel-parter.yaml:
title: Home Dashboard
views:
- path: home
title: " "
icon: mdi:floor-plan
panel: true
cards:
#################################### START - OBRAZKI ####################################
- type: picture-elements
image: /local/floorplan/parter-off.png
style:
filter: brightness(10%)
elements:
- entity: light.kitchen_table
state_image:
'unavailable': /local/floorplan/transparent.png
'off': /local/floorplan/transparent.png
'on': /local/floorplan/parter-stol.png
tap_action:
action: none
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
type: image
- type: image
image: /local/floorplan/parter-pasekgora.png
style:
left: 50%
top: 50%
width: 100%
- type: image
image: /local/floorplan/parter-pasekdol3.png
style:
left: 50%
top: 50%
width: 100%
#################################### END - OBRAZKI ####################################
################################ ŚWIATŁA ############################################
############# KOTŁOWNIA
- type: custom:mushroom-chips-card
style:
top: 28%
left: 64%
chips:
- type: template
entity: light.boilerroom_track
icon: mdi:vanity-light
name: Swiatla-Kotlownia
icon_color: >-
{% if is_state('light.boilerroom_track', 'on') %}
#cd9b1d
{% else %}
black
{% endif %}
############## WIATROŁAP
- type: custom:mushroom-chips-card
style:
top: 46%
left: 65%
chips:
- type: template
entity: light.windcatcher_track
icon: mdi:vanity-light
name: Swiatla-Wiatrolap
icon_color: >-
{% if is_state('light.windcatcher_track', 'on') %}
#cd9b1d
{% else %}
black
{% endif %}
############################################# ŚWIATŁO END ################################
############################################### CHIPSY TEMPERATURA ##################################
- type: custom:mushroom-chips-card
style:
top: 30%
left: 58%
transform: scale(0.8)
card_mod:
style: |
ha-card {
--chip-background: black;
--primary-text-color: #00BFFF;
}
chips:
- type: template
entity: sensor.boilerroom_t_temperature
tap_action:
action: more-info
content: "{{ states('sensor.boilerroom_t_temperature') }}"
card_mod:
style: |
ha-card {
border: 1px solid #00BFFF !important;
--chip-font-size: 14px;
justify-content: center;
}
- type: custom:mushroom-chips-card
style:
top: 43.5%
left: 57.5%
transform: scale(0.8)
card_mod:
style: |
ha-card {
--chip-background: black;
--primary-text-color: #00BFFF;
}
chips:
- type: conditional
conditions:
- entity: input_boolean.temperature
state: "on"
chip:
type: template
entity: sensor.windcatcher_t_temperature
tap_action:
action: more-info
content: "{{ states('sensor.windcatcher_t_temperature') }}"
card_mod:
style: |
ha-card {
border: 1px solid #00BFFF !important;
--chip-font-size: 14px;
justify-content: center;
}
#################################################### CZIPSY CZUJNIKI RUCHU ################################################
###### PLAKIETKA KOTLOWNIA CZUJNIK RUCHU ######
- type: custom:mushroom-chips-card
style:
top: 35%
left: 60%
transform: scale(0.8)
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: conditional
conditions:
- entity: input_boolean.motions
state: "on"
chip:
type: template
entity: binary_sensor.boilerroom_m_occupancy
tap_action:
action: more-info
icon: >
{% if is_state('binary_sensor.boilerroom_m_occupancy', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
icon_color: >
{% if is_state('binary_sensor.boilerroom_m_occupancy', 'on') %}
red
{% else %}
white
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid red !important;
}
###### PLAKIETKA WIATROLAP CZUJNIK RUCHU ######
- type: custom:mushroom-chips-card
style:
top: 38%
left: 64%
transform: scale(0.8)
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: conditional
conditions:
- entity: input_boolean.motions
state: "on"
chip:
type: template
entity: binary_sensor.windcatcher_m_occupancy
tap_action:
action: more-info
icon: >
{% if is_state('binary_sensor.windcatcher_m_occupancy', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
icon_color: >
{% if is_state('binary_sensor.windcatcher_m_occupancy', 'on') %}
red
{% else %}
white
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid red !important;
}
###### PLAKIETKA NAZEWNATRZ NAD GARAZEM CZUJNIK RUCHU ######
- type: custom:mushroom-chips-card
style:
top: 62.5%
left: 84%
transform: scale(0.8)
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: template
entity: binary_sensor.frontyard_m_garage_occupancy
tap_action:
action: more-info
icon: >
{% if is_state('binary_sensor.frontyard_m_garage_occupancy', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
icon_color: >
{% if is_state('binary_sensor.frontyard_m_garage_occupancy', 'on') %}
red
{% else %}
white
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid red !important;
}
#################################################### CZIPSY ROLETY ################################################
###### PLAKIETKA ROLETA KUCHNIA OKNO ######
- type: custom:mushroom-chips-card
style:
top: 22.5%
left: 31%
transform: scale(0.8)
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: conditional
conditions:
- entity: input_boolean.shutters
state: "on"
chip:
type: template
entity: cover.kitchen_window
tap_action:
action: more-info
icon: >
{% if is_state('cover.kitchen_window', 'open') %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: >
{% if is_state('cover.kitchen_window', 'open') %}
#3b8132
{% else %}
white
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid #3b8132 !important;
}
#################################################### CZIPSY KONTAKTRONY ################################################
###### PLAKIETKA NAZEWNATRZ KONTAKTRON BRAMA ######
- type: custom:mushroom-chips-card
style:
top: 60%
left: 94%
transform: scale(0.8)
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: template
entity: binary_sensor.frontyard_c_gate_contact
tap_action:
action: more-info
hold_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.frontyard_entry_gate
icon: >
{% if is_state('binary_sensor.frontyard_c_gate_contact', 'on') %}
mdi:gate-open
{% else %}
mdi:gate
{% endif %}
icon_color: >
{% if is_state('binary_sensor.frontyard_c_gate_contact', 'on') %}
#FFBF00
{% else %}
white
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid #FFBF00 !important;
}
###### PLAKIETKA KUCHNIA KONTAKTRON DRZWI ######
- type: custom:mushroom-chips-card
style:
top: 35%
left: 14%
transform: scale(0.8)
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: conditional
conditions:
- entity: input_boolean.doors
state: "on"
chip:
type: template
entity: binary_sensor.kitchen_c_door_contact
tap_action:
action: more-info
icon: >
{% if is_state('binary_sensor.kitchen_c_door_contact', 'on') %}
mdi:window-open
{% else %}
mdi:window-closed
{% endif %}
icon_color: >
{% if is_state('binary_sensor.kitchen_c_door_contact', 'on') %}
#FFBF00
{% else %}
white
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid #FFBF00 !important;
}
#################################################### PASEK DÓŁ ################################################
###### ON OFF TEMPERATURA ######
- type: custom:mushroom-chips-card
style:
top: 89%
left: 4%
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: template
entity: input_boolean.temperature
icon: mdi:thermometer
name: Termometry
icon_color: >-
{% if is_state('input_boolean.temperature', 'on') %}
#00BFFF
{% else %}
#D3D3D3
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid #00BFFF !important;
}
###### ON OFF CZUJNIK RUCHU ######
- type: custom:mushroom-chips-card
style:
top: 89%
left: 9%
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: template
entity: input_boolean.motions
icon: mdi:motion-sensor
name: CzujnikiRuchu
icon_color: >-
{% if is_state('input_boolean.motions', 'on') %}
red
{% else %}
#D3D3D3
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid red !important;
}
###### ON OFF ROLETY ######
- type: custom:mushroom-chips-card
style:
top: 95%
left: 9%
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: template
entity: input_boolean.shutters
icon: mdi:window-shutter-open
name: Rolety
icon_color: >-
{% if is_state('input_boolean.shutters', 'on') %}
green
{% else %}
#D3D3D3
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid green !important;
}
###### ON OFF DRZWI ######
- type: custom:mushroom-chips-card
style:
top: 95%
left: 4%
card_mod:
style: |
ha-card {
--chip-background: black;
}
chips:
- type: template
entity: input_boolean.doors
icon: mdi:door-closed
name: DrzwiBramy
icon_color: >-
{% if is_state('input_boolean.doors', 'on') %}
#FFBF00
{% else %}
#D3D3D3
{% endif %}
card_mod:
style: |
ha-card {
border: 1px solid #FFBF00 !important;
}
Tworzenie Imponującego Panelu Home Assistant z Integracją Planu Podłogi (Część 2)
Witamy z powrotem w drugiej części naszego przewodnika po budowaniu atrakcyjnego wizualnie i funkcjonalnego panelu Home Assistant z wykorzystaniem planu podłogi! W poprzedniej części omówiliśmy podstawy tworzenia planu podłogi w Sweet Home 3D. Teraz zagłębimy się w ekscytującą część: dodawanie interaktywnych elementów, które ożywią Twój panel. Ten artykuł towarzyszy samouczkowi wideo [link do Twojego filmu tutaj], który gorąco polecamy obejrzeć, aby w pełni zrozumieć ten proces.
Ten samouczek koncentruje się na użyciu Kart Grzybowych (Mushroom Cards) do stworzenia dynamicznego i przyjaznego dla użytkownika interfejsu. Przeprowadzimy Cię przez dodawanie interaktywnych kontrolek dla świateł, czujników (ruchu, otwarcia/kontaktu), rolet i innych, wszystko zintegrowane bezpośrednio z Twoim planem podłogi.
Konfiguracja Panelu i Przygotowanie Zasobów
Zaczynamy od utworzenia nowego panelu w Home Assistant i skonfigurowania go dla łatwiejszej edycji kodu za pomocą edytora plików. Korzystanie z edytora plików jest kluczowe dla efektywnego zarządzania kodem panelu. Dostarczamy niezbędne fragmenty kodu, w tym nazwy plików i ikony, w opisie filmu. Pamiętaj, aby używać edytora kodu, który poprawnie obsługuje wcięcia, takiego jak VS Code lub Notepad++.
Kluczowym krokiem jest przygotowanie obrazu planu podłogi i innych zasobów wizualnych. Pokażemy Ci, jak utworzyć folder „www” w katalogu konfiguracji Home Assistant. Ten folder będzie służył jako lokalna lokalizacja przechowywania wszystkich obrazów i zasobów Twojego panelu.
Dodawanie Interaktywnych Elementów za Pomocą Kart Grzybowych
Sercem tego samouczka jest wykorzystanie Kart Grzybowych do dodawania interaktywnych elementów do Twojego planu podłogi. Zademonstrujemy, jak dodawać interaktywne kontrolki dla różnych urządzeń inteligentnego domu:
- Interaktywne Światła: Pokażemy Ci, jak tworzyć dynamiczne efekty świetlne na Twoim planie podłogi. Obejmuje to tworzenie oddzielnych renderów obrazu dla sytuacji, gdy światło jest włączone, wyłączone i niedostępne. Udostępnimy kod i wyjaśnimy znaczenie poprawnych ścieżek plików. Omówimy również korzystanie z GIMP, darmowego programu do edycji grafiki, do tworzenia przezroczystych obrazów PNG niezbędnych do efektu włączania/wyłączania światła.
- Górne i Dolne Paski: Przeprowadzimy Cię przez dodawanie górnych i dolnych pasków do Twojego panelu za pomocą GIMP. Paski te zapewniają miejsce na dodatkowe informacje i kontrolki, poprawiając funkcjonalność panelu.
Praca z Interaktywnymi „Chipami”
Następnie przejdziemy do dodawania interaktywnych „chipów”, które wyświetlają informacje i umożliwiają sterowanie różnymi urządzeniami. Omówimy dodawanie chipów dla:
- Czujników Temperatury: Wyświetlanie odczytów temperatury bezpośrednio na planie podłogi i zapewnienie dostępu do wykresów danych historycznych.
- Czujników Ruchu: Zmiana wyglądu chipów (ikony i kolory) w zależności od statusu wykrycia ruchu.
- Rolet i Czujników Kontaktu: Wyświetlanie ich statusu (otwarte/zamknięte) za pomocą różnych ikon i kolorów.
Kluczowym aspektem tego samouczka jest użycie kodu warunkowego do pokazywania lub ukrywania chipów w zależności od stanu encji pomocniczej (input_boolean). Pozwala to na uzyskanie czystego i uporządkowanego panelu, wyświetlającego tylko istotne informacje w danym momencie. Wyjaśnimy, jak tworzyć te encje pomocnicze i używać ich do kontrolowania widoczności chipów. Pokażemy również, jak stosować style warunkowe, aby zmieniać wygląd chipów w zależności od ich stanu.
Rozszerzanie Panelu i Ostatnie Poprawki
Krótko omówimy dodawanie innych elementów, takich jak:
- Czujniki Otwarcia (Kontaktrony) i Rolety: Implementacja jest podobna do czujników ruchu, a kod zostanie udostępniony.
- Inne Urządzenia: Wspomnimy o dodawaniu innych urządzeń inteligentnego domu, takich jak monitory zużycia energii, oczyszczacze powietrza, odkurzacze, telewizory i Xboxy. Chociaż nie będziemy demonstrować każdego z nich osobno, zasady są podobne do świateł, a kod będzie dostępny.
- Śledzenie Wywozu Śmieci: Krótko wspomnimy o użyciu integracji kalendarza i niestandardowych chipów do śledzenia dni wywozu śmieci. Zostanie to szczegółowo omówione w następnej części samouczka.
Odnosimy się również do potencjalnych rozbieżności wizualnych między wyglądem panelu na ekranie komputera i tabletu, upewniając się, że wygląda idealnie na docelowym urządzeniu.
Dostępność Kodu i Podsumowanie
Cały kod użyty w tym samouczku zostanie udostępniony, abyś mógł go skopiować i dostosować do własnych konfiguracji Home Assistant. Zachęcamy do obejrzenia towarzyszącego filmu [link do Twojego filmu tutaj], aby uzyskać pełny obraz procesu.
Mamy nadzieję, że ten samouczek pomógł Ci stworzyć bardziej interaktywny i informacyjny panel Home Assistant. Jeśli masz jakieś pytania, zostaw komentarz poniżej. Bądź na bieżąco z ostatnią częścią tej serii, w której omówimy śledzenie wywozu śmieci i inne zaawansowane opcje dostosowywania.
Opublikuj komentarz