Dashboardy
Ten przewodnik pokazuje jak tworzyć piękne i funkcjonalne dashboardy do sterowania inteligentnym domem opartym na boneIO. Używamy praktycznych przykładów opartych na rzeczywistych konfiguracjach.
Struktura dashboardu
Dobrze zorganizowany dashboard zazwyczaj ma:
- Ekran główny - Szybki dostęp do wszystkich kategorii
- Widoki kategorii - Dedykowane strony dla świateł, rolet, temperatur itp.
- Badges - Szybkie wskaźniki statusu w nagłówku
Ekran główny z kafelkami nawigacyjnymi
Stwórz główny ekran z kafelkami nawigującymi do szczegółowych widoków:
type: grid
columns: 3
square: false
cards:
- type: tile
entity: light.parter
name: Parter
vertical: true
tap_action:
action: navigate
navigation_path: /dashboard/swiatla-parter
- type: tile
entity: light.pietro
name: Piętro
vertical: true
tap_action:
action: navigate
navigation_path: /dashboard/swiatla-pietro
- type: tile
entity: cover.wszystkie_rolety
name: Rolety
vertical: true
tap_action:
action: navigate
navigation_path: /dashboard/roletyUżywając tap_action: navigate zamieniasz kafelki w przyciski nawigacyjne. Stan encji jest nadal widoczny, dając szybki podgląd.
Organizacja świateł według pokoi
Użyj Heading Cards z emoji do wizualnego oddzielenia pokoi:
type: grid
cards:
- type: heading
heading: "🔪 Kuchnia"
heading_style: title
badges:
- type: entity
entity: light.kuchnia_all
tap_action:
action: toggle
- type: tile
entity: light.kuchnia_wyspa
name: Wyspa
tap_action:
action: toggle
- type: tile
entity: light.kuchnia_blat
name: Blat
tap_action:
action: toggleSterowanie światłem z Mushroom Cards
Dla świateł RGB/WLED, Mushroom Light Card zapewnia doskonałą kontrolę:
type: custom:mushroom-light-card
entity: light.wled_salon
name: Taśma LED
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: false
tap_action:
action: toggle
hold_action:
action: more-infoMushroom cards wymaga instalacji HACS. Zainstaluj z: https://github.com/piitaya/lovelace-mushroom
Sterowanie roletami
Proste kafelki rolet
type: tile
entity: cover.salon
name: Salon
vertical: true
features:
- type: cover-open-close
- type: cover-positionRoleta z suwakiem pozycji
Dla precyzyjnej kontroli użyj funkcji pozycji:
type: tile
entity: cover.sypialnia
features:
- type: cover-position
state_content:
- state
- current_positionMonitorowanie temperatury
Mini Graph Card dla historii temperatury
Mini Graph Card jest idealny do pokazywania trendów temperatury:
type: custom:mini-graph-card
entities:
- entity: sensor.temperatura_zewnetrzna
name: Na zewnątrz
color: "#03fc24"
name: Temperatura
hours_to_show: 24
line_width: 3
points: false
show:
fill: fadeMini Graph Card wymaga HACS. Zainstaluj z: https://github.com/kalkih/mini-graph-card
Wiele temperatur na jednym wykresie
type: custom:mini-graph-card
entities:
- entity: sensor.temperatura_salon
name: Salon
color: "#ff6384"
- entity: sensor.temperatura_sypialnia
name: Sypialnia
color: "#36a2eb"
- entity: sensor.temperatura_zewnetrzna
name: Na zewnątrz
color: "#4bc0c0"
name: Temperatury
hours_to_show: 24
line_width: 2
points: falseBadges dla szybkiego statusu
Dodaj badges do nagłówka dashboardu dla informacji na pierwszy rzut oka:
badges:
- type: entity
entity: sensor.temperatura_zewnetrzna
show_name: false
- type: entity
entity: weather.dom
state_content:
- temperature
- state
name: Prognoza
- type: entity
entity: person.jan
show_entity_picture: true
show_name: falseBadge nawigacyjny (przycisk Home)
Dodaj badge z przyciskiem home do powrotu na główny ekran:
badges:
- type: custom:mushroom-template-badge
icon: mdi:home
tap_action:
action: navigate
navigation_path: homeKompletny przykład widoku świateł
Oto kompletny przykład strony świateł zorganizowanej według pokoi:
type: sections
max_columns: 4
sections:
- type: grid
cards:
- type: heading
heading: "🛋️ Salon"
heading_style: title
badges:
- type: entity
entity: light.salon_all
tap_action:
action: toggle
- type: grid
columns: 2
cards:
- type: tile
entity: light.salon_glowne
name: Główne
tap_action:
action: toggle
- type: tile
entity: light.salon_tv
name: TV
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.wled_salon
name: Taśma LED
use_light_color: true
show_brightness_control: true
show_color_control: true
- type: grid
cards:
- type: heading
heading: "🔪 Kuchnia"
heading_style: title
badges:
- type: entity
entity: light.kuchnia_all
tap_action:
action: toggle
- type: tile
entity: light.kuchnia_wyspa
name: Wyspa
tap_action:
action: toggle
- type: tile
entity: light.kuchnia_blat
name: Blat
tap_action:
action: toggle
badges:
- type: custom:mushroom-template-badge
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
- type: entity
entity: light.wszystkie_swiatla
name: Wszystkie
tap_action:
action: togglePolecane custom cards
| Karta | Zastosowanie | Link HACS |
|---|---|---|
| Mushroom Cards | Nowoczesne komponenty UI | piitaya/lovelace-mushroom |
| Mini Graph Card | Wykresy temperatur/czujników | kalkih/mini-graph-card |
| Button Card | Wysoce konfigurowalne przyciski | custom-cards/button-card |
Wskazówki dla użytkowników boneIO
- Grupuj światła według pokoi - Twórz grupy świateł HA dla "wszystkie światła kuchnia", "wszystkie światła salon"
- Używaj zdjęć encji - Dodaj zdjęcia do encji osób dla wizualnej identyfikacji
- Nadawaj przyjazne nazwy - boneIO Black wymusza nazewnictwo entity_id jak
light.blkf8dc18_out_01(aby uniknąć konfliktów gdy masz wiele urządzeń Black). Ustaw przyjazną nazwę wyświetlaną w HA: "Kuchnia Wyspa" - Testuj na telefonie - Większość użycia dashboardu jest na telefonach, projektuj pod dotyk