In deze blog neem ik je kort mee in wat Bubble Cards zijn, waarom je ze zou willen gebruiken, en hoe je er direct vandaag nog mee aan de slag kunt. Tijd om je dashboard \u00e9cht next-level te maken.<\/p>\n\n\n\n
Wat zijn Bubble Cards?<\/strong><\/span><\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Bubble Cards zijn een krachtige custom kaart voor Home Assistant die je volledige controle geeft over de weergave en interactie van je dashboard.<\/p>\n\n\n\n
In plaats van vast te zitten aan standaard layouts en stijlen, kun je met Bubble Cards zelf bepalen waar je elementen plaatst, hoe ze eruitzien, en hoe ze reageren op input of statuswijzigingen.<\/p>\n\n\n\n
Denk aan dynamische styling, conditionele zichtbaarheid, animaties, icon-swaps en volledig configureerbare tap-actions, allemaal binnen \u00e9\u00e9n flexibele kaart.<\/p>\n\n\n\n
Het resultaat: een dashboard dat er niet alleen beter uitziet, maar ook sneller en slimmer werkt.<\/p>\n\n\n\n
<\/div>\n\n\n\nWaarom zou je Bubble Cards gebruiken?<\/strong><\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Omdat standaardkaarten gewoon niet genoeg zijn als je n\u00e9t wat meer controle, snelheid en stijl wilt. Met Bubble Cards kun je zelf bepalen hoe je dashboard eruitziet \u00e9n hoe het zich gedraagt. Geen statische lijsten of eindeloze tabbladen meer, maar een interface die intu\u00eftief en visueel krachtig is.<\/p>\n\n\n\n
Je gebruikt Bubble Cards bijvoorbeeld als je:<\/p>\n\n\n\n
\n- Sneller wilt schakelen tussen apparaten, zonder eerst door meerdere schermen te klikken.<\/li>\n\n\n\n
- Een logische en overzichtelijke layout wilt, waarbij je elementen kunt groeperen zoals jij dat wilt.<\/li>\n\n\n\n
- Pop-ups wilt gebruiken voor extra info of bediening, zonder het hoofdscherm te verlaten.<\/li>\n\n\n\n
- Condities of statuswijzigingen<\/strong> visueel <\/strong>wilt weergeven met kleurwisselingen, icon-swaps of animaties.<\/li>\n\n\n\n
- Een dashboard wilt maken dat je niet alleen functioneel gebruikt, maar ook graag laat zien.<\/li>\n<\/ul>\n\n\n\n
Kortom: Bubble Cards geven je als power user de tools om je smart home interface \u00e9cht op maat te maken, zonder limieten, zonder concessies.<\/p>\n\n\n\n
<\/div>\n\n\n\nBubble Cards: niet alleen dashboards, maar ook ingebouwde pop-ups<\/span><\/h3>\n\n\n\n<\/p>\n\n\n\n
Bubble Cards worden niet alleen gebruikt om je Home Assistant dashboard visueel op te poetsen; ze bieden ook native ondersteuning voor pop-up functionaliteit.<\/p>\n\n\n\n
In plaats van een aparte integratie of extra addon te gebruiken, kun je rechtstreeks binnen de Bubble Card instellen dat een klik op een icoon of knop een volledig gestylede pop-up opent. Denk aan een snelle bediening voor een lamp (aan\/uit, dimmen, kleur aanpassen) zonder je hele dashboard te verlaten.<\/p>\n\n\n\n
Het mooie: je hebt volledige controle over de inhoud en layout van de pop-up, inclusief custom knoppen, sliders en statusweergaves. Alles wordt afgehandeld binnen de configuratie van de Bubble Card zelf, wat zorgt voor een cleanere setup en snellere reacties.<\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/homeycornelisse.nl\/homeassistant\/wp-content\/uploads\/sites\/13\/2025\/04\/HACS-1-1024x576.png\")
<\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\nBubble Card installeren via HACS: zo gepiept<\/span><\/h3>\n\n\n\n<\/p>\n\n\n\n
Om Bubble Cards in je Home Assistant setup te krijgen, gebruik je het liefst HACS (Home Assistant Community Store), de makkelijke en nette manier om custom components te beheren.<\/p>\n\n\n\n
Even in het kort:<\/p>\n\n\n\n
\nOpen je Home Assistant dashboard.<\/p><\/li>\n\n\n\n
Ga naar HACS <\/strong>.<\/p><\/li>\n\n\n\nKlik in de zoekbalk en tik Bubble Card<\/strong> in.<\/p><\/li>\n\n\n\nSelecteer Bubble Card<\/strong> uit de lijst en klik rechts onderin je scherm op Download<\/strong>.<\/p><\/li>\n\n\n\nKlik vervolgens weer op Download<\/b> in het pop up venster.<\/p><\/li>\n<\/ul>\n\n\n\n
Een korte reload van je frontend later en je bent good to go. Klaar om je dashboard om te toveren met dynamische bubbels en stijlvolle pop-ups.<\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/homeycornelisse.nl\/homeassistant\/wp-content\/uploads\/sites\/13\/2025\/04\/bubbles-1-1024x576.png\")
<\/figure>\n\n\n\n<\/div>\n\n\n\nDashboard bouwen met Bubble Cards: je eigen flow ontwerpen<\/strong><\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Na installatie van de Bubble Card integratie kun je eindelijk \u00e9cht losgaan: je eigen dashboard bouwen, precies zoals jij dat wilt. Binnen Bubble Card kun je verschillende kaarttypes toevoegen, zoals:<\/p>\n\n\n\n
\nButton<\/strong> (de basis voor interacties)<\/p><\/li>\n\n\n\nCover<\/strong> (voor bijvoorbeeld rolluiken)<\/p><\/li>\n\n\n\nClimate<\/strong> (temperatuur regelen)<\/p><\/li>\n\n\n\nEmpty Column<\/strong> (voor flexibele layouts)<\/p><\/li>\n\n\n\nHorizontal Buttons Stack<\/strong> (meerdere buttons op een rij)<\/p><\/li>\n\n\n\nMediaplayer<\/strong> (bediening van je Sonos, Chromecast etc.)<\/p><\/li>\n\n\n\nPop-up<\/strong> (voor geavanceerde info of instellingen)<\/p><\/li>\n\n\n\nSelect<\/strong> (dropdown menu’s)<\/p><\/li>\n\n\n\nSeperator<\/strong> (visuele scheiding tussen elementen)<\/p><\/li>\n<\/ul>\n\n\n\nEen pop-up maken? Zo doe je dat:<\/strong><\/span><\/h3>\n\n\n\n\nVoeg eerst in je selectie een Button<\/strong> toe, dit wordt je trigger voor de pop-up.<\/p><\/li>\n\n\n\nMaak in je Selection<\/strong> een nieuwe Vertical Stack<\/strong> aan.<\/p><\/li>\n\n\n\nVoeg als eerste kaart in die vertical stack een Bubble Card<\/strong> toe en selecteer de kaart type Pop-up<\/strong>.<\/p><\/li>\n\n\n\nBij de Hash<\/strong> van die Bubble Card geef je een unieke naam<\/strong> op (bijvoorbeeld #pop-up-woonkamer<\/code>).<\/p><\/li>\n\n\n\nVervolgens kun je de Vertical Stack vullen met de kaarten die je in je pop-up wilt tonen: sliders, statusinformatie, bedieningen, alles wat je nodig hebt.<\/p><\/li>\n<\/ol>\n\n\n\n
Om de pop-up werkend te maken:<\/strong><\/span><\/h3>\n\n\n\nGa terug naar je oorspronkelijke Bubble Button Card<\/strong> (de knop die je eerder maakte).<\/p>\n\n\n\n\nBij Tap Action \u2192 On Icon\/Button<\/strong> kies je Navigate<\/strong>.<\/p><\/li>\n\n\n\nAls navigatie-doel vul je de naam in die je bij de Hash hebt opgegeven (bijvoorbeeld #pop-up-woonkamer<\/code>).<\/span><\/p><\/li>\n<\/ul>\n\n\n\nKlik op opslaan en je bent Klaar. Tik je op de button, dan opent soepel je custom pop-up met alle ingestelde kaarten.<\/p>\n\n\n\n
Pro tip:<\/strong> Werk netjes met logische hash-namen en duidelijke indelingen, zeker als je straks tientallen pop-ups hebt draaien. <\/p>\n\n\n\n<\/div>\n\n\n\nSub Buttons: compacte info en acties, direct in je knop<\/strong><\/span><\/h2>\n\n\n\n
Sub Buttons in Bubble Cards zijn geen dropdowns of pop-ups, maar extra elementen die direct in de knop zelf worden weergegeven<\/strong>. Denk aan kleine iconen, statusinfo of aanvullende actieknoppen die netjes binnen de hoofdknop gepositioneerd zijn.<\/p>\n\n\n\nZe zijn ideaal voor situaties waar je meerdere stukjes informatie of acties wilt combineren binnen \u00e9\u00e9n compacte kaart. Bijvoorbeeld:<\/p>\n\n\n\n
\n- Een lichtknop met direct zichtbaar of het dimniveau is ingesteld.<\/li>\n\n\n\n
- Een verwarmingsknop met een mini-temp status en een \u201cboost\u201d-icoon erbij.<\/li>\n<\/ul>\n\n\n\n
Iedere Sub Button kun je voorzien van een eigen icoon, kleur, positie en tap-action. Je hebt volledige controle over layout en gedrag, en dat allemaal zonder het dashboard rommelig of druk te maken.<\/p>\n\n\n\n
<\/div>\n\n\n\nStyling opties: maak je Bubble Cards helemaal eigen<\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Iedere kaart binnen Bubble Card heeft een eigen “Styling”<\/strong> tabblad, waarmee je volledige controle hebt over hoe je bubbels eruitzien. Geen standaard blauwe knopjes meer, vanaf hier kun je echt alles tweaken naar jouw smaak.<\/p>\n\n\n\nBij “Card Layout”<\/strong> bepaal je onder andere de grootte van de bubble, zodat je kleinere statusbubbels of juist grote, prominente bedieningsknoppen kunt maken. Perfect om je dashboard overzichtelijk \u00e9n functioneel te houden.<\/p>\n\n\n\nWil je nog verder gaan?<\/strong>
Dan duik je in het tabblad “Custom Styles \/ Templates”<\/strong>. Hier kun je met eenvoudige CSS-achtige regels:<\/p>\n\n\n\n\nDe achtergrondkleur van je bubble aanpassen.<\/p><\/li>\n\n\n\n
De kleur en het uiterlijk van je icoon wijzigen.<\/p><\/li>\n\n\n\n
Condities instellen, zoals: andere kleur bij bepaalde status (bijvoorbeeld rood als een raam openstaat).<\/p><\/li>\n\n\n\n
Dynamisch iconen wisselen afhankelijk van apparaatstatus (bijvoorbeeld een lamp-icoon verandert naar een ‘power-off’ icoon als het licht uitgaat).<\/p><\/li>\n\n\n\n
Zelfs animaties toevoegen, zoals een pulserend effect als een sensor in alarmstatus komt.<\/p><\/li>\n<\/ul>\n\n\n\n
Kortom: alles is aan te passen, tot op het kleinste detail.<\/strong>
Of je nu een strak minimalistisch dashboard wilt bouwen of een kleurrijke interactieve interface, met de stylingopties van Bubble Card zit je goed.<\/p>\n\n\n\n<\/div>\n\n\n\nCustom style \/ template voorbeelden<\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Op de tabbladen hieronder vind je stylingcodes die je kunt gebruiken met de bubbelcards.<\/p>\n\n\n\n
Let op!<\/strong> In sommige codes moet je nog entiteiten aanpassen om ze goed te laten werken. Alle entiteiten moeten tussen enkele aanhalingstekens staan.<\/p>\n\n\n\nVoor de kleuren kan je de HTML kleuren gebruiken. Klik hier<\/a> voor de kleuren<\/p>\n\n\n\n
Waarom zou je Bubble Cards gebruiken?<\/strong><\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Omdat standaardkaarten gewoon niet genoeg zijn als je n\u00e9t wat meer controle, snelheid en stijl wilt. Met Bubble Cards kun je zelf bepalen hoe je dashboard eruitziet \u00e9n hoe het zich gedraagt. Geen statische lijsten of eindeloze tabbladen meer, maar een interface die intu\u00eftief en visueel krachtig is.<\/p>\n\n\n\n
Je gebruikt Bubble Cards bijvoorbeeld als je:<\/p>\n\n\n\n
\n- Sneller wilt schakelen tussen apparaten, zonder eerst door meerdere schermen te klikken.<\/li>\n\n\n\n
- Een logische en overzichtelijke layout wilt, waarbij je elementen kunt groeperen zoals jij dat wilt.<\/li>\n\n\n\n
- Pop-ups wilt gebruiken voor extra info of bediening, zonder het hoofdscherm te verlaten.<\/li>\n\n\n\n
- Condities of statuswijzigingen<\/strong> visueel <\/strong>wilt weergeven met kleurwisselingen, icon-swaps of animaties.<\/li>\n\n\n\n
- Een dashboard wilt maken dat je niet alleen functioneel gebruikt, maar ook graag laat zien.<\/li>\n<\/ul>\n\n\n\n
Kortom: Bubble Cards geven je als power user de tools om je smart home interface \u00e9cht op maat te maken, zonder limieten, zonder concessies.<\/p>\n\n\n\n
<\/div>\n\n\n\nBubble Cards: niet alleen dashboards, maar ook ingebouwde pop-ups<\/span><\/h3>\n\n\n\n<\/p>\n\n\n\n
Bubble Cards worden niet alleen gebruikt om je Home Assistant dashboard visueel op te poetsen; ze bieden ook native ondersteuning voor pop-up functionaliteit.<\/p>\n\n\n\n
In plaats van een aparte integratie of extra addon te gebruiken, kun je rechtstreeks binnen de Bubble Card instellen dat een klik op een icoon of knop een volledig gestylede pop-up opent. Denk aan een snelle bediening voor een lamp (aan\/uit, dimmen, kleur aanpassen) zonder je hele dashboard te verlaten.<\/p>\n\n\n\n
Het mooie: je hebt volledige controle over de inhoud en layout van de pop-up, inclusief custom knoppen, sliders en statusweergaves. Alles wordt afgehandeld binnen de configuratie van de Bubble Card zelf, wat zorgt voor een cleanere setup en snellere reacties.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\nBubble Card installeren via HACS: zo gepiept<\/span><\/h3>\n\n\n\n<\/p>\n\n\n\n
Om Bubble Cards in je Home Assistant setup te krijgen, gebruik je het liefst HACS (Home Assistant Community Store), de makkelijke en nette manier om custom components te beheren.<\/p>\n\n\n\n
Even in het kort:<\/p>\n\n\n\n
\nOpen je Home Assistant dashboard.<\/p><\/li>\n\n\n\n
Ga naar HACS <\/strong>.<\/p><\/li>\n\n\n\nKlik in de zoekbalk en tik Bubble Card<\/strong> in.<\/p><\/li>\n\n\n\nSelecteer Bubble Card<\/strong> uit de lijst en klik rechts onderin je scherm op Download<\/strong>.<\/p><\/li>\n\n\n\nKlik vervolgens weer op Download<\/b> in het pop up venster.<\/p><\/li>\n<\/ul>\n\n\n\n
Een korte reload van je frontend later en je bent good to go. Klaar om je dashboard om te toveren met dynamische bubbels en stijlvolle pop-ups.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nDashboard bouwen met Bubble Cards: je eigen flow ontwerpen<\/strong><\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Na installatie van de Bubble Card integratie kun je eindelijk \u00e9cht losgaan: je eigen dashboard bouwen, precies zoals jij dat wilt. Binnen Bubble Card kun je verschillende kaarttypes toevoegen, zoals:<\/p>\n\n\n\n
\nButton<\/strong> (de basis voor interacties)<\/p><\/li>\n\n\n\nCover<\/strong> (voor bijvoorbeeld rolluiken)<\/p><\/li>\n\n\n\nClimate<\/strong> (temperatuur regelen)<\/p><\/li>\n\n\n\nEmpty Column<\/strong> (voor flexibele layouts)<\/p><\/li>\n\n\n\nHorizontal Buttons Stack<\/strong> (meerdere buttons op een rij)<\/p><\/li>\n\n\n\nMediaplayer<\/strong> (bediening van je Sonos, Chromecast etc.)<\/p><\/li>\n\n\n\nPop-up<\/strong> (voor geavanceerde info of instellingen)<\/p><\/li>\n\n\n\nSelect<\/strong> (dropdown menu’s)<\/p><\/li>\n\n\n\nSeperator<\/strong> (visuele scheiding tussen elementen)<\/p><\/li>\n<\/ul>\n\n\n\nEen pop-up maken? Zo doe je dat:<\/strong><\/span><\/h3>\n\n\n\n\nVoeg eerst in je selectie een Button<\/strong> toe, dit wordt je trigger voor de pop-up.<\/p><\/li>\n\n\n\nMaak in je Selection<\/strong> een nieuwe Vertical Stack<\/strong> aan.<\/p><\/li>\n\n\n\nVoeg als eerste kaart in die vertical stack een Bubble Card<\/strong> toe en selecteer de kaart type Pop-up<\/strong>.<\/p><\/li>\n\n\n\nBij de Hash<\/strong> van die Bubble Card geef je een unieke naam<\/strong> op (bijvoorbeeld #pop-up-woonkamer<\/code>).<\/p><\/li>\n\n\n\nVervolgens kun je de Vertical Stack vullen met de kaarten die je in je pop-up wilt tonen: sliders, statusinformatie, bedieningen, alles wat je nodig hebt.<\/p><\/li>\n<\/ol>\n\n\n\n
Om de pop-up werkend te maken:<\/strong><\/span><\/h3>\n\n\n\nGa terug naar je oorspronkelijke Bubble Button Card<\/strong> (de knop die je eerder maakte).<\/p>\n\n\n\n\nBij Tap Action \u2192 On Icon\/Button<\/strong> kies je Navigate<\/strong>.<\/p><\/li>\n\n\n\nAls navigatie-doel vul je de naam in die je bij de Hash hebt opgegeven (bijvoorbeeld #pop-up-woonkamer<\/code>).<\/span><\/p><\/li>\n<\/ul>\n\n\n\nKlik op opslaan en je bent Klaar. Tik je op de button, dan opent soepel je custom pop-up met alle ingestelde kaarten.<\/p>\n\n\n\n
Pro tip:<\/strong> Werk netjes met logische hash-namen en duidelijke indelingen, zeker als je straks tientallen pop-ups hebt draaien. <\/p>\n\n\n\n<\/div>\n\n\n\nSub Buttons: compacte info en acties, direct in je knop<\/strong><\/span><\/h2>\n\n\n\n
Sub Buttons in Bubble Cards zijn geen dropdowns of pop-ups, maar extra elementen die direct in de knop zelf worden weergegeven<\/strong>. Denk aan kleine iconen, statusinfo of aanvullende actieknoppen die netjes binnen de hoofdknop gepositioneerd zijn.<\/p>\n\n\n\nZe zijn ideaal voor situaties waar je meerdere stukjes informatie of acties wilt combineren binnen \u00e9\u00e9n compacte kaart. Bijvoorbeeld:<\/p>\n\n\n\n
\n- Een lichtknop met direct zichtbaar of het dimniveau is ingesteld.<\/li>\n\n\n\n
- Een verwarmingsknop met een mini-temp status en een \u201cboost\u201d-icoon erbij.<\/li>\n<\/ul>\n\n\n\n
Iedere Sub Button kun je voorzien van een eigen icoon, kleur, positie en tap-action. Je hebt volledige controle over layout en gedrag, en dat allemaal zonder het dashboard rommelig of druk te maken.<\/p>\n\n\n\n
<\/div>\n\n\n\nStyling opties: maak je Bubble Cards helemaal eigen<\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Iedere kaart binnen Bubble Card heeft een eigen “Styling”<\/strong> tabblad, waarmee je volledige controle hebt over hoe je bubbels eruitzien. Geen standaard blauwe knopjes meer, vanaf hier kun je echt alles tweaken naar jouw smaak.<\/p>\n\n\n\nBij “Card Layout”<\/strong> bepaal je onder andere de grootte van de bubble, zodat je kleinere statusbubbels of juist grote, prominente bedieningsknoppen kunt maken. Perfect om je dashboard overzichtelijk \u00e9n functioneel te houden.<\/p>\n\n\n\nWil je nog verder gaan?<\/strong>
Dan duik je in het tabblad “Custom Styles \/ Templates”<\/strong>. Hier kun je met eenvoudige CSS-achtige regels:<\/p>\n\n\n\n\nDe achtergrondkleur van je bubble aanpassen.<\/p><\/li>\n\n\n\n
De kleur en het uiterlijk van je icoon wijzigen.<\/p><\/li>\n\n\n\n
Condities instellen, zoals: andere kleur bij bepaalde status (bijvoorbeeld rood als een raam openstaat).<\/p><\/li>\n\n\n\n
Dynamisch iconen wisselen afhankelijk van apparaatstatus (bijvoorbeeld een lamp-icoon verandert naar een ‘power-off’ icoon als het licht uitgaat).<\/p><\/li>\n\n\n\n
Zelfs animaties toevoegen, zoals een pulserend effect als een sensor in alarmstatus komt.<\/p><\/li>\n<\/ul>\n\n\n\n
Kortom: alles is aan te passen, tot op het kleinste detail.<\/strong>
Of je nu een strak minimalistisch dashboard wilt bouwen of een kleurrijke interactieve interface, met de stylingopties van Bubble Card zit je goed.<\/p>\n\n\n\n<\/div>\n\n\n\nCustom style \/ template voorbeelden<\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Op de tabbladen hieronder vind je stylingcodes die je kunt gebruiken met de bubbelcards.<\/p>\n\n\n\n
Let op!<\/strong> In sommige codes moet je nog entiteiten aanpassen om ze goed te laten werken. Alle entiteiten moeten tussen enkele aanhalingstekens staan.<\/p>\n\n\n\nVoor de kleuren kan je de HTML kleuren gebruiken. Klik hier<\/a> voor de kleuren<\/p>\n\n\n\n
Kortom: Bubble Cards geven je als power user de tools om je smart home interface \u00e9cht op maat te maken, zonder limieten, zonder concessies.<\/p>\n\n\n\n
Bubble Cards: niet alleen dashboards, maar ook ingebouwde pop-ups<\/span><\/h3>\n\n\n\n<\/p>\n\n\n\n
Bubble Cards worden niet alleen gebruikt om je Home Assistant dashboard visueel op te poetsen; ze bieden ook native ondersteuning voor pop-up functionaliteit.<\/p>\n\n\n\n
In plaats van een aparte integratie of extra addon te gebruiken, kun je rechtstreeks binnen de Bubble Card instellen dat een klik op een icoon of knop een volledig gestylede pop-up opent. Denk aan een snelle bediening voor een lamp (aan\/uit, dimmen, kleur aanpassen) zonder je hele dashboard te verlaten.<\/p>\n\n\n\n
Het mooie: je hebt volledige controle over de inhoud en layout van de pop-up, inclusief custom knoppen, sliders en statusweergaves. Alles wordt afgehandeld binnen de configuratie van de Bubble Card zelf, wat zorgt voor een cleanere setup en snellere reacties.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\nBubble Card installeren via HACS: zo gepiept<\/span><\/h3>\n\n\n\n<\/p>\n\n\n\n
Om Bubble Cards in je Home Assistant setup te krijgen, gebruik je het liefst HACS (Home Assistant Community Store), de makkelijke en nette manier om custom components te beheren.<\/p>\n\n\n\n
Even in het kort:<\/p>\n\n\n\n
\nOpen je Home Assistant dashboard.<\/p><\/li>\n\n\n\n
Ga naar HACS <\/strong>.<\/p><\/li>\n\n\n\nKlik in de zoekbalk en tik Bubble Card<\/strong> in.<\/p><\/li>\n\n\n\nSelecteer Bubble Card<\/strong> uit de lijst en klik rechts onderin je scherm op Download<\/strong>.<\/p><\/li>\n\n\n\nKlik vervolgens weer op Download<\/b> in het pop up venster.<\/p><\/li>\n<\/ul>\n\n\n\n
Een korte reload van je frontend later en je bent good to go. Klaar om je dashboard om te toveren met dynamische bubbels en stijlvolle pop-ups.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nDashboard bouwen met Bubble Cards: je eigen flow ontwerpen<\/strong><\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Na installatie van de Bubble Card integratie kun je eindelijk \u00e9cht losgaan: je eigen dashboard bouwen, precies zoals jij dat wilt. Binnen Bubble Card kun je verschillende kaarttypes toevoegen, zoals:<\/p>\n\n\n\n
\nButton<\/strong> (de basis voor interacties)<\/p><\/li>\n\n\n\nCover<\/strong> (voor bijvoorbeeld rolluiken)<\/p><\/li>\n\n\n\nClimate<\/strong> (temperatuur regelen)<\/p><\/li>\n\n\n\nEmpty Column<\/strong> (voor flexibele layouts)<\/p><\/li>\n\n\n\nHorizontal Buttons Stack<\/strong> (meerdere buttons op een rij)<\/p><\/li>\n\n\n\nMediaplayer<\/strong> (bediening van je Sonos, Chromecast etc.)<\/p><\/li>\n\n\n\nPop-up<\/strong> (voor geavanceerde info of instellingen)<\/p><\/li>\n\n\n\nSelect<\/strong> (dropdown menu’s)<\/p><\/li>\n\n\n\nSeperator<\/strong> (visuele scheiding tussen elementen)<\/p><\/li>\n<\/ul>\n\n\n\nEen pop-up maken? Zo doe je dat:<\/strong><\/span><\/h3>\n\n\n\n\nVoeg eerst in je selectie een Button<\/strong> toe, dit wordt je trigger voor de pop-up.<\/p><\/li>\n\n\n\nMaak in je Selection<\/strong> een nieuwe Vertical Stack<\/strong> aan.<\/p><\/li>\n\n\n\nVoeg als eerste kaart in die vertical stack een Bubble Card<\/strong> toe en selecteer de kaart type Pop-up<\/strong>.<\/p><\/li>\n\n\n\nBij de Hash<\/strong> van die Bubble Card geef je een unieke naam<\/strong> op (bijvoorbeeld #pop-up-woonkamer<\/code>).<\/p><\/li>\n\n\n\nVervolgens kun je de Vertical Stack vullen met de kaarten die je in je pop-up wilt tonen: sliders, statusinformatie, bedieningen, alles wat je nodig hebt.<\/p><\/li>\n<\/ol>\n\n\n\n
Om de pop-up werkend te maken:<\/strong><\/span><\/h3>\n\n\n\nGa terug naar je oorspronkelijke Bubble Button Card<\/strong> (de knop die je eerder maakte).<\/p>\n\n\n\n\nBij Tap Action \u2192 On Icon\/Button<\/strong> kies je Navigate<\/strong>.<\/p><\/li>\n\n\n\nAls navigatie-doel vul je de naam in die je bij de Hash hebt opgegeven (bijvoorbeeld #pop-up-woonkamer<\/code>).<\/span><\/p><\/li>\n<\/ul>\n\n\n\nKlik op opslaan en je bent Klaar. Tik je op de button, dan opent soepel je custom pop-up met alle ingestelde kaarten.<\/p>\n\n\n\n
Pro tip:<\/strong> Werk netjes met logische hash-namen en duidelijke indelingen, zeker als je straks tientallen pop-ups hebt draaien. <\/p>\n\n\n\n<\/div>\n\n\n\nSub Buttons: compacte info en acties, direct in je knop<\/strong><\/span><\/h2>\n\n\n\n
Sub Buttons in Bubble Cards zijn geen dropdowns of pop-ups, maar extra elementen die direct in de knop zelf worden weergegeven<\/strong>. Denk aan kleine iconen, statusinfo of aanvullende actieknoppen die netjes binnen de hoofdknop gepositioneerd zijn.<\/p>\n\n\n\nZe zijn ideaal voor situaties waar je meerdere stukjes informatie of acties wilt combineren binnen \u00e9\u00e9n compacte kaart. Bijvoorbeeld:<\/p>\n\n\n\n
\n- Een lichtknop met direct zichtbaar of het dimniveau is ingesteld.<\/li>\n\n\n\n
- Een verwarmingsknop met een mini-temp status en een \u201cboost\u201d-icoon erbij.<\/li>\n<\/ul>\n\n\n\n
Iedere Sub Button kun je voorzien van een eigen icoon, kleur, positie en tap-action. Je hebt volledige controle over layout en gedrag, en dat allemaal zonder het dashboard rommelig of druk te maken.<\/p>\n\n\n\n
<\/div>\n\n\n\nStyling opties: maak je Bubble Cards helemaal eigen<\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Iedere kaart binnen Bubble Card heeft een eigen “Styling”<\/strong> tabblad, waarmee je volledige controle hebt over hoe je bubbels eruitzien. Geen standaard blauwe knopjes meer, vanaf hier kun je echt alles tweaken naar jouw smaak.<\/p>\n\n\n\nBij “Card Layout”<\/strong> bepaal je onder andere de grootte van de bubble, zodat je kleinere statusbubbels of juist grote, prominente bedieningsknoppen kunt maken. Perfect om je dashboard overzichtelijk \u00e9n functioneel te houden.<\/p>\n\n\n\nWil je nog verder gaan?<\/strong>
Dan duik je in het tabblad “Custom Styles \/ Templates”<\/strong>. Hier kun je met eenvoudige CSS-achtige regels:<\/p>\n\n\n\n\nDe achtergrondkleur van je bubble aanpassen.<\/p><\/li>\n\n\n\n
De kleur en het uiterlijk van je icoon wijzigen.<\/p><\/li>\n\n\n\n
Condities instellen, zoals: andere kleur bij bepaalde status (bijvoorbeeld rood als een raam openstaat).<\/p><\/li>\n\n\n\n
Dynamisch iconen wisselen afhankelijk van apparaatstatus (bijvoorbeeld een lamp-icoon verandert naar een ‘power-off’ icoon als het licht uitgaat).<\/p><\/li>\n\n\n\n
Zelfs animaties toevoegen, zoals een pulserend effect als een sensor in alarmstatus komt.<\/p><\/li>\n<\/ul>\n\n\n\n
Kortom: alles is aan te passen, tot op het kleinste detail.<\/strong>
Of je nu een strak minimalistisch dashboard wilt bouwen of een kleurrijke interactieve interface, met de stylingopties van Bubble Card zit je goed.<\/p>\n\n\n\n<\/div>\n\n\n\nCustom style \/ template voorbeelden<\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Op de tabbladen hieronder vind je stylingcodes die je kunt gebruiken met de bubbelcards.<\/p>\n\n\n\n
Let op!<\/strong> In sommige codes moet je nog entiteiten aanpassen om ze goed te laten werken. Alle entiteiten moeten tussen enkele aanhalingstekens staan.<\/p>\n\n\n\nVoor de kleuren kan je de HTML kleuren gebruiken. Klik hier<\/a> voor de kleuren<\/p>\n\n\n\n
<\/figure>\n<\/div>\n\n\nBubble Card installeren via HACS: zo gepiept<\/span><\/h3>\n\n\n\n<\/p>\n\n\n\n
Om Bubble Cards in je Home Assistant setup te krijgen, gebruik je het liefst HACS (Home Assistant Community Store), de makkelijke en nette manier om custom components te beheren.<\/p>\n\n\n\n
Even in het kort:<\/p>\n\n\n\n
\nOpen je Home Assistant dashboard.<\/p><\/li>\n\n\n\n
Ga naar HACS <\/strong>.<\/p><\/li>\n\n\n\nKlik in de zoekbalk en tik Bubble Card<\/strong> in.<\/p><\/li>\n\n\n\nSelecteer Bubble Card<\/strong> uit de lijst en klik rechts onderin je scherm op Download<\/strong>.<\/p><\/li>\n\n\n\nKlik vervolgens weer op Download<\/b> in het pop up venster.<\/p><\/li>\n<\/ul>\n\n\n\n
Een korte reload van je frontend later en je bent good to go. Klaar om je dashboard om te toveren met dynamische bubbels en stijlvolle pop-ups.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/div>\n\n\n\nDashboard bouwen met Bubble Cards: je eigen flow ontwerpen<\/strong><\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Na installatie van de Bubble Card integratie kun je eindelijk \u00e9cht losgaan: je eigen dashboard bouwen, precies zoals jij dat wilt. Binnen Bubble Card kun je verschillende kaarttypes toevoegen, zoals:<\/p>\n\n\n\n
\nButton<\/strong> (de basis voor interacties)<\/p><\/li>\n\n\n\nCover<\/strong> (voor bijvoorbeeld rolluiken)<\/p><\/li>\n\n\n\nClimate<\/strong> (temperatuur regelen)<\/p><\/li>\n\n\n\nEmpty Column<\/strong> (voor flexibele layouts)<\/p><\/li>\n\n\n\nHorizontal Buttons Stack<\/strong> (meerdere buttons op een rij)<\/p><\/li>\n\n\n\nMediaplayer<\/strong> (bediening van je Sonos, Chromecast etc.)<\/p><\/li>\n\n\n\nPop-up<\/strong> (voor geavanceerde info of instellingen)<\/p><\/li>\n\n\n\nSelect<\/strong> (dropdown menu’s)<\/p><\/li>\n\n\n\nSeperator<\/strong> (visuele scheiding tussen elementen)<\/p><\/li>\n<\/ul>\n\n\n\nEen pop-up maken? Zo doe je dat:<\/strong><\/span><\/h3>\n\n\n\n\nVoeg eerst in je selectie een Button<\/strong> toe, dit wordt je trigger voor de pop-up.<\/p><\/li>\n\n\n\nMaak in je Selection<\/strong> een nieuwe Vertical Stack<\/strong> aan.<\/p><\/li>\n\n\n\nVoeg als eerste kaart in die vertical stack een Bubble Card<\/strong> toe en selecteer de kaart type Pop-up<\/strong>.<\/p><\/li>\n\n\n\nBij de Hash<\/strong> van die Bubble Card geef je een unieke naam<\/strong> op (bijvoorbeeld #pop-up-woonkamer<\/code>).<\/p><\/li>\n\n\n\nVervolgens kun je de Vertical Stack vullen met de kaarten die je in je pop-up wilt tonen: sliders, statusinformatie, bedieningen, alles wat je nodig hebt.<\/p><\/li>\n<\/ol>\n\n\n\n
Om de pop-up werkend te maken:<\/strong><\/span><\/h3>\n\n\n\nGa terug naar je oorspronkelijke Bubble Button Card<\/strong> (de knop die je eerder maakte).<\/p>\n\n\n\n\nBij Tap Action \u2192 On Icon\/Button<\/strong> kies je Navigate<\/strong>.<\/p><\/li>\n\n\n\nAls navigatie-doel vul je de naam in die je bij de Hash hebt opgegeven (bijvoorbeeld #pop-up-woonkamer<\/code>).<\/span><\/p><\/li>\n<\/ul>\n\n\n\nKlik op opslaan en je bent Klaar. Tik je op de button, dan opent soepel je custom pop-up met alle ingestelde kaarten.<\/p>\n\n\n\n
Pro tip:<\/strong> Werk netjes met logische hash-namen en duidelijke indelingen, zeker als je straks tientallen pop-ups hebt draaien. <\/p>\n\n\n\n<\/div>\n\n\n\nSub Buttons: compacte info en acties, direct in je knop<\/strong><\/span><\/h2>\n\n\n\n
Sub Buttons in Bubble Cards zijn geen dropdowns of pop-ups, maar extra elementen die direct in de knop zelf worden weergegeven<\/strong>. Denk aan kleine iconen, statusinfo of aanvullende actieknoppen die netjes binnen de hoofdknop gepositioneerd zijn.<\/p>\n\n\n\nZe zijn ideaal voor situaties waar je meerdere stukjes informatie of acties wilt combineren binnen \u00e9\u00e9n compacte kaart. Bijvoorbeeld:<\/p>\n\n\n\n
\n- Een lichtknop met direct zichtbaar of het dimniveau is ingesteld.<\/li>\n\n\n\n
- Een verwarmingsknop met een mini-temp status en een \u201cboost\u201d-icoon erbij.<\/li>\n<\/ul>\n\n\n\n
Iedere Sub Button kun je voorzien van een eigen icoon, kleur, positie en tap-action. Je hebt volledige controle over layout en gedrag, en dat allemaal zonder het dashboard rommelig of druk te maken.<\/p>\n\n\n\n
<\/div>\n\n\n\nStyling opties: maak je Bubble Cards helemaal eigen<\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Iedere kaart binnen Bubble Card heeft een eigen “Styling”<\/strong> tabblad, waarmee je volledige controle hebt over hoe je bubbels eruitzien. Geen standaard blauwe knopjes meer, vanaf hier kun je echt alles tweaken naar jouw smaak.<\/p>\n\n\n\nBij “Card Layout”<\/strong> bepaal je onder andere de grootte van de bubble, zodat je kleinere statusbubbels of juist grote, prominente bedieningsknoppen kunt maken. Perfect om je dashboard overzichtelijk \u00e9n functioneel te houden.<\/p>\n\n\n\nWil je nog verder gaan?<\/strong>
Dan duik je in het tabblad “Custom Styles \/ Templates”<\/strong>. Hier kun je met eenvoudige CSS-achtige regels:<\/p>\n\n\n\n\nDe achtergrondkleur van je bubble aanpassen.<\/p><\/li>\n\n\n\n
De kleur en het uiterlijk van je icoon wijzigen.<\/p><\/li>\n\n\n\n
Condities instellen, zoals: andere kleur bij bepaalde status (bijvoorbeeld rood als een raam openstaat).<\/p><\/li>\n\n\n\n
Dynamisch iconen wisselen afhankelijk van apparaatstatus (bijvoorbeeld een lamp-icoon verandert naar een ‘power-off’ icoon als het licht uitgaat).<\/p><\/li>\n\n\n\n
Zelfs animaties toevoegen, zoals een pulserend effect als een sensor in alarmstatus komt.<\/p><\/li>\n<\/ul>\n\n\n\n
Kortom: alles is aan te passen, tot op het kleinste detail.<\/strong>
Of je nu een strak minimalistisch dashboard wilt bouwen of een kleurrijke interactieve interface, met de stylingopties van Bubble Card zit je goed.<\/p>\n\n\n\n<\/div>\n\n\n\nCustom style \/ template voorbeelden<\/span><\/h2>\n\n\n\n<\/p>\n\n\n\n
Op de tabbladen hieronder vind je stylingcodes die je kunt gebruiken met de bubbelcards.<\/p>\n\n\n\n
Let op!<\/strong> In sommige codes moet je nog entiteiten aanpassen om ze goed te laten werken. Alle entiteiten moeten tussen enkele aanhalingstekens staan.<\/p>\n\n\n\nVoor de kleuren kan je de HTML kleuren gebruiken. Klik hier<\/a> voor de kleuren<\/p>\n\n\n\n
Open je Home Assistant dashboard.<\/p><\/li>\n\n\n\n
Ga naar HACS <\/strong>.<\/p><\/li>\n\n\n\n Klik in de zoekbalk en tik Bubble Card<\/strong> in.<\/p><\/li>\n\n\n\n Selecteer Bubble Card<\/strong> uit de lijst en klik rechts onderin je scherm op Download<\/strong>.<\/p><\/li>\n\n\n\n Klik vervolgens weer op Download<\/b> in het pop up venster.<\/p><\/li>\n<\/ul>\n\n\n\n Een korte reload van je frontend later en je bent good to go. Klaar om je dashboard om te toveren met dynamische bubbels en stijlvolle pop-ups.<\/p>\n\n\n\n <\/p>\n\n\n\n Na installatie van de Bubble Card integratie kun je eindelijk \u00e9cht losgaan: je eigen dashboard bouwen, precies zoals jij dat wilt. Binnen Bubble Card kun je verschillende kaarttypes toevoegen, zoals:<\/p>\n\n\n\n Button<\/strong> (de basis voor interacties)<\/p><\/li>\n\n\n\n Cover<\/strong> (voor bijvoorbeeld rolluiken)<\/p><\/li>\n\n\n\n Climate<\/strong> (temperatuur regelen)<\/p><\/li>\n\n\n\n Empty Column<\/strong> (voor flexibele layouts)<\/p><\/li>\n\n\n\n Horizontal Buttons Stack<\/strong> (meerdere buttons op een rij)<\/p><\/li>\n\n\n\n Mediaplayer<\/strong> (bediening van je Sonos, Chromecast etc.)<\/p><\/li>\n\n\n\n Pop-up<\/strong> (voor geavanceerde info of instellingen)<\/p><\/li>\n\n\n\n Select<\/strong> (dropdown menu’s)<\/p><\/li>\n\n\n\n Seperator<\/strong> (visuele scheiding tussen elementen)<\/p><\/li>\n<\/ul>\n\n\n\n Voeg eerst in je selectie een Button<\/strong> toe, dit wordt je trigger voor de pop-up.<\/p><\/li>\n\n\n\n Maak in je Selection<\/strong> een nieuwe Vertical Stack<\/strong> aan.<\/p><\/li>\n\n\n\n Voeg als eerste kaart in die vertical stack een Bubble Card<\/strong> toe en selecteer de kaart type Pop-up<\/strong>.<\/p><\/li>\n\n\n\n Bij de Hash<\/strong> van die Bubble Card geef je een unieke naam<\/strong> op (bijvoorbeeld Vervolgens kun je de Vertical Stack vullen met de kaarten die je in je pop-up wilt tonen: sliders, statusinformatie, bedieningen, alles wat je nodig hebt.<\/p><\/li>\n<\/ol>\n\n\n\n Ga terug naar je oorspronkelijke Bubble Button Card<\/strong> (de knop die je eerder maakte).<\/p>\n\n\n\n Bij Tap Action \u2192 On Icon\/Button<\/strong> kies je Navigate<\/strong>.<\/p><\/li>\n\n\n\n Als navigatie-doel vul je de naam in die je bij de Hash hebt opgegeven (bijvoorbeeld Klik op opslaan en je bent Klaar. Tik je op de button, dan opent soepel je custom pop-up met alle ingestelde kaarten.<\/p>\n\n\n\n Pro tip:<\/strong> Werk netjes met logische hash-namen en duidelijke indelingen, zeker als je straks tientallen pop-ups hebt draaien. <\/p>\n\n\n\n Ze zijn ideaal voor situaties waar je meerdere stukjes informatie of acties wilt combineren binnen \u00e9\u00e9n compacte kaart. Bijvoorbeeld:<\/p>\n\n\n\n Iedere Sub Button kun je voorzien van een eigen icoon, kleur, positie en tap-action. Je hebt volledige controle over layout en gedrag, en dat allemaal zonder het dashboard rommelig of druk te maken.<\/p>\n\n\n\n <\/p>\n\n\n\n Iedere kaart binnen Bubble Card heeft een eigen “Styling”<\/strong> tabblad, waarmee je volledige controle hebt over hoe je bubbels eruitzien. Geen standaard blauwe knopjes meer, vanaf hier kun je echt alles tweaken naar jouw smaak.<\/p>\n\n\n\n Bij “Card Layout”<\/strong> bepaal je onder andere de grootte van de bubble, zodat je kleinere statusbubbels of juist grote, prominente bedieningsknoppen kunt maken. Perfect om je dashboard overzichtelijk \u00e9n functioneel te houden.<\/p>\n\n\n\n Wil je nog verder gaan?<\/strong> De achtergrondkleur van je bubble aanpassen.<\/p><\/li>\n\n\n\n De kleur en het uiterlijk van je icoon wijzigen.<\/p><\/li>\n\n\n\n Condities instellen, zoals: andere kleur bij bepaalde status (bijvoorbeeld rood als een raam openstaat).<\/p><\/li>\n\n\n\n Dynamisch iconen wisselen afhankelijk van apparaatstatus (bijvoorbeeld een lamp-icoon verandert naar een ‘power-off’ icoon als het licht uitgaat).<\/p><\/li>\n\n\n\n Zelfs animaties toevoegen, zoals een pulserend effect als een sensor in alarmstatus komt.<\/p><\/li>\n<\/ul>\n\n\n\n Kortom: alles is aan te passen, tot op het kleinste detail.<\/strong> <\/p>\n\n\n\n Op de tabbladen hieronder vind je stylingcodes die je kunt gebruiken met de bubbelcards.<\/p>\n\n\n\n Let op!<\/strong> In sommige codes moet je nog entiteiten aanpassen om ze goed te laten werken. Alle entiteiten moeten tussen enkele aanhalingstekens staan.<\/p>\n\n\n\n Voor de kleuren kan je de HTML kleuren gebruiken. Klik hier<\/a> voor de kleuren<\/p>\n\n\n\n<\/figure>\n\n\n\nDashboard bouwen met Bubble Cards: je eigen flow ontwerpen<\/strong><\/span><\/h2>\n\n\n\n
\n
Een pop-up maken? Zo doe je dat:<\/strong><\/span><\/h3>\n\n\n\n
\n
#pop-up-woonkamer<\/code>).<\/p><\/li>\n\n\n\nOm de pop-up werkend te maken:<\/strong><\/span><\/h3>\n\n\n\n
\n
#pop-up-woonkamer<\/code>).<\/span><\/p><\/li>\n<\/ul>\n\n\n\nSub Buttons: compacte info en acties, direct in je knop<\/strong><\/span><\/h2>\n\n\n\n
Sub Buttons in Bubble Cards zijn geen dropdowns of pop-ups, maar extra elementen die direct in de knop zelf worden weergegeven<\/strong>. Denk aan kleine iconen, statusinfo of aanvullende actieknoppen die netjes binnen de hoofdknop gepositioneerd zijn.<\/p>\n\n\n\n\n
Styling opties: maak je Bubble Cards helemaal eigen<\/span><\/h2>\n\n\n\n
Dan duik je in het tabblad “Custom Styles \/ Templates”<\/strong>. Hier kun je met eenvoudige CSS-achtige regels:<\/p>\n\n\n\n\n
Of je nu een strak minimalistisch dashboard wilt bouwen of een kleurrijke interactieve interface, met de stylingopties van Bubble Card zit je goed.<\/p>\n\n\n\nCustom style \/ template voorbeelden<\/span><\/h2>\n\n\n\n