Spesso in Lovelace, si riscrivono tante righe per lo stesso stile di un oggetto. Attualmente, che io sappia, non c'è la possibilità di richiamare gli stili da un file .css e così ci ritornano utili i "key value" Anchor(&) ed Alias(*).
Ad esempio si può ancorare uno stile iniziale e poi, sovrascrivere in quelli successivi, solo il valore che cambia.
Nel codice seguente riferito al package della raccolta differenziata di Mattia, vediamo come fare:
[php] ### BIDONE UNO ~ SETTAGGI BIDONI ###
- type: conditional
conditions:
- entity: raccolta_hp.bidone_1_hp
state: 'on'
elements:
- type: image
entity: raccolta_hp.nome_bidone_1_hp
image: &immagine_bidone /local/immagini/lovelace/bidone.png
state_filter: &colore_bidone
'secco': hue-rotate(20deg) brightness(1.5)
'umido': hue-rotate(00deg) grayscale(50%) brightness(0.4)
'carta': hue-rotate(00deg)
'plastica': hue-rotate(160deg) brightness(1.3)
'vetro': hue-rotate(100deg) brightness(1.1)
'verde': hue-rotate(100deg) brightness(0.3)
style:
left: 9%
<<: &stile_posizione_bidone
top: 67%
width: 15%
### NOME BIDONE UNO
- type: state-label
entity: raccolta_hp.nome_bidone_1_hp
tap_action:
action: none
hold_action:
action: none
style:
left: 9%
<<: &stile_nome_bidone
color: rgb(180,180,180) #black
font-family: Trebuchet MS
font-size: 90%
font-variant: small-caps
font-weight: bold
#opacity: 0.8
pointer-events: auto
text-align: center
#text-transform: uppercase #capitalize
top: 65%
mix-blend-mode: difference
#background-color: white
border-radius: 10px
#background-size: cover
#height: 20px
### GIORNI RACCOLTA BIDONE UNO
- type: state-label
entity: raccolta_hp.giorni_bidone_1_hp
tap_action:
action: none
hold_action:
action: none
style:
left: 9%
<<: &stile_giorni_raccolta
color: white
opacity: 0.8
font-family: Trebuchet MS
font-size: 75%
font-weight: bold
pointer-events: auto
text-align: center
text-transform: capitalize
top: 95.6%[/php]
[font=Tahoma, Verdana, Arial, sans-serif]Nei successivi bidoni basta inserire:[/font]
[php] ### BIDONE DUE
- type: conditional
conditions:
- entity: raccolta_hp.bidone_2_hp
state: 'on'
elements:
- type: image
entity: raccolta_hp.nome_bidone_2_hp
image: *immagine_bidone
state_filter: *colore_bidone
style:
left: 25%
<<: *stile_posizione_bidone
### NOME BIDONE DUE
- type: state-label
entity: raccolta_hp.nome_bidone_2_hp
tap_action:
action: none
hold_action:
action: none
style:
left: 25%
<<: *stile_nome_bidone
### GIORNI RACCOLTA BIDONE DUE
- type: state-label
entity: raccolta_hp.giorni_bidone_2_hp
tap_action:
action: none
hold_action:
action: none
style:
left: 25%
<<: stile_giorni_raccolta[/php]
In pratica, con il simbolo '[font=Monaco, Consolas, Courier, monospace]&[/font]' (riferimento, ancoraggio) seguito da un nome a scelta ([font=Monaco, Consolas, Courier, monospace]stile_nome_bidone)[/font] , indichiamo al compilatore, che la porzione di codice seguente verrà richiamata successivamente, dal simbolo '' (richiamo, pseudonimo) seguito dal nome dato in precedenza ([font=Monaco, Consolas, Courier, monospace]stile_nome_bidone) [/font]in un altro posto, nello stesso file .yaml (fondamentale che sia lo stesso file, altrimenti non funziona).
Poichè Anchor ed Alias hanno gli stessi valori, ci viene incontro il simbolo '<<:' (Merge Key) che, immesso all'inizio del nuovo codice da ripetere, indicherà che tutto ciò che segue dovrà essere unito, incorporato... sovrascritto al codice iniziale.
Se, invece, il codice non ha cambiamenti, ed è sempre lo stesso, (come detto prima '&' e '' hanno gli stessi valori) basta semplicemente scrivere [font=Monaco, Consolas, Courier, monospace][font=Monaco, Consolas, Courier, monospace]style: [/font]stile_nome_bidone , [/font]risparmiando tempo ed inutili righe nel file.
Con questo semplice esempio, per modificare lo stile di tutte le scritte relative ai nomi dei 6 bidoni, basta farlo solo per il primo, e di conseguenza verrà applicato lo stesso stile per il resto dei bidoni.
