Installare e configurare “Button Card” su Dashboards di Home Assistant

Scopi della guida: Definire dei bottoni grafici sull’interfaccia dell’HUB per comandare funzioni specifiche presenti sulla propria domotica basata su Home Assistant Livello di difficoltà: media Concetti affrontati: Configurazione software	Componenti software utilizzate: Home Assistant Custom Component Home Assistant “Button Card“ Prerequisiti: Home Assistant configurato e funzionante Dispositivi fisici utilizzati: Il computer sul quale è in esecuzione Home Assistant
GUIDA INDICATA A UTENTI CON ISTALLAZIONE:
NOTE E DISCLAIMER qualsiasi eventuale modifica agli impianti domestici dev'essere progettata e realizzata SOLO da personale qualificato; qualsiasi modifica non prevista attuata in proprio è a propria responsabilità personale nonché a proprio rischio e pericolo (i contenuti della presenta pagina hanno infatti puro scopo didattico) e fa decadere garanzia, omologazioni e certificazioni di qualità; dei dispositivi interessati; tutte le tecniche descritte si intendono applicate a software e firmware aggiornati alle ultime versioni disponibili; questa pagina è materialmente scritta e manutenuta da più individui: non ci si aspetti né si pretenda un supporto personale. In caso di difficoltà, chiedere supporto alla community sul nostro forum o sulla nostra chat; se hai bisogno di orientarti, c'è la mappa.
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).

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.