Scopi della guida:
Concetti affrontati:
|
Componenti software utilizzate:
Prerequisiti:
Dispositivi fisici utilizzati:
|
GUIDA INDICATA A UTENTI CON ISTALLAZIONE:![]() |
|
NOTE E DISCLAIMER
|
|
Revisione guida: 1.2 |
Abstract
Di default, l’HUB per la domotica personale Home Assistant (a partire da 2019) è dotato di un’interfaccia grafica (consultabile via web come tramite app) denominata Dashboards. Di per sé tale interfaccia è più che utile nella rappresentazione grafica e nella gestione operativa della propria domotica personale; alcuni utenti, però, apprezzano la possibilità di personalizzarla come meglio credono grazie alla presenza delle custom-card, degli elementi che consentono, appunto, tale spazio di manovra.
“Button Card” è un custom component (un componente non ufficiale, quindi da aggiungere manualmente) che, sfruttando la leva delle custom-card, consente con facilità all’utente di creare dei bottoni (anche delle griglie di bottoni, come rappresentato nell’immagine a seguire) allo scopo di controllare entità, automazioni, script, scene e quant’altro (o per esempio definire telecomandi virtuali, come da immagine che segue).
Installazione di “Button Card”
In primis è necessario installare il custom component, nonché attivarlo. Per farlo è possibile seguire due strade: quella manuale e quella automatica via HACS (Home Assistant Community Store), più pratica ed agevole (in questa guida illustreremo quest’ultima).
N.b. Per installare “Button Card” via HACS è necessario che tale strumento sia stato installato (esso stesso è a sua volta un custom component). Si tratta di un’operazione da fare una tantum spiegata qui la quale tornerà sicuramente utile anche per altri scopi. |
Per installare “Button Card” è sufficiente recarsi alla voce “HACS” presente su Home Assistant (solo in presenza di HACS attivo), poi alla voce “Integrazioni“. Nella buca di ricerca, cercare “button-card”: una volta trovato il custom component, cliccarvi sopra.
Una volta entrati nella scheda di dettaglio, cliccare su “INSTALL“:
Configurazione
Al termine dell’installazione il componente sarà pronto per essere attivato. A differenza di quel che si possa pensare, per farlo non è necessario agire sul file di configurazione di Home Assistant bensì su quello di Dashboards: questo è possibile farlo a mano (aprendo l’editor “grezzo”) incollandovi, in calce, il seguente codice:
resources:
- url: /community_plugin/button-card/button-card.js
type: module
altrimenti, sarà più facile cliccare su “ADD TO DASHBOARDS” sempre dalla scheda di dettaglio dalla quale si è provveduto ad installare “Button Card“:
Ciò fatto, il componente “Button Card” sarà efficacemente installato e operativo.
Alternativamente, è possibile aggiungere l’url presso la voce di menu Home Assistant “Impostazioni” > “Cruscotti Dashboards” e poi, in alto, “Risorse“.
Uso
Ora Home Assistant è pronto per accogliere pulsanti definiti tramite questo componente, il quale si presenta estremamente banale nei casi più semplici, ma anche piuttosto complesso quando si opta per schemi più arditi o configurazioni più fine.
Sostanzialmente, per aggiungere un bottone è sufficiente entrare nell’editor visuale di Dashboards (i tre puntini in alto a destra sul frontend web/app, poi “Modifica plancia“) e cliccare sul “+“, selezionando come tipologia “MANUAL CARD“.
A questo punto nel testo della configurazione della scheda va inserito del codice che indichi al frontend cosa visualizzare e come, per esempio:
type: "custom:button-card"
entity: light.artemide
icon: mdi:lightbulb
color: rgb(28, 128, 199)
Una volta salvato, l’esempio sopra genera un pulsante che controlla l’entità light.artemide:
Una variante, la quale faccia sì che in stato “off” l’icona del bottone diventi rossa, è la seguente:
type: "custom:button-card"
entity: light.artemide
icon: mdi:air-conditioner
color: rgb(28, 128, 199)
state:
- value: "off"
color: rgb(255, 0, 0)
Un altro esempio è quello di un pulsante senza icona che, per esempio, accenda o spenga tutte le luci di un gruppo:
type: "custom:button-card"
entity: group.luci
show_icon: false
show_state: true
Tale configurazione genera un pulsante così fatto:
Nuovamente, vediamo come organizzare in uno stack orizzontale più bottoni che preveda:
- 2x card vuote
- 1x bottone aumento volume con chiamata di servizio
- 1x bottone riduzione volume con chiamata di servizio
- 2x card vuote
type: horizontal-stack cards: - type: "custom:button-card" color_type: blank-card - type: "custom:button-card" color_type: blank-card - type: "custom:button-card" color_type: card color: rgb(223, 255, 97) icon: mdi:volume-plus tap_action: action: call-service service: media_player.volume_up service_data: entity_id: media_player.livimg_room_speaker - type: "custom:button-card" color_type: card color: rgb(223, 255, 97) icon: mdi:volume-minus tap_action: action: call-service service: media_player.volume_down service_data: entity_id: media_player.livimg_room_speaker - type: "custom:button-card" color_type: blank-card - type: "custom:button-card" color_type: blank-card
con risultato:
Un esempio di stratificazione verticale, con:
- 1x card etichetta
- Uno stack orizzontale con:
- 1x bottone cena 1
- 1x bottone Scena 2
- 1x bottone Scena 3
- 1x bottone Scena 4
- 1x bottone Scena Off
type: vertical-stack cards: - type: "custom:button-card" color_type: label-card color: rgb(44, 109, 214) name: Kitchen - type: horizontal-stack cards: - type: "custom:button-card" entity: switch.kitchen_scene_1 color_type: card color: rgb(66, 134, 244) icon: mdi:numeric-1-box-outline - type: "custom:button-card" entity: switch.kitchen_scene_2 color_type: card color: rgb(66, 134, 244) icon: mdi:numeric-2-box-outline - type: "custom:button-card" entity: switch.kitchen_scene_3 color_type: card color: rgb(66, 134, 244) icon: mdi:numeric-3-box-outline - type: "custom:button-card" entity: switch.kitchen_scene_4 color_type: card color: rgb(66, 134, 244) icon: mdi:numeric-4-box-outline - type: "custom:button-card" entity: switch.kitchen_off color_type: card color: rgb(66, 134, 244) icon: mdi:eye-off-outline
Con risultato:
Icone
Spesso ci viene chiesto “dove prendere le icone da usare su Home Assistant“. Semplice: su materialdesignicons.com dove, tramite il motore di ricerca interno, è possibile trovare le icone che facciano per sé. Per usarle non c’è bisogno di scaricarle, ma è sufficiente scoprirne il nome (eg. “lightbulb“) e, in configurazione, riportare tale nome con suffisso “mdi:” (intervallandoli con uno spazio): eg. “mdi: lightbulb” (come si intuisce anche leggendo le configurazioni sopracitate, alla varie voci “icon“).
Conclusioni
Lo spazio di manovra garantito da questo componente è davvero ampissimo. I bottoni tramite esso creati, infatti, possono variare nelle dimensioni, nei colori, nel posizionamento, nelle icone e nei colori mostrati, e molto altro ancora – motivo per cui non elenchiamo tutte le possibili combinazioni che, va da sé, sono virtualmente infinite.
Importante, per chi si avventuri nelle definizione di questi bottoni, leggere con attenzione la lista delle possibili configurazioni, seguita dagli esempi anche da noi riportati e da molti, molti altri.
⚠️ Se di Home Assistant ne sai poco ma sei interessato a capirne di più, ti suggeriamo di partire da qui. |
Questa pagina è redatta, manutenuta e aggiornata dallo staff di inDomus, un gruppo di persone molto diverse tra loro che trovi, per domande e supporto, sul forum e sulla chat del sito. Se ti sei perso, a tua disposizione c'è la mappa. |