Bubble Card steht seit über einem Jahr auf meiner To-Do-Liste. Jetzt habe ich mir das Ganze endlich mal richtig angeschaut, ein komplettes Showcase-Dashboard damit gebaut und jeden Card-Typ einmal durchgespielt. Das Ergebnis ist ehrlich gesagt wahnsinnig gut geworden und ich zeige dir heute, wie du das bei dir nachbauen kannst.
Bubble Card ist eine HACS-Erweiterung, die aus dem grauen Standard-Lovelace ein modernes Dashboard mit Pop-Ups, Sub-Buttons und eigenem Look macht. Pop-Ups sind dabei das Killer-Feature: Du kannst Inhalte verstecken, die erst auf Klick aufspringen, und so wahnsinnig viel auf einem Dashboard unterbringen, ohne dass es unübersichtlich wird.
Bubble Card installieren
Bubble Card liegt direkt im HACS-Frontend-Store. Falls du HACS noch nicht installiert hast, hol das zuerst nach.
Danach geht es in vier Schritten: HACS öffnen, oben Frontend wählen, nach "Bubble Card" suchen, auf die Karte tippen und Download klicken. HACS legt die Resource automatisch an. Danach einmal den Browser mit Strg/Cmd + Shift + R hart neu laden, und die Erweiterung ist verfügbar.
Du musst Home Assistant dabei nicht zwingend neu starten, weil Bubble Card nur im Frontend arbeitet und nicht tiefer ins System eingreift. Ich mache es trotzdem, einfach auf Nummer sicher.
Wie Bubble Card aufgebaut ist
Alle Karten haben denselben Typ: type: custom:bubble-card. Was sich ändert, ist card_type:. Darüber steuerst du, was die Karte eigentlich macht. Das ist eigentlich relativ simpel, sobald man das einmal verstanden hat.
Einen Großteil der Konfiguration kannst du direkt im Frontend per Klick zusammenstellen. Wenn du mehr möchtest, also eigene Styles oder komplexere Aktionen, kommst du um YAML nicht ganz drum rum. Aber auch das ist überschaubar.
Button: die Universal-Card
Die Button-Card ist die Card, die du am häufigsten nutzen wirst. Mit dem Key button_type bestimmst du das Verhalten: switch zum Ein- und Ausschalten, slider für stufenlose Werte wie Helligkeit oder Lautstärke, state für reine Anzeige und name für ein Label ohne Entity.
1type: custom:bubble-card
2card_type: button
3button_type: switch
4entity: light.terrasse
5name: Terrasse
6icon: mdi:string-lights
7show_state: true1type: custom:bubble-card
2card_type: button
3button_type: slider
4entity: light.licht_wohnzimmer
5name: Wohnzimmer
6show_state: true1type: custom:bubble-card
2card_type: button
3button_type: state
4entity: sensor.solaredge_aktuelle_leistung
5name: Solar
6icon: mdi:solar-power
7show_state: trueDer Slider-Typ braucht eine Entity mit brightness oder einem anderen numerischen Attribut. Bei media_player regelt er automatisch die Lautstärke, bei climate die Zieltemperatur.
Pop-Up: das Beste an Bubble Card
Wenn du mich fragst, sind Pop-Ups der eigentliche Grund, warum Bubble Card so mächtig ist. Eine Pop-Up-Card ist unsichtbar und springt erst auf, wenn ein bestimmter URL-Hash gesetzt wird. Bubble Card lauscht auf genau diesen Hash und öffnet das passende Pop-Up.
Das Schöne daran: Das ist kein Custom-Feature, sondern ein Browser-Standard. Anker-Navigation gibt es in jedem Browser, Bubble Card nutzt das einfach clever.
Ein Pop-Up besteht aus zwei Teilen. Erstens die Pop-Up-Card selbst mit einem eindeutigen Hash:
1type: custom:bubble-card
2card_type: pop-up
3hash: '#energie'
4name: Energie
5icon: mdi:solar-power-variant
6bg_color: "#11111b"
7bg_opacity: 96
8bg_blur: 20
9shadow_opacity: 60
10close_by_clicking_outside: true
11cards:
12 - type: custom:bubble-card
13 card_type: button
14 button_type: state
15 entity: sensor.solaredge_aktuelle_leistung
16 name: PV-ErzeugungZweitens der Trigger-Button, der auf diesen Hash navigiert:
1type: custom:bubble-card
2card_type: button
3name: Energie öffnen
4icon: mdi:solar-power-variant
5tap_action:
6 action: navigate
7 navigation_path: '#energie'Wichtig: Pop-Up-Cards gehören in den obersten cards:-Array der View, nicht in verschachtelte Stacks. Sonst greift Home Assistant den Hash nicht durch und das Pop-Up öffnet sich nicht.
Horizontal Buttons Stack: der App-Footer
Den kennt jeder von iOS- oder Android-Apps: eine Leiste mit Buttons am unteren Rand, die immer sichtbar bleibt egal wie weit man scrollt. Für mobile Dashboards ist das wahnsinnig praktisch, weil du alles mit dem Daumen erreichst.
1type: custom:bubble-card
2card_type: horizontal-buttons-stack
3auto_order: false
41_name: Lichter
51_icon: mdi:lightbulb-group
61_link: "#lichter"
72_name: Energie
82_icon: mdi:solar-power-variant
92_link: "#energie"
103_name: Auto
113_icon: mdi:car-electric
123_link: "#auto"
134_name: Medien
144_icon: mdi:speaker-wireless
154_link: "#medien"Mit auto_order: true sortiert der Stack die Buttons nach dem zuletzt benutzten. Cool als Idee, aber eher unvorhersagbar im Alltag. Ich lasse das auf false.
Cover, Climate, Media Player
Neben der Universal-Button-Card gibt es drei Spezial-Cards für häufige Gerätetypen.
Die Cover-Card übernimmt Rolladen, Jalousien und Garagentore. Auf/Stop/Zu-Buttons kommen direkt mit. Hat deine Jalousie eine Lamellen-Funktion und gibt current_tilt_position aus, zeigt Bubble Card automatisch einen zweiten Slider für die Lamellenposition.
1type: custom:bubble-card
2card_type: cover
3entity: cover.wohnzimmer
4name: Wohnzimmer Rolladen
5icon_open: mdi:blinds-horizontal
6icon_close: mdi:blinds-horizontal-closed
7show_state: trueDie Climate-Card zeigt eine große Temperatur-Anzeige, Modus-Wahl und einen Slider für die Zieltemperatur. Funktioniert mit jeder HA-Climate-Entity.
1type: custom:bubble-card
2card_type: climate
3entity: climate.klima
4name: Tesla Klima
5icon: mdi:car-seat-heater
6step: 0.5
7min_temp: 15
8max_temp: 28Der Media Player kommt mit Cover-Art, Titel, Lautstärke-Slider und Transport-Tasten. Wenn der Player Cover-Art liefert, zieht Bubble Card daraus sogar die Akzentfarbe für die Card. Die einzelnen Buttons lassen sich über hide: ein- und ausblenden.
1type: custom:bubble-card
2card_type: media-player
3entity: media_player.wohnzimmer
4name: Sonos Arc
5icon: mdi:speaker
6hide:
7 power_button: false
8 volume_button: false
9 previous_button: false
10 next_button: false
11 play_pause_button: falseSeparator und Empty Column
Diese beiden Card-Typen sind rein fürs Layout, aber tatsächlich wahnsinnig nützlich.
Der Separator ist eine Trennlinie mit Titel und Icon. Damit bekommst du aus einem unstrukturierten Card-Stapel echte Kapitel. Du kannst ihm sogar Sub-Buttons anhängen, zum Beispiel einen "Alle aus"-Button für einen ganzen Bereich.
1type: custom:bubble-card
2card_type: separator
3name: Lichter
4icon: mdi:lightbulb-group
5sub_button:
6 - name: Alle aus
7 icon: mdi:lightbulb-off
8 tap_action:
9 action: perform-action
10 perform_action: light.turn_off
11 target:
12 area_id: wohnzimmerDie Empty Column ist Layout-Magie für horizontale Stacks. Wenn du in einem Drei-Spalten-Grid nur zwei Karten brauchst, erzwingst du damit gleiche Breiten, ohne dass eine Karte überdehnt wird.
1type: horizontal-stack
2cards:
3 - type: custom:bubble-card
4 card_type: button
5 entity: weather.forecast_home
6 - type: custom:bubble-card
7 card_type: empty-column
8 - type: custom:bubble-card
9 card_type: button
10 entity: vacuum.bodenreinigungsroboter_s20Sub-Buttons: Bubble Cards Superkraft
An jede Card kannst du bis zu vier kleine Buttons rechts dranhängen. Die können Statuswerte anzeigen, Aktionen auslösen, als Slider oder Dropdown funktionieren. Das ist der Hauptgrund, warum Bubble-Card-Dashboards so kompakt wirken.
Hier ein Beispiel mit dem Rasenmäher. Die Sub-Buttons zeigen den Akkustand und bieten direkte Aktionen:
1type: custom:bubble-card
2card_type: button
3button_type: state
4entity: lawn_mower.am410xe_nera
5name: Mählanie
6icon: mdi:robot-mower
7show_state: true
8sub_button:
9 - entity: sensor.am410xe_nera_batterie
10 icon: mdi:battery
11 show_state: true
12 show_name: false
13 state_background: false
14 - name: Start
15 icon: mdi:play
16 show_name: false
17 state_background: false
18 tap_action:
19 action: perform-action
20 perform_action: lawn_mower.start_mowing
21 target:
22 entity_id: lawn_mower.am410xe_nera
23 - name: Dock
24 icon: mdi:home-import-outline
25 show_name: false
26 state_background: false
27 tap_action:
28 action: perform-action
29 perform_action: lawn_mower.dock
30 target:
31 entity_id: lawn_mower.am410xe_neraUnd so sieht eine reine Status-Card mit vier Sub-Buttons aus, die vier verschiedene Sensoren in einer einzigen Card-Höhe zeigt:
1type: custom:bubble-card
2card_type: button
3button_type: name
4name: Energie & Mobilität
5icon: mdi:flash
6sub_button:
7 - entity: sensor.solaredge_aktuelle_leistung
8 icon: mdi:solar-power
9 show_state: true
10 show_name: false
11 - entity: sensor.nibe_aktuelle_leistungsaufnahme
12 icon: mdi:heat-pump
13 show_state: true
14 show_name: false
15 - entity: sensor.tibber_preislevel
16 icon: mdi:currency-eur
17 show_state: true
18 show_name: false
19 - entity: sensor.auto_mccarface_ladezustand
20 icon: mdi:battery-charging
21 show_state: true
22 show_name: falseDrei Sensoren in einer Card-Höhe, kein anderes Plugin kommt da ran.
Kalender-Card
Auch neu seit Bubble Card 2.0: eine kompakte Übersicht der nächsten Termine aus mehreren Kalender-Entities. Einfach die gewünschten Kalender unter entities eintragen.
1type: custom:bubble-card
2card_type: calendar
3name: Mein Kalender
4icon: mdi:calendar-heart
5entities:
6 - calendar.geburtstage
7 - calendar.kalender
8 - calendar.werktage_kalenderDas Showcase-Dashboard als komplettes YAML
Das ist das saubere Basis-YAML meines Showcase-Dashboards. Ohne individuelle styles:-Overrides, damit du es direkt kopieren und deine eigenen Anpassungen drüberlegen kannst. Entity-IDs musst du natürlich auf deine eigenen tauschen.
1title: Bubble Card Showcase
2views:
3 - title: Showcase
4 path: showcase
5 icon: mdi:cards-variant
6 theme: Catppuccin Mocha
7 type: sections
8 max_columns: 1
9 sections:
10 # ============================================================
11 # SECTION 1: HERO - Solar als Hauptdisplay
12 # ============================================================
13 - type: grid
14 cards:
15 - type: custom:bubble-card
16 card_type: button
17 button_type: state
18 entity: sensor.solaredge_aktuelle_leistung
19 name: PV-Erzeugung
20 icon: mdi:solar-power
21 show_state: true
22
23 - type: horizontal-stack
24 cards:
25 - type: custom:bubble-card
26 card_type: button
27 button_type: state
28 entity: weather.forecast_home
29 name: Wetter
30 icon: mdi:weather-partly-cloudy
31 show_state: true
32 - type: custom:bubble-card
33 card_type: button
34 button_type: state
35 entity: sensor.tibber_preislevel
36 name: Strompreis
37 icon: mdi:currency-eur
38 show_state: true
39 - type: custom:bubble-card
40 card_type: button
41 button_type: state
42 entity: sensor.auto_mccarface_ladezustand
43 name: Tesla
44 icon: mdi:battery-charging
45 show_state: true
46
47 - type: custom:bubble-card
48 card_type: horizontal-buttons-stack
49 auto_order: false
50 1_name: Lichter
51 1_icon: mdi:lightbulb-group
52 1_link: "#lichter"
53 2_name: Energie
54 2_icon: mdi:solar-power-variant
55 2_link: "#energie"
56 3_name: Auto
57 3_icon: mdi:car-electric
58 3_link: "#auto"
59 4_name: Medien
60 4_icon: mdi:speaker-wireless
61 4_link: "#medien"
62
63 # ============================================================
64 # SECTION 2: BUTTON VARIANTEN
65 # ============================================================
66 - type: grid
67 cards:
68 - type: custom:bubble-card
69 card_type: separator
70 name: "Button: die Universal-Card"
71 icon: mdi:gesture-tap-button
72
73 - type: horizontal-stack
74 cards:
75 - type: custom:bubble-card
76 card_type: button
77 button_type: switch
78 entity: light.terrasse
79 name: Terrasse
80 icon: mdi:string-lights
81 show_state: true
82 - type: custom:bubble-card
83 card_type: button
84 button_type: slider
85 entity: light.licht_wohnzimmer
86 name: Wohnzimmer
87 icon: mdi:sofa-outline
88 show_state: true
89
90 - type: horizontal-stack
91 cards:
92 - type: custom:bubble-card
93 card_type: button
94 button_type: state
95 entity: sensor.solaredge_aktuelle_leistung
96 name: Solar
97 icon: mdi:solar-power
98 show_state: true
99 - type: custom:bubble-card
100 card_type: button
101 button_type: state
102 entity: sensor.nibe_aktuelle_leistungsaufnahme
103 name: Wärmepumpe
104 icon: mdi:heat-pump
105 show_state: true
106
107 - type: custom:bubble-card
108 card_type: button
109 button_type: state
110 entity: lawn_mower.am410xe_nera
111 name: Mählanie
112 icon: mdi:robot-mower
113 show_state: true
114 sub_button:
115 - entity: sensor.am410xe_nera_batterie
116 icon: mdi:battery
117 show_state: true
118 show_name: false
119 state_background: false
120 - name: Start
121 icon: mdi:play
122 show_name: false
123 state_background: false
124 tap_action:
125 action: perform-action
126 perform_action: lawn_mower.start_mowing
127 target:
128 entity_id: lawn_mower.am410xe_nera
129 - name: Dock
130 icon: mdi:home-import-outline
131 show_name: false
132 state_background: false
133 tap_action:
134 action: perform-action
135 perform_action: lawn_mower.dock
136 target:
137 entity_id: lawn_mower.am410xe_nera
138
139 # ============================================================
140 # SECTION 3: SPEZIAL-CARDS - Cover, Climate, Media
141 # ============================================================
142 - type: grid
143 cards:
144 - type: custom:bubble-card
145 card_type: separator
146 name: Spezial-Cards
147 icon: mdi:view-dashboard-variant
148
149 - type: custom:bubble-card
150 card_type: cover
151 entity: cover.wohnzimmer
152 name: Wohnzimmer Rolladen
153 icon_open: mdi:blinds-horizontal
154 icon_close: mdi:blinds-horizontal-closed
155 show_state: true
156
157 - type: custom:bubble-card
158 card_type: climate
159 entity: climate.klima
160 name: Tesla Klima
161 icon: mdi:car-seat-heater
162 show_state: true
163
164 - type: custom:bubble-card
165 card_type: media-player
166 entity: media_player.wohnzimmer
167 name: Sonos Arc
168 icon: mdi:speaker
169
170 # ============================================================
171 # SECTION 4: SUB-BUTTONS - 4 saubere State-Cards
172 # ============================================================
173 - type: grid
174 cards:
175 - type: custom:bubble-card
176 card_type: separator
177 name: Live-Daten in 4 Cards
178 icon: mdi:chart-line
179
180 - type: horizontal-stack
181 cards:
182 - type: custom:bubble-card
183 card_type: button
184 button_type: state
185 entity: sensor.solaredge_aktuelle_leistung
186 name: Solar
187 icon: mdi:solar-power
188 show_state: true
189 - type: custom:bubble-card
190 card_type: button
191 button_type: state
192 entity: sensor.nibe_aktuelle_leistungsaufnahme
193 name: Wärme
194 icon: mdi:heat-pump
195 show_state: true
196
197 - type: horizontal-stack
198 cards:
199 - type: custom:bubble-card
200 card_type: button
201 button_type: state
202 entity: sensor.tibber_preislevel
203 name: Tibber
204 icon: mdi:currency-eur
205 show_state: true
206 - type: custom:bubble-card
207 card_type: button
208 button_type: state
209 entity: sensor.auto_mccarface_ladezustand
210 name: Tesla
211 icon: mdi:battery-charging
212 show_state: true
213
214 # ============================================================
215 # SECTION 5: WEITERE CARD-TYPEN
216 # ============================================================
217 - type: grid
218 cards:
219 - type: custom:bubble-card
220 card_type: separator
221 name: Weitere Card-Typen
222 icon: mdi:view-grid-plus
223
224 - type: horizontal-stack
225 cards:
226 - type: custom:bubble-card
227 card_type: button
228 button_type: state
229 entity: weather.forecast_home
230 name: Wetter
231 icon: mdi:weather-partly-cloudy
232 show_state: true
233 - type: custom:bubble-card
234 card_type: button
235 button_type: state
236 entity: vacuum.bodenreinigungsroboter_s20
237 name: Saugroboter
238 icon: mdi:robot-vacuum
239 show_state: true
240
241 - type: custom:bubble-card
242 card_type: separator
243 name: Kalender
244 icon: mdi:calendar-heart
245
246 - type: custom:bubble-card
247 card_type: calendar
248 entities:
249 - entity: calendar.geburtstage
250 - entity: calendar.kalender
251 - entity: calendar.werktage_kalender
252
253 # ============================================================
254 # SECTION 6: POP-UPS (unsichtbar bis Hash gesetzt)
255 # ============================================================
256 - type: grid
257 cards:
258 - type: custom:bubble-card
259 card_type: pop-up
260 hash: "#lichter"
261 name: Lichter
262 icon: mdi:lightbulb-group
263 bg_color: "#11111b"
264 bg_opacity: 96
265 bg_blur: 20
266 shadow_opacity: 60
267 close_by_clicking_outside: true
268 cards:
269 - type: custom:bubble-card
270 card_type: separator
271 name: Innen
272 icon: mdi:home-floor-1
273 - type: horizontal-stack
274 cards:
275 - type: custom:bubble-card
276 card_type: button
277 button_type: switch
278 entity: light.licht_wohnzimmer
279 name: Wohnzimmer
280 icon: mdi:sofa
281 - type: custom:bubble-card
282 card_type: button
283 button_type: switch
284 entity: light.licht_essbereich
285 name: Essbereich
286 icon: mdi:silverware-fork-knife
287 - type: horizontal-stack
288 cards:
289 - type: custom:bubble-card
290 card_type: button
291 button_type: switch
292 entity: light.burobeleuchtung
293 name: Büro
294 icon: mdi:desk-lamp
295 - type: custom:bubble-card
296 card_type: button
297 button_type: switch
298 entity: light.licht_flur_eg
299 name: Flur
300 icon: mdi:lamps
301 - type: custom:bubble-card
302 card_type: separator
303 name: Außen
304 icon: mdi:tree
305 - type: horizontal-stack
306 cards:
307 - type: custom:bubble-card
308 card_type: button
309 button_type: switch
310 entity: light.terrasse
311 name: Terrasse
312 icon: mdi:string-lights
313 - type: custom:bubble-card
314 card_type: button
315 button_type: switch
316 entity: light.kirschbaum
317 name: Kirschbaum
318 icon: mdi:tree-outline
319
320 - type: custom:bubble-card
321 card_type: pop-up
322 hash: "#energie"
323 name: Energie
324 icon: mdi:solar-power-variant
325 bg_color: "#11111b"
326 bg_opacity: 96
327 bg_blur: 20
328 shadow_opacity: 60
329 close_by_clicking_outside: true
330 cards:
331 - type: custom:bubble-card
332 card_type: button
333 button_type: state
334 entity: sensor.solaredge_aktuelle_leistung
335 name: PV-Erzeugung
336 icon: mdi:solar-power
337 show_state: true
338 - type: custom:bubble-card
339 card_type: button
340 button_type: state
341 entity: sensor.nibe_aktuelle_leistungsaufnahme
342 name: Wärmepumpe
343 icon: mdi:heat-pump
344 show_state: true
345 - type: custom:bubble-card
346 card_type: button
347 button_type: state
348 entity: sensor.tibber_preislevel
349 name: Aktueller Strompreis
350 icon: mdi:cash
351 show_state: true
352 - type: custom:bubble-card
353 card_type: separator
354 name: Tibber-Preise heute
355 icon: mdi:chart-line-variant
356 - type: horizontal-stack
357 cards:
358 - type: custom:bubble-card
359 card_type: button
360 button_type: state
361 entity: sensor.tibber_preis_min_heute
362 name: Min
363 icon: mdi:arrow-down
364 show_state: true
365 - type: custom:bubble-card
366 card_type: button
367 button_type: state
368 entity: sensor.tibber_preis_schnitt_heute
369 name: Ø
370 icon: mdi:approximately-equal
371 show_state: true
372 - type: custom:bubble-card
373 card_type: button
374 button_type: state
375 entity: sensor.tibber_preis_max_heute
376 name: Max
377 icon: mdi:arrow-up
378 show_state: true
379
380 - type: custom:bubble-card
381 card_type: pop-up
382 hash: "#auto"
383 name: Auto McCarface
384 icon: mdi:car-electric
385 bg_color: "#11111b"
386 bg_opacity: 96
387 bg_blur: 20
388 shadow_opacity: 60
389 close_by_clicking_outside: true
390 cards:
391 - type: custom:bubble-card
392 card_type: button
393 button_type: state
394 entity: sensor.auto_mccarface_ladezustand
395 name: Ladezustand
396 icon: mdi:battery-charging
397 show_state: true
398 - type: custom:bubble-card
399 card_type: climate
400 entity: climate.klima
401 name: Klima
402 - type: custom:bubble-card
403 card_type: button
404 button_type: state
405 entity: lock.schloss
406 name: Schloss
407 icon: mdi:car-key
408 show_state: true
409 - type: horizontal-stack
410 cards:
411 - type: custom:bubble-card
412 card_type: cover
413 entity: cover.ladeanschluss_klappe
414 name: Ladeklappe
415 icon: mdi:ev-plug-type2
416 - type: custom:bubble-card
417 card_type: cover
418 entity: cover.kofferraum
419 name: Kofferraum
420 icon: mdi:car-back
421
422 - type: custom:bubble-card
423 card_type: pop-up
424 hash: "#medien"
425 name: Sonos Multi-Room
426 icon: mdi:speaker-multiple
427 bg_color: "#11111b"
428 bg_opacity: 96
429 bg_blur: 20
430 shadow_opacity: 60
431 close_by_clicking_outside: true
432 cards:
433 - type: custom:bubble-card
434 card_type: media-player
435 entity: media_player.wohnzimmer
436 name: Wohnzimmer
437 - type: custom:bubble-card
438 card_type: media-player
439 entity: media_player.schlafzimmer
440 name: Schlafzimmer
441 - type: custom:bubble-card
442 card_type: media-player
443 entity: media_player.kuche
444 name: Küche
445 - type: custom:bubble-card
446 card_type: media-player
447 entity: media_player.esszimmer
448 name: EsszimmerDer dunkle Look mit Catppuccin Mocha
Standard-HA macht das saubere YAML grau-blass. Damit das Showcase so aussieht wie bei mir, braucht es drei Schritte.
Schritt 1: Catppuccin Mocha als View-Theme. Das Theme gibt es als HACS-Paket. Installiert? Dann reicht eine Zeile in der View-Konfiguration:
views:
- title: Showcase
path: showcase
theme: Catppuccin Mocha
type: sectionsSchritt 2: Pop-Ups dunkel machen. Auf dunklen Themes macht das Standard-bg_opacity eine helle Überlagerung, das Pop-Up sieht dann aus wie ein heller Kasten im dunklen Dashboard. bg_color manuell auf dunkel setzen, und fertig ist die Laube:
1type: custom:bubble-card
2card_type: pop-up
3hash: '#energie'
4bg_color: "#11111b"
5bg_opacity: 96
6bg_blur: 20
7close_by_clicking_outside: trueSchritt 3: Akzentfarben per styles:. Damit nicht alle Cards gleich aussehen, bekommt jede ihre eigene Akzentfarbe als sanftes Gradient und Border. Das Prinzip sieht so aus:
1type: custom:bubble-card
2card_type: button
3button_type: state
4entity: sensor.solaredge_aktuelle_leistung
5name: Solar
6icon: mdi:solar-power
7show_state: true
8styles: |
9 .bubble-button-card-container {
10 background: linear-gradient(135deg,
11 rgba(255,196,71,0.18),
12 rgba(255,196,71,0.05)) !important;
13 border: 1px solid rgba(255,196,71,0.22) !important;
14 }
15 .bubble-icon { color: #ffc447 !important; }Für den Glow-Effekt bei der großen Hero-Card kommt noch ein box-shadow dazu:
1styles: |
2 .bubble-button-card-container {
3 background:
4 radial-gradient(600px 220px at 0% 0%, rgba(255,196,71,0.30), transparent 65%),
5 linear-gradient(135deg, rgba(255,196,71,0.18), rgba(240,102,91,0.12)) !important;
6 box-shadow: 0 28px 60px rgba(255,196,71,0.18),
7 0 0 80px rgba(240,102,91,0.10) !important;
8 min-height: 140px !important;
9 padding: 26px 28px !important;
10 }
11 .bubble-icon-container {
12 width: 88px !important; height: 88px !important;
13 background: linear-gradient(135deg, rgba(255,196,71,0.40), rgba(240,102,91,0.22)) !important;
14 box-shadow: 0 0 36px rgba(255,196,71,0.40) !important;
15 --mdc-icon-size: 44px !important;
16 }
17 .bubble-state {
18 font-size: 48px !important; font-weight: 700 !important; color: #fff !important;
19 }Die richtige Reihenfolge ist dabei wichtig: erst das Theme setzen, dann die Pop-Ups mit bg_color dunkel machen, und erst dann die individuellen Akzentfarben einbauen. Andersrum läuft man in Style-Konflikte.
Häufige Probleme und ihre Lösungen
Ein paar Sachen, die mir selbst oder anderen immer wieder passieren.
"custom:bubble-card not found" nach der Installation: Der Browser-Cache hängt. Einmal hart neu laden mit Strg/Cmd + Shift + R. In der iOS-Companion-App: Einstellungen, Companion App, "Frontend Cache leeren".
Pop-Up öffnet sich nicht: Drei mögliche Ursachen. Die Pop-Up-Card steckt in einem verschachtelten Stack statt im obersten cards:-Array der View. Der Hash hat einen Tippfehler. Oder die tap_action des Trigger-Buttons ist noch auf dem Default toggle statt navigate.
Slider springt beim Loslassen zurück: Die Entity hat den State noch nicht geschrieben. Bei langsamen Zigbee-Geräten hilft slider_live_update: false, dann wird der Wert erst beim Loslassen gesendet.
Performance ist mau auf älterem Tablet: performance_mode: performance auf den Pop-Ups setzen. Der Blur fällt weg, aber Scrolling und Rendering werden deutlich flüssiger.
Ich nutze Bubble Card mittlerweile auf meinem Haupt-Dashboard und kann es wirklich nur empfehlen. Der Aufwand fürs initiale Einrichten ist überschaubar, und das Ergebnis sieht einfach richtig gut aus. Nutzt du Bubble Card schon? Oder hast du Fragen zu einem bestimmten Card-Typ? Schreib es gerne in die Kommentare.
