O NasBlogKontakt

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:

  1. Ekran główny - Szybki dostęp do wszystkich kategorii
  2. Widoki kategorii - Dedykowane strony dla świateł, rolet, temperatur itp.
  3. 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/rolety

Uż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: toggle

Sterowanie ś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-info

Mushroom 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-position

Roleta z suwakiem pozycji

Dla precyzyjnej kontroli użyj funkcji pozycji:

type: tile
entity: cover.sypialnia
features:
  - type: cover-position
state_content:
  - state
  - current_position

Monitorowanie 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: fade

Mini 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: false

Badges 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: false

Badge 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: home

Kompletny 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: toggle

Polecane custom cards

KartaZastosowanieLink HACS
Mushroom CardsNowoczesne komponenty UIpiitaya/lovelace-mushroom
Mini Graph CardWykresy temperatur/czujnikówkalkih/mini-graph-card
Button CardWysoce konfigurowalne przyciskicustom-cards/button-card

Wskazówki dla użytkowników boneIO

  1. Grupuj światła według pokoi - Twórz grupy świateł HA dla "wszystkie światła kuchnia", "wszystkie światła salon"
  2. Używaj zdjęć encji - Dodaj zdjęcia do encji osób dla wizualnej identyfikacji
  3. 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"
  4. Testuj na telefonie - Większość użycia dashboardu jest na telefonach, projektuj pod dotyk