Questa è la mia prima guida che scrivo e pubblico quindi vi chiedo di essere clementi! Grazie e Buona lettura!

Supporto

Hey amico! Grazie di essere qui, sostienimi con un paio di birre:

Floor-plan Hassio

Ringrazio lukevink che ha creato questa spettacolare interfaccia. Questo è il link al suo progetto dove ha implementato molte più funzionalità. Vi lascio anche il link sul forum di home assistant per domande e/o problemi. Questa guida seguirà molto quella di lukevink; l'adatterò sulla mia configurazione e cercherò di spiegare al meglio alcuni passaggi che dalla guida di lukevink non si capiscono molto! Un ringraziamento va anche a tutto il gruppo facebook/telegram di HassioHelp per il supporto ricevuto. Qui vi lascio anche il fourm e le guide molto utili!

Hass.io versione 107.7 installata su raspberrypi e in esecuzione su un tablet 10 pollici con Fully Kiosk Browser

Funzionalità

Planimetria 3d interattiva, con possibilità di controllare luci e sensori vari
Vista HomeKit per controllare le prese smart
Data, ora e meteo
Device_tracker dei familiari

ATTENZIONE

Questo non è un progetto per il quale è possibile copiare ed incollare la configurazione, se provi a eseguire la mia configurazione avrai tanti errori. Vi consiglio fortemente di leggere qualche guida di CSS. Poichè la configurazione è basata su picture-elements, e ogni card è progettata con CSS. NB Questo progetto è consigliato per tablet da 10 pollici.

Barra laterale

La barra laterale viene ripetuta su ogni vista nel file lovelace.yaml e include pulsanti per le viste.

Controllo Stanze: controlla tutte le luci i vari sensori, le videocamere, e l'allarme
Controllo Luci: accendi e spegni tutte le luci presenti in "Controllo Stanze"
Dispositivi: controllo dei dispositivi smart al di fuori delle luci prensenti in "Controllo Stanze"(prese smart, ciabatte smart")
Meteo: mostra le previsioni meteo
Persone: mostra i familiari presenti a casa

Hardware

Progettazione della planimetria

Per prima cosa ho progettato la planimetria con SweetHome 3D, vi lascio questa guida sulla realizzazione, ed ho fatto il render di tutte le luci; in che senso? Praticamente dovete creare tante foto quante le luci (N Luci= N foto, una foto per una singola luce accesa). Per il render ho usato queste caratteristiche width: 1900 e height: 1500, qualità migliore e per l'orario 12.30 e 20.30 (20.30 anche per il render delle luci). Alla fine di tutto dovrete avere tot foto per tot luci e in più 2 foto, una di giorno e una di sera. Questo perchè grazie al sensore sun.sun andreamo a visualizzare la piantina in base al sole (con l'alba e il tramonto)

Questa immagine è stata presa dal sito di lukevink, è per solo scopo illustrativio e perchè è ben fatta!

Fatte le foto useremo un altro programma, molto fondamentale per modificare tutte le immagini, Gimp. Vi lascio quest'altra guida. In pratica andiamo a "bucare" o "eliminare" lo sfondo delle immagini e andiamo a ritagliarle in due zone (zona giorno e zona notte) come nelle foto qui sotto:

Per un taglio preciso ed uguale vi consiglio di aprire tutte le foto come livelli su Gimp e ritagliare il primo livello cosi poi da avere lo stesso taglio per i livelli successivi (quella del giorno e della notte non devono essere tagliate). Esportate le immagini con nomi specifici (es: floorplan_salone_1.png; floorplan_bagno.png ecc...). Apriamo un novo file con queste misure 2560x1600 (misure del display del tablet 10 pollici) e anche sidebarBG2.png (barra laterale); posizioniamo quest'ultimo come in foto e questa sarà la base, con l'immagine di notte posizionata al centro della parte bianca rimanente, di tutte le foto che apriremo come livelli.

A questo punto apriamo tutte le foto come livelli e le posizioniamo, con la massima precisione, sopra la piantina di notte (fate questo anche con la piantina di giorno). Dopodichè eliminiamo la barra laterale, eliminiamo nuovamente lo sfondo ed un livello alla volta esportiamo i file cosi da avere le piantine nella posizione corretta per le dimensioni del tablet (salvate anche la piantina di giorno e di notte).

Lovelace

Card

Questi sono i plugin e le integrazioni che ho usato (vi lascio il link del repository):

Card modificate da lukevink (le trovate nella cartella "js"):

Light Slider Card
Buien Rain Card

Codice

In questa parte cercherò di analizarvi il codice passo passo... Abbiate pietà se dovessi sbagliare qualcosa!

custom_header:
  compact_mode: true
  editor_warnigs: false
  exceptions:
    - conditions:
        user: 'Tablet, tablet'
      config:
        hidden_tab_redirect: false
        kiosk_mode: true
    - conditions:
        user_agent: 'Mozilla/5.0 (Android 7.1.2; Tablet; rv:68.0) Gecki/68.0 Firefox/68.0'
      config:
        hidden_tab_redirect: false
        kiosk_mode: true

custom_header serve per impostare il display in kiosk_mode che permette di nascondere la barra laterale e la barra delle pagine di hassio cosi da avere un'inquadratura totale per il tablet. Come potete vedere ho imposta la kiosk_mode solo all'utente tablet ed al user_agent.

- type: 'custom:config-template-card'
  entities:
    - light.bloom_hue                 # STRISCIA LED TV
    - input_boolean.salone_1     # SALONE
    - input_boolean.salone_2     # INGRESSO
    - input_boolean.salone_3     # CORRIDOIO
    - input_boolean.salone_4     # LAMPADA
    - input_boolean.camera_1    # CAMERA MATRIMONIALE
    - input_boolean.camera_2    # BAJOUR SINISTRA
    - input_boolean.camera_3    # BAJOUR DESTRA
    - input_boolean.bagno_1     # BAGNO_1
    - input_boolean.bagno_2     # BAGNO_2
    - input_boolean.cameretta   # CAMERETTA
    - input_boolean.ripostiglio   # RIPOSTIGLIO
    - binary_sensor.porta_contact
    - group.all_entity
    - sensor.cpu_temp
    - sensor.0x00158d000277484c_temperature
    - camera.ingresso
    - camera.salone
  card:
    type: 'custom:hui-picture-elements-card'

config-template-card serve per passare tutte l'entità elencate sotto ai modelli utilizzati nei CSS. La card picture-elements è racchiusa in questa card. Ho usato gli input_boolean perchè mi devono ancora arrivare gli shelly, ma voi potete benissimo mettere o lights o switch a seconda della vostra configurazione.

- action: none
  entity: sun.sun
  hold_action:
    action: none
  state_image:
    above_horizon: /local/floorplan/floorplan/floorplan_day.png
    below_horizon: /local/floorplan/transparent.png
  style:
    height: 100%
    left: 50%
    mix-blend-mode: lighten
    opacity: '${ states[''sensor.sunlight_opacity''].state }'
    top: 50%
    width: 100%
  tap_action:
    action: none
  type: image

Questo è il sensore sun.sun che servirà per aggiungere un livello sopra la piantina di notte e quindi visualizzare la piantina di giorno flooplan_day.png. Con transparent.png quando è sera vedremo floorplan_night.png. L'immagine transparent.png viene utilizzata sui state-image del picture-elements per nascondere gli elementi se non necessari.

- action: none
  entity: input_boolean.salone_1
  hold_action:
    action: none
  image: /local/floorplan/light/floorplan_salone_1.png
  style:
    filter: >-
      ${ "hue-rotate(" + (states['input_boolean.salone_1'].attributes.hs_color
      ? states['input_boolean.salone_1'].attributes.hs_color[0] : 0) + "deg)"}
    left: 50%
    mix-blend-mode: lighten
    opacity: "${states['input_boolean.salone_1'].state === 'on' ?
       (states['input_boolean.salone_1'].attributes.brightness / 255) : '0'}"
    top: 50%
    width: 100%
  tap_action:
    action: none
  type: image

Con questo codice assegniamo all'entita input_boolean.salone_1 l'immagine da far vedere. questo procedimento è da fare con tutte le luci.

style:
  filter: >-
    ${ "hue-rotate(" + (states['input_boolean.salone_1'].attributes.hs_color
    ? states['input_boolean.salone_1'].attributes.hs_color[0] : 0) + "deg)"}

Puoi utilizzare il seguente modello di CSS che regola la rotazione della tonalità sulla tonalità della lampadina per visualizzare una delle tue immagini luminose al colore RGB reale attivo della lampadina. Per visualizzare la luminosità dell'entità:

opacity: "${states['input_boolean.salone_1'].state === 'on' ?
  (states['input_boolean.salone_1'].attributes.brightness / 255) : '0'}"

Per avere più luci sovrapposte l'una sull'altra si esegue il rendering di un'immagine per ogni singola luce e si utilizza il filtro di proprietà CSS mix-blend-mode: lighten. Questo assicurerà che sia mostrata solo la parte "leggera" dell'immagine e si fonderà insieme qualsiasi quantità di immagini in cima.

- entity: light.bloom_hue
  hold_action:
    action: call-service
    service: browser_mod.popup
    service_data:
      card:
        cards:
          - entities:
              - entity: light.bloom_hue
                secondary_info: last-changed
            style:
              z-index: 5
            type: entities
          - cards:
              - cards:
                  - brightness: false
                    color_temp: false
                    entity: light.bloom_hue
                    full_width_sliders: true
                    header: false
                    persist_features: true
                    show_slider_percent: false
                    smooth_color_wheel: true
                    type: 'custom:light-entity-card'
                column_height: 1
                layout: vertical
                type: 'custom:layout-card'
              - entities:
                  - color_temp: true
                    entity: light.bloom_hue
                    header: false
                    persist_features: true
                    type: 'custom:light-slider-card'
               show_header_toggle: false
               style:
                  height: 100%
                  z-index: 0;
               type: entities
            column_num: 2
            layout: horizontal
            max_width:
              - 60%
              - 40%
            type: 'custom:layout-card'
        type: 'custom:vertical-stack-in-card'
      deviceID:
        - this
      style:
        '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
        border-radius: 0.8vw
        opacity: 0.9
      title: Bloom Hue
  icon: 'mdi:led-strip-variant'
  style:
    '--iron-icon-height': 2vw
    '--iron-icon-width': 2vw
    '--paper-item-icon-active-color': '#000000'
    '--paper-item-icon-color': darkgrey
    align-items: center
    background-color: '#FFFFFF'
    border-radius: 100%
    box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
    display: flex
    height: 3vw
    justify-content: center
    left: 50%
    margin-left: '-1.5vw'
    margin-top: '-1.5vw'
    top: 85%
    transform: scale(1)
    width: 3vw
  tap_action:
    action: toggle
  type: state-icon

Qui andiamo a posizionare le icone per le luci con top: e left:. E poi andiamo a creare con browser_mod.popup la finestra popup per gestire i colori e l'intensità luminosa delle lampadine o strisce RGB e per gesitre anche tutti i sensori e le videocamere! Anche questo pezzo di codice andrà duplicato per tutte le luci. Se non avete luci RGB da controllare la configurazione è più semplice:

- entity: input_boolean.salone_1
  icon: 'mdi:ceiling-light'
  style:
    '--iron-icon-height': 2vw
    '--iron-icon-width': 2vw
    '--paper-item-icon-active-color': '#000000'
    '--paper-item-icon-color': darkgrey
    align-items: center
    background-color: '#FFFFFF'
    border-radius: 100%
    box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
    display: flex
    height: 3vw
    justify-content: center
    left: 45.3%
    margin-left: '-1.5vw'
    margin-top: '-1.5vw'
    top: 35.7%
    transform: scale(1)
    width: 3vw
  tap_action:
    action: toggle
  type: state-icon

Dove andremo a posizionare sempre con top: e left: l'icona.

Nel file varie.yaml, che trovate nel repository, ci sono tutti i sensori (data ora e sunlight), i group (degli input) e tutti gli input_boolean che sono presenti all'interno di lovelace.yaml. Basta che li copiate nella vostra configurazione! Oltre a questo dovete seguire la guida browser_mod per aggiungere, sempre nel configuration.yaml, l'id del tablet.

Supporto

Hey amico! Aituami con un paio di:

bootpi/Floorplan

Supporto

Floor-plan Hassio

Funzionalità

ATTENZIONE

Barra laterale

Hardware

Progettazione della planimetria

Lovelace

Card

Codice

Supporto