Lovelace Card: Picture-Elements

HassioHelp

Lovelace Card: Picture-Elements

.

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

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.

Lascia un commento

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