Nella prima parte abbiamo visto come organizzare il codice YAML per ottenere una struttura della plancia ben organizzata e facile da manutenere, grazie alla separazione dei contenuti in diverse sezioni del layout: Header, Body e Footer.
Ora iniziamo a fare sul serio e passiamo alla parte più divertente: vediamo come sviluppare al meglio ogni sezione del layout, e come avere totale controllo sul posizionamento delle nostre Card.
Per una migliore comprensione dell’argomento, se non lo avessi già fatto, ti consiglio vivamente di leggere la prima parte prima di proseguire con questo articolo.
ELENCO DEGLI ARGOMENTI
- Le dimensioni di una vista
- Prepariamo l’ambiente
- Lo sviluppo della plancia
- Materiale da scaricare
- Considerazioni finali
Le dimensioni (larghezza e altezza) di una vista
La volta scorsa abbiamo costruito insieme lo scheletro di una plancia di esempio con due viste. Nelle viste abbiamo attivato l’opzione Pannello e usato come Card principale una vertical-stack, per sviluppare poi all’interno un layout diviso logicamente in sezioni.
La modalità Pannello renderizza la sua Card principale occupando tutta la larghezza messa a disposizione dal dispositivo utilizzato. Di conseguenza, anche tutte le card all’interno avranno lo stesso comportamento.
Questo è ottimo per noi, perché ci consente di sfruttare (senza particolari salti mortali) tutta la larghezza del tablet per organizzare il layout.
Per l’altezza (o la lunghezza, come preferisci) il discorso è diverso.
Lovelace (modulo di Frontend di Home Assistant) recepisce le nostre indicazioni, le interpreta e genera un codice HTML che poi viene decodificato dal nostro browser come una normalissima pagina Web.
Le pagine Web hanno una larghezza fissa, oppure dinamica (responsive design) in base alla risoluzione del browser, ma non hanno un’altezza definita in partenza, normalmente. Normalmente perchè lo sviluppatore può, se vuole, definire un’altezza fissa, ma sono rari casi specifici.
L’altezza di una pagina web è determinata dai contenuti, di fatto rappresenta la somma delle altezze di ogni “riga” della pagina. Più è alta una pagina e più sarà ampia la possibilità di scroll all’interno della stessa.
Le viste di Lovelace si comportano esattamente nello stesso modo, mi spiego meglio.
Il nostro layout è costruito dentro una vertical-stack. Questo significa che ogni nuova card viene posizionata sotto la precedente, sviluppando, appunto, un layout verticale.
Mi aiuto con un semplice esempio.
Ipotizziamo una vista in modalità Pannello dove dentro alla vertical-stack principale posizioniamo tre card di tipo button, una sotto l’altra.
- title: TEST
path: test
panel: true
cards:
- type: vertical-stack
cards:
- type: button
name: HEADER
- type: button
name: BODY
- type: button
name: FOOTER
Il risultato è il seguente: stiamo usando solo parzialmente la superficie dello schermo e il Footer è posizionato senza alcun senso.
Se invece aggiungessimo Card senza considerare l’altezza del layout disponibile, otterremmo una vista consultabile per intero solo scrollando la pagina.
E questa, a mio parere, è una situazione assolutamente da evitare per una plancia da Tablet, molto meglio avere a disposizione un pannello fisso.
Tutto questo per dire che cosa?
Semplicemente per chiarire che le sezioni del layout (Header, Body e Footer) sono solo degli elementi logici che ci permettono di organizzare le card nella vista, ma tocca a noi dimensionarle correttamente per ottenere un layout ordinato e senza possibilità di scroll.
Tra poco lo vedremo.
Prepariamo l’ambiente
Un modo per partire con il piede giusto è sicuramente quello di prepararci, fin da subito, un ambiente di sviluppo che ci faccia vedere esattamente quello che succede sul tablet e che ci consenta di analizzare il codice CSS della pagina.
Ecco le due cose che faremo.
- Creiamo un utente dedicato al tablet e togliamo la sidebar
- Impostiamo il browser Chrome del PC come ambiente virtuale
Via la sidebar, ma prima l’utente
Su Home Assistant possiamo associare una plancia di default ad un utente, sfruttiamo questa opportunità per creare un utente dedicato al tablet con la sidebar non visibile.
Vai su Impostazioni -> Utenti e crea un nuovo utente chiamato tablet, senza privilegi da amministratore.
Ora, dal tablet, vai nella scheda del profilo e disconnetti l’utente che stai usando, poi esegui un nuovo login con l’utente appena creato.
Bene, ora sei loggato su Home Assistant con l’utente tablet.
Torna alla scheda profilo e imposta la plancia Tablet in modo che venga caricata di default.
Ora ti dovresti trovare in questa situazione, con una sidebar visibile e senza le opzioni da amministratore.
Per nascondere la sidebar usiamo Kiosk Mode, un custom component che puoi installare via HACS.
Kiosk Mode offre diverse funzionalità che puoi approfondire nel suo repository GitHub, per il nostro scopo ci basta inserire questo codice in testa al file di configurazione principale della plancia.
kiosk_mode:
user_settings:
- users:
- tablet
hide_sidebar: true
Salva il file modificato e aggiorna la plancia con i 3 puntini in alto a destra. Infine, ricarica la pagina del browser.
Se tutto è andato per il verso giusto ora la sidebar laterale dovrebbe essere sparita.
Impostiamo Chrome del PC come Tablet virtuale
Per i motivi descritti nel capitolo precedente (ma non solo), è molto importante vedere in tempo reale come reagisce la plancia man mano che configuriamo il layout con le card.
Ovviamente la via più semplice è quella di avere il tablet vicino mentre si lavora e aggiornare ogni volta la visualizzazione della plancia. A volte questo però, per un motivo qualsiasi, potrebbe non essere possibile.
In questo caso possiamo creare un pannello virtuale sul PC con la stessa risoluzione del tablet, in modo da avere una rappresentazione della plancia precisa al pixel.
Usiamo gli strumenti per sviluppatori del browser Google Chrome.
Questi strumenti sono complessi e fanno un sacco di cose, a noi adesso interessa la parte di simulazione di un device dove andiamo a configurare le dimensioni dello schermo del tablet in possesso.
Apri gli strumenti di Chrome dai 3 puntini in alto a destra e poi Altri strumenti >> Strumenti per sviluppatori.
Vai nelle impostazioni con l’icona ad ingranaggio nella barra superiore degli strumenti.
(1) Seleziona il tab Devices.
(2) Clicca sul pulsante Add custom device.
(3) Assegna un nome al Device (es. Tablet HA) e inserisci le dimensioni dello schermo.
Attenzione!!
La dimensione dello schermo non sempre corrisponde alla risoluzione nativa del tuo Tablet.
Per conoscere esattamente larghezza e altezza da impostare su Chrome naviga dal Tablet a questo indirizzo e usa i valori che ti mostra nel box evidenziato qui sotto.
Ora clicca su Add per creare il device e chiudi la finestra delle impostazioni.
Vai alla URL di Home Assistant e apri la plancia da simulare.
Entra in modalità simulazione device con l’icona indicata qui sotto.
Seleziona il tablet tra i devices e, se necessario, correggi la percentuale di zoom per vedere la plancia correttamente.
Bene, ora dovresti vedere nel tuo PC un pannello virtuale del Tablet da usare come anteprima durante lo sviluppo della plancia.
Io, francamente, questa modalità la trovo più pratica rispetto ad usare il tablet direttamente.
Lo sviluppo della plancia
Se lo scroll annoiato e compulsivo non si è impossessato di te e hai seguito con attenzione fin qui, ora dovresti aver chiaro come realizzare e posizionare correttamente le sezioni nel layout, e dovresti anche avere un ambiente ben configurato per iniziare a sviluppare le card della plancia.
E allora sviluppiamo.
E’ superfluo dire che ognuno di noi ha idee ed esigenze diverse, per cui ovviamente sei libero di progettare il layout come meglio credi. Qui provo a descrivere anche i ragionamenti che ci sono dietro sperando possano essere un’utile fonte di ispirazione.
Vediamo quali sono i criteri che hanno indirizzato le mie scelte e una serie di consigli generali su come impostare, sezione per sezione, la creazione delle card.
Lo sviluppo della plancia lo faremo editando i vari file YAML che rappresentano le diversi sezioni del layout e usando i template di button-card, secondo quanto già descritto nei dettagli nella prima parte di questa “guida”.
Dopo aver salvato le modifiche nei file YAML di configurazione è necessario sempre aggiornare la plancia per vedere il risultato sullo schermo.
Per aggiornare la plancia fai click sui 3 puntini in alto a destra e poi su Aggiorna.
Header
Quando ho iniziato a progettare il layout con una struttura di questo tipo, avevo ben chiaro in mente quale doveva essere il ruolo di una sezione Header: mostrare informazioni rilevanti in una vista Home generica …
… oppure fornire un pannello comandi principale in relazione alla tematica della vista (in questo caso Luci).
Nell’Header di una vista, tipicamente, non abbiamo bisogno di incolonnare card una sopra l’altra, ci basta usare una horizontal-stack per organizzarle dentro una riga, una accanto all’altra, e definire un’altezza fissa che sia proporzionata alla dimensione totale dello schermo da gestire.
Per la mia plancia ho definito un’altezza di 100px per l’header della vista Home, e di 60px per le header delle altre viste tematiche.
Vediamo come ho costruito la sezione Header delle mia vista Home.
Qui dentro puoi vedere il codice completo del mio file header.yaml, relativo alla vista Home.
File header.yaml
type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: person.max
name: Max
template: sensor_person
- type: 'custom:button-card'
entity: person.ele
name: Elena
template: sensor_person
- type: 'custom:button-card'
entity: sensor.time
layout: vertical
template: no_background
label: "[[[ return states['sensor.dark_sky_hourly_summary_tmpl'].state; ]]]"
name: "[[[ return states['sensor.pretty_date'].state; ]]]"
show_icon: false
show_label: true
show_name: true
show_state: true
styles:
card:
- height: 100px
state:
- font-size: 200%
- font-weight: bold
- justify-self: center
label:
- justify-self: center
- font-size: 90%
- color: var(--paper-item-icon-active-color)
name:
- justify-self: center
- font-size: 120%
tap_action:
action: none
- type: horizontal-stack
cards:
- type: glance
style:|
:host {
height: 100px;
}
entities:
- entity: binary_sensor.pve_ubuntu_server_running
name: SERVER
- entity: binary_sensor.internet_status
name: INTERNET
- entity: binary_sensor.ups_status
name: UPS
show_state: false
- type: 'custom:button-card'
entity: sensor.cpu_temperature
show_icon: false
show_state: true
name: CPU
state_display: '[[[ return entity.state + "°" ]]]'
styles:
card:
- width: 100px
- height: 100px
name:
- font-size: 14px
- margin-bottom: 15px
state:
- font-size: 120%
- font-weight: bold
Analizziamo meglio il codice del file header.yaml per capire come si sviluppano le card all’interno.
In testa abbiamo una horizontal-stack con tre card all’interno, in questo modo otteniamo una riga divisa in tre colonne della stessa larghezza.
type: horizontal-stack cards: - CARD 1 - CARD 2 - CARD 3
Nella prima colonna è configurata un’altra horizontal-stack per dividere ancora lo spazio a disposizione, con all’interno due card che usano il template button card sensor_person.
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: person.max
name: Max
template: sensor_person
variables:
battery_entity: sensor.battery_cell_max
- type: 'custom:button-card'
entity: person.ele
name: Elena
template: sensor_person
variables:
battery_entity: sensor.battery_cell_ele
Poi al centro una button-card composta da diversi elementi per mostrare data, ora e previsione meteo del giorno.
- type: 'custom:button-card'
entity: sensor.time
layout: vertical
template: no_background
label: "[[[ return states['sensor.dark_sky_hourly_summary_tmpl'].state; ]]]"
name: "[[[ return states['sensor.pretty_date'].state; ]]]"
show_icon: false
show_label: true
show_name: true
show_state: true
styles:
card:
- height: 100px
state:
- font-size: 200%
- font-weight: bold
- justify-self: center
label:
- justify-self: center
- font-size: 90%
- color: var(--paper-item-icon-active-color)
name:
- justify-self: center
- font-size: 120%
tap_action:
action: none
In questo caso si tratta di una card che non sarà riutilizzata nella plancia, quindi usare un template di button card non porterebbe alcun vantaggio.
Infine, l’ultima colonna con alcuni sensori. Anche qui è presente una horizontal-stack per distribuire le card all’interno: una card Glance standard di Lovelace e una button-card custom.
- type: horizontal-stack
cards:
- type: glance
style:|
:host {
height: 100px;
}
entities:
- entity: binary_sensor.pve_ubuntu_server_running
name: SERVER
- entity: binary_sensor.internet_status
name: INTERNET
- entity: binary_sensor.ups_status
name: UPS
show_state: false
- type: 'custom:button-card'
entity: sensor.cpu_temperature
show_icon: false
show_state: true
name: CPU
state_display: '[[[ return entity.state + "°" ]]]'
styles:
card:
- width: 100px
- height: 100px
name:
- font-size: 14px
- margin-bottom: 15px
state:
- font-size: 120%
- font-weight: bold
Da notare come ogni card è configurata per avere un’altezza pari a 100px, in modo da avere una Header omogenea e dimensionata correttamente.
Body
Il Body è il cuore pulsante della vista. E’ qui che si concretizzano le idee della plancia che abbiamo in mente.
Io l’ho pensata sin dall’inizio come una pulsantiera, un pannello comandi che aiutasse nelle abitudini di casa, nelle azioni frequenti. Ma anche una plancia pensata per essere un pannello informativo, ad esempio, è un’ottima idea. Si tratta di interpretazioni personali e la struttura di base consente di realizzare quello che vuoi.
Indipendentemente dalle scelte personali qualche consiglio rimane sempre valido.
Abbiamo a disposizione gran parte dello schermo e lo possiamo dividere in colonne, come visto nella prima parte.
Io ho scelto di usare tre colonne nella vista Home in modo da poter organizzare e dividere i contenuti secondo la tematica di appartenenza, e invece due colonne per le altre viste focalizzate su un argomento specifico.
Nell’header abbiamo usato una horizontal-stack per sviluppare una riga. Ora, invece, dobbiamo sviluppare una colonna quindi usiamo una vertical-stack per ogni colonna del Body.
Vediamo nel dettaglio la prima colonna della mia vista Home, configurata nel file body_col_1.yaml della directory home.
Qui sotto il codice completo della colonna.
File body_col_1.yaml
type: vertical-stack
cards:
- type: 'custom:button-card'
name: LUCI
template: label_center
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: sensor.luci_accese
icon: 'mdi:lightbulb-group-outline'
name: LUCI ACCESE
template:
- sensor_card
- action_state_numeric
styles:
card:
- height: 60px
- type: 'custom:button-card'
name: SPEGNI
entity: group.luci_all
template:
- button_horizontal
- action_turn_off
styles:
card:
- height: 60px
- type: 'custom:button-card'
template: row_space_5
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: scene.salotto_brillante
icon: 'phu:archetypesFloorShade'
template:
- button_text_label
- action_turn_scene
name: Sala
label: GIORNO
- type: 'custom:button-card'
entity: scene.salotto_relax
icon: 'phu:presetsDimmerDimdown'
template:
- button_text_label
- action_turn_scene
name: Sala
label: RELAX
- type: 'custom:button-card'
entity: scene.salotto_luce_tv
icon: 'phu:presetsNightlight'
template:
- button_text_label
- action_turn_scene
name: Sala
label: SERA
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: scene.salotto_tutto
icon: 'phu:routinesDaytime'
template:
- button_text_label
- action_turn_scene
name: Sala
label: TUTTO
- type: 'custom:button-card'
entity: scene.scala_cortesia
icon: 'phu:tabbarAutomation'
template:
- button_text_label
- action_turn_scene
name: Scala
label: CORTESIA
- type: 'custom:button-card'
name: SALA
entity: group.luci_salotto
template:
- button_horizontal
- action_turn_off
styles:
card:
- height: 100%
- type: 'custom:button-card'
template: row_space_5
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: light.tavolo
icon: 'phu:bulbsClassic'
color: auto-no-temperature
template:
- button_light
- type: 'custom:button-card'
entity: light.faretti_sala
icon: 'phu:bulbsClassic'
name: Faretti
template:
- button_light
- type: 'custom:button-card'
entity: light.terrazzo_salotto
icon: 'phu:bulbsClassic'
name: Terrazzo
template:
- button_light
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: light.scala
icon: 'phu:bulbsClassic'
color: auto-no-temperature
template:
- button_light
- type: 'custom:button-card'
entity: light.studio
icon: 'phu:bulbsClassic'
color: auto-no-temperature
template:
- button_light
- type: 'custom:button-card'
entity: light.bagno_sotto
name: Bagno
icon: 'phu:bulbsClassic'
color: auto-no-temperature
template:
- button_light
In testa troviamo una vertical-stack che fa da contenitore principale. All’interno, poi, una sotto l’altra, alcune card che sviluppano la colonna.
type: vertical-stack cards: - CARD 1 - CARD 2 - ......
I pulsanti della colonna sono raggruppati per riga con alcune semplici horizontal-stack, ad esempio questa con l’attivazione di alcune scene:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: scene.salotto_brillante
icon: 'phu:archetypesFloorShade'
template:
- button_text_label
- action_turn_scene
name: Sala
label: GIORNO
- type: 'custom:button-card'
entity: scene.salotto_relax
icon: 'phu:presetsDimmerDimdown'
template:
- button_text_label
- action_turn_scene
name: Sala
label: RELAX
- type: 'custom:button-card'
entity: scene.salotto_luce_tv
icon: 'phu:presetsNightlight'
template:
- button_text_label
- action_turn_scene
name: Sala
label: SERA
Poi vale la pena spendere due parole su altre card utilizzate e utili in diversi contesti.
La prima card della colonna è una button-card con il template label_center, pensato per creare una sorta di intestazione senza sfondo e senza reazioni al tap.
## BUTTON CARD ##
- type: 'custom:button-card'
name: LUCI
template: label_center
## TEMPLATE ##
label_center:
styles:
card:
- padding: 5px 5px
name:
- justify-self: center
- font-size: 120%
- color: var(--secondary-text-color)
template: no_background
tap_action:
action: none
Infine, una card per separare leggermente i blocchi di card simili tra loro.
Usiamo il template row_space_5 (una card vuota alta 5px).
## BUTTON CARD ##
- type: 'custom:button-card'
template: row_space_5
## TEMPLATE ##
row_space_5:
template: no_background
styles:
card:
- height: 5px
- padding: 0px
Footer
La prima considerazione da fare sul Footer è che se non ti piace, o non ti serve, lo puoi escludere dal layout senza problemi ed estendere il Body per tutto lo spazio disponibile sullo schermo.
E’ sufficiente rimuovere la configurazione del footer e della riga separatore sopra (codice evidenziato) dal file principale di configurazione della plancia:
- title: HOME
path: home
panel: true
cards:
- type: 'custom:mod-card'
style:
hui-vertical-stack-card$:|
#root {
margin: 15px !important;
}
card:
type: vertical-stack
cards:
- !include demo/home/header.yaml
- type: 'custom:button-card'
template: row_space_10
- type: horizontal-stack
cards:
- !include demo/home/body_col_1.yaml
- !include demo/home/body_col_2.yaml
- !include demo/home/body_col_3.yaml
- type: 'custom:button-card'
template: empty_card
styles:
card:
- height: 10px
- !include demo/home/footer.yaml
Nella mia interpretazione il Footer funziona sostanzialmente da menù di navigazione nella Home e come utility nelle viste tematiche.
Su come sviluppare il Footer non c’è molto da dire, valgono gli stessi consigli della sezione Header.
Usiamo una horizontal-stack in testa e poi configuriamo le card all’interno.
type: horizontal-stack
cards:
- type: 'custom:button-card'
template: button_menu
name: LUCI
tap_action:
action: navigate
navigation_path: /lovelace-tablet/luci
- type: 'custom:button-card'
template: button_menu
name: TV
tap_action:
action: navigate
navigation_path: /lovelace-tablet/tv
- type: 'custom:button-card'
template: button_menu
name: MUSICA
tap_action:
action: navigate
navigation_path: /lovelace-tablet/musica
- type: 'custom:button-card'
template: button_menu
name: MEDIA
tap_action:
action: navigate
navigation_path: /lovelace-tablet/media
- type: 'custom:button-card'
template: button_menu
name: SISTEMA
- type: 'custom:button-card'
template: button_menu
name: TABLET
Invece c’è qualcosa da dire sul suo posizionamento nel layout.
Alla luce di quanto detto nel primo capitolo di questo articolo (le dimensioni di una vista), tecnicamente non è possibile posizionare il Footer secondo “coordinate” precise, tipo come si fa con Top e Left in una picture-elements.
La sua posizione è determinata dall’altezza del separatore tra Body e Footer.
Se non ti è chiaro il concetto di separazione tra le sezioni del layout ti consiglio una rilettura di questo capitolo della prima parte.
In pratica, una volta completato lo sviluppo del Body, dobbiamo fare dei tentativi e settare correttamente l’altezza della card separatore tra Body e Footer, in modo da “spingere” il Footer in basso nello schermo quel che basta per non far scrollare la pagina.
Lo facciamo aggiustando l’opzione height della card separatore nel file di configurazione della plancia.
In questo caso è stato sufficiente impostare un’altezza di 10 pixel per posizionare il Footer correttamente.
- title: HOME
path: home
panel: true
cards:
- type: 'custom:mod-card'
style:
hui-vertical-stack-card$:|
#root {
margin: 15px !important;
}
card:
type: vertical-stack
cards:
- !include demo/home/header.yaml
- type: 'custom:button-card'
template: row_space_10
- type: horizontal-stack
cards:
- !include demo/home/body_col_1.yaml
- !include demo/home/body_col_2.yaml
- !include demo/home/body_col_3.yaml
- type: 'custom:button-card'
template: empty_card
styles:
card:
- height: 10px
- !include demo/home/footer.yaml
Materiale da scaricare
Ti lascio il codice completo delle viste Home e Luci che abbiamo visto negli screen e il mio file con tutti i template di button card che uso nella plancia.
Puoi prendere spunto per qualche card, usare qualche template oppure usare tutto il materiale come punto di partenza.
In quest’ultimo caso ecco la procedura da seguire per installare e attivare la plancia Tablet.
- Scarica l’archivio e scompattalo nella directory /config della tua installazione di Home Assistant.
Se non hai mai usato Lovelace in modaltà YAML
Aggiungi nel file configuration.yaml questa configurazione:
lovelace:
mode: storage
dashboards:
lovelace-tablet:
mode: yaml
title: Tablet
icon: mdi:tablet
show_in_sidebar: true
filename: lovelace/lovelace-tablet.yaml
Questa configurazione lascia la plancia di default in modalità STORAGE (gestita da interfaccia grafica) e crea una nuova plancia chiamata Tablet in modalità YAML con le due viste Home e Luci.
Se stai già usando Lovelace in modaltà YAML
Accoda sotto la voce dashboards della tua configurazione Lovelace questo codice per attivare una nuova plancia chiamata Tablet in modalità YAML con le due viste Home e Luci.
lovelace-tablet: mode: yaml title: Tablet icon: mdi:tablet show_in_sidebar: true filename: lovelace/lovelace-tablet.yaml
- Riavvia Home Assistant
Ora vedrai diversi errori nella plancia, armati di santa pazienza e adatta la configurazione delle card in base alle tue entità, idee ed esigenze.
Considerazioni finali
Siamo arrivati alla fine di questo lungo ma spero produttivo racconto su come ho impostato la mia plancia da Tablet.
Avrai notato che è una plancia senza troppi fronzoli che va dritto al punto, mettendo a disposizione le azioni frequenti delle nostre abitudini familiari. Questa è la mia personale interpretazione dell’utilizzo di un Tablet come pannello di Home Assistant.
Mi sono concentrato sulle cose utili quando sei in casa, tralasciando molti aspetti che magari invece potrebbero servire quando sei in mobilità con lo smartphone.
Ma indipendentemente da questo, il mio obiettivo era quello di spiegare, in forma comprensibile, un metodo astratto valido in ogni contesto, che aiutasse anche ad avere una configurazione pulita e facilmente aggiornabile nel tempo, perchè una plancia Home Assistant è sempre in continua evoluzione.
Mi auguro davvero di esserci riuscito e se dovessi aver dato qualcosa troppo per scontato, o se hai dubbi in generale, parliamone nei commenti qui sotto o nel gruppo Facebook Home Assistant Italia dove milito con piacere.
Ciao, grazie per l’attenzione e a presto!
Max
Piaciuto l’articolo?
Se ti va, puoi darmi una mano con le spese di gestione del blog. Grazie!
Con la piattaforma buymeacoffee
Con una donazione Paypal
Se compri su Amazon inizia da qui
Perché?
Ciao Max, complimenti per il tutorial, mi sta facendo fare i primi passi nella programmazione yaml delle Dashboard.
Hai condiviso molto di quello che hai fatto e probabilmente fai un uso evoluto anche dei sensori che poi richiami dall’interfaccia.
Ad esempio mi incuriosisce capire come dal template prendi valori diversi a seconda della entity che lo richiama. Prendi il template sensor_person a cui gli passi come variabile il livello della batteria. Non so come hai configurato il tuo sensor.clt_l09_livello_della_batteria.. io ho sensori separati per ogni device/persona.. quindi se sul template metto il mio sensor.s10_livello_della_batteria, ovviamente tutte le entity che faranno uso di quel template vedranno il mio livello di batteria.
Magari e’ banale e forse non ho studiato abbastanza la button_card component, ma se mi indirizzassi sarebbe utile. Grazie!
Ciao Marco grazie mille! No guarda, quella è una parte che avevo fatto al volo per usarla nell’articolo, ma effettivamente è sbagliata! Così ovviamente tutte le entità person prendono lo stesso valore di batteria, ho sistemato la configurazione oggi usando una variabile. Appena ho un secondo aggiorno anche l’articolo, grazie della segnalazione
attendo con ansia ! 🙂
Ciao Luigi, se ti riferisci al problema segnalato ora è tutto ok, ho aggiornato l’articolo 😉
Ciao Max! ottima guida, grazie mille per lo sforzo!
nella guida e nel codice che ho scaricato (lo zip) non riesco a trovare dove sono definiti i template delle button-card, per esempio il template sensor_person.
Inoltre sarei molto interessato al modo in cui riesci a cambiare canale alla TV (ho visto una scheda della tua interfaccia che ha i loghi di diversi canali TV), ma penso che questo argomento sia più adatto a una guida che a una risposta a un commento 🙂
Grazie!
Ciao Francesco, grazie mille!
I template sono tutti nel file button_card_templates.yaml che trovi incluso nel pacchetto.
La parte TV è tutta integrazione Harmony, farò un articolo
Ciao Max, sto provando a seguire la tua guida, ma sto avendo problemi, ho questo errore “Button-card template ‘sensor_person’ is missing!”, puoi darmi qualche indicazione per risolverlo? Grazie.
Bel lavoro
Ciao e grazie a te! Ti manca il file che contiene tutti i template di button card, hai seguito i passi di installazione? Nel pacchetto a fine articolo c’è tutto il materiale necessario. Vedi bene, nel caso scrivi di nuovo.
Ciao Max
sto provando a configurare la plancia seguendo la tua guida ( fatta molto bene ) ma già mi scontro con questo errore nella configurazione del header.yaml della prima schermata, dove potrei sbagliare?
ti allego lo yaml
type: ‘custom:button-card’
template: empty_card
type: horizontal-stack
cards:
– type: horizontal-stack
cards:
– type: ‘custom:button-card’
entity: person.luca
name: Luca
template: sensor_person
– type: ‘custom:button-card’
entity: person.vale
name: Valentina
template: sensor_person
– type: ‘custom:button-card’
entity: sensor.time
layout: vertical
template: no_background
label: “[[[ return states[‘sensor.dark_sky_hourly_summary_tmpl’].state; ]]]”
name: “[[[ return states[‘sensor.pretty_date’].state; ]]]”
show_icon: false
show_label: true
show_name: true
show_state: true
styles:
card:
– height: 100px
state:
– font-size: 200%
– font-weight: bold
– justify-self: center
label:
– justify-self: center
– font-size: 90%
– color: var(–paper-item-icon-active-color)
name:
– justify-self: center
– font-size: 120%
tap_action:
action: none
– type: horizontal-stack
cards:
– type: glance
style:|
:host {
height: 100px;
}
entities:
– entity: switch.termostato_cucina
name: TERMOSTATO CUCINA
– entity: sensor.temumi_interno_t
name: TEMP.CUCINA
– entity: sensor.temumi_esterno_t
name: TEMP.ESTERNO
show_state: false
– type: ‘custom:button-card’
entity: sensor.cpu_temperature
show_icon: false
show_state: true
name: CPU
state_display: ‘[[[ return entity.state + “°” ]]]’
styles:
card:
– width: 100px
– height: 100px
name:
– font-size: 14px
– margin-bottom: 15px
state:
– font-size: 120%
– font-weight: bold
Mi rende questo errore:
while scanning a simple key in “/config/lovelace/Ipad/home/header.yaml”, line 45, column 9 could not find expected ‘:’ in “/config/lovelace/Ipad/home/header.yaml”, line 47, column 19
Grazie in anticipo.
Luca
Ciao Luca, elimina le prime due righe, ti è scappato un incolla di troppo 😉
Ciao Max
ho tolto perché in effetti erano in più ma mi rende sempre lo stesso messaggio di errore .
Buongiorno Max
un altra cosa, ho scaricato i file da questa pagina, ma vanno messi in config/lovelace oppure direttamente dentro la cartella Lovelace? Vorrei partire da questi completi per personalizzarli.
Grazie
Ciao Max
scusami ma in parte ho risolto.
Ora almeno la plancia tablet si vede, ovviamente ora devo sistemare le entità perché vedo forse metà di quelle che ci sono essendo impostate sulle tue, comunque è partita e ora si vede la plancia.
Grazie mille.
Ciao Max
che botto card hai utilizzato per le immagini della lavatrice/lavastoviglie? e per i consumi? molto belle veramente. grazie
Ciao Luca quelle card sono delle picture elements standard con dentro qualche customizzazione
Ciao Max, veramente tantissimi complimenti per quello che hai realizzato e soprattutto per condividere tutto il lavoro con gli altri. Ti chiedo aiuto per mettere nell header , lo stato della persona, a casa o fuori casa. Nei file che ci hai fornito mi sembra non sia configurata questa variabile. Mi puoi scrivere come si fa?
grazie infinite
Ciao Andrea, grazie. Devi mettere l’entità person o device tracker in quella card e ti mostra lo stato.
Funziona tutto Max, grazie. Ti chiedo se cortesemente potresti condividere anche la pagina “consumi”. Mi piacerebbe davvero tanto vedere come l’hai realizzata.
Grazie ancora e un saluto.
Ciao Max!
I complimenti sono scontati, veramente! Tutto ben dettagliato e definito e semplice da capire per chi ha già un minimo di esperienza con HA! Bravissimo!
Ti dico la verità, fino ad oggi non avevo mai pensato di customizzare plance , viste e card, ma mi hai fatto venire troppa voglia, anche perché a me le sfide piacciono molto!!
Ti chiedo una curiosità, ho visto che hai inserito delle icone (molto belle) del tipo phu: anzichè mdi:.
Le mdi le conosco bene (material design icons) ma le phu non ho idea nemmeno dove si trovino o se siano state create da te!
Mi daresti qualche dritta?
Grazie
Ciao Alex, è un set custom di icone che ho creato partendo da un post sul forum ufficiale di HA. E’ una procedura abbastanza complessa da spiegare
Ciao Max,
non so se mi sono perso qualcosa, ma ho 2 problemi:
1) Perchè le scritte non sono gialle? Io ho installato ios-dark-theme.
2) Che icone hai usato?
Ciao Matteo, uso un file tema customizzato da me, le scritte vengono dalla variabile di tema paper-item-icon-active-color.
Le icone sono le mdi classiche e un set di icone custom che ho creato per le philips hue
Ciao Max,
Innanzitutto complimenti per la plancia, è bellissima,
sto seguendo la tua guida e sono riuscito a mettere la tua plancia sul mio tablet, personalizzandola per i miei dispositivi, per la parte home.
A differenza della tua, la parte giorno, ora e previsioni meteo dell’ header mi visualizza la condizione della giornata in inglese, mentre la tua è in italiano.
Il mio sensore è sensor.dark_sky_hourly_summary, ho notato che tu invece hai un sensore sensor.dark_sky_hourly_summary_tmpl, è li che fai la conversione da inglese s italiano?
Se è li che fai la conversione, potresti postare anche quel sensore, io ancora non sono in condizioni per affrontarlo da solo.
Non vedo l’ora di completare questa parte per passare alla parte spotify.
Grazie
Ciao Franco, si uso quel sensore ma è un template basato sullo stesso sensore che hai tu (dark_sky_hourly_summary) il quale fornisce già l’informazione in italiano.
Uso un template solo per cambiare l’icona per altre esigenze.
Grazie per la risposta, sto provando a farla uscire in italiano, speriamo bene.. vorrei approfittare della tua gentilezza per un altro piccolo quesito:
in una label oppure un name posso aggiungere una stringa?
es. label: “[[[ return states[‘sensor.myhome_temperature’].state; ]]]”
posso mettere prima la stringa “Temperatura” e dopo la stringa “°”?
Un po come si fa con display_state:
state_display: ‘[[[ return entity.state + “°” ]]]’
Grazie mille
Si certo, basta che concateni il tutto con +
purtroppo non mi funziona, mi faresti un esempio?
label: “[[[ return ‘Temperatura ‘ + states[‘sensor.myhome_temperature’].state + ‘°’ ]]]”
Perfetto! non capivo dove inserire le stringhe
Grazie mille sei gentilissimo.
Ciao,
Tutto fantastico : stoprendendo molto spunto dai tuoi “appunti” !
Una domanda : visto che ci sono molte app in giro da installare sul tablet tu quale consiglieresti : l’HOME Assistant App originale oppure hai provato qualcosa di alternativo e piú compatibile con il compito che il tablet deve fare ? ( tipo fully kiosk, wall panel, ecc ? )
Grazie !
Ciao grazie mille, io dal tablet uso Fully kiosk in versione PRO con grande soddisfazione. Insieme a Browser Mod offre una bella integrazione con HA
Grazie Max. Allora lo provo! Ciao!
Ciao Max, ancora complimenti per il blog!
Una domanda, il sensore “caldaia oggi” come lo ottengo? Io ho collegato uno shelly alla caldaia per accenderla e spegnerla, ma non saprei come creare questo sensore, hai delle indicazioni? Grazie Mille!
Devi usare la piattaforma history_stats
Ciao, complimenti per il lavoro! Lo sto adattando per i miei utilizzi… ho preso il tuo pacchetto con home e luci e l’ho modificato, ho installato browser_mod, light popup card, card_mod, e light entity card ma i pop up non so come farli aprire!! Sui pulsanti tipo questo:
– type: ‘custom:button-card’
entity: light.hue_sala
template:
– button_light
– button_light_brightness
– popup_light
ho ovviamente caricato il tuo file button_card_templates.yaml
devo aggiungere altro? bisogna abilitare il qualche modo il browser_mod?
Grazie!
Ciao Alex, consulta l’articolo dedicato su browser mod, li trovi tutte le indicazioni per creare un popup
Ciao Max ,
Io nella mia configurazione di Lovelace ho più schede ad esempio la scheda dei grafici ,la scheda del controllo carichi ecc riesco secondo te a integrarli nella scheda tablet così da vederle poi tutte su quest’ultima? Mi sai dire come fare ?
Ciao Fabrizio, certo che puoi, ma abbi pazienza, se mi chiedi una cosa del genere significa che non hai letto con attenzione questi due articoli. È tutto spiegato nel dettaglio
Ciao Max
devo dire uno spettacolo, avevo inviato ancora qualche mese fa ma ora sto finalmente trovando il tempo di implementare la cosa.
Una domanda, riesci a postarmi\mandarmi il codice della custom card che hai utilizzato per creare la lavatrice nell’immagine che vedo ? sono interessato ad una pagina come quella.
Grazie e bravo
Ciao Luca, ora sto usando un’altra dashboard ma contattami su messenger e vediamo 😉
Ciao Max, veramente un ottimo articolo mi ha aiutato tantissimo, solo una curiosità ho visto che uso un tasto go to home e vorrei farlo anche io, ma ho il problema che riesco a linkarmi solo a una delle schermate riguardanti la plancia standard lovelace in nessuno modo alla mia amche definendo il percorso in configurazione plancia.
Te come hai risolto?
Grazie mille e spero di essermi spiegato bene
Ciao Diego, grazie ma perdona non ho capito nulla 😉
Buongiorno Max e ovviamente complimenti per il tuo lavoro!! Avrei da chiederti un aiuto: vorrei inserire una cam in live sulla parte centrale della schermata Home, ma non riesco a capire il codice esatto da utilizzare. Potresti darmi una dritta?
Grazie 😉
Ciao e grazie! La puoi inserire come una qualsiasi altra card, riguardo alla cam non ti so aiutare perchè non le gestisco da HA. Prova a mettere su la card da UI in una vista di test e quando hai trovato il codice corretto la metti nella dashboard
Ciao! Alcune Custom card con il telefono ( iPhone) non le vedo, sia con app sia con browser. Hai la soluzione ?
Grazie e complimenti
La struttura di questa dashboard è per tablet, non va bene per uno smartphone.
I complimenti per la spiegazione sono più che meritati.
sto creando la mia plancia partendo dalla tua guida, ora ho un problema, la parte del meteo (sereno, nuvoloso, ecc. utilizzo quella nativa HA met.no) me la riporta in inglese, ma se vado nell’entità tramite ui la vedo in italiano in italiano e in aggiunta non riesco a capire come prende il sensore della temperatura dell’integrazione.
Usa openweathermap, ha un sensore simile a quello dell’articolo
Ottimo lavoro.
Mi sono perso solo in un punto:
label: |
[[[
var h = states[variables.battery_entity].state;
return ‘Batteria: ‘+h+’%’;
]]]
E’ chiaro che la variabile serve poi quando, nella card, vado ad inserire
variables:
battery_entity: sensor.my_battery_level
E quindi la variabile viene sostituita dal mio sensore ma… come creo la variabile “variables.battery_entity”???
Magari la domanda è stupida ma sono entrato nel mondo HA da pochissimo.
Grazie!
La variabile è creata nella card che usa quel template.
Ciao, innanzitutto complimenti, volevo chiederti, sicuramente non ho capito io, ma all’interno del file button_card_templates.yaml non ci sono tutti i template, ad es. ‘person’ etc. bisogna aggiungere in proprio? Grazie
Ciao Giovanni grazie, no ci sono tutti i template. Quello a cui fai riferimento tu è sensor_person.
Grazie per rapida risposta, ma dentro il file c’è solo questo:
no_background:
styles:
card:
– background-color: ‘rgba(0, 0, 0, 0.0)’
– box-shadow: none
empty_card:
template: no_background
color_type: blank-card
row_space_10:
template: empty_card
styles:
card:
– height: 10px
Devi scaricare il materiale che trovi nella seconda parte dell’articolo, li trovi tutto. Il materiale della prima parte è per chi vuole iniziare da zero.
Ciao, ti faccio davvero i complimenti, nella spiegazione sei stato chiarissimo..
Ho però un problema, nel lato sinistro del browser mi rimane la slide verticale.
Hai qualche consiglio da darmi?
Grazie
scusa nella parte destra del browser
Se ti rimane la slide evidentemente hai generato troppe card per lo spazio a disposizione e il browser deve scrollare
In effetti ci avevo pensato anche io ma non e cosi (credo).. perché tutte le card sono visibili e ho ancora spazio..
Ho già tolto il footer e la card di spaziatura e cmq mi rimane..
Ciao Max ho risolto togliendo:
style:
hui-vertical-stack-card$: |
#root {
margin: 15px !important;
}
nel file principale della dashboard…
Ciao,
Intanto complimenti per le guide, è un bel po’ che sto pasticciando con Home Assistant a tempo perso, e se non fosse stato per le tue guide non avrei mai combinato nulla…. rispetto a tutte quelle che ho letto sono le più chiare perché non danno nulla per scontato, mentre tipicamente su altre guide mi perdevo perché si davano per scontate cose che chi è alle prime armi non sa/capisce.
ho un paio di domande
1) lo stato di presenza quando uno non è in casa a me esce “sconosciuto” c’è modo di cambiarlo con tipo “fuori casa”??
2) sto cercando di fare dei pulsanti scena, volendo fare una scena che mi abbassa una tapparella che comandi ci sono per farlo?
es:
# per luci dimmerabili
light.lampada:
state: “on”
brightness: 70
# per luci normali
light.luce_soggiorno: “off”
# per tapparelle??
cover.tapparella_1: ??? (che tipologia di comandi posso mettere? sempre se si può)
ho cercato in lungo e in largo ma non sono riuscito a capire
Grazie!
Grazie mille 😉
1) devi rivedere la fonte del tuo sensore, se ti dice sconosciuto non sta funzionando bene.
2) Non ho tapparelle domotizzate purtroppo quindi non conosco i relativi servizi
Ciao max, stavo cercando di creare una card footer con i button templates ma con la possibilità di scorrere il body (non mi servirà come nel tuo caso per il tablet) ma per lo smartphone. Secondo te è possibile? Dagli screen vedo che nel progetto homekit infused ci sono riusciti, ma non so se usano lo stesso gioco della card vuota per distanziare body e footer.
Per uno smartphone non ha senso fare il footer visto che tipicamente si scrolla fino al bisogno. Il footer come l’ho inteso io serve solo quando vuoi uno schermo che non scrolli. Quello che dici tu è sicuramente fatto con qualche custom che ancora un DIV in fondo allo schermo
Ciao Max ti ho scritto in privato utilizzando il form in “contatti” chiedevo se hai letto…
nell’occasione ti volevo chiedere, dove posso reperire il pacchetto delle icone che utilizzi?
ciao e grazie ancora
su Hacs trovi il pacchetto di icone HUE
grazie le ho appena aggiunte.
p.s. le tue hanno l’estensione PHU: e sono diverse
Si lo so, quelle dell’articolo fanno riferimento ad un metodo che ormai ho dismesso. Ti ho dato la via più facile che c’è adesso, ai tempi ho dovuto compilarle io in javascript.
ok grazie… se poi mi dai la tua email abbinata a PayPal ti offro da bere
Grazie a te, se ti va di offrire una birra puoi seguire il link che trovi alla fine di ogni articolo, grazie mille.
Ciao Max e complimenti per i tuoi articoli! So creando grazie ai tuoi suggerimentoi la mia Dashboard Lovelace. Ho un dubbio: il una vista ho creato due colonne che chiaramente sono larghe uguali, c’è modo invece di ingrandire la colonna di sinistra e rimpicciolire quella di destra?
Grazie
Leo
Ciao e grazie. Con horizontal stack no, per fare colonne di dimensioni diverse devi usare layout card
Ciao, bellissimo lavoro che sto provando a replicare sul mio PI4.
Ho un problema con il sensor_person in quanto mi genera il seguente errore — “Button.card template ‘sensor_person’ is missing” — mi poptresti indicare dove sbaglio?
grazie
Ciao Max
Vorrei creare 2 pulsanti su un mio progettino (esterno a questo Tuo) Come quelli del Gruppo LUCI … “ACCENDI ” e “SPEGNI che comandano il gruppo luci appunto.
Volevo chiederti come posso fare che funzionino come i tuoi che quando le luci sono tutte spente si illumina la scritta ACCENDI e e appena accendi una luce si illumina lo SPEGNI ?
Io sono poco pratico di yaml e copiando il tuo ho creato questi 2 pulsanti (che funzionano) ma quando accendo si illuminano tutte e 2 le scritte e quando spengo si spencono tutte e 2.
Ho pensato che il problema sia in questo punto perchè non so il significato di queste righe.
service_data:
entity_id: ‘[[[ return entity.entity_id ]]]’
styles:
card:
– height: 60px
– font-weight: bold
Comunque ti posto i mie Pulsanti se riesci a dirmi cosa posso fare per farli funzionare, Grazie
type: custom:button-card
name: ACCENDI
entity: group.luci_generali
action_turn_on:
state:
– value: ‘on’
styles:
icon:
– color: var(–disabled-text-color)
name:
– color: var(–disabled-text-color)
icon: mdi:power
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: ‘[[[ return entity.entity_id ]]]’
styles:
card:
– height: 60px
– font-weight: bold
type: custom:button-card
name: SPEGNI
entity: group.luci_generali
action_turn_off:
state:
– value: ‘off’
styles:
icon:
– color: var(–disabled-text-color)
name:
– color: var(–disabled-text-color)
icon: mdi:power
tap_action:
action: call-service
service: switch.turn_OFF
service_data:
entity_id: ‘[[[ return entity.entity_id ]]]’
styles:
card:
– height: 60px
– font-weight: bold
Ciao Max, complimenti… che gran lavoro!
Sto cercando di personalizzarmi il tutto… però un errore sulla parte data/ora:
ButtonCardJSTemplate Error: Type Error: Cannot read properties of undefined (‘reading state’) in ‘return[‘sensor.pretty_date’].state.
Che può essere?
Forse perchè utilizza Dark Sky???
Cosa posso utilizzare di alternativo? Dark sky non accetta più iscrizioni…
Ciao Max
Ho trovato questa guida e mi sono costruito un paio di plance che mi stanno risolvendo un po di cose per tenere tutto sottocontrollo.
Ho messo tutto su un vecchio tablet anche abbastanza ampio(11”) e devo dire che ho messo anche l’applicazione calendario in modo da avere sottocontrollo tutti gli appuntamenti familiari. Funziona alla grande. GRAZIE!!!
Oltre a farti ancora i complimenti stavo cercando di ricreare una plancia come la tua nominata ENERGIA. Avendo i sensori su Lavatrice e Asciugatrice e su tutti i consumi all’ingresso del contatore, mi piace molto come l’hai strutturata.
Ti faccio una richiesta da “pigro” 🙂 …. visto chehai messi la plancia luci nel download non è che potrei usufruire anche del file energia.yaml?
Se ci sono problemi grazie lo stesso la tua guida mi ha aperto molto gli occhi sulla costruzione e personalizzazione…..me la farò bastare.
Ciao
Cristiano
Ciao veramente complimenti per la guida sto cercando di metterla in pratica adattandola alle mie entità.
La cosa che non sono riuscito a visualizzare è l’immagine di fianco al sensor_person.
Come posso fare per aggiungerla?
Grazie
Ciao e complimenti per il lavoro.
Nell’header, per quanto riguarda il template sensor_person, ho questo errore:
ButtonCard JSTemplateError: TypeError: Cannot read properties of undefined (reading ‘state’) in ‘var h = states[variables.battery_entity].state;
return ‘Batteria: ‘+h+’%’;’
Puoi aiutarmi a capire dove sbaglio?
Fabio
Fatto. Trovato l’inghippo.
Ciao Max, grazie per questo tutorial, chiarissimo come tutti i tuoi.
Sto facendo la mia personale Dashboard, grazie alle tue indicazioni, ma non riesco a stabilire l’altezza dell’intera grafica (es. 800px) per evitare lo scroll sul tablet.
Tu ne parli nel tutorial, ma non riesco a trovare l’indicazione del parametro da utilizzare per fissare l’altezza della prima vertical di ogni vista.
Ti ringrazio in anticipo.
Ciao Carlo, non è possibile stabilire l’altezza di una vertical card, la sua altezza dipende da quanti elementi metti al suo interno
Ciao,
sui file che hai messo a disposizione, per il quale ti ringrazio infinitamente (senza i quali il lavoro per un neofita come me sarebbe infinito), non ci sono ne le scene da te create ne tantomeno gli script (come ad es. “script.routine_good_night”), puòi mettere a disposizione anche questi fail per prenderne ispirazione come per gli altri?
Grazie mille per il grande aiuto, la tua precisione e chiarezza.
Andrea
Ciao Andrea e grazie a te per seguirmi.
Quello che chiedi è praticamente impossibile, io ho anche il backend tutto in YAML (non uso interfaccia grafica per script e automazioni) e la mia configurazione è splittata in tanti file (package).
Poi è tutto molto soggettivo quello che c’è dietro, lo script routine_good_night è semplicemente una sequenza di azioni che faccio fare prima di andare a dormire: spegni TV, spegni luci, etc
Non hai bisogno di ispirazioni per queste cose, devi solo pensare a cosa ti serve e realizzarla.
Complimenti per il tutorial spiegazione, Sono riuscito a far funzionare quasi tutto… in questa parte di codice :
– type: horizontal-stack
cards:
– type: ‘custom:button-card’
entity: person.max
name: Max
template: sensor_person
variables:
battery_entity: sensor.battery_cell_max
– type: ‘custom:button-card’
entity: person.ele
name: Elena
template: sensor_person
variables:
battery_entity: sensor.battery_cell_ele
mi esce scritto home e not_home…. come mai non viene tradotto in casa e fuori casa?
grazie Marco
Ciao Marco, grazie mille. Si purtroppo da qualche versione non vengono più applicate le traduzioni alle custom card.
Devi aggiungere al template sensor_person (o direttamente nella card) questo codice:
state_display: >
[[[
if (entity.state == “home”) return “Casa”;
if (entity.state == “not_home”) return “Fuori casa”;
]]]
ciao
Max
Grazie mille ora provo. Grazie ancora
Ciao Max ho aggiunto, tramite file editor, questo nella card, ma ottengo sempre lo stato in lingua inglese:
cards:
– type: ‘custom:button-card’
entity: person.gianluca
name: Gianluca
template: sensor_person
variables:
battery_entity: sensor.sm_s908b_battery_level
state_display: >
[[[
if (entity.state == “home”) return “Casa”;
if (entity.state == “not_home”) return “Fuori casa”;
]]]
ho provato anche ad aggiungerlo nel temlate sotto state, ma il risultato non cambia:
sensor_person:
label: |
[[[
var h = states[variables.battery_entity].state;
return ‘Batteria: ‘+h+’%’;
]]]
layout: icon_name_state2nd
show_icon: false
show_entity_picture: true
show_name: true
show_state: true
show_label: true
styles:
card:
– height: 100px
state:
– font-size: 120%
name:
– font-size: 14px
– font-weight: 500
– color: var(–secondary-text-color)
label:
– margin-top: 8px
– color: var(–secondary-text-color)
– font-size: 80%
entity_picture:
– border-radius: 50%
– width: 55px
state:
– value: home
operator: ‘!=’
styles:
state:
– color: var(–paper-item-icon-active-color)
state_display: >
[[[
if (entity.state == “home”) return “Casa”;
if (entity.state == “not_home”) return “Fuori casa”;
]]] .
Mi puoi dire dove sbaglio? grazie
Indentazione probabilmente
Le if devono rientrare rispetto alle triple parentesi quadre
Ciao, non riesco a capire come mettere il sensor_person template.
Dove lo trovo?
Ciao,
ottima guida. Sto provando ad implementarla nel mio sistema. Ho creato la struttura come da istruzioni ma quando vado a personalizzare la zona “body_col_1” in questa maniera:
type: vertical-stack
cards:
– type: custom:button-card
name: JVC
template: label_center
– type: horizontal-stack
cards:
– type: custom:button_card
entity: remote.nx5
icon: mdi:projector
show_name: true
show_icon: true
name: JVC On
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.nx5
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: power,on
styles:
card:
– color: rgb(233,165,0)
– width: 100px
– height: 100px
– type: custom:button_card
entity: remote.nx5
icon: mdi:projector
show_name: true
show_icon: true
name: JVC On
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.nx5
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: power,off
styles:
card:
– color: rgb(233,165,0)
– width: 100px
– height: 100px
La prima card che roiporta solo la scritta JVC funziona, mentre per le due card sotto mi va in errore “Custom element doesn’t exist:button_card.
Riesci a capire dove sto sbagliando? Grazie.
Ciao hai messo l’underscore invece del trattino su button-card
Ciao Max ottima guida tra le tante ricerche che sto facendo, ma ho incontrato un problema quando inserisco il testo all’interno del file Header e mi da un errore:
– type: horizontal-stack
cards:
– type: glance
style:|
:host {
height: 100px;
}
entities:
– entity: binary_sensor.pve_ubuntu_server_running
name: SERVER
– entity: binary_sensor.internet_status
name: INTERNET
– entity: binary_sensor.ups_status
name: UPS
l’errore è questo
can not read a block mapping entry; a multiline key may not be an implicit key (44:19)
41 | – type: glance
42 | style:|
43 | :host {
44 | height: 100px;
————————^
45 | }
46 | entities:
come posso risolverlo? Grazie
sicuramente hai un problema di indentazione, da quello che hai postato
Ciao e scusa la domanda…sono appena all’inizio e sono bloccato su come importare il tuo download; ho sia il file editor sia studio code server….uso un raspberry…grazie per la disponibilità
Mauro
Ciao Max,
sto cercando di adattare alle mie esigenze il concetto di layout che hai descritto nelle due pagine di articoli molto interessanti.
Nel “body” hai creato sostanzialmente altri tre “body” dove hai inserito: LUCI, ROUTINE & MEDIA e CLIMA. Questi sono però separati da una colonna vuota (passami il termine) simile alla button-card vuota per separare le card in orizzontale.
Anche io ho creato 3 body (LUCI, TAPPARELLE e PRESE) ma tra di loro sono attaccati, puoi dirmi come si fa a renderli separati cme i tuoi? O se l’hai spiegato in qualche punto degli articoli forse mi sarà sfuggito… grazie!!