🎨 Mobile & Tablet Dashboard

::: info Filosofia di Design: Una buona dashboard domotica non deve essere un pannello di controllo della NASA. Deve seguire la regola dei 3 secondi: in 3 secondi l’utente deve capire lo stato della casa e poter eseguire l’azione desiderata. :::

1. Strumenti Fondamentali (HACS)

Per superare i limiti grafici della dashboard standard, utilizzeremo componenti della community installabili tramite HACS:

1. Mushroom Cards: Il “Gold Standard” attuale. Icone pulite, design moderno e estremamente facili da configurare.
2. Card Mod: Permette di applicare CSS personalizzato a qualsiasi card per rifiniture millimetriche.
3. Layout Card: Indispensabile per creare viste diverse tra smartphone (verticale) e tablet (orizzontale).

2. Architettura della Dashboard

Dividiamo la UI in tre livelli di priorità:

• Livello 1: Status Header: Informazioni critiche (Persone in casa, Luci accese, Allarme, Meteo).
• Livello 2: Quick Actions: I comandi usati più spesso (Apertura cancello, Scenari luci, Clima).
• Livello 3: Area Detail: Sezioni divise per stanza con controlli granulari.

3. Implementazione con Mushroom Cards

Le card Mushroom offrono un feedback visivo immediato tramite i colori.

Esempio YAML: Chips Card per lo Status

Le “Chips” sono icone minimaliste posizionate in alto per dare informazioni rapide.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.user_name # Stato presenza
  - type: template
    icon: mdi:lightbulb
    content: >
      {{ states.light | selectattr('state','eq','on') | list | count }}
    icon_color: gold # Mostra quante luci sono accese

4. Ottimizzazione Responsive (Mobile vs Tablet)

Un errore comune è usare la stessa visualizzazione per tutti i dispositivi.

• Smartphone: Usiamo una colonna singola con card “slim”. La navigazione deve essere raggiungibile con il pollice (Bottom Navigation Bar).
• Tablet/Wall Mount: Usiamo una griglia multi-colonna. Le informazioni meteo e i consumi energetici possono essere sempre visibili lateralmente (Sidebar Layout).

📉 Gerarchia Visuale (Mermaid)

graph TD
    UI[Main Dashboard] --> HEAD[Header: Chips & Alerts]
    UI --> NAV[Navigation: Room Selector]
    UI --> BODY[Body: Cards Grid]
    
    BODY --> L1[Priority 1: Lighting & Climate]
    BODY --> L2[Priority 2: Media & Entertainment]
    BODY --> L3[Priority 3: Sensors & Logs]
    
    style HEAD fill:#f9f,stroke:#333,stroke-width:2px

🛠️ Best Practices per l’Ingegnere

1. Icone Semantiche: Usa colori coerenti (Giallo = Luce accesa, Blu = Clima attivo, Rosso = Allarme/Pericolo).
2. Haptic Feedback: Se usi l’app mobile, abilita il feedback vibrazione per le azioni critiche.
3. Condizionalità: Usa la conditional card per mostrare i controlli solo quando servono (es. mostra i comandi del condizionatore solo se la temperatura è > 25°C).

Ultimo aggiornamento: {{UPDATE_DATE}} | Tags: #UI #UX #Lovelace #MushroomCards #ResponsiveDesign