Vai al contenuto
Home » Plancia 3D interattiva e realistica

Plancia 3D interattiva e realistica

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.

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:

Progetto Sweet Home 3D

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“.

Elementi Personalizzato: Floor3D Card

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

Interfaccia di 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:

File e posizione nell'editor di testo
File e posizione nella configurazione della scheda

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”.

Impostazione delle entities

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.

Finestra con il nome dell'oggetto cliccato
Nome dell'oggetto cliccato in console

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

21 commenti su “Plancia 3D interattiva e realistica”

  1. 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

    1. 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.

      1. 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

        1. 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.

  2. 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.

  3. 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!

      1. 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.

  4. 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

    1. 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

    1. 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 :).

  5. 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

    1. 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.

  6. Aggiornamento sono riuscito mi è comparsa !!!
    Ma è possibile spostarla da come è agganciata
    Esempio un po’ più in alto ? Grazie

        1. 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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *