Quando si inizia a costruire la propria UI (interfaccia grafica) su Home Assistant spesso viene voglia di piazzare da qualche parte la data del giorno corrente, visualizzata però secondo un formato preferito. Ecco, se si è approdati da poco in questo mondo e non si ha ancora una buona dimestichezza con i template, c’è una buona probabilità di rimanere spiazzati.
Corriamo ai ripari, vediamo quali sono i requisiti necessari, come fare un sensore per formattare la data su Home Assistant e come mostrarlo sulla UI con il componente custom:button-card
.
La piattaforma time_date
La prima cosa da fare è quella di integrare la piattaforma time_date
per dotarci di alcuni sensori relativi al tempo.
Qui trovi l’elenco completo dei sensori disponibili, nella maggior parte dei casi bastano time
e date
.
Questo è il codice da aggiungere al file configuration.yaml
, se necessario.
sensor: - platform: time_date display_options: - 'time' - 'date'
Questa integrazione crea due sensori:
sensor.time
Ora corrente nel formato HH:MM
sensor.date
Data del giorno nel formato YYYY-MM-DD
L’ora va bene così, sulla data ci possiamo lavorare creando un sensore custom con la piattaforma template
per ottenere qualsiasi tipo di formato.
Formattare la data
La piattaforma template
si applica in diversi contesti ed è una risorsa molto preziosa per sfruttare le potenzialità di Home Assistant. Quando applicata all’integrazione sensor:
consente di ottenere un sensore personalizzato basato sul valore di una entità già presente.
In questo caso usiamo il sensore sensor.date
creato in precedenza e lo elaboriamo con questo modello.
sensor: - platform: template sensors: pretty_date: friendly_name: Data di oggi value_template: >- {% set today = states("sensor.date") %} {% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %} {% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %} {% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %} {% set day = as_timestamp(today) | timestamp_custom('%d') %} {% set month = as_timestamp(today) | timestamp_custom('%m') | int %} {% set year = as_timestamp(today) | timestamp_custom('%Y') | int %} {{ arr_week_days[week_day] }}, {{ day }} {{ arr_months[month-1] }} {{ year }}
Questo sensor template genera un nuovo sensore chiamato sensor.pretty_date
con il formato personalizzato rappresentato in questa card.
Se ti interessa qui sotto ti lascio il codice di questa card realizzata con il componente custom:button-card
.
Per approfondire meglio il discorso plancia, invece, puoi partire da qui.
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
Piccola considerazione sulla logica di questo sensore.
Spesso vedo condividere sul gruppo Home Assistant Italia di Facebook e sul Forum ufficiale di Home Assistant modelli che fanno uso della funzione now()
. Nella pratica non cambia nulla, si riesce comunque ad ottenere un formato personalizzato, ma c’è da considerare che modelli di quel tipo si aggiornano ogni minuto.
Sicuramente è irrilevante a livello di risorse utilizzate per Home Assistant aggiornare un sensore ogni minuto, ma concettualmente perchè farlo quando sappiamo che il valore del sensore non cambierà per 24 ore? Interrogare il valore del sensore sensor.date
e poi elaborarlo con le funzioni timestamp
, invece, farà si che il modello venga ricalcolato solo alla mezzanotte di ogni giorno, senza dare inutile lavoro da fare ad Home Assistant.
Un sensore tutto fare
Bene, abbiamo creato un sensore con un formato data personalizzato da piazzare nella nostra bella UI.
Ma cosa succede se un domani avessimo bisogno di un altro formato? Tipo solo il mese, oppure il giorno della settimana?
Succede che dobbiamo creare un nuovo sensore ancora, formattando la data in maniera diversa.
Poco male si è vero, ma in realtà possiamo estendere le funzionalità di questo sensore aggiungendo negli attributi alcuni campi da recuperare al bisogno e farlo diventare un sensore tutto fare.
Vediamo come modificare il sensore e come sfruttare al meglio gli attributi aggiunti.
sensor: - platform: template sensors: pretty_date: friendly_name: Data di oggi value_template: >- {% set today = states("sensor.date") %} {% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %} {% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %} {% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %} {% set day = as_timestamp(today) | timestamp_custom('%d') %} {% set month = as_timestamp(today) | timestamp_custom('%m') | int %} {% set year = as_timestamp(today) | timestamp_custom('%Y') | int %} {{ arr_week_days[week_day] }}, {{ day }} {{ arr_months[month-1] }} {{ year }} attribute_templates: week_day: >- {% set today = states("sensor.date") %} {% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %} {% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %} {{ arr_week_days[week_day] }} day: >- {% set today = states("sensor.date") %} {% set day = as_timestamp(today) | timestamp_custom('%d') %} {{ day }} month_num: >- {% set today = states("sensor.date") %} {% set month = as_timestamp(today) | timestamp_custom('%m') %} {{ month }} month_name: >- {% set today = states("sensor.date") %} {% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %} {% set month = as_timestamp(today) | timestamp_custom('%m') | int %} {{ arr_months[month-1] }} year: >- {% set today = states("sensor.date") %} {% set year = as_timestamp(today) | timestamp_custom('%Y') | int %} {{ year }}
Il modello principale è rimasto lo stesso, per cui lo stato del sensore continuerà a fornire la data nel formato che abbiamo visto in precedenza. Ma stavolta abbiamo anche cinque attributi da usare per formattare la data in modo diverso.
Ora possiamo recuperare gli attributi direttamente con custom:button-card
per formattare la data ogni volta in modo diverso, pur avendo un unico sensore. Vediamo qualche esempio.
type: 'custom:button-card' name: | [[[ var week_day = states['sensor.pretty_date'].attributes.week_day; return 'Oggi è <b>' + week_day + '</b>'; ]]] tap_action: action: none
type: 'custom:button-card' name: | [[[ var month = states['sensor.pretty_date'].attributes.month_name; return 'Siamo nel mese di <br><b>' + month + '</b>'; ]]] tap_action: action: none
type: 'custom:button-card' name: | [[[ var day = states['sensor.pretty_date'].attributes.day; var month_num = states['sensor.pretty_date'].attributes.month_num; var year = states['sensor.pretty_date'].attributes.year; return day + '/' + month_num + '/' + year; ]]] tap_action: action: none
E così via. Ovviamente è possibile usare e concatenare i valori degli attributi per ottenere un qualsiasi formato.
Ma non solo, attributi di questo tipo possono essere utili anche in ambito automazioni.
Ipotizziamo ad esempio di voler eseguire una qualsiasi azione ad inizio settimana:
automation: trigger: - platform: state entity_id: sensor.pretty_date attribute: week_day to: "Lunedì" condition: [] action: []
Oppure il primo giorno di ogni mese:
automation: trigger: - platform: state entity_id: sensor.pretty_date attribute: day to: "01" condition: [] action: []
Conclusione
Insomma, è davvero un sensore tutto fare che torna utile nel Frontend per impreziosire l’interfaccia grafica, ma anche nelle logiche di script o automazioni nel Backend.
Come sempre mi auguro di aver dato un contributo utile, in questo caso soprattutto a coloro che si sono avvicinati da poco a questo mondo.
Ciao e a presto,
Max
Piaciuto l’articolo?
Se ti va, puoi darmi una mano con le spese di gestione del blog. Grazie!
Con una donazione Paypal
Se compri su Amazon inizia da qui
Perché?
Ciao sono alle primissime armi con home assistant e stavo seguendo le tue guide per configurare la board
Ho provato a inserire i sensori nel configuration.yaml e attivare la card ma mi da errore col sensore pretty_date
ButtonCardJSTemplateError: TypeError: Cannot read property ‘state’ of undefined in ‘return states[‘sensor.pretty_date’].state;’
suggerimenti?
grazie
Ciao Matteo, la card non ti vede il sensore. Può essere stato creato male, oppure non hai ricaricato i template dopo l’inserimento.
Posta qui il codice completo del sensore e vediamo
Ciao,
innanzitutto grazie per le guide, davverro interessanti per me che sono alle prime armi.
Stavo creando l’header con le tue card. Ho create i due sensori time e date ma adesso non so come fare per creare il sensore pretty_date. Il codice per il sensore template non capisco dove devo inserirlo.
Potresti aiutarmi per favore?
Ho un’altra domande:
– per creare i sensori data e time posso creare un file che chiamo sensor_time_date.yaml e poi aggiunger giusto sensor: !include sensor_time_date.yaml?
Grazie,
Ciao Corrado, hai un po’ di confusione. Ti consiglio di studiare prima le basi e poi dedicarti all’interfaccia altrimenti diventa tutto molto difficile.
Ciao Max, seguo le tue guide con molto interesse. Nella card utilizzi come label “sensor.dark_sky_hourly_summary_tmpl”. Saresti così gentile da condividere il codice per creare questo sensore? Grazie infinite.
Un saluto
Ciao Andrea, mi spiace ma quel sensore viene dalla piattaforma darksky che ormai è dismessa. Rimane valida fino a non ricordo quando per chi ce l’ha da parecchio tempo. Guarda Openweather, ha un sensore molto simile
Come consiglia Max, Openweather ha questo sensore: sensor.openweathermap_weather
Ottimo grazie
Ciao, grazie per i suggerimenti. Volevo sapere come invertire l’ora e la data: vorrei mettere sopra l’ora e sotto la data ma non ci riesco.
Se cerchi di capire come è fatta quella card è ti studi il componente button card vedrai che sarà facile
Ciao, ho seguito la tua guida e creato il sensore data personalizzato con vari attributi copiando il tuo codice nel mio home assistant. Purtroppo però ho riscontrato un errore: mentre il sensore “date” della piattaforma time_date mi restituisce la data giusta (29 aprile 2022 mentre scrivo), il sensore personalizzato mi dice Giovaedì, 28 aprile 2022 (quindi mi dà un giorno in meno).
Da cosa può dipendere questo errore?
Max aggiorni la pagina altrimenti non ti offro neanche un caffè 😉
Grazie
Andrea
Aggiorni la pagina in che senso?
Salve Premessa : sono molto ignorante. Ho caricato il codice per la Custom card relativa all’ora ma hassio subito mi risponde “Button-card template ‘no_background’ is missing!” Che fare? Grazie e abbi pietà di un anziano di 67 anni. PS disponibilissimo ad offrire un caffè … anche corretto
Ciao Massimo, l’errore indica la mancanza del file dei template di button card. Per risolvere puoi togliere la riga dalla configurazione oppure leggere gli articoli sulla plnacia da tablet dove spiego cosa sono i template e come implementarli. ciao Max
hi Massimo, in the card template code I replaced the “sensor.dark_sky_hourly_summary_tmpl” with the “sensor.openweathermap_weather”, as suggested in previous posts; however it doesn’t work. could you help me? Thank you
ciao Max complimenti , ho un problema che non riesco a capire ma come mai a me viene fuori la data, il meteo ho corretto con un sensor attivo , ma l’ora non viene fuori e’ come se non esistesse, e’ normale? nel tuo script non c’e’? oppure ho sbagliato qualcosa io?