Per creare una planimetria interattiva in Home Assistant non serve iniziare con un modello 3D o installare componenti personalizzati. La card integrata Picture Elements permette di usare un’immagine della casa come sfondo e sovrapporre luci, sensori e pulsanti nelle posizioni corrette. È il punto di partenza più semplice per ottenere una dashboard navigabile da smartphone, tablet e PC.
La differenza da chiarire è importante: una planimetria interattiva 2D può funzionare con gli strumenti nativi; una rappresentazione 3D animata, invece, richiede la creazione di immagini o risorse grafiche ulteriori e, a seconda del progetto, componenti di terze parti. Qui costruiamo prima la versione verificabile e facile da mantenere.
Prima di iniziare: immagine, dispositivi e backup
Servono un’installazione di Home Assistant funzionante, almeno una luce o un sensore già configurato e un’immagine della pianta dell’abitazione, preferibilmente PNG o JPG. Verifica gli ID delle entità nelle pagine dei dispositivi: nell’esempio light.soggiorno e sensor.temperatura_soggiorno sono segnaposto da sostituire, non entità create automaticamente.
- Salva una copia della dashboard prima di modificarla, soprattutto se già usata in famiglia.
- Scegli un’immagine leggibile anche su un telefono, senza informazioni personali non necessarie.
- Verifica che le luci rispondano già ai comandi da Home Assistant: la planimetria non risolve un’integrazione offline.
Come aggiungere Picture Elements alla dashboard
- Apri la dashboard in Home Assistant e seleziona la modalità di modifica.
- Se richiesto, conferma il controllo manuale della dashboard: questa operazione modifica il comportamento della dashboard automatica, quindi valuta una dashboard separata.
- Seleziona Aggiungi scheda e cerca Picture Elements (Elementi immagine, secondo lingua e versione).
- Imposta l’immagine di sfondo e aggiungi gli elementi collegati alle entità; la configurazione YAML consente di controllare con precisione la posizione.
- Salva, prova l’interazione e verifica la vista su smartphone.
La documentazione ufficiale di Picture Elements riporta la sintassi aggiornata e gli elementi supportati. Per orientarti nella dashboard puoi consultare anche la guida ufficiale alle dashboard.
Esempio YAML: luce cliccabile e temperatura sulla mappa
Nel codice seguente /local/planimetria.png è il percorso pubblico dell’immagine precedentemente resa disponibile al sistema. Non copiarlo senza aver preparato il file. Le coordinate in percentuale mantengono gli elementi ancorati alla pianta quando cambia la dimensione dello schermo.
type: picture-elements
image: /local/planimetria.png
elements:
- type: state-icon
entity: light.soggiorno
tap_action:
action: toggle
style:
top: 45%
left: 38%
- type: state-label
entity: sensor.temperatura_soggiorno
style:
top: 60%
left: 55%Con un tocco sull’icona della luce invii il comando toggle. La temperatura, invece, viene letta dal sensore associato. Per un impianto reale conviene rinominare chiaramente le entità e testare ogni comando separatamente; le azioni devono rispecchiare le capacità effettive del dispositivo.
Come mostrare stanze illuminate e stati diversi
Oltre alle icone, Picture Elements supporta elementi immagine con state_image, capaci di cambiare grafica in base allo stato di un’entità. Puoi quindi sovrapporre una versione illuminata della stanza quando una luce è accesa. È più laborioso preparare le immagini per ogni zona, ma non serve attribuire capacità 3D alla funzione: si tratta di livelli grafici condizionati dagli stati.
| Obiettivo | Scelta consigliata | Limite da conoscere |
|---|---|---|
| Accendere luci dalla pianta | state-icon con tap_action | Serve un’entità controllabile |
| Leggere temperatura | state-label | La lettura dipende dal sensore |
| Evidenziare stanze accese | image e state_image | Occorrono immagini preparate |
| Planimetria 3D navigabile | Soluzione grafica dedicata | Non è una funzione automatica della card nativa |
Se la planimetria non appare o i pulsanti non funzionano
Immagine assente: verifica URL e accessibilità del file dal browser. Icone fuori posto: ricontrolla coordinate e proporzioni dell’immagine. Tocco senza risposta: controlla l’ID dell’entità, il suo stato e la disponibilità dell’integrazione prima di intervenire sul codice. Dashboard lenta: riduci dimensioni e numero delle immagini, poi prova su un dispositivo mobile.
Se Home Assistant stesso smette di caricarsi dopo un aggiornamento, la diagnosi è diversa: conviene distinguere errori del sistema e configurazione della dashboard. Una planimetria non è la soluzione a un problema del Core o di rete.
Meglio una planimetria 2D o un’interfaccia 3D?
La versione 2D è normalmente preferibile quando vuoi accendere luci, verificare sensori e capire rapidamente cosa accade in casa. Il 3D è un progetto grafico più impegnativo: può essere gradevole su un tablet fisso, ma non migliora necessariamente la rapidità d’uso. Parti da due o tre entità, misura la leggibilità su mobile e aggiungi livelli grafici solo quando portano un vantaggio concreto.
Fonti tecniche: Home Assistant — Picture Elements; Home Assistant Contributors — linee guida della card. La procedura descrive funzionalità documentate, non un test effettuato su un impianto domestico specifico.
Entra nella conversazione
Condividi il tuo punto di vista: non serve creare un account. I contributi restano soggetti alla moderazione editoriale.