Introduzione: cos’è la Bubble Card e perché è utile
La Bubble Card è una scheda personalizzata (custom card) di Home Assistant progettata per dashboard Lovelace minimaliste e funzionali. Come descritto dal creatore dello sviluppo, si tratta di “una raccolta di schede minimalista e personalizzabile… con un elegante tocco pop-up”.
Pop Up
Grazie alla sua funzionalità di apertura di finestre pop-up al tap, la Bubble Card permette di mantenere l’interfaccia principale pulita mostrando controlli e informazioni secondarie solo quando serve. In pratica, ogni “bolla” può rappresentare una stanza o un dispositivo, e cliccandola si apre un pannello con i dettagli (sensori, luci, climatizzazione, ecc.), riducendo così l’affollamento grafico. Un vantaggio segnalato dalla community è ad esempio la possibilità di unificare ventilazione e riscaldamento in un’unica scheda interattiva, cosa non realizzabile con altri set di schede (ad es. Mushroom). In sintesi, la Bubble Card è pensata per modernizzare la tua interfaccia smart home, offrendo un look elegante alla dashboard Lovelace e centralizzando il controllo di molteplici entità in un’unica vista cliccabile.
Come funziona e vantaggi rispetto ad altre card
La Bubble Card si integra come qualsiasi custom card nella dashboard Lovelace, ma si distingue per due elementi chiave: i pop-up e la barra di navigazione orizzontale. Con le pop-up card, ogni bolla (bubble) crea un’ancora ( hash ) sulla pagina; cliccandola si apre un pannello soprapposto con comandi aggiuntivi (es. slider, selettori, bottoni) relativi a quella stanza o entità. Questo permette di accedere a funzioni avanzate senza ingombrare la vista principale. In aggiunta, Bubble Card offre la card “horizontal-buttons-stack”: una barra fissa di pulsanti posta in fondo alla pagina che funge da menu di navigazione. Questa barra scrollabile rimane sempre visibile e permette di aprire i pop-up corrispondenti o navigare a viste diverse della dashboard.
Esempi
Ad esempio, si può configurare un pulsante per ogni stanza e associare ad esso sensori di presenza: i pulsanti si riordinano automaticamente in base all’ultima attività rilevata, ottimizzando l’esperienza utente. Rispetto ad altre card (Mushroom, entities standard, ecc.), Bubble Card offre dunque un’interazione più dinamica e una UI più pulita, con controlli contestualizzati.
L’uso di queste funzionalità consente di centralizzare più controlli in un solo elemento (ad es. luci, ventilazione, media player, scene) senza sacrificare chiarezza o spazio sullo schermo.
Come installare la Bubble Card
La Bubble Card è disponibile su HACS (Home Assistant Community Store) oppure tramite installazione manuale dai sorgenti GitHub. Si consiglia vivamente di utilizzare HACS per facilitare gli 1 aggiornamenti automatici. Ad oggi, la Bubble Card supporta Home Assistant dalla versione minima 2023.9.0.
Via HACS
ConsigliatoSe non hai ancora HACS, installalo seguendo questa guida
Apri
HACS → Frontend
e clicca il pulsante "+" in basso a destra
Cerca "Bubble Card" nell'elenco e procedi con l'installazione
Riavvia Home Assistant o svuota la cache del browser
Verifica in
Edit → Manage Resources
che bubble-card.js sia registrato come JavaScript
Module
Installazione Manuale
Alternativa
Scarica i file
bubble-card.js
e
bubble-pop-up-fix.js
dal repository GitHub Clooos/Bubble-Card
Copia i file nella cartella
<config>/www/
della tua istanza Home Assistant
In Lovelace vai su
Edit Dashboard → Manage Resources → Add Resource
Inserisci il percorso
/local/bubble-card.js?v=1
come risorsa di tipo JavaScript Module
Salva e ricarica la pagina
Risultato finale
Una volta completata l'installazione con uno dei due metodi, la "Bubble Card" apparirà nella lista delle schede disponibili quando creerai nuove card nel tuo dashboard Lovelace di Home Assistant.
Esempi di configurazione YAML aggiornati al 2025
Ecco alcuni esempi pratici di YAML per creare Bubble Card comuni. Ricorda di usare il tipo custom:bubble-card e i rispettivi card_type . I seguenti frammenti sono aggiornati alla 8 9 10 documentazione 2025 :
Pop-up base per una luce
Definisce una bolla “Kitchen” che apre i controlli della luce light.kitchen . Il parametro hash (es. #kitchen ) è l’ancora usata per associare il pulsante al pop-up.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Cucina
icon: mdi:fridge
entity: light.kitchenSpiegazione: questo esempio crea una scheda bubbla che, al tap, apre il pop-up con i controlli di light.kitchen . Il pop-up comparirà come viste di dettaglio collegata all’hash #kitchen.
Pulsante slider per intensità luminosa
Una button card con slider per controllare la luminosità di una luce.
type: custom:bubble-card
card_type: button
button_type: slider
entity: light.kitchen_led
name: LED Cucina
icon: mdi:led-strip-variantSpiegazione: qui card_type: button e button_type: slider trasformano la card in un cursore di luminosità per light.kitchen_led. L’icona e il nome vengono mostrati sulla bolla principale.
Barra orizzontale di navigazione
Una horizontal-buttons-stack con due pulsanti (Living room, Kitchen) che si riordinano in base a due sensori di movimento.
type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: Soggiorno
1_icon: mdi:sofa
1_link: '#living-room'
1_entity: light.living_room
1_pir_sensor: binary_sensor.living_room_motion
2_name: Cucina
2_icon: mdi:fridge
2_link: '#kitchen'
2_entity: light.kitchen
2_pir_sensor: binary_sensor.kitchen_motionSpiegazione: questa configurazione crea una barra di pulsanti fissa (da posizionare alla fine della vista Lovelace). Ciascun pulsante (qui “Soggiorno” e “Cucina”) apre il pop-up corrispondente al suo link (#living-room,#kitchen). L’opzione auto_order: true utilizza i sensori di presenza pir_sensor per riordinare i pulsanti in base all’ultima attività rilevata .
Oltre a questi esempi base, la documentazione della Bubble Card offre molti altri utilizzi (clima con fan, media player, calendari, sub-button, ecc.). Si possono aggiungere ulteriori proprietà YAML (icone, azioni tap/hold, stili) per creare interfacce ricche e personalizzate.
Personalizzazione visiva ed esempi pratici
La Bubble Card supporta la personalizzazione avanzata tramite variabili CSS e opzioni di stile. Ad esempio, è possibile cambiare colori di sfondo, accento e bordi attraverso variabili globali come -- bubble-main-background-color, --bubble-accent-color , --bubble-border-radius , ecc. (elencate nella documentazione). Si possono quindi abbinare i colori dei pulsanti Bubble a quelli delle luci controllate, usare angoli arrotondati più o meno accentuati, oppure impostare sfondi trasparenti o con sfumature. Inoltre, integrando la Bubble Card con i temi di Lovelace è facile ottenere un’interfaccia smart home coerente: ad esempio si può usare lo stesso schema colori del resto del dashboard, oppure configurare immagini di sfondo tematiche per ogni stanza.
Risorse della community
Alcuni utenti della community condividono temi e snapshot di dashboard avanzati sui forum e su Patreon del progetto, mostrando come combinare la Bubble Card con altre custom card per risultati molto elaborati. In pratica, la flessibilità di styling permette di adattare ogni “bolla” a qualsiasi design: sia un look minimale sia un’interfaccia dall’aspetto grafico complesso, a seconda delle preferenze.
Compatibilità e limitazioni
La Bubble Card richiede Home Assistant Core 2023.9.0 o superiore 4 . Al momento la versione più recente del plugin è la v2.x, mentre una v3.0.0 beta è disponibile per risolvere bug introdotti da HA 2025.5 7 . I punti principali da tenere a mente sono:
Bubble Card - Informazioni Tecniche
Punti Chiave
-
Supporto versione: HA 2023.9.0+ richiesto
-
Ordinamento: Ultima card della vista Lovelace
-
Performance: Ottimizzare con molti pulsanti
-
Responsive: Layout in miglioramento
-
HACS: Aggiornamenti automatici
Conclusione
La Bubble Card è una soluzione molto versatile per rendere il tuo dashboard Lovelace più interattivo ed elegante. Con pochi passaggi (specialmente tramite HACS) puoi aggiungerla e iniziare subito a creare pop-up dinamici e menu di navigazione per la tua casa intelligente. Per approfondire, consulta il repository GitHub ufficiale e la relativa documentazione con tutti gli esempi disponibili.
Sperimenta con colori, icone e variabili CSS per adattare la Bubble Card alla tua interfaccia smart home ideale – le potenzialità sono ampie e la community è sempre pronta a condividere nuovi spunti!
