Plancia 3D interattiva e realistica

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.

• Video 1
• Video 2
• Video 3

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 343 volte – 1,58 MB