Installare e configurare “Button Card” su Lovelace UI di Home Assistant

4 minuti di lettura
Scopi della guida:
  • Definire dei bottoni grafici sull’interfaccia Lovelace UI per comandare funzioni specifiche presenti sulla propria domotica basata su Home Assistant
  • Livello di difficoltà: media
Concetti affrontati:
  • Configurazione software
Componenti software utilizzate:

Prerequisiti:

Dispositivi fisici utilizzati:
GUIDA maggiormente indicatA per:

Tutti gli ambienti

Note e disclaimer
  • qualsiasi modifica all'impianto elettrico dev'essere progettata ed effettuata da personale qualificato;
  • qualsiasi modifica attuata in proprio è a propria responsabilità personale nonché a proprio rischio e pericolo (i contenuti della presenta pagina hanno puro scopo didattico);
  • qualsiasi modifica attuata in proprio a un dispositivo ne fa decadere garanzia, omologazioni e certificazioni di qualità.
Revisione guida: 1.1

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 Lovelace UI. 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.

Home Assistant - Button Card

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 “Community” presente su Home Assistant (solo in presenza di HACS attivo), poi alla voce “PLUGINS“. Nella buca di ricerca, cercare “button-card”: una volta trovato il custom component, cliccarvi sopra:

Home Assistant - Button Card installazione via HACS - 1

Una volta entrati nella scheda di dettaglio, cliccare su “INSTALL“:

Home Assistant - Button Card installazione via HACS - 2

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 Lovelace: 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 LOVELACE” sempre dalla scheda di dettaglio dalla quale si è provveduto ad installare “Button Card“:

Home Assistant - Button Card installazione via HACS - 3

Ciò fatto, il componente “Button Card” sarà efficacemente installato e operativo.

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 Lovelace (i tre puntini in alto a destra sul frontend web/app, poi “Configura l’interfaccia utente“) 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:

Home Assistant - Button Card - Light Bulb

 

 

 

 

 

 

 

 

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:

Home Assistant - Button Card - No icon


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:

Home Assistant - Button Card - Volume


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:

Home Assistant - Button Card - Vertical Stack

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.


Home Assistant Official LogoATTENZIONE: ricorda che sul nostro community FORUM c'è una sezione ad hoc dedica a Home Assistant, per qualsiasi dubbio, domanda, informazione nel merito specifico di queste componenti.


telegram

Rimani aggiornato tramite il nostro canale Telegram!