Il problema
Le “solite” plance 3D hanno spesso delle limitazioni legate alla staticità degli elementi, soprattutto quelle che spesso vengono usate ad esempio sui tablet a muro. Cercherò di spiegare come realizzare una plancia 3D interattiva e realistica dall’effetto WOW assicurato.
Le attuali soluzioni
Le dashboard 3D proposte attualmente in giro per il web, sono delle immagini statiche che vengono sovrapposte l’una sull’altra in base allo stato delle luci. La soluzione che propongo io invece, è un vero oggetto 3D! Ruotabile, spostabile, zoommabile e che mostri i fasci e i colori delle luci in maniera realistica. Rispettando ad esempio le ombre.
I requisiti
Innanzitutto avremo bisogno del software Sweet Home 3D che probabilmente avrete già installato se avete già una plancia 3D “alla vecchia maniera”. Servirà inoltre l’estensione floor3d-card (aka Your Home Digital Twin) installabile da HACS. Ecco un consiglio e i due link:
- Sarebbe utile avere un computer/tablet con prestazioni adeguate. Il progetto funziona anche su un raspberry ma in questo caso potreste dover sopportare degli scatti al posto di una bella fluidità. Io consiglio un mini pc. Se volete potete vedere la mia configurazione hardware ed usare quella. Mi ci sono trovato benissimo.
- Sweet Home 3D
- floor3d-card (aka Your Home Digital Twin) che però basta ricercare nella sezione frontend di HACS ed installarlo
Ricordate soprattutto dopo aver installato floor3d-card di riavviare Home Assistant.
La soluzione – parte 1
La prima parte di questo articolo è brevissima da scrivere per me, ma se non avete già una plancia 3D realizzata con Sweet Home 3D sarà un lavoro mooooooolto lungo per voi. Non ho molto da spiegarvi ma solo da darvi i link ad alcuni video de I pensieri dell’architetto (aka Flavio) che ringrazio dato che sono stati molto utili anche per me. Non dovete per forza guardarli per intero. L’importante è che capiate come usare Sweet Home 3D e riusciate a realizzare un progetto della vostra casa.
Quando realizzerete il vostro progetto c’è però una cosa importante da considerare che non viene detta nei video di Flavio: in ogni stanza dovrete mettere un oggetto fisico da cui far emettere la luce! Io ad esempio ho messo delle lampade da soffitto tonde allargate dove in realtà ci sono dei semplici faretti.
L’obiettivo è aggiungere degli oggetti che siano cliccabili facilmente da voi e dai quali sarà emesso il fascio di luce come nella vita reale. I semplici punti luce messi a disposizione dal programma non vanno bene, perché non posizionano nel progetto un oggetto fisico.
Ecco un esempio dove ho indicato con delle freccie gli elementi a cui mi riferisco:

Quando avrete finito di progettare la vostra casa, in Sweet Home 3D cliccate nel menu “Vista 3D”, poi su “Esporta in formato OBJ” e salvate in una cartella (se dovesse chiedervelo, indicate che volete esportare tutto).
Potrebbero essere creati molti file ma assicuratevi che ci siano almeno il file con estensione .mtl e quello con estensione .obj.
La soluzione – parte 2
Copiate tutti i file che sono stati creati, nella vostra cartella su Home Assistant /config/www. Potete farlo in vari modi (un file alla volta dal file editor, via ssh, con samba…). Nei miei esempi considererò che abbiate copiato i file in /config/www/plancia3d
Una volta terminato, create una nuova plancia di tipo pannello. Per farlo potete serenamente usare la modalità di creazione delle plance da interfaccia utente. La procedura è fattibile ovviamente anche per dashboard yaml ma aggiungerebbe un ulteriore complicazione ad un argomento che potrebbe risultare già ostico per alcuni.
L’unico elemento che dovrete aggiungere è di tipo “Personalizzato: Floor3d Card“.

Si aprirà l’interfaccia per la configurazione della scheda.

Innanzitutto espandete la voce “3D Model” ed impostate:
- come path la posizione della cartella che avete creato tenendo presente che /config/www corrisponde a /local:
nel mio esempio quindi /local/plancia3d - come obj/gib file il nome del file obj: nel mio caso Demo.obj
- come Mtl Wavefront file il nome del file mtl: nel mio caso Demo.mtl
Ecco due piccole immagini che potrebbero aiutare a fugare eventuali dubbi:


Salvate e aspettate il caricamento. Potrebbe volerci tempo e vari ricarichi della pagina “addormentata” se il progetto è grande. Alla fine dovreste già vedere la vostra plancia 3d interattiva e realistica. Tenendo premuto il pulsante del mouse infatti sarà possibile ruotarla a piacimento. Con la rotellina è possibile zoommare e con il tasto destro spostarsi in una direzione nel piano. Provate e divertitevi!
La soluzione – parte 3
Non ci resta che aggiungere le luci associandole agli oggetti che abbiamo messo in fase di progettazione del modello 3D. Per farlo andiamo di nuovo alla configurazione della scheda e apriamo la voce “Entities”.
Per ogni luce dobbiamo sceglierne l’entità dall’elenco a tendina come si fa di solito in Home Assistant. Per aggiungerne altre basta premere il tasto “+” ma per non confonderci proviamo prima ad aggiungerne una soltanto.
Una volta selezionata l’entità di riferimento (ad esempio light.luce_salone) espandiamo la voce “options” scritta in piccolo vicino alla casella di selezione.
Verrà mostrata una nuova riga chiamata “Type and Object”. Apriamola.
Ci saranno mostrate quattro caselle di cui al momento andremo ad utilizzare soltanto “3D Type” e “Object”.
Per quanto riguarda la prima andremo ad impostare “light”. Discorso un po’ più articolato per il valore di “Object”.

Per ottenerlo potremmo dover aprire il pannello dedicato agli sviluppatori che mettono a disposizione i browser. Io ho usato Chrome ma il discorso è identico per Firefox. Premete sulla tastiera il tasto F12 e vi si dovrebbe aprire un pannello con delle informazioni “strane”. Potete aprirlo anche in andando sui tre puntini in alto a destra (intendo quelli del browser, non della plancia di Home Assistant) e cliccare poi su “Altri strumenti” ed infine su “Strumenti per sviluppatori”.
Nella sezione che si aprirà, spostatevi nella scheda “Console”. A questo punto, lasciando il pannello per sviluppatori aperto, andate con il mouse sull’immagine di anteprima della vostra plancia 3D che vedere nella configurazione scheda e fate doppio clic sull’oggetto luminoso (la plafoniera, il lampadario, ecc.) a cui volete associare l’entità luce che avete scelto in precedenza.
Potrebbero accadere due cose o entrambe: viene scritto il nome dell’oggetto su cui avete cliccato nella console. Qualcosa tipo: “Object: 1488” e/o si aprirà una piccola finestra con il nome dell’oggetto cliccato.


Si tratta del nome che Sweet Home 3D ha assegnato all’oggetto nel vostro progetto. Deve essere “materiale” e quindi cliccabile proprio per questo motivo. Le fonti di luce di Sweet Home 3D non sono materiali e quindi cliccabili.
Nel mio esempio il nome dell’oggetto è “1488” ma ovviamente nel vostro caso probabilmente sarà un altro. Inseriamo questo valore nella casella “Object” associata all’entità corrispondente e salviamo.
A questo punto, se tutto è andato per il verso giusto, facendo doppio clic sullo stesso oggetto, la luce si accenderà in casa ma anche nella plancia e viceversa! Il tutto poi, mostrando un fascio di luce realistico!
Conclusioni
Non vi resta che proseguire ed aggiungere le altre luci di casa. Quando avrete finito sarà un piacere far vedere la vostra nuova plancia a parenti ed amici. La reazione di solito è di puro stupore.
Supporto reciproco
La realizzazione di questo articolo ha richiesto tempo, studio ed impegno.
Vi chiedo quindi mettere una mano sul cuore e l’altra sul portafogli per ricompensare il mio sforzo con un contributo libero:
Grazie.
Il download ed un piccolo extra
Per i più volenterosi c’è tutto un mondo da esplorare. Potete cambiare ad esempio la posizione e lo zoom di partenza della plancia, usare luci colorate, e tanto altro. Basta studiare bene il componente indicato nei requisiti.
Se volete invece fare una prova rapida prima di addentrarvi, vi lascio qui i due file che ho utilizzato per questa demo e che hanno generato gli esempi. In cambio non vi chiedo altro che la suddetta donazione per sostenere il mio progetto personale.
Download “Plancia 3D” plancia3d.zip – Scaricato 394 volte – 1,58 MB
Ciao ho provato a seguire il tuo tutorial ma dopo aver caricato il tutto mi dice: “Finished with erros: check the console log” e sul log riporta:”
Logger: frontend.js.latest.202301100
Source: components/system_log/__init__.py:256
First occurred: 09:27:24 (14 occurrences)
Last logged: 09:47:05
http://homeassistant.local:8123/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538151:2186:2502 TypeError: “camera_position” is read-onlyhttp://homeassistant.local:8123/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538151:2186:2502 TypeError: “camera_rotate” is read-onlyhttp://homeassistant.local:8123/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538151:2186:2502 TypeError: “camera_target” is read-onlyhttp://homeassistant.local:8123/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538151:2357:4593 Error:http://homeassistant.local:8123/hacsfiles/floor3d-card/floor3d-card.js?hacstag=361776538151:2357:4587 Uncaught Error
Ciao, prova a ripartire da capo disinstallando anche l’estensione, e a riprovare dopo aver svuotato la cache del browser.
Se sei sicuro che lo yaml che viene fuori è corretto infatti, puoi essere incappato in uno dei problemi che a me si è risolto da solo facendo vari ricarichi della pagina e reinstallazioni.
Assicurati ovviamente di non saltare nulla della guida.
Buongiorno a tutti, Grazie mille a Sax per questo articolo!!
Ho appena implementato questa card ed anch’io sono incappato nel medesimo errore di Bellaudda. Ho ricontrollato di aver copiato tutti i files nella directory corretta, poi mi sono accorto di averne erroneamente trascritto il path e poi i nomi dei due files .obj ed .mtl nella configurazione della card stessa
Una volta eseguite le correzioni, la mia piantina di casa in 3D è apparsa ed è ruotabile e zoomabile a piacere!! Poi aggiungerò il resto.
Una sola domanda per Sax, come si fa a cambiare il perno di rotazione dell’immagine, che ora è fisso in un “angolo” della casa?
Grazie Ciao
Giorgio
Ciao Giorgio, grazie a te per aver condiviso le tue informazioni.
Se ho capito bene cosa mi chiedi, il centro è sempre al centro della posizione visualizzata. Puoi però spostarlo usando il tasto dentro del mouse.
Ti ringrazio infinitamente per la pronta risposta. Ho seguito i tuoi consigli alla lettera ma non ottengo risultati. ti posto il file Yaml che genera automaticamente:
type: custom:floor3d-card
path: /local/casa/
name: Home
objfile: casa.obj
lock_camera: ‘no’
header: ‘yes’
click: ‘no’
overlay: ‘no’
backgroundColor: ‘#aaaaaa’
hideLevelsMenu: ‘no’
globalLightPower: ‘0.8’
shadow: ‘no’
extralightmode: ‘no’
show_axes: ‘no’
sky: ‘no’
overlay_bgcolor: transparent
overlay_fgcolor: black
overlay_alignment: top-left
overlay_width: ’33’
overlay_height: ’20’
north:
x: 0
z: -1
camera_position:
x: 609.3072605703628
‘y’: 905.5330092468828
z: 376.66437610591277
camera_rotate:
x: -1.0930244719682243
‘y’: 0.5200808414019678
z: 0.7648717152512469
camera_target:
x: 37.36890424945437
‘y’: 18.64464320782064
z: -82.55051697031719
object_groups:
– object_group: RoundTable
objects:
– object_id: Round_table_1
– object_id: Round_table_2
– object_id: Round_table_3
– object_group: EntranceDoor
objects:
– object_id: Door_9
– object_id: Door_7
– object_id: Door_5
entities:
– entity: binary_sensor.ac_forno
type3d: door
object_id:
door:
doortype: swing
direction: inner
hinge: Door_3
percentage: ’90’
– entity: binary_sensor.ac_lavastoviglie
type3d: hide
object_id:
hide:
state: ‘off’
– entity: light.shellydimmer2_40f5202e520a
type3d: light
object_id: Bowl_2
light:
lumens: ‘800’
zoom_areas:
– zoom: ”
mtlfile: casa.mtl
Non ho capito perchè mi inserisce delle entità a caso ma, se le elimino, mi carica la piantina, riesco pure a zoomare e a orientarla ma ha una risoluzione davvero pessima.
Prova a leggere il commento di Giorgio. Anche lui aveva delle entità che non dovevano esserci.
ho tolto le entità. Le inserisco a mano. con la prima nessun problema, tutto funziona regolarmente. Non appena aggiungo la seconda mi da ancora l’errore. Mi sta facendo diventar matto!
Lo faceva anche a me. Crea una nuova vista dove aggiungi il codice dove hai più di una entità. A me così ha funzionato
Ti confermo che creando una nuova vista e riportando il codice dalla prima il tutto funziona. Poi magari cercheremo di capire il perchè. Ti ringrazio per la disponibilità e il supporto.
Grazie Sax, non sapevo del tasto dx del mouse!
Per ora non ho ancora inserito entità, ma spero di riuscire a giocarci nel WE.
Vi farò sapere
Grazie ancora
Saluti
Buongiorno, ho provato ad inserire le entità e tutto funziona correttamente
Per trovare il nome degli oggetti da attivare è possibile abilitare la modalità “Edit mode PopUp” nella scheda Appearance della card, così da attivare la finestra di dettaglio direttamente da HA, senza passare dalla modalità sviluppatore del browser.
(occorre copiare il nome intero, in molti casi non appare solo un numero)
Per avere solo l’effetto del doppio clic di comando, a fine configurazione andrà disabilitata.
Ciao Buon divertimento
Esiste un modo per far si che il render abbia una luminosità più bassa per vedere il contrasto tra luce accesa e spenta?
Non saprei ma se trovi qualcosa facci sapere per favore. Grazie
Cercavo da tempo questa card per integrare la mappa creata con sweethome3D e associare le entità. Ho solo il problema di orientare la mappa in modo fisso e poi impostarne il lock. A me pare che le voci camera_position, camera_rotate e camera_target non abbiano effetto, nonostante abbia ottenuto ed impostato le coordinate corrette. Qualcuno ha trovato una soluzione al problema. Grazie per l’howto :).
Ciao e complimenti !! Ho un problema e spero potete aiutarmi, ho seguito la guida e dopo aver compilato la parte “3d model” e salvato vedo il caricamento che scorre fino alla fine ma poi di da questo errore “ Finished with errors: check the console log “ cosa può essere ?
Grazie
Ciao e grazie per i complimenti.
Dal browser, premendo F12 e andando nella scheda “console”, puoi vedere l’errore.
Potrebbe anche essere necessario un semplice riavvio.
Aggiornamento sono riuscito mi è comparsa !!!
Ma è possibile spostarla da come è agganciata
Esempio un po’ più in alto ? Grazie
Sì certo ma ora non ricordo il settaggio da cambiare. Guarda sul sito dell’estensione.
con il tasto destro perfetto !!!
un ultima cosa ho notato che quando clicco sulla plancia e la apro si apre tutta zummata è normale ?
Dipende sempre dalle configurazioni. Sempre che io abbia capito bene cosa intendi.
Prova a giocare un po’ con i settaggi e segui sempre la pagina ufficiale.
Ciao,
complimenti per la guida. anche a me mi da “Finished with errors: check the console log”.
Se clicco F12 ecco il motivo dell’errore:
floor3d-card.js?hacstag=361776538153:2356 Uncaught Error
at floor3d-card.js?hacstag=361776538153:2356:4523
at Object.onLoad (floor3d-card.js?hacstag=361776538153:2231:531795)
at XMLHttpRequest. (floor3d-card.js?hacstag=361776538153:2231:435962)Understand this errorAI
Cannot stringify setting with name: preferred-network-condition, error: Unable to locate ‘Slow 3G’ in UIStrings object
Hai per caso qualche suggerimento?
Grazie mille
Ciao, purtroppo non credo di poterti dare altri suggerimenti oltre quanto già scritto nell’articolo. Mi dispiace.
Cancella tutte le “entities” che trovi sotto il menù “Entities” della floor3d.
Probabilmente il componente “auto-mappa” le tue entità con la casa 3d per facilitarti il compito di assegnarle nel grafico 3D
Non so se possa essere di aiuto, ma ho notato che quando ho configurato la scheda Floor 3D (punto due della guida), vengono configurate in automatico delle entità inesistenti nella sezione “Entites”.
Le ho rimosse e la planimetria è stata caricata correttamente senza errori
Ciao,
scusami una domanda ma ho i sensori sulle porte scorrevoli e vorrei fare in modo che quando la porta è aperte si visualizzi l’immagine della porta a perta mentre quando è chiusa l’immagine della porta chiusa. E’ fattibile come cosa? come poteri fare?
Purtroppo in quella interattiva non puoi. Non senza modificare il codice del componente qualora ne fossi capace (io non mi ci butterei).
Mi dispiace.