Lovelace Card: Picture-Elements

Lovelace Card: Picture-Elements

   Lovelace    Aprile 5, 2020  |  5

.

Argomento: Lovelace

Livello: Novizio (Novizio,Esperto, Pro)

Difficoltà: Bassa (Bassa, Media, Alta)

Nelle card standard di Lovelace si trova la Picture Elements che è quella più personalizzabile e  versatili di tutte. Si possono inserire immagini, icone e testi sopra ad un’immagine di sfondo, è possono creare effetti visivi in base agli attributi di un’entità o richiamare servizi. 

Una card come questa ispirata alla Picture-Glance ma realizzata con la Picture-Elements può tranquillamente superare le 125 righe di codice.

elements:
### prima icona in basso a destre ###

  - entity: light.gateway_light_7811dc64ed25
    hold_action:
      action: more-info
    style:
      left: 95%
      top: 93%
    tap_action:
      action: toggle
    type: state-icon

### seconda immagine in basso a partire da destra ###

  - entity: light.luce_ingresso
    image: /local/immagini/lovelace/icon/lampada muro.png
    state_filter:
      'off': brightness(100%)
      'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 5px gold)
    style:
      left: 84%
      top: 93%
      width: 6%
    tap_action:
      action: toggle
    type: image

### terza immagine in basso a partire da destra ###

  - entity: light.luce_tv_sala
    image: /local/immagini/lovelace/icon/tv light.png
    state_filter:
      'off': brightness(100%)
      'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 5px gold)
    style:
      left: 73%
      top: 94%
      width: 6%
    tap_action:
      action: toggle
    type: image

### quarta immagine in basso a partire da destra ###

  - entity: light.lampadario_sala
    image: /local/immagini/lovelace/icon/lampadario.png
    state_filter:
      'off': brightness(100%)
      'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 5px gold)
    style:
      left: 62%
      top: 94%
      width: 6%
    tap_action:
      action: toggle
    type: image

### quinta immagine in basso a partire da destra ###

  - entity: light.faretti_divano
    image: /local/immagini/lovelace/icon/divano.png
    state_filter:
      'off': brightness(100%)
      'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 5px gold)
    style:
      left: 51%
      top: 94%
      width: 6%
    tap_action:
      action: toggle
    type: image

### sesta immagine in basso a partire da destra ###

  - entity: light.sala_tavolo
    image: /local/immagini/lovelace/icon/tavolo.png
    state_filter:
      'off': brightness(100%)
      'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 5px gold)
    style:
      left: 40%
      top: 93%
      width: 6%
    tap_action:
      action: toggle
    type: image

### titolo della card ###

  - entity: input_text.vuoto
    prefix: 'Sala '
    style:
      background-color: 'rgba(0, 0, 0, 0.4)'
      bottom: 0
      color: white
      font-size: 16px
      left: 0
      line-height: 30px
      pointer-events: none
      right: 0
      transform: 'translate(0%, 0%)'
    type: state-label

### testo temperatura in alto a destra ###

  - entity: sensor.temperatura_sala
    style:
      background-color: 'rgba(34, 154, 210, 0.5)'
      border-radius: 20px
      color: black
      font-family: Trebuchet MS
      font-size: 100%
      font-weight: bold
      left: 85%
      pointer-events: auto
      right: '-2%'
      text-align: left
      top: 10%
      transform: 'translate(8%,-50%)'
    type: state-label

### secondo testo illuminazione il secondo in alto a destra ###

  - entity: sensor.pir_sala_illuminance
    style:
      background-color: 'rgba(34, 154, 210, 0.5)'
      border-radius: 20px
      color: black
      font-family: Trebuchet MS
      font-size: 100%
      font-weight: bold
      left: 85%
      pointer-events: auto
      right: '-2%'
      text-align: left
      top: 22%
      transform: 'translate(8%,-50%)'
    type: state-label

### icona presenza in alto a sinistra ###

  - entity: binary_sensor.pir_sala
    style:
      background-color: 'rgba(34, 154, 210, 0.5)'
      border-radius: 20px
      left: 0%
      right: 80%
      text-align: right
      top: 10%
    type: state-icon
image: /local/immagini/lovelace/sala2.jpg
type: picture-elements
 

Card Picture-Elements

Partiamo aprendo il menù dell’interfaccia utente di lovelace (i 3 puntini in alto a dx)  e scegliamo Configurare l’interfaccia Utente poi clicchiamo su + in basso a dx e selezioniamo Elementi Immagine.

type: picture-elements
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
elements:
  - type: state-badge
    entity: binary_sensor.0x00158d0001e74ab4_contact
    style:
      top: 32%
      left: 40%

Questa è l’esempio che Home Assistant ci fornirà per questa card, ed è costituita da:

  • type: tipo di card
  • image: percorso dell’immagine di sfondo
  • elements: elementi che costituiranno la card basati sempre su un’entity sotto forma di  badge, icona, immagine, testo

inoltre si possono avere:

  • title: titolo della card

  • state_filter: filtri in base allo stato dell’entità

  • theme: tema applicato alla card

Elements:

Come detto in precedenza la stessa entità in base a come viene dichiarata sul campo elements: viene visualizzata nel seguente modo:

state-badge

state-icon

state-lable

image

service-button

icon

conditional

State-badge

Rappresenta l’entità sotto forma di badge.

Esempio:

  - type: state-badge
    entity: device_traker.lg  
    style:
      left: 84%
      top: 93%
      width: 6%

Variabili

  • type: state-badge
  • entity: nome dell’entità
  • title: titolo
  • tap_action: azione da compiere al click
  • hold_action: azione da compiere al click prolungato
  • double_tap_action: azione da compiere al doppio click
  • style: posizione e stili CSS da applicare
State-icon

Rappresenta l’entità ad icona.

Esempio:

  - type: state-icon
    entity: light.lampadario_sala 
    style:
      left: 84%
      top: 93%
    tap_action:
      action: toggle

Variabili

  • type: state-icon
  • entity: nome dell’entità
  • icon: sostituisce l’icona
  • title: titolo
  • state_color:  impostandolo su false il colore dell’icona non varierà al variare dello stato dell’entità
  • tap_action: azione da compiere al click
  • hold_action: azione da compiere al click prolungato
  • double_tap_action: azione da compiere al doppio click
  • style: posizione e stili CSS da applicare
State-lable

Rappresenta lo stato dell’entità sotto forma di testo.

Esempio:

  - type: state-label
    entity: sensor.temperatura_sala
    style:
      background-color: 'rgba(34, 154, 210, 0.5)'
      border-radius: 20px
      color: black
      font-family: Trebuchet MS
      font-size: 100%
      font-weight: bold
      left: 85%
      pointer-events: auto
      right: '-2%'
      text-align: left
      top: 10%
      transform: 'translate(8%,-50%)'

Variabili

  • type: state-lable
  • entity: nome dell’entità
  • attribute: se presente, verrà mostrato l’attributo corrispondente, anziché lo stato dell’entità
  • prefix: testo prima dello stato dell’entità
  • suffix: testo dopo lo stato dell’entità
  • title: titolo
  • state_color:  impostandolo su false il colore dell’icona non varierà al variare dello stato dell’entità
  • tap_action: azione da compiere al click 
  • hold_action: azione da compiere al click prolungato
  • double_tap_action: azione da compiere al doppio click
  • style: posizione e stili CSS da applicare
Image

Rappresenta lo stato dell’entità sotto forma di una immagine.

Esempio:

 - type: image
   entity: light.lampadario_sala
    image: /local/lovelace/lampadario.png
    state_filter:
      'off': brightness(100%)
      'on': brightness(130%) saturate(1.5)
    style:
      left: 62%
      top: 94%
      width: 6%
    tap_action:
      action: toggle

Variabili:

  • type: image
  • entity: nome dell’entità
  • title: titolo
  • image: il percorso dell’immagine da visualizzare
  • tap_action: azione da compiere al click 
  • hold_action: azione da compiere al click prolungato
  • double_tap_action: azione da compiere al doppio click
  • style: posizione e stili CSS da applicare
  • camera_image: l’entità camera da visualizzare
  • camera_view: mostrerà il video in live se abilitato
  • state_image: specifica un’immagine diversa da visualizzare in base allo stato dell’entità
  • filter: filtri applicati con CSS
  • state_filter: specifica differenti filtri CSS in base allo stato dell’entità
  • aspect_ratio: rapporto altezza/larghezza 
Service-button

Rappresenta un’entità sotto forma di un pulsante con o senza testo all’interno.

Esempio:

  - type: service-button
    title: CALL
    service: light.toggle
    service_data:
      entity_id: light.lampadario_cucina
    style:
      transform: 'translate(50%,0%)'
      right: 50%
      bottom: 50%
      background-color: 'rgba(255, 155, 150, 0.5)'
      border-radius: 10px

Variabili:

  • type: service-button
  • title: titolo
  • image: il percorso dell’immagine da visualizzare
  • service: servizio da richiamare (es. light.toggle)
  • service_data: l’entità a cui applicare il servizio 
  • style: posizione e stili CSS da applicare
Icon

Rappresenta un’entità sotto forma di un pulsante con o senza testo all’interno.

Esempio:

  - type: icon
    entity: light.lampadario_sala
    icon: 'mdi:lamp'
    tap_action:
      action: toggle
    style:
      right: 50%
      top: 30%

Variabili:

  • type: icon
  • icon: icona da visualizzare (link set icone)
  • title: titolo
  • entity: entità da usare per more-info/toggle 
  • tap_action: azione da compiere al click 
  • hold_action: azione da compiere al click prolungato
  • double_tap_action: azione da compiere al doppio click
  • service_data: l’entità a cui applicare il servizio 
  • style: posizione e stili CSS da applicare
Conditional

Rappresenta i vari elementi quando la condizione è soddisfatta.

Esempio:

elements:
  - type: conditional
    conditions:
      - entity: binary_sensor.pir_sala
        state: 'on'
    elements:
      - type: state-icon
        entity: binary_sensor.pir_sala
        style:
          top: 47%
          left: 42%
          background-color: 'rgba(255, 155, 150, 0.5)'
          border-radius: 20px
      - type: state-label
        entity: sensor.pir_sala_illuminance
        suffix: ' lx'
        style:
          top: 57%
          left: 42%
          color: black
          border-radius: 20px
image: /local/lovelace/sfondo.jpg
type: picture-elements

Variabili:

  • type: icon
  • conditions: elenco di entità e di stati corrispondenti
  •    entity: entità
  •    state: quando lo stato dell’entità avrà questo valore
  •    state_not: quando lo stato dell’entità non avrà questo valore
  • elements: uno o più elementi di qualsiasi tipo che verranno mostrate  quando saranno soddisfatte le condizioni

Action

Le azioni tap_action, hold_action e double_action (vedi guida ufficiale) hanno la funzione di far interagire l’oggetto alla pressione singola, doppia o prolungata del mouse.

Esempi:

tap_action:
  action: toggle

ad ogni pressione commuta lo stato dell’entità associata

tap_action:
  action: call-service
  service: switch.toggle
  service_data:
    entity_id: switch.lavastoviglie

Richiamare un servizio (switch.toggle) non all’entità associata all’oggetto ma ad una in particolare (switch.lavastoviglie)

hold_action:
  action: more-info

ad ogni pressione prolungata visualizza le info del’entità associata

double_tap_action:
  action: light.turn_off

ad ogni doppio click viene spenta l’entità light  associata

State_filter

Vengono utilizzati per assegnare un determinato filtro ad un determinato stato dell’entità. 

Esempi:

state_filter:
  off: brightness(100%)
  on: brightness(130%) saturate(1.5)

Quando lo stato dell’entità associata sarà off avrà una luminosità al 100%, quando on sarà più luminosa del 130% e più carico di colore del 150% o 1.5

state_filter:
  carta: hue-rotate(00deg)
  plastica: hue-rotate(160deg) brightness(1.3)
  secco: hue-rotate(20deg) brightness(1.5)
  umido: hue-rotate(00deg) grayscale(50%) brightness(0.4)
  verde: hue-rotate(100deg) brightness(0.3)
  vetro: hue-rotate(100deg) brightness(1.1)

Quando l’entità assumerà quel determinato stato verranno applicati i filtri assegnati.

Filter

I filtri si basano sulle regole degli stili CSS e si applicano non allo stato dell’entità come State_Filter ma all’entità indipendemente dal suo stato sempre se non presente lo State_filter.

Esempi:

image: /local/sala.png
state_image:
  "off": /local/sala_off.png
filter: saturate(.8)
state_filter:
  "on": brightness(120%) saturate(1.2)

All’immagine sala.png viene abbassato la saturità dei colori a 0.8 (1.0 valore normale) ma quando il suo stato è on viene aumentata la luminosità del 120% e la saturazione dei colori di 1.2 

Style

Su Style si applicano appunto gli stili CSS e qui si apre un capitolo molto lungo dato che ne esistono molti. Si possono applicare ad immagini e testi andando a variare e modificare tutto l’aspetto cromatico, ombre, riflessi, ma anche creare dei riquadri, dei bordi, modificarne le dimensioni, la posizione, le proporzioni in tutte le 3 dimensioni oltre ad effetti di movimento.

Anche il valori che può essere assegnato ad uno stile può essere espresso in diversi modi: percentuale %, in pixel px,  in valore  da 0 a 1, in rgb, in rgba, nel nome del colore (white, blak), con una variabile di sistema (var(–primary-text-color)), ecc ecc

Esempi:

left: 2%				posizionamento da sinistra
right: 10%				posizionamento da destra
top: 15%				posizionamento da sopra
bottom: 5%				posizionamento da sotto
width: 6%				dimensioni al 6%
background-color: 'rgba(0, 0, 0, 0.4)'	sfondo nel formato R,G,B, e Opacità 
border-radius: 20px			bordo raggiato
color: black				di colore nero
color: var(--primary-text-color)	di colore uguale alla variabile
font-family: Trebuchet MS		tipo font
font-size: 100%				dimensioni font
font-weight: bold			dimensioni bold
line-height: 30px			interlinea tra righe di testo
opacity: 0.9				opacità
pointer-events: auto			possibilità di inserimento link su testo
text-align: left			allineamento testo
text-shadow: 1px 1px black		ombra testo
transform: 'translate(0%, 0%)'		traslazione di x,y

Conclusioni

Ad oggi, tra le card standard, questa rimane la più personalizzabile, ogni minimo dettaglio può essere controllato, rifinito e sicuramente sarà quella che ci darà più soddisfazione. Ovvio però che non si ha niente per niente: scrivere decine e decine di righe di codice può a primo acchito far prendere paura ma alla fine il codice si ripete.

Argomenti correlati

https://www.home-assistant.io/lovelace/picture-elements/

https://www.w3schools.com/css/default.asp

Sostienici, dona un caffè al nostro sito

5 risposte

  1. Daniele ha detto:
    Aprile 15, 2021 alle 11:39 am

    Buongiorno,
    come faccio a caricare l’immagine della piantina?
    grazie

    Rispondi
    • Giampi ha detto:
      Aprile 15, 2021 alle 5:58 pm

      se hai installato l’addon samba, tramite “explorer” con PC Windows o finder con Mac,
      se hai installato l’addon ssh e web terminal, tramite ad esempio un client come filezilla

      Rispondi
  2. ElleDi ha detto:
    Luglio 18, 2021 alle 9:23 am

    Ciao, a me il nome della stanza non vuole comparire il codice che inserisco è il seguente:
    – entity: input_text.vuoto
    prefix: ‘Studio ‘
    type: state-label
    Niente da fare. Come potrei fare?

    Rispondi
  3. millennium_y2k ha detto:
    Gennaio 20, 2022 alle 12:15 pm

    Ciao, come faccio a cambiare l’immagine in base all’orario?

    ES:
    vorrei impostare 2 immagini, una fino alle 20 di sera, e dopo l’altra..

    type: picture-elements
    image: /local/floorplan/casa-di-notte.png
    image: /local/floorplan/casa-di-giorno.png

    Rispondi

Lascia un commento

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

© 2024 HassioHelp. Created by Nicolò Invernizzi Locknet.eu [DIVIETO DI RIPRODUZIONE].

Advertisment ad adsense adlogger