Bubble Card: Come Creare Pop-up Personalizzati in Home Assistant

Introduzione

I pop-up di Bubble Card sono una delle funzionalità più potenti per creare dashboard Home Assistant pulite ed efficienti. Invece di sovraffollare la schermata principale con decine di controlli, puoi nasconderli in pop-up eleganti che appaiono solo quando servono.

In questa guida imparerai a creare pop-up personalizzati con Bubble Card 3.1, dalla configurazione base agli usi avanzati con trigger automatici, animazioni e styling personalizzato. Ogni esempio include configurazioni YAML complete e testate, pronte da copiare nella tua installazione.

Cosa imparerai:

Come creare il tuo primo pop-up in 5 minuti
Configurare trigger automatici basati su sensori
5 esempi pratici pronti all'uso
Personalizzazione avanzata con CSS
Best practice organizzazione dashboard

Prerequisiti:

Home Assistant 2024.11 o superiore
Bubble Card 3.1.0 installata tramite HACS
Conoscenza base dashboard Home Assistant

IMPORTANTE: Personalizzazione Obbligatoria

Tutti gli esempi, automazioni, script e configurazioni YAML in questa guida sono stati accuratamente testati e funzionano correttamente. Tuttavia, è fondamentale comprendere che questi codici rappresentano un punto di partenza che DEVE essere adattato al tuo sistema specifico.

Prima di copiare qualsiasi configurazione, devi:

✅ Sostituire le entità con quelle reali del tuo Home Assistant (esempio: light.soggiorno_principale → la tua luce effettiva)
✅ Verificare i nomi dei sensori in Strumenti per sviluppatori → Stati per trovare gli ID esatti
✅ Adattare colori e temi in base al tuo design personale e alle tue preferenze estetiche
✅ Modificare hash dei pop-up per evitare conflitti con altre configurazioni esistenti
✅ Testare ogni configurazione in un ambiente sicuro prima di applicarla alla dashboard principale
✅ Studiare attentamente ogni sezione del codice per comprenderne il funzionamento

Non copiare e incollare senza modificare: ogni installazione Home Assistant è unica. I nomi delle entità, i dispositivi integrati, le automazioni esistenti e le preferenze personali variano da sistema a sistema. Dedica il tempo necessario per comprendere e personalizzare ogni esempio alle tue esigenze specifiche.

Questi esempi sono strumenti di apprendimento, non soluzioni pronte all'uso. Usali come base per costruire le tue configurazioni personalizzate, sperimentando e adattandoli gradualmente al tuo ecosistema smart home.

Perché i Pop-up Migliorano la Tua Dashboard

Vantaggi Organizzazione Spaziale

I pop-up Bubble Card trasformano radicalmente l'esperienza utente della tua dashboard. Invece di scorrere infinitamente tra centinaia di card, organizzi i controlli in layer gerarchici. La vista principale mostra solo le informazioni essenziali, mentre i dettagli sono a un tap di distanza.

Una dashboard pulita con 5-6 card principali è infinitamente più usabile di una con 50 card visibili contemporaneamente. I pop-up nascondono la complessità fino a quando non serve, riducendo il sovraccarico cognitivo e migliorando la velocità di interazione.

Performance e Usabilità

Meno card renderizzate contemporaneamente significa dashboard più veloci, specialmente su tablet e smartphone. I pop-up si aprono esattamente dove ti aspetti, con animazioni fluide che mantengono il contesto spaziale. Non perdi mai l'orientamento durante la navigazione.

Casi d'uso Ideali

Controllo stanze:

Un button card "Soggiorno" che apre un pop-up con luci, clima, media player e scene. La vista principale resta pulita, i controlli dettagliati sono a portata di tap.

Dettagli dispositivi:

Temperatura attuale visibile sulla card principale, ma termostato completo con grafici storici e impostazioni avanzate nel pop-up.

Telecamere sicurezza:

Icona con stato sulla dashboard, live feed e controlli PTZ nel pop-up. Non occupi spazio prezioso con feed video sempre visibili.

Informazioni contestuali:

Meteo oggi sulla card principale, previsioni settimanali e dettagli UV/vento/pressione nel pop-up espanso.

Prerequisiti e Installazione Base

Requisiti Sistema

Per utilizzare i pop-up Bubble Card serve Home Assistant Core 2024.11 o superiore per sfruttare la Sections View nativa, Bubble Card 3.1.0 o superiore per la compatibilità con le ultime funzionalità, e un browser moderno come Chrome/Edge 90+, Safari 14+ o Firefox 88+.

Installazione Bubble Card

Se non hai ancora installato Bubble Card, il metodo consigliato è tramite HACS. Apri HACS dal menu laterale, vai su Frontend, clicca su Esplora e scarica repository, cerca "Bubble Card" e scaricala. Dopo il download riavvia Home Assistant e svuota la cache del browser premendo Ctrl+F5 su Windows/Linux o Cmd+Shift+R su Mac.

Per verificare che l'installazione sia riuscita, vai in modalità modifica dashboard, clicca su Aggiungi card e cerca "Bubble Card". Se appare nei risultati, sei pronto per iniziare.

Bubble Card Tools (Opzionale)

Per usare il Module Store e funzionalità avanzate, puoi installare anche Bubble Card Tools. In HACS vai al menu con i tre puntini, seleziona Repository personalizzati e aggiungi l'URL https://github.com/Clooos/Bubble-Card-Tools come categoria Integrazione. Dopo averlo scaricato, riavvia Home Assistant e configura l'integrazione da Impostazioni → Dispositivi e servizi → Aggiungi integrazione cercando "Bubble Card Tools".

Creare il Primo Pop-up: Guida Passo-Passo

Struttura Base del Pop-up

Un pop-up Bubble Card richiede una struttura specifica all'interno della vista. Il pop-up deve essere wrappato in un vertical-stack e posizionato alla fine della vista. Questa struttura è fondamentale per il corretto funzionamento del pop-up.

YAML Struttura base pop-up

type: sections
max_columns: 1
path: bubble-card-dash
title: Dashboard Principale
sections:
  - type: grid
    cards:
      # Button trigger per aprire il pop-up
      - type: custom:bubble-card
        card_type: button
        button_type: name
        name: Cucina
        icon: mdi:fridge
        card_layout: large
        tap_action:
          action: navigate
          navigation_path: "#cucina"

      # Pop-up wrappato in vertical-stack
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: "#cucina"
            name: Cucina
            icon: mdi:fridge-bottom

          # Contenuto del pop-up
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            entity: light.cucina_tutte_le_luci
            name: Luci Cucina

Elementi chiave della configurazione:

hash: Identificatore univoco del pop-up (es. #cucina, #security)
name: Titolo visualizzato nell'header del pop-up
icon: Icona dell'header
vertical-stack: Container obbligatorio che racchiude il pop-up e il suo contenuto

Configurazione Button Trigger

Per aprire il pop-up serve un bottone trigger. Il meccanismo funziona tramite navigazione hash: quando l'utente fa tap sul button, l'azione navigate cambia l'URL aggiungendo l'hash, Bubble Card intercetta questo cambio e apre il pop-up con un'animazione slide-up fluida.

YAML Button trigger

- type: custom:bubble-card
  card_type: button
  button_type: name
  name: Cucina
  icon: mdi:fridge
  card_layout: large
  tap_action:
    action: navigate
    navigation_path: "#cucina"

Come funziona:

L'utente fa tap sul button "Cucina"
L'azione navigate aggiunge #cucina all'URL
Bubble Card intercetta il cambio hash
Il pop-up con hash corrispondente si apre con animazione

Aggiungere Contenuto al Pop-up

Dentro il vertical-stack, dopo la card pop-up, puoi inserire qualsiasi tipo di card Home Assistant. L'organizzazione consigliata prevede i controlli principali come luci e clima in alto, i controlli secondari come switch e sensori al centro, e le informazioni contestuali come grafici e storici in basso.

YAML Contenuto pop-up completo

type: vertical-stack
cards:
  # Definizione pop-up
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#cucina"
    name: Cucina
    icon: mdi:fridge-bottom
    width_desktop: 540px

  # Contenuto pop-up - Luci
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.cucina_principale
    name: Luce Principale
    card_layout: large

  # Clima
  - type: custom:bubble-card
    card_type: climate
    entity: climate.cucina
    name: Temperatura
    card_layout: large

  # Switch vari
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: switch.cappa_cucina
        name: Cappa
        icon: mdi:air-filter

      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: switch.lavastoviglie
        name: Lavastoviglie
        icon: mdi:dishwasher

Esempi Pratici Pop-up

Esempio 1: Controllo Luci Stanza Completo

Questo esempio mostra una configurazione completa per gestire tutte le luci di una stanza da un unico pop-up. Include un slider per la luminosità principale, switch individuali per ogni punto luce e scene preimpostate per diverse atmosfere.

YAML Esempio 1 - Controllo luci

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#luci-soggiorno"
    name: Luci Soggiorno
    icon: mdi:lightbulb-group
    width_desktop: 540px
    button_type: name
    sub_button:
      main: []
      bottom: []
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.soggiorno_principale
    name: Luce Principale
    show_state: true
    card_layout: large
  - type: grid
    columns: 2
    square: false
    cards:
      - type: tile
        entity: light.soggiorno_angolo
        name: Angolo Lettura
      - type: tile
        entity: light.soggiorno_tavolo
        name: Tavolo
      - type: tile
        entity: light.soggiorno_led
        name: LED TV
      - type: tile
        entity: light.soggiorno_parete
        name: Lampada Parete
  - type: custom:bubble-card
    card_type: sub-buttons
    auto_order: false
    sub_button:
      main: []
      bottom:
        - entity: scene.soggiorno_relax
        - entity: scene.soggiorno_cinema
          icon: mdi:movie
        - entity: scene.soggiorno_festa

Per personalizzare questo esempio, sostituisci le entità light.soggiorno con le tue luci reali e adatta le scene ai tuoi bisogni. Puoi aggiungere più luci individuali duplicando i blocchi tile nella griglia.

Esempio 2: Termostato con Grafici Storici

Un pop-up avanzato per il controllo clima che combina la climate card principale con grafici delle temperature degli ultimi giorni e preset rapidi per diverse situazioni.

YAML Esempio 2 - Termostato

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#clima-casa"
    name: Climatizzazione
    icon: mdi:thermostat
    width_desktop: 600px
    button_type: name
    sub_button:
      main: []
      bottom: []
  - type: custom:bubble-card
    card_type: climate
    entity: climate.termostato_casa
    name: Termostato Principale
    show_state: true
    card_layout: large
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.temperatura_soggiorno
        name: Temperatura
        color: "#FF6B6B"
      - entity: sensor.umidita_soggiorno
        name: Umidità
        color: "#4ECDC4"
        y_axis: secondary
    hours_to_show: 24
    points_per_hour: 4
    line_width: 2
    animate: true
  - type: horizontal-stack
    cards:
      - type: button
        name: Casa
        icon: mdi:home
        tap_action:
          action: call-service
          service: climate.set_preset_mode
          service_data:
            entity_id: climate.termostato_casa
            preset_mode: home
      - type: button
        name: Fuori
        icon: mdi:exit-run
        tap_action:
          action: call-service
          service: climate.set_preset_mode
          service_data:
            entity_id: climate.termostato_casa
            preset_mode: away
      - type: button
        name: Notte
        icon: mdi:weather-night
        tap_action:
          action: call-service
          service: climate.set_preset_mode
          service_data:
            entity_id: climate.termostato_casa
            preset_mode: sleep
  - type: horizontal-stack
    cards:
      - type: tile
        entity: sensor.qualita_aria
        name: Qualità Aria
        icon: mdi:air-filter
      - type: tile
        entity: sensor.co2
        name: CO2
        icon: mdi:molecule-co2

Questo esempio richiede la mini-graph-card installata tramite HACS per visualizzare i grafici storici. I preset modo casa, fuori e notte devono essere supportati dal tuo termostato.

Esempio 3: Media Center con Sorgenti Rapide

Un pop-up dedicato all'intrattenimento che mostra la copertina del contenuto in riproduzione e permette di cambiare rapidamente sorgente o app streaming.

YAML Esempio 3 - Media Center

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#media-soggiorno"
    name: Media Soggiorno
    icon: mdi:play-circle
    width_desktop: 540px
    button_type: name
    sub_button:
      main: []
      bottom: []
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.tv_soggiorno
    name: TV Soggiorno
    cover_background: true
    card_layout: large
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: media_player.tv_soggiorno
    name: Volume
    icon: mdi:volume-high
    attribute: volume_level
    min_value: 0
    max_value: 1
    step: 0.05
    card_layout: large
  - type: grid
    columns: 2
    square: false
    cards:
      - type: button
        name: Netflix
        icon: mdi:netflix
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.tv_soggiorno
            source: Netflix
      - type: button
        name: YouTube
        icon: mdi:youtube
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.tv_soggiorno
            source: YouTube
      - type: button
        name: Spotify
        icon: mdi:spotify
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.tv_soggiorno
            source: Spotify
      - type: button
        name: HDMI 1
        icon: mdi:hdmi-port
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.tv_soggiorno
            source: HDMI 1

I nomi delle sorgenti come Netflix, YouTube e HDMI 1 devono corrispondere esattamente a quelli supportati dal tuo media player. Puoi verificarli negli attributi dell'entità in Strumenti per sviluppatori → Stati.

Esempio 4: Sicurezza con Feed Telecamere

Dashboard sicurezza completa che mostra i feed live di multiple telecamere e lo stato del sistema di allarme in un'unica vista organizzata.

YAML Esempio 4 - Sicurezza

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#sicurezza"
    name: Sicurezza Casa
    icon: mdi:shield-home
    width_desktop: 800px
    margin_top_desktop: 100px
    button_type: name
    sub_button:
      main: []
      bottom: []
  - type: alarm-panel
    entity: alarm_control_panel.casa
    states:
      - arm_home
      - arm_away
      - arm_night
  - type: grid
    columns: 2
    square: false
    cards:
      - type: picture-entity
        entity: camera.ingresso
        name: Ingresso
        camera_view: live
        show_state: false
      - type: picture-entity
        entity: camera.giardino
        name: Giardino
        camera_view: live
        show_state: false
      - type: picture-entity
        entity: camera.garage
        name: Garage
        camera_view: live
        show_state: false
      - type: picture-entity
        entity: camera.retro
        name: Retro Casa
        camera_view: live
        show_state: false
  - type: horizontal-stack
    cards:
      - type: tile
        entity: binary_sensor.movimento_ingresso
        name: Movimento Ingresso
      - type: tile
        entity: binary_sensor.movimento_giardino
        name: Movimento Giardino
      - type: tile
        entity: binary_sensor.porta_garage
        name: Porta Garage

Per questo esempio serve un sistema di allarme configurato e telecamere integrate in Home Assistant. La larghezza maggiore (800px) permette di visualizzare meglio i feed video affiancati.

Esempio 5: Meteo Dettagliato

Pop-up informativo che espande i dati meteo con previsioni estese, grafici temperatura e tutti i dettagli atmosferici in un'unica vista.

YAML Esempio 5 - Meteo

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#meteo"
    name: Meteo Dettagliato
    icon: mdi:weather-partly-cloudy
    width_desktop: 600px
    button_type: name
    sub_button:
      main: []
      bottom: []
  - type: weather-forecast
    entity: weather.casa
    show_forecast: true
    forecast_type: daily
  - type: grid
    columns: 3
    square: false
    cards:
      - type: tile
        entity: sensor.temperatura_esterna
        name: Temperatura
        icon: mdi:thermometer
      - type: tile
        entity: sensor.umidita_esterna
        name: Umidità
        icon: mdi:water-percent
      - type: tile
        entity: sensor.pressione
        name: Pressione
        icon: mdi:gauge
      - type: tile
        entity: sensor.vento_velocita
        name: Vento
        icon: mdi:weather-windy
      - type: tile
        entity: sensor.uv_index
        name: UV Index
        icon: mdi:weather-sunny-alert
      - type: tile
        entity: sensor.probabilita_pioggia
        name: Pioggia
        icon: mdi:weather-rainy
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.temperatura_esterna
        name: Temperatura
        color: "#FF6B6B"
    hours_to_show: 48
    points_per_hour: 2
    line_width: 3
    animate: true
    show:
      labels: true
      labels_secondary: false

I sensori meteo dipendono dall'integrazione che usi (Met.no, OpenWeatherMap, ecc.). Adatta i nomi delle entità in base alla tua configurazione.

Trigger Automatici per Pop-up

Apertura Basata su Sensori

Una delle funzionalità più potenti dei pop-up Bubble Card è la possibilità di aprirli automaticamente quando si verificano determinate condizioni. Per esempio, puoi aprire un pop-up di sicurezza quando viene rilevato movimento alla porta d'ingresso.

YAML Trigger basato su sensore

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#sicurezza-auto"
    name: Alert Sicurezza
    icon: mdi:alert
    width_desktop: 540px
    button_type: name
    sub_button:
      main: []
      bottom: []
    trigger:
      - condition: state
        entity: binary_sensor.movimento_ingresso
        state: "on"
  - type: picture-entity
    entity: camera.ingresso
    camera_view: live
  - type: tile
    entity: binary_sensor.movimento_ingresso
    name: Sensore Movimento

Questa configurazione apre automaticamente il pop-up quando il sensore movimento_ingresso passa a ON. Il pop-up mostrerà la telecamera dell'ingresso e lo stato del sensore.

Trigger con Auto-Close

Puoi combinare il trigger con l'auto-close per creare notifiche temporanee che si chiudono automaticamente dopo un certo tempo.

YAML Trigger con auto-close

- type: custom:bubble-card
  card_type: pop-up
  hash: "#alert-temporaneo"
  name: Notifica Temporanea
  icon: mdi:bell-alert
  button_type: name
  sub_button:
    main: []
    bottom: []
  trigger:
    - condition: state
      entity: binary_sensor.porta_garage
      state: "on"
  auto_close: 30000

Questo pop-up si apre quando la porta del garage viene aperta e si chiude automaticamente dopo 30 secondi (30000 millisecondi).

Trigger Multipli

Puoi configurare più condizioni trigger per aprire lo stesso pop-up da diversi sensori.

YAML Trigger multipli

- type: custom:bubble-card
  card_type: pop-up
  hash: "#alert-multiplo"
  name: Alert Casa
  icon: mdi:home-alert
  button_type: name
  sub_button:
    main: []
    bottom: []
  trigger:
    - condition: state
      entity: binary_sensor.movimento_ingresso
      state: "on"
    - condition: state
      entity: binary_sensor.porta_principale
      state: "on"
    - condition: state
      entity: binary_sensor.finestra_soggiorno
      state: "on"

Il pop-up si aprirà quando uno qualsiasi dei tre sensori (movimento ingresso, porta principale o finestra soggiorno) passa a ON.

Uso con Input Boolean

Puoi creare un input_boolean helper e usarlo come trigger del pop-up. Questo ti permette di aprire il pop-up tramite automazioni complesse o script.

YAML Input boolean trigger

# In configuration.yaml
input_boolean:
  mostra_clima:
    name: Mostra Pop-up Clima
    icon: mdi:thermometer

# Nel pop-up
- type: custom:bubble-card
  card_type: pop-up
  hash: "#clima-auto"
  name: Controllo Clima
  icon: mdi:thermostat
  button_type: name
  sub_button:
    main: []
    bottom: []
  trigger:
    - condition: state
      entity: input_boolean.mostra_clima
      state: "on"

Ora puoi creare un'automazione che attiva l'input_boolean quando la temperatura scende sotto una certa soglia, aprendo automaticamente il pop-up clima.

Azioni all'Apertura e Chiusura

Puoi eseguire azioni specifiche quando il pop-up si apre o si chiude, utile per logging, notifiche o automazioni complesse.

YAML Azioni apertura/chiusura

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#media-smart"
    name: Media Center
    icon: mdi:play
    button_type: name
    sub_button:
      main: []
      bottom: []
    trigger:
      - condition: state
        entity: media_player.tv_soggiorno
        state: "playing"
    open_action:
      action: call-service
      service: light.turn_on
      service_data:
        entity_id: light.tv_backlight
        brightness: 50
    close_action:
      action: call-service
      service: light.turn_off
      service_data:
        entity_id: light.tv_backlight
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.tv_soggiorno

In questo esempio, il pop-up si apre automaticamente quando la TV inizia la riproduzione, le luci ambientali TV si accendono automaticamente quando apri il pop-up e si spengono quando lo chiudi, creando un'esperienza integrata.

Personalizzazione Avanzata

Dimensioni e Posizionamento

Puoi controllare esattamente dove e come appare il pop-up modificando i parametri di larghezza e margini. La larghezza desktop predefinita è 540px, ma puoi allargarla fino a 800px per contenuti che richiedono più spazio o ridurla a 400px per pop-up compatti.

YAML Dimensioni personalizzate

width_desktop: 700px
margin_top_desktop: 100px

Esempi posizionamento:

Pop-up a metà schermo: margin_top_desktop: 50vh
Pop-up con altezza fissa 400px: margin_top_desktop: calc(100vh - 400px)
Pop-up full-screen: margin_top_desktop: 0px

Su mobile, se il tuo header è nascosto, usa margin_top_mobile: -56px per compensare lo spazio. Se invece il header è visibile, usa margin_top_mobile: 0px.

Backdrop e Trasparenze

Il backdrop è lo sfondo scuro dietro al pop-up che oscura il resto della dashboard. Puoi personalizzarne colore, opacità e aggiungere effetti blur per un look moderno.

YAML Backdrop personalizzato

bg_opacity: 85
bg_blur: 15
bg_color: '#1a1a1a'
shadow_opacity: 60

L'effetto blur funziona solo se bg_opacity è minore di 100. Un valore bg_blur di 10-20 crea un effetto glassmorphism molto elegante. Per nascondere completamente il backdrop su tutti i pop-up, aggiungi hide_backdrop: true sul primo pop-up della dashboard.

Styling CSS Personalizzato

Per una personalizzazione completa puoi usare CSS custom nella sezione styles. Questo esempio crea un pop-up con bordi arrotondati e header con gradiente colorato.

YAML CSS personalizzato

- type: custom:bubble-card
  card_type: pop-up
  hash: '#custom-style'
  name: Pop-up Personalizzato
  icon: mdi:palette
  width_desktop: 600px
  bg_opacity: 90
  bg_blur: 10
  styles: |
    .pop-up {
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .pop-up-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px;
    }

    .pop-up-container {
      padding: 16px;
    }

Puoi anche nascondere completamente l'header se preferisci un look minimale usando questo CSS:

YAML Nascondere header

styles: |
  .pop-up > :first-child {
    display: none !important;
  }

Template Pronti all'Uso

Template Stanza Completa

Questo template è perfetto come punto di partenza per creare un pop-up all-in-one per qualsiasi stanza della casa.

YAML Template stanza

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#stanza-template"
    name: Nome Stanza
    icon: mdi:home
    width_desktop: 600px
    button_type: name
    sub_button:
      main: []
      bottom: []
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.stanza_principale
    name: Luci Principali
    card_layout: large
  - type: custom:bubble-card
    card_type: climate
    entity: climate.stanza
    name: Temperatura
    card_layout: large
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.stanza
    name: Audio
    card_layout: large
  - type: grid
    columns: 2
    cards:
      - type: tile
        entity: switch.stanza_1
      - type: tile
        entity: switch.stanza_2

Sostituisci semplicemente nome_stanza con il nome della tua stanza e le entità con quelle reali. Questo template copre le necessità base di controllo per la maggior parte delle stanze.

Template Dashboard Informazioni

Un template per creare pop-up informativi con sensori e grafici storici.

YAML Template informazioni

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#info-casa"
    name: Informazioni Casa
    icon: mdi:information
    width_desktop: 700px
    bg_opacity: 2
    bg_blur: 15
    bg_color: '#1a1a1a'
    shadow_opacity: 60
    button_type: name
    sub_button:
      main: []
      bottom: []
  - type: grid
    columns: 3
    cards:
      - type: tile
        entity: sensor.0x00158d00029bf5d4_battery
      - type: tile
        entity: sensor.temperatura_n_2_aqara_humidity
      - type: tile
        entity: sensor.0x540f57fffef92d2b_energy
  - type: custom:mini-graph-card
    entities:
      - sensor.temperatura_n_2_aqara_temperature
    hours_to_show: 24
    line_width: 2
  - type: entities
    entities:
      - entity: binary_sensor.0xa4c138dccb4cb231_contact
        name: Connessione Internet
      - entity: sensor.0x00158d00029bf5d4_action_to_side
        name: Dispositivi WiFi
      - entity: sensor.robot_spazzino
        name: Spazio Disco HA

Conclusioni

I pop-up Bubble Card rappresentano una soluzione elegante ed efficiente per organizzare dashboard Home Assistant complesse mantenendo un'interfaccia pulita e professionale. Con le configurazioni presentate in questa guida hai tutti gli strumenti per creare pop-up personalizzati adatti alle tue esigenze specifiche.

Punti chiave da ricordare:

Posiziona sempre i pop-up alla fine della vista
Usa hash univoci e descrittivi
Sfrutta i trigger automatici per notifiche importanti
Personalizza dimensioni e styling in base al contenuto
Organizza i contenuti dal più importante al meno importante

Prossimi passi: Inizia con uno dei template forniti e personalizzalo gradualmente. Sperimenta con trigger automatici e styling CSS per creare un'esperienza unica. Combina i pop-up con le altre funzionalità di Bubble Card come horizontal buttons stack per una navigazione fluida.

Per approfondire ulteriormente, consulta la guida completa Bubble Card e scopri le novità della versione 3.

Condividi nei commenti le tue configurazioni pop-up e lasciaci sapere quali funzionalità trovi più utili nella tua installazione Home Assistant.

Visita il nostro repository GitHub

Scopri esempi pratici e codice completo per Bubble Card Popup in Home Assistant.

Vai su GitHub