Prima di leggere questo articolo, può essere utile seguire le indicazioni fornite nella prima parte di questo tutorial.

Contenuti dell' articolo

UNA PLANIMETRIA INTERATTIVA SU HOME ASSISTANT

Nella prima parte abbiamo visto come disegnare una planimetria con il software gratuito Sweet Home 3D.
Ora sulla stessa inseriremo le nostre entità domotiche utilizzando la scheda Picture Elements Card (Elementi Immagine).

Innanzitutto dobbiamo trasferire il file immagine della nostra planimetria in Home Assistant.
Con il componente aggiuntivo File Editor copiamo nel percorso config/www/ l’ immagine della nostra planimetria ed eventualmente anche delle immagini di stato in formato png, serviranno ad animare le commutazioni dei nostri dispositivi domotici.

Creaiamo una nuova vista in Home Assistant ed inseriamo una scheda Elementi Immagine.
Cancelliamo il codice presente e scriviamo il nostro codice personalizzato.

INSERIAMO LE NOSTRE ENTITA’

Ecco un codice di esempio che ti servirà ad inserire sulla planimetria dei componenti domotici come lampadine, telecamere, dispositivi multimediali di riproduzione.

Sostituisci il nome dell’ immagine FloorPlanTest.jpg con quello da te creato.
Procedi similmente per le immagini di stato immaginelmapadinaspenta.png e immaginelmapadinaaccesa.png.
Inoltre, al posto di la mia lampadina inserisci il nome della tua entità domotica per la luce.
Stesso discorso per la telecamera, il chromecast e il televisore.
Poi posizionali correttamente sulla mappa agendo sui i parametri top, left, rotate.

Ti ricordo che la funzione toggle serve a commutare immediatamente lo stato di un dispositivo.

# Percorso Planimetria e Titolo Card
type: picture-elements
image: local/FloorPlanTest.jpg
title: My Interactive FloorPlan

# Entità Domotiche, Lampadina con Interfaccia di Comando
elements:
  - type: state-icon
    icon: mdi:lightbulb
    entity: la mia lampadina
    style:
      top: 40%
      left: 65%

# Lampadina con commutazione diretta e animazione acceso/spento
  - type: image
    entity: la mia lampadina
    style:
      top: 40%
      left: 30%
      width: 8%
    tap_action:
      action: toggle
    image: local/immaginelmapadinaspenta.png
    state_image:
      'on': local/immaginelampadinaaccesa.png

# Telecamera
  - type: state-icon
    entity: camera.ingresso
    icon: mdi:cctv
    style:
      transform: rotate(180deg)
      top: 85%
      left: 22%

# Chromecast
  - type: state-icon
    entity: media_player.cast
    icon: mdi:cast
    style:
      top: 60%
      left: 50%

# Televisore comandato da un Broadlink (Telecomando IR Remoto)
  - type: state-icon
    entity: media_player.tv_salotto
    icon: mdi:television-box
    style:
      top: 60%
      left: 60%