Introduzione
Se hai già installato Bubble Card su Home Assistant, probabilmente ti sei chiesto: "Da dove inizio? Come organizzo al meglio la mia dashboard?"
In questa guida troverai 5 esempi completi di dashboard progettate con Bubble Card, pronte da copiare e personalizzare. Ogni esempio include il codice YAML completo, screenshot dettagliati e spiegazioni per comprendere le configurazioni in azione.
Questi template sono pensati per diverse esigenze: dal controllo del soggiorno al pannello clima, dal media center alla dashboard mobile ottimizzata. Puoi usarli così come sono o combinarli per creare la tua configurazione ideale.
Cosa imparerai:
- Come strutturare dashboard complete con Bubble Card
- Configurazioni YAML testate e funzionanti
- Best practice per organizzare le card
- Trucchi per ottimizzare spazi e interazioni
Come Usare Questi Template
Prima di immergerci negli esempi, ecco come utilizzare al meglio questi template.
Installazione base richiesta:
- Home Assistant aggiornato (minimo versione 2024.1)
- Bubble Card installata tramite HACS
- Accesso alla modalità di modifica dashboard
Procedura di utilizzo:
- Copia il codice YAML dell'esempio che ti interessa
- Crea una nuova vista nella tua dashboard
- Passa alla modalità YAML (icona in alto a destra)
- Incolla il codice sostituendo quello esistente
- Personalizza le entità con i tuoi device
- Salva e verifica il risultato
Trovare i nomi delle tue entità:
Vai su Strumenti per sviluppatori → Stati e cerca le entità.
Il nome completo sarà nel formato
dominio.nome_entità (esempio:
light.lampada_salotto).
Esempio 1: Dashboard Soggiorno Completa
Questa dashboard è progettata per controllare tutto ciò che serve in un soggiorno moderno: luci, clima, media e scene predefinite.
Cosa include:
- Controllo luci principale con slider luminosità
- Gestione termostato con target temperatura
- Media player per TV e streaming
- 4 scene rapide (Film, Lettura, Cena, Party)
- Informazioni meteo e temperatura
Layout ottimizzato: La dashboard usa una griglia a due colonne su desktop e si adatta automaticamente a colonna singola su mobile grazie al sistema responsive di Home Assistant.
Codice YAML
YAML
Esempio configurazione
type: sections
max_columns: 1
title: Bubble Dashboard
path: bubble-dashboard
sections:
- type: grid
cards:
- type: heading
heading: Minimal Dahboard
heading_style: title
icon: mdi:monitor-dashboard
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#soggiorno-card"
button_type: name
sub_button:
main: []
bottom: []
name: Soggiorno
icon: mdi:sofa
bg_color: rgba(255. 255, 255, 0.18)
bg_blur: "40"
backdrop_blur: "0"
shadow_opacity: "0"
bg_opacity: "12"
styles: ""
- type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main:
- entity: light.soggiorno
sub_button_type: default
content_layout: icon-left
show_attribute: true
attribute: brightness
force_icon: false
show_icon: true
light_background: true
state_background: true
scrolling_effect: true
bottom: []
entity: light.soggiorno
show_state: true
- type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main:
- entity: light.soggiorno
sub_button_type: default
content_layout: icon-left
show_attribute: true
attribute: brightness
force_icon: false
show_icon: true
light_background: true
state_background: true
scrolling_effect: true
bottom: []
entity: light.cucina_tutte_le_luci
show_state: true
icon: mdi:countertop-outline
- type: tile
grid_options:
columns: 12
rows: 2
entity: light.luci_tutte
name: Luci
vertical: true
tap_action:
action: navigate
navigation_path: "#soggiorno-card"
icon_tap_action:
action: none
features_position: bottom
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: var(--ha-card-background, var(--card-background-color));
border: none !important;
border-radius: 0 !important;
background: #e4e8f0 !important; /* grigio chiaro */
color: var(--primary-text-color); /* testo leggibile */
}
/* Appiattisce il pulsante */
.tile {
padding: 8px !important;
}
/* Rimuove qualsiasi effetto "raised" interno */
.tile::before {
box-shadow: none !important;
}
- type: custom:bubble-card
card_type: climate
sub_button:
main:
- name: HVAC modes menu
select_attribute: hvac_modes
state_background: false
show_arrow: false
sub_button_type: select
bottom: []
entity: climate.0x3c2ef5fffebad64b
name: Riscaldamento Soggiorno
show_state: false
show_last_changed: false
show_last_updated: false
show_attribute: false
attribute: supported_features
state_color: true
- type: custom:bubble-card
card_type: media-player
sub_button:
main: []
bottom: []
entity: media_player.echo_plus_di_massimo
- type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main: []
bottom: []
entity: scene.cucina_scena_n_2_mattina
- type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main: []
bottom: []
entity: scene.new_scene
header:
card:
type: markdown
text_only: true
content: |-
# Ciao {{user}}
Esempio di Dashboard con Bubble Card
cards: []Personalizzazioni suggerite
-
Sostituisci
light.luci_soggiornocon il nome della tua entità luce -
Modifica
climate.termostato_soggiornocon il tuo termostato - Crea le scene corrispondenti o rimuovi quelle che non usi
-
Aggiungi colori personalizzati con il parametro
card_layout
Tip Pro:
Usa scrolling_effect: true per
animazioni fluide quando tocchi le card. Rende l'interfaccia più reattiva e
moderna.
Esempio di Bubble Card: Dashboard di esempio molto semplice
Esempio 2: Control Center Camera da Letto
Una dashboard minimalista per la camera da letto, focalizzata su comfort e semplicità d'uso notturno.
Cosa include:
- Lampada comodino con controllo intensità
- Termostato con preset notte
- Sveglia e timer
- Controllo tapparelle o tende
- Modalità "Buonanotte" one-tap
Codice YAML
YAML
Esempio configurazione
type: sections
max_columns: 1
title: Camera da Letto
sections:
- type: grid
cards:
- type: heading
heading: Camera da Letto
heading_style: title
icon: mdi:bed
- type: custom:bubble-card
card_type: button
button_type: switch
entity: light.lampada_comodino
name: Lampada
show_state: true
icon: mdi:lamp
sub_button:
main:
- entity: light.lampada_comodino
sub_button_type: slider
attribute: brightness
show_background: true
show_icon: true
- entity: light.lampada_comodino
sub_button_type: slider
attribute: color_temp
show_background: true
show_icon: true
bottom: []
- type: custom:bubble-card
card_type: climate
entity: climate.aqara_termostato
name: Temperatura
show_state: true
state_color: true
sub_button:
main:
- name: HVAC modes
select_attribute: hvac_modes
sub_button_type: select
state_background: false
show_arrow: false
bottom: []
- type: custom:bubble-card
card_type: button
button_type: state
entity: timer.sveglia
name: Sveglia
icon: mdi:alarm
show_state: true
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
entity: scene.buonanotte
name: Buonanotte
icon: mdi:weather-night
button_action:
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.buonanotte
sub_button:
main: []
bottom: []
header:
card:
type: markdown
text_only: true
content: |-
# Benvenuto in Camera
Controlla luci, clima e tapparelle
cards: []Automazione "Buonanotte" suggerita
La scena "Buonanotte" può attivare automaticamente:
- Spegnimento di tutte le luci tranne quella comodino al 10 percento
- Chiusura tapparelle
- Abbassamento termostato a 18 gradi
- Attivazione modalità Non disturbare su smartphone
Esempio 3: Dashboard Meteo e Clima Casa
Una vista dedicata al monitoraggio meteo esterno e clima interno, utile per gestire riscaldamento e ventilazione.
Cosa include:
- Temperatura esterna e previsioni
- Temperatura e umidità per ogni stanza
- Grafici storici temperatura
- Controllo qualità aria
- Alert finestre aperte con riscaldamento attivo
Codice YAML
YAML
Esempio configurazione
type: sections
max_columns: 1
title: Meteo e Sensori
sections:
- type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: weather.casa
name: Meteo Casa
show_state: true
card_layout: large
sub_button:
main:
- entity: sensor.0x84ba20fffed47cfc_temperature
name: Soggiorno
show_state: true
show_icon: true
icon: mdi:thermometer
- entity: sensor.0x00158d008bbe7678_temperature
name: Camera
show_state: true
show_icon: true
icon: mdi:thermometer
- entity: sensor.temperatura_percepita_esterno
name: Esterno
show_state: true
show_icon: true
icon: mdi:thermometer
bottom: []
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.0x84ba20fffed47cfc_humidity
name: Umidità e Finestre
show_state: true
icon: mdi:water-percent
sub_button:
main:
- entity: binary_sensor.alert_finestre
name: Finestre
show_state: true
show_icon: true
icon: mdi:window-open-variant
state_background: true
bottom: []
header:
card:
type: markdown
text_only: true
content: |-
# 🌤️ Meteo e Clima
Temperatura e umidità in casa
cards: []
Automazione suggerita:
Crea un'automazione che ti avvisa quando una finestra resta aperta più di 10 minuti con il riscaldamento acceso. Risparmio garantito!
Esempio di Bubble Card: Media Center
Esempio 4: Media Center Completo
Dashboard dedicata al controllo di tutti i dispositivi multimediali: TV, speaker, streaming e playlist.
Cosa include:
- Controllo TV con cover art e volume
- Speaker multi-room Sonos o Google Home
- Playlist rapide Spotify o Apple Music
- Controllo luci ambientali sincronizzate
- Scene "Cinema" e "Musica"
Codice YAML
YAML
Esempio configurazione
type: sections
max_columns: 2
title: Media e Intrattenimento
sections:
- type: grid
cards:
- type: heading
heading: Media Center
heading_style: title
icon: mdi:multimedia
grid_options:
columns: 12
- type: custom:bubble-card
card_type: media-player
entity: media_player.salotto
name: TV Soggiorno
show_state: true
show_last_changed: false
grid_options:
columns: 12
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: media-player
entity: media_player.echo_plus_di_massimo
name: Speaker Soggiorno
show_state: true
grid_options:
columns: 12
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
name: Relax
icon: mdi:music
grid_options:
columns: 6
button_action:
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.speaker_soggiorno
media_content_type: playlist
media_content_id: spotify:playlist:relax
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
name: Party
icon: mdi:dance-ballroom
grid_options:
columns: 6
button_action:
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.speaker_soggiorno
media_content_type: playlist
media_content_id: spotify:playlist:party
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
entity: scene.cinema
name: Cinema
icon: mdi:movie-open
grid_options:
columns: 6
button_action:
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.cinema
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
entity: scene.musica
name: Musica
icon: mdi:music-note
grid_options:
columns: 6
button_action:
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.musica
sub_button:
main: []
bottom: []
header:
card:
type: markdown
text_only: true
content: |-
# 🎬 Media Center
TV, musica e scene multimediali
cards: []Integrazioni consigliate
- Spotify: Integrazione nativa Home Assistant per controllo completo
- Plex o Kodi: Per media server locali
- Philips Hue con Entertainment: Luci sincronizzate con contenuti TV
- Universal Remote: Controllo IR o RF per vecchi dispositivi
Esempio di Bubble Card: Versione Mobile con tasti più grandi
Esempio 5: Dashboard Mobile Ottimizzata
Una dashboard pensata specificatamente per smartphone, con controlli essenziali accessibili rapidamente.
Cosa include:
- Layout verticale ottimizzato per pollice
- Controlli più usati in alto
- Scene one-tap grandi e facili da premere
- Stato casa (luci accese, porte, allarme)
- Quick actions per "Uscendo" e "Tornando"
Codice YAML
YAML
Esempio configurazione
type: sections
max_columns: 1
title: Controllo Casa
sections:
- type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: light.luci_tutte
name: Stato Casa
show_state: true
icon: mdi:home
card_layout: large
grid_options:
columns: 12
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
entity: script.uscendo
name: Uscendo
icon: mdi:exit-run
card_layout: large
grid_options:
columns: 12
rows: 2
button_action:
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.uscendo
sub_button:
main: []
bottom: []
styles: |
.bubble-button-card-container {
height: 80px !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
entity: script.tornando
name: Tornando a Casa
icon: mdi:home-import-outline
card_layout: large
grid_options:
columns: 12
rows: 2
button_action:
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tornando
sub_button:
main: []
bottom: []
styles: |
.bubble-button-card-container {
height: 80px !important;
}
- type: custom:bubble-card
card_type: button
button_type: switch
entity: light.luci_tutte
name: Luci Principali
show_state: true
card_layout: large
grid_options:
columns: 12
sub_button:
main:
- entity: light.luci_principali
sub_button_type: slider
attribute: brightness
show_background: true
show_icon: true
bottom: []
- type: custom:bubble-card
card_type: climate
entity: climate.aqara_termostato
name: Clima Casa
show_state: true
state_color: true
card_layout: large
grid_options:
columns: 12
sub_button:
main:
- name: HVAC modes
select_attribute: hvac_modes
sub_button_type: select
state_background: false
show_arrow: false
bottom: []
- type: custom:bubble-card
card_type: button
button_type: state
entity: alarm_control_panel.allarme
name: Allarme
show_state: true
state_color: true
grid_options:
columns: 6
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.0xa4c138dccb4cb231_contact
name: Porta
show_state: true
state_color: true
grid_options:
columns: 6
sub_button:
main: []
bottom: []
header:
card:
type: markdown
text_only: true
content: |-
# 🏠 Controllo Casa
Gestisci luci, clima e sicurezza
cards: []
Script "Uscendo" e "Tornando"
Questi script possono automatizzare sequenze complesse con un tap:
Script "Uscendo":
- Spegni tutte le luci
- Imposta termostato a 16 gradi (eco mode)
- Chiudi tapparelle
- Attiva allarme
- Blocca porta smart lock
Script "Tornando":
- Accendi luci ingresso
- Termostato a temperatura comfort
- Disattiva allarme
- Apri tapparelle (se è giorno)
Dashboard Completa con Bubble Card in stile liquid Glass
Mix & Match: Combinare gli Esempi
Il vero potere di questi template emerge quando li combini per creare la tua dashboard personalizzata.
Strategie di combinazione
Approccio Multi-Vista
Crea viste separate per ogni contesto:
- Vista Home: Dashboard mobile con quick actions
- Vista Stanze: Una vista per ogni stanza (Esempi 1 e 2)
- Vista Clima: Monitoraggio meteo e temperatura (Esempio 3)
- Vista Media: Controllo entertainment (Esempio 4)
Approccio Dashboard Unica
Unisci i componenti migliori in una vista principale:
- Sezione Quick Actions dall'Esempio 5 in alto
- Controlli stanza dall'Esempio 1 al centro
- Media player dall'Esempio 4 in basso
- Widget meteo dall'Esempio 3 in sidebar
Best Practices Layout
- Gerarchia visiva: Elementi più usati in alto, meno usati in basso
- Raggruppamento logico: Raggruppa card per funzione o stanza
-
Spazi bianchi: Usa
vertical-stackcon gap per separare sezioni - Responsive: Testa su mobile, tablet e desktop
- Coerenza icone: Usa set icone omogeneo (MDI consigliato)
Codice esempio Dashboard Combinata
YAML
Esempio configurazione
type: sections
max_columns: 1
title: Dashboard Completa
path: home
sections:
# ========================================
# SEZIONE 1: QUICK ACTIONS
# ========================================
- type: grid
title: Quick Actions
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: light.luci_tutte
name: Stato Casa
show_state: true
icon: mdi:home
card_layout: large
grid_options:
columns: 12
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
entity: script.uscendo
name: Uscendo
icon: mdi:exit-run
card_layout: large
grid_options:
columns: 6
rows: 2
button_action:
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.uscendo
sub_button:
main: []
bottom: []
styles: |
.bubble-button-card-container {
height: 80px !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
entity: script.tornando
name: Tornando a Casa
icon: mdi:home-import-outline
card_layout: large
grid_options:
columns: 6
rows: 2
button_action:
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tornando
sub_button:
main: []
bottom: []
styles: |
.bubble-button-card-container {
height: 80px !important;
}
# ========================================
# SEZIONE 2: SOGGIORNO
# ========================================
- type: grid
title: 🛋️ Soggiorno
cards:
# Pop-up Soggiorno
- type: custom:bubble-card
card_type: pop-up
hash: "#soggiorno-card"
name: Soggiorno
icon: mdi:sofa
bg_color: rgba(255, 255, 255, 0.18)
bg_blur: "40"
backdrop_blur: "0"
shadow_opacity: "0"
bg_opacity: "12"
show_state: false
grid_options:
columns: 12
sub_button:
main: []
bottom: []
# Luci Soggiorno
- type: custom:bubble-card
card_type: button
button_type: switch
entity: light.soggiorno
name: Luci Soggiorno
show_state: true
card_layout: large
grid_options:
columns: 6
sub_button:
main:
- entity: light.soggiorno
sub_button_type: slider
attribute: brightness
show_background: true
show_icon: true
bottom: []
# Luci Cucina
- type: custom:bubble-card
card_type: button
button_type: switch
entity: light.cucina_tutte_le_luci
name: Luci Cucina
icon: mdi:countertop-outline
show_state: true
card_layout: large
grid_options:
columns: 6
sub_button:
main:
- entity: light.cucina_tutte_le_luci
sub_button_type: slider
attribute: brightness
show_background: true
show_icon: true
bottom: []
# Tile Tutte le Luci
- type: tile
grid_options:
columns: 12
rows: 2
entity: light.luci_tutte
name: Tutte le Luci
vertical: true
tap_action:
action: navigate
navigation_path: "#soggiorno-card"
icon_tap_action:
action: none
features_position: bottom
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: #e4e8f0 !important;
border: none !important;
border-radius: 8px !important;
color: var(--primary-text-color);
}
.tile {
padding: 8px !important;
}
.tile::before {
box-shadow: none !important;
}
# Termostato Soggiorno
- type: custom:bubble-card
card_type: climate
entity: climate.0x3c2ef5fffebad64b
name: Riscaldamento
show_state: true
state_color: true
card_layout: large
grid_options:
columns: 12
sub_button:
main:
- name: HVAC modes
select_attribute: hvac_modes
sub_button_type: select
state_background: false
show_arrow: false
bottom: []
# ========================================
# SEZIONE 3: CAMERA DA LETTO
# ========================================
- type: grid
title: 🛏️ Camera da Letto
cards:
# Lampada comodino
- type: custom:bubble-card
card_type: button
button_type: switch
entity: light.lampada_comodino
name: Lampada
show_state: true
icon: mdi:lamp
card_layout: large
grid_options:
columns: 12
sub_button:
main:
- entity: light.lampada_comodino
sub_button_type: slider
attribute: brightness
show_background: true
show_icon: true
- entity: light.lampada_comodino
sub_button_type: slider
attribute: color_temp
show_background: true
show_icon: true
bottom: []
# Termostato camera
- type: custom:bubble-card
card_type: climate
entity: climate.aqara_termostato
name: Temperatura
show_state: true
state_color: true
card_layout: large
grid_options:
columns: 12
sub_button:
main:
- name: HVAC modes
select_attribute: hvac_modes
sub_button_type: select
state_background: false
show_arrow: false
bottom: []
# Sveglia e Scena Buonanotte
- type: custom:bubble-card
card_type: button
button_type: state
entity: timer.sveglia
name: Sveglia
icon: mdi:alarm
show_state: true
grid_options:
columns: 6
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
entity: scene.buonanotte
name: Buonanotte
icon: mdi:weather-night
grid_options:
columns: 6
button_action:
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.buonanotte
sub_button:
main: []
bottom: []
# ========================================
# SEZIONE 4: METEO E SENSORI
# ========================================
- type: grid
title: 🌤️ Meteo e Clima
cards:
# Meteo con temperature
- type: custom:bubble-card
card_type: button
button_type: state
entity: weather.casa
name: Meteo Casa
show_state: true
card_layout: large
grid_options:
columns: 12
sub_button:
main:
- entity: sensor.0x84ba20fffed47cfc_temperature
name: Soggiorno
show_state: true
show_icon: true
icon: mdi:thermometer
- entity: sensor.0x00158d008bbe7678_temperature
name: Camera
show_state: true
show_icon: true
icon: mdi:thermometer
- entity: sensor.temperatura_percepita_esterno
name: Esterno
show_state: true
show_icon: true
icon: mdi:thermometer
bottom: []
# Umidità e finestre
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.0x84ba20fffed47cfc_humidity
name: Umidità
show_state: true
icon: mdi:water-percent
card_layout: large
grid_options:
columns: 12
sub_button:
main:
- entity: binary_sensor.alert_finestre
name: Finestre
show_state: true
show_icon: true
icon: mdi:window-open-variant
state_background: true
bottom: []
# ========================================
# SEZIONE 5: MEDIA CENTER
# ========================================
- type: grid
title: 🎬 Media Center
cards:
# TV Soggiorno
- type: custom:bubble-card
card_type: media-player
entity: media_player.salotto
name: TV Soggiorno
show_state: true
card_layout: large
grid_options:
columns: 12
sub_button:
main: []
bottom: []
# Speaker
- type: custom:bubble-card
card_type: media-player
entity: media_player.echo_plus_di_massimo
name: Echo Plus
show_state: true
card_layout: large
grid_options:
columns: 12
sub_button:
main: []
bottom: []
# Playlist e Scene
- type: custom:bubble-card
card_type: button
button_type: name
name: Relax
icon: mdi:music
grid_options:
columns: 6
button_action:
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.speaker_soggiorno
media_content_type: playlist
media_content_id: spotify:playlist:relax
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
name: Party
icon: mdi:dance-ballroom
grid_options:
columns: 6
button_action:
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.speaker_soggiorno
media_content_type: playlist
media_content_id: spotify:playlist:party
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
entity: scene.cinema
name: Cinema
icon: mdi:movie-open
grid_options:
columns: 6
button_action:
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.cinema
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: name
entity: scene.musica
name: Musica
icon: mdi:music-note
grid_options:
columns: 6
button_action:
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.musica
sub_button:
main: []
bottom: []
# ========================================
# SEZIONE 6: SICUREZZA
# ========================================
- type: grid
title: 🔒 Sicurezza
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: alarm_control_panel.allarme
name: Allarme
show_state: true
state_color: true
card_layout: large
grid_options:
columns: 6
sub_button:
main: []
bottom: []
- type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.0xa4c138dccb4cb231_contact
name: Porta Ingresso
show_state: true
state_color: true
card_layout: large
grid_options:
columns: 6
sub_button:
main: []
bottom: []
header:
card:
type: markdown
text_only: true
content: |-
# 🏠 Ciao {{user}}!
Dashboard completa con Bubble Card 3.1
**{{now().strftime('%A %d %B %Y')}}**
cards: []Risorse Aggiuntive
Per approfondire ulteriormente la personalizzazione delle tue dashboard Bubble Card:
Guide WeAreSmart.it
Documentazione Ufficiale
- Repository GitHub Bubble Card (contiene esempi avanzati e changelog)
- Forum Home Assistant Community (sezione "Frontend" per troubleshooting)
- HACS Store (per scoprire altre custom card compatibili)
Tip avanzato:
Usa il Browser Mod insieme a Bubble Card per creare popup dinamici che si aprono al click. Perfetto per controllare gruppi di luci o dettagli sensori senza cambiare vista.
Conclusioni
Con questi 5 esempi hai una base solida per creare dashboard Home Assistant belle, funzionali e personalizzate con Bubble Card.
Ricorda: non esiste la dashboard "perfetta" uguale per tutti. Il miglior layout è quello che si adatta alle tue abitudini e ai tuoi dispositivi. Usa questi template come punto di partenza, sperimenta e itera.
I prossimi passi
- Scegli un esempio che si avvicina alle tue esigenze
- Copialo nella tua dashboard e sostituisci le entità
- Testa per una settimana e prendi nota di cosa manca o non serve
- Itera e personalizza aggiungendo o rimuovendo elementi
- Condividi i tuoi miglioramenti con la community
Buona personalizzazione!
Hai creato una dashboard bellissima con questi esempi? Condividi uno screenshot sui social taggando @wearesmartit!
Se hai domande o vuoi condividere le tue creazioni, lascia un commento qui sotto.
