Dashboard Home Assistant Personalizzate: UI Avanzate e Temi

type: custom:mushroom-light-card
entity: light.soggiorno
use_light_color: true
show_brightness_control: true
layout: horizontal

Esempio Mushroom Chips Card (navigazione rapida):

type: custom:mushroom-chips-card
chips:
  - type: menu
  - type: weather
    entity: weather.casa
  - type: entity
    entity: person.nome
    icon: mdi:face-man
  - type: template
    content: "{{ states('sensor.temperatura_casa') }}°C"
    icon: mdi:thermometer

Le Mushroom Cards brillano quando combinate in vertical-stack per creare sezioni visivamente coerenti.

2. Bubble Card: Interfacce Moderne iOS-Style

Le Bubble Card offrono un design ispirato a iOS con elementi bubble interattivi e animazioni fluide.

Caratteristiche distintive:

• Design bubble con bordi arrotondati

• Animazioni smooth al tap

• Horizontal buttons stack per navigazione

• Rilevamento movimento integrato (PIR sensors)

• Auto-ordering intelligente

Esempio Horizontal Buttons Stack:

type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: Soggiorno
1_icon: mdi:sofa
1_link: '#living-room'
1_entity: light.living_room
1_pir_sensor: binary_sensor.living_room_motion
2_name: Cucina
2_icon: mdi:fridge
2_link: '#kitchen'
2_entity: light.kitchen
2_pir_sensor: binary_sensor.kitchen_motion

Perfette per creare menu di navigazione visivi tra diverse stanze della casa.

3. Ultra Card: Builder Modulare Drag-and-Drop

La Ultra Card è il coltellino svizzero delle custom cards—un builder modulare con editor visuale completo che ti permette di creare card complesse senza scrivere YAML.

Funzionalità avanzate:

• Editor visuale drag-and-drop

• 12+ moduli disponibili (text, icon, image, gauge, graph, ecc.)

• Customizzazione completa colori, font, spaziature, bordi

• Hover effects configurabili

• Layout a colonne/righe flessibile

Ideale per chi vuole massima libertà creativa senza limiti di template predefiniti.

4. Mini Media Player: Controllo Media Avanzato

Sostituisce la card media player standard con un’interfaccia compatta, personalizzabile e ricca di funzionalità.

Features:

• Layout compatto e minimale

• Text-to-Speech (TTS) integrato

• Grouping di più speaker

• Artwork album in background

• Controlli volume/shuffle/repeat

Installazione HACS: Cerca “Mini Media Player” in Frontend

5. Compact Light Card: Controllo Luci Moderno

Card minimalista per controllo luci con colori theme-aware e design pulito.

Caratteristiche:

• Design clean e compatto

• Colori che si adattano automaticamente al tema

• Controllo brightness integrato

• Supporto RGB/temperatura colore

---

Temi Personalizzati: Trasforma l’Aspetto di Home Assistant

I Temi Più Popolari del 2025

1. Liquid Glass Theme

Tema moderno con effetti glass morphism e trasparenze.

Installazione:

1. Scarica da GitHub o HACS

2. Copia in config/themes/liquid-glass.yaml

3. Riavvia Home Assistant

4. Attiva da Profilo → Temi

2. iOS Themes (Dark/Light Mode)

Temi che replicano l’estetica iOS con transizioni fluide tra modalità chiara e scura.​

Caratteristiche:

• Background personalizzabili

• Calcolo automatico colore header basato su background

• Smooth transitions

• Tab colorati

Installazione da HACS: Cerca “iOS Themes”

3. Metrology Theme Pack

Collezione di 8 temi con stili diversi (Metro UI, Neon, etc.) per soddisfare ogni gusto.

---

Creare un Tema Personalizzato: Tutorial Pratico

Vuoi un tema completamente tuo? Ecco come crearlo.

Step 1: Crea file config/themes/mio-tema.yaml

mio-tema:
  # Colori primari
  primary-color: "#1E88E5"
  accent-color: "#FF6F00"
  
  # Background
  primary-background-color: "#121212"
  secondary-background-color: "#1E1E1E"
  
  # Card
  card-background-color: "#1E1E1E"
  
  # Testo
  primary-text-color: "#FFFFFF"
  secondary-text-color: "#B0B0B0"
  disabled-text-color: "#6F6F6F"
  
  # Sidebar
  sidebar-background-color: "#121212"
  sidebar-selected-text-color: "#1E88E5"
  
  # Header
  app-header-background-color: "#1E1E1E"
  app-header-text-color: "#FFFFFF"

Step 2: Aggiungi a configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes/

Step 3: Riavvia e attiva il tema dal profilo.

---

Layout Avanzati: Esempi Pratici

Dashboard Clima Completa

Esempio di dashboard dedicata al controllo clima con Mushroom Cards e grafici.

views:
  - title: Clima
    path: clima
    icon: mdi:thermostat
    type: sections
    sections:
      - type: grid
        cards:
          # Header con temperature attuali
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                content: "🏠 {{ states('sensor.temperatura_casa') }}°C"
              - type: weather
                entity: weather.casa
              - type: template
                content: "💧 {{ states('sensor.umidita_casa') }}%"
          
          # Termostato principale
          - type: custom:mushroom-climate-card
            entity: climate.termostato_principale
            show_temperature_control: true
            hvac_modes:
              - heat
              - 'off'
          
          # Valvole per stanza
          - type: vertical-stack
            cards:
              - type: custom:mushroom-title-card
                title: "Stanze"
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-climate-card
                    entity: climate.radiatore_soggiorno
                    name: Soggiorno
                  - type: custom:mushroom-climate-card
                    entity: climate.radiatore_camera
                    name: Camera
          
          # Grafico temperature
          - type: history-graph
            title: Andamento Temperature
            hours_to_show: 24
            entities:
              - entity: sensor.temperatura_soggiorno
                name: Soggiorno
              - entity: sensor.temperatura_camera
                name: Camera
              - entity: sensor.temperatura_esterna
                name: Esterno

Dashboard Luci con Controlli Rapidi

views:
  - title: Luci
    path: luci
    icon: mdi:lightbulb
    cards:
      # Quick actions chips
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:lightbulb-group
            content: "Tutte ON"
            tap_action:
              action: call-service
              service: light.turn_on
              target:
                entity_id: light.tutte_luci
          - type: template
            icon: mdi:lightbulb-off
            content: "Tutte OFF"
            tap_action:
              action: call-service
              service: light.turn_off
              target:
                entity_id: light.tutte_luci
      
      # Luci per stanza
      - type: custom:mushroom-title-card
        title: "Zone Principali"
      
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            entity: light.soggiorno
            name: Soggiorno
            use_light_color: true
            show_brightness_control: true
          - type: custom:mushroom-light-card
            entity: light.cucina
            name: Cucina
            use_light_color: true
            show_brightness_control: true
      
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            entity: light.camera_letto
            name: Camera
            use_light_color: true
          - type: custom:mushroom-light-card
            entity: light.bagno
            name: Bagno
            use_light_color: true

Ottimizzazione Mobile: Dashboard Responsive

Best Practices per Mobile

1. Usa le Horizontal Stack con Parsimonia
Su mobile, le horizontal-stack con più di 2 card diventano difficili da usare. Preferisci vertical-stack.

2. Chips Card per Navigazione Rapida
Le Mushroom Chips Card sono perfette per menu compatti accessibili con un thumb.

3. Badge Card per Status Rapidi
Mostra stati importanti (porte aperte, finestre, allarme) in card badge compatte.

4. Conditional Card per Ridurre Clutter
Mostra card solo quando rilevanti (es: luce accesa, porta aperta).

Esempio Conditional Card:

type: conditional
conditions:
  - entity: light.camera_bambini
    state: 'on'
card:
  type: custom:mushroom-light-card
  entity: light.camera_bambini
  name: "⚠️ Luce Cameretta Accesa"

Automazioni UI: Rendere la Dashboard Interattiva

Automazione 1: Notifica Badge Finestre Aperte

Mostra badge rosso quando ci sono finestre aperte.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:window-open
    content: "{{ states('sensor.finestre_aperte_count') }}"
    icon_color: "{% if states('sensor.finestre_aperte_count')|int > 0 %}red{% else %}green{% endif %}"
    tap_action:
      action: navigate
      navigation_path: /lovelace/sicurezza

Automazione 2: Cambio Tema Automatico Giorno/Notte

Cambia automaticamente tema in base all’orario.

automation:
  - alias: "UI: Tema Automatico Giorno/Notte"
    trigger:
      - platform: state
        entity_id: sun.sun
        to: 'above_horizon'
      - platform: state
        entity_id: sun.sun
        to: 'below_horizon'
    action:
      - service: frontend.set_theme
        data:
          name: >
            {% if is_state('sun.sun', 'above_horizon') %}
              ios-light-mode
            {% else %}
              ios-dark-mode
            {% endif %}

Errori Comuni da Evitare

1. Sovraccaricare la Dashboard Principale

Troppi elementi rallentano il caricamento e confondono. Crea tab dedicati per categoria (Clima, Luci, Sicurezza, Media).

2. Non Testare su Mobile

Molte dashboard bellissime su desktop sono inutilizzabili su smartphone. Testa sempre in modalità mobile del browser.

3. Dimenticare le Card Conditional

Mostrare sempre tutto crea clutter. Usa conditional card per mostrare solo informazioni rilevanti al momento.

4. Non Usare Custom Button Card per Actions Complesse

Per azioni che richiedono più tap (scene, script con parametri), crea button custom dedicati invece di nascondere tutto in menu.

---

Checklist Implementazione Dashboard Personalizzata

Fase 1: Pianificazione (Giorno 1)

• Elenca le stanze/aree da controllare

• Identifica i dispositivi più usati (priorità)

• Scegli il tema visivo (minimalista, iOS-style, colorato)

• Decidi la struttura tab (Home, Clima, Luci, Sicurezza, Media, ecc.)

Fase 2: Installazione Tools (Giorno 2)

• Installa HACS se non presente

• Installa Mushroom Cards via HACS

• Installa tema preferito (iOS Themes, Liquid Glass, ecc.)

• Installa eventuali custom card aggiuntive (Bubble, Mini Media Player)

Fase 3: Creazione Base (Giorno 3-4)

• Crea nuova dashboard (Settings → Dashboards → Add Dashboard)

• Imposta layout Sections View

• Crea tab principali

• Aggiungi Mushroom Chips Card per navigazione

Fase 4: Popolamento Dashboard (Giorno 5-7)

• Dashboard Home: Weather, Energy, Preferiti

• Dashboard Clima: Termostati, valvole, grafici temperature

• Dashboard Luci: Controlli rapidi + scenes

• Dashboard Sicurezza: Allarme, telecamere, sensori porte/finestre

• Dashboard Media: Media players con Mini Media Player

Fase 5: Ottimizzazione (Settimana 2)

• Testa su mobile e aggiusta layout

• Aggiungi conditional card dove necessario

• Crea automazioni cambio tema automatico

• Aggiungi badge per notifiche visive

• Richiedi feedback a familiari e aggiusta

---

Risorse e Ispirazione

Community e Repository

• r/homeassistant su Reddit: Migliaia di esempi dashboard condivisi

• Home Assistant Community Forum: Thread Mushroom Cards e showcase

• GitHub vdbrink.github.io/homeassistant: Esempi dashboard completi

• YouTube: Canali come “Smart Home Scene” e “Everything Smart Home”

Tool Utili

• HACS: Community Store indispensabile

• Card-Mod: Styling CSS avanzato per custom card

• Layout-Card: Layout ancora più flessibili

• Auto-Entities: Generazione dinamica card basata su pattern

---

La Tua Dashboard, Il Tuo Stile

Una dashboard Home Assistant ben progettata trasforma l’esperienza di controllo della casa intelligente da funzionale a piacevole. Con le Mushroom Cards, i temi personalizzati e i layout avanzati del 2025, hai tutti gli strumenti per creare un’interfaccia unica che riflette le tue necessità e il tuo gusto estetico.

Ricorda i principi chiave:

• Semplicità: Meno è meglio, prioritizza informazioni essenziali

• Coerenza: Usa lo stesso stile di card per un look professionale

• Responsive: Testa sempre su mobile

• Iterazione: La dashboard perfetta si costruisce in settimane, non giorni

Inizia con una dashboard base, aggiungi gradualmente custom card e personalizzazioni, e lascia che la tua creatività ti guidi.