In questo post cercheremo di spiegare come possiamo fare un piano della nostra casa e integrarlo in Home Assistant, con l'intenzione di integrare i dispositivi che già abbiamo in Hassio e dare vita all'aereo. È qualcosa di molto attraente e soprattutto visivo, È qualcosa che apprezzeranno a casa, poiché con un'immagine possiamo vedere lo stato della nostra casa e possiamo interagire da essa con i dispositivi che aggiungiamo.

Questo è l'esempio che faremo nel post, Avremo la mappa della nostra casa con informazioni in tempo reale, Vedremo le luci accese, Con le loro ombre, Cosa vediamo in TV, valori di qualsiasi metrica che ci interessa… e possiamo anche interagire con ognuno di loro, Disattiva gli altoparlanti, Alzare o abbassare le tende, Visualizza le telecamere di sicurezza, Lo stato dei nostri impianti, Temperature, Damps, Consumo, persone se ci mettiamo noi stessi…

Innanzitutto, Prima di iniziare sarà il più laborioso, Dovremo fare un piano della nostra casa, la cosa più semplice del mondo sarà usare uno strumento come Sweet Home 3D, Uno strumento gratuito e super intuitivo di cui non spiegheremo l'uso in questo post, poiché con 5 minuti che gli dedichi, sono sicuro che saprai come usarlo e sarai in grado di fare il tuo piano, Ci vorrà del tempo per renderlo bello, Ma questo dipenderà da ognuno di noi il livello di dettaglio che vogliamo. Inizierai disegnando i muri, Quindi aggiungerai i tuoi oggetti che devi lasciare il più vicino possibile alla realtà.

Come aiuto vi lascio il sito web di 3D WareHouse de Sketchup come banca di immagini importabili, che è una buona idea cercare i mobili che abbiamo, Oggetti, Divani, Lampade… E dipende anche da quanto sottile vuoi lasciarlo lo stesso, devi importare alcune texture per renderlo più realistico, per questo ho scritto per usarlo Archivia le texture. Lavoreremo nella vista superiore e in quella inferiore vedremo i risultati come appaiono in 3D, Questa è l'idea, Lascialo il più vicino possibile a casa. Quando hai il piano più o meno finito, L'idea è che dovremo scattare diverse fotografie aeree di ciò che vogliamo vedere, Personalmente, ti consiglio di scattare diverse foto in momenti diversi, da allora possiamo metterli in Home Assistant e che lo scatto generale cambia le ombre del sole a seconda dell'ora in cui si trova, o alla fine del giorno e arriva la notte, Beh, lascia che la casa sia buia. È davvero semplice, Davvero, Spendici qualche minuto e lo risucchierai. Un altro consiglio, Rendi le immagini con la massima qualità possibile, Nel mio caso uso il 1920×1080 Risoluzione in pixel (sia nelle proprietà del documento/disegno, Come quando scatti la foto).

Dopo, con qualsiasi editor di caratteri PhotoShop, o Inkscape (Sorgente aperto) Dovremo fare tutte le immagini di cui avremo bisogno della casa. Spiego il mio esempio, Avere 3 Immagini dell'intero aereo, Uno con la luce del mattino, un altro nel pomeriggio e un altro di notte, Foto scattate alle ore 12, 17H e 22h rispettivamente. Oltre alla foto della notte dovrai scattare un'altra foto, Ma questa volta con tutte le luci accese, Ho qualcosa come:

• planta_baja_manana.png 01/08/2020 alle ore 12
• planta_baja_tarde.png 01/08/2020 ore 17
• planta_baja_noche.png 01/08/2020 a 21:27h
• planta_baja_noche_luz.png 01/08/2020 a 21:27h

E nell'immagine della notte con le luci, Dovremo ritagliare le aree con la luce con questi editor, ad esempio la cucina, La Sala, corsia, Camere… A volte dovremo fare una sfumatura nel caso delle lampade o se abbiamo più luci in una cabina… Le immagini seguenti rimangono (Ripetere, Lui è il mio esempio) in formato PNG con trasparenze:

• hall_luz.png
• lampara_sala_luz.png
• sala_luz.png
• cocina_luz.png
• comedor_luz.png

Non male, Quando abbiamo questa parte pronta, possiamo iniziare con Home Assistant, dove dovremo creare un piano e aggiungere gradualmente tutte le immagini che abbiamo generato. Innanzitutto, La prima cosa che andremo a creare nell'area dei sensori (sensori:), È qualcosa che l'elevazione del sole ci dice, e così possiamo usarlo più tardi quando iniziamo e che lo sfondo dello scatto cambi se è la mattina, Mezzogiorno, nel pomeriggio o di notte, E con questo mettiamo diversi sfondi con le corrispondenti ombre del sole, e scurire l'immagine sempre di più con l'arrivo della notte. Creeremo un sensore, che l'ho chiamato brillo_sol, Vi lascio il codice che inseriremmo nel nostro configuration.yaml:

sensore:
...
  - Piattaforma: Sensori modello:
      brillo_sol:
        friendly_name: "Raggio di sole"
        value_template: >-
          {% se state_attr('sun.sun', 'elevation') > 20  %}
            brillante
          {% Elif state_attr('sun.sun', 'elevation') > 9 %}
            Metà
          {% Elif state_attr('sun.sun', 'elevation') > -3 %}
            Oscuro
          {% altro %}
            nero
          {% Fine %}
...

Ricordati di riavviare Home Assistant in modo che ricarichi il cambio che abbiamo appena inserito (Ogni volta che tocchiamo il file di configurazione, Sai). Finalmente, Possiamo iniziare con la mappa! Avviato!!! Nell'interfaccia utente di Lovelace saremo in grado di creare una scheda manuale. Vi lascio il codice qui sotto come esempio che quello che fa è quello che è stato detto, leggerà dal sensore 'Sunshine’ il tuo stato e dipende da quale stato hai, perché metterà un'immagine di sfondo o un'altra. Esempio della nostra prima carta:

elementi:
  - entità: sensor.brillo_sol immagine: /locale/planta_baja/planta_baja_.png state_image:
      nero: /Locale/planta_baja/planta_baja_noche.png Luminoso: /locale/planta_baja/planta_baja_mediodia.png scuro: /locale/planta_baja/planta_baja_tarde.png medio: /Stile locale/planta_baja/planta_baja_manana.png:
      A sinistra: 50%
      In alto: 50%
      Larghezza: 100%
    tap_action:
      Azione: nessuno tipo: immagine immagine: /tipo locale/planta_baja/planta_baja_tarde.png: Immagini-elementi

Nel caso qualcuno avesse dubbi sul risultato, Ecco cosa otterremo, (Nel mio caso) sono 4 Immagini, quanto segue, E vedi le ombre cambiare, la luce del giorno e l'ultima di notte. Come puoi vedere, dovrai salvare ogni immagine PNG nella directory che crei sulla tua macchina Hassio, Nel mio caso ce l'ho in un container docker, e all'interno avremo creato una cartella e ad esempio copiato le immagini lì con WinSCP.

Non male, Dove andiamo da qui? Aggiungiamo una lampadina?? Che quando viene premuto si accende anche la luce corrispondente, No? Andiamo!!! Qui e qui Hai due immagini che ci saranno di grande aiuto, L'idea è di metterli dove ci interessa, in questo esempio li metteremo al centro della Sala, con il prossimo codice che aggiungiamo alla precedente card Lovelace lo avremo, Certo, ognuno dovrà spostarlo e ridimensionarlo a proprio piacimento, e, naturalmente, selezionare l'identità corrispondente alla luce della sala:

- entità: light.luz_hall state_image:
    'off': /local/planta_baja/liteoff.png
    'on': /Stile locale/planta_baja/lite.png:
    A sinistra: 45%
    In alto: 65%
    Larghezza: 10%
  tap_action:
    Azione: Attiva/disattiva tipo: immagine

E questo sarebbe il risultato, avremmo nella Hall se si guarda una lampadina, che se è spento è un punto rosso, e se ci clicchiamo sopra darà la luce e anche il punto cambierà in verde e con un bel bianco sfocato intorno. Pronto? Noi!

Illuminiamo la cabina, in questo caso la Sala, e che quando la lampadina è accesa, Cambia l'immagine della sala e ne esci illuminato. Sarà anche bello per le lampade utilizzare le immagini degradate con la luce solo fino a quando brillano… Per fare ciò,, Per prima cosa dovremo Scarica questo file e salvarlo nella nostra cartella '/config/www/js/’ e poi dobbiamo aggiungere “Configurazione” > “Pannelli di controllo Lovelace” > ” Risorse”:

URL: /Tipo locale/js/color-lite-card.js: Js[/Codice sorgente]

Ora sì, Possiamo tornare alla nostra carta, e continuare ad alimentarlo. Se ci ricordiamo, all'inizio del post abbiamo indicato che dobbiamo avere ogni stanza con la luce tagliata, Lo aggiungeremmo con il seguente codice alla nostra carta:

- entità: light.luz_hall immagine: /Stile locale/planta_baja/hall_luz.png:
    A sinistra: 50%
    In alto: 50%
    Larghezza: 100%
  tap_action:
    Azione: nessuno tipo: 'custom:color-lite-card'

Se abbiamo una striscia LED, Possiamo mostrare il colore che stai utilizzando in questo momento, nel mio caso vorrei ricordarvi per l'ennesima volta del WLED che sono meravigliosi, Avremo bisogno di un'immagine con l'area illuminata e trasformata solo con il rosso, Come faccio a lasciare questo Il mio esempio rinominato come _color. E con il seguente codice possiamo iniziare a visualizzare la nostra striscia LED integrata nella planimetria.

- color_image: /Entità locale/planta_baja/wled_cocina_color.png: light.wled_cocina immagine: /Stile locale/planta_baja/wled_cocina_normal.png:
    A sinistra: 50%
    In alto: 50%
    Larghezza: 100%
  digitare: 'custom:color-lite-card'

Che altro? Usi Kodi per guardare la TV? Bene, è anche bello poter aggiungere ciò che stai guardando sulla TV o sul muro se hai un proiettore… quindi mostrerà quello che stai vedendo 🙂 La prima cosa sarà Scarica questo file e lascialo come prima, in '/config/www/js/'. E ancora da “Configurazione” > “Pannelli di controllo Lovelace” > ” Risorse” Aggiungere:

URL: /Tipo locale/js/now-playing-card.js: Js[/Codice sorgente]

Ok, ora, per modellare il televisore o la proiezione a parete, Dovremo fare un trapezio, Perché, naturalmente, Ognuno avrà in prospettiva ciò che vuole vedere, e per renderlo più realistico devi realizzare la figura con quello che vedi su Kodi. A tal fine, ha un Strumento di progettazione Cosa vedrai, è una stronzata usarla, basta scaricarlo, Apri il sito web che porta e gioca, Aggiungi il nostro fondo ed estrai rapidamente le misure di cui abbiamo bisogno per ruotarlo o torcerlo. Totale, che sulla nostra carta aggiungeremo l'entità Kodi e metteremo il codice che ha generato l'output di questo meraviglioso strumento, Assomiglieremmo a qualcosa come:

- entità: media_player.kodi_sala stile:
    A sinistra: 64%
    In alto: 11%
    Trasformare: >-
      Ruotare(46.5Deg) ruotareX(29Deg) ruotareY(-38Deg) asimmetrico X(10Deg)
      Inclinazione(-30Deg)
    Larghezza: 8%
  digitare: 'custom:now-playing-poster'

E questo sarebbe il meraviglioso risultato, Certo, se hai un proiettore, puoi anche inserire un file GIF animato che simula la polvere dove viene proiettata… and so on, and so on… Puoi fare cose interessanti. E naturalmente, se modifichi l'azione di ogni oggetto che aggiungiamo alla carta, sarai in grado di interagire con loro.

Bene, e come ultimo, Ma ci sono molte altre cose che si possono fare, ehi! Mettere, vediamo il valore di qualche entità in Home Assistant, Per esempio, se abbiamo sensori di temperatura, Bene, cosa segna, le lauree che faccio, e viene messo in ogni stanza dove abbiamo il termometro… Lo stesso si può fare se stiamo misurando il consumo di un dispositivo, E così quando vediamo la mappa, perché in tempo reale vedremo la temperatura, umidità, consumo… Vabbè! Venire, L'abbiamo aggiunto alla scheda con cui stiamo lavorando, ognuno metterà le proprie entità, Il colore della tua lettera…:

- entità: sensore.0x00158d000444587d_temperature stile:
    colore: arancione font-size: 12px peso del carattere: grassetto a sinistra: 54%
    In alto: 16%
  digitare: etichetta di stato

Bene, ognuno che dona all'immaginazione, ecco una GIF di come tutto questo apparirebbe animato, Spero che ti ispiri e ti aiuti, Grazie mille a tutti coloro che rendono possibile Home Assistant, e tutti coloro che condividono il proprio lavoro su GitHub (tra gli altri). Grazie per la condivisione sui social media!!!