⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

You can try with a text or a state button, then add a tap action for your wake on lan.

thanks for your reply, however I think the link you mentioned is another issue. My popup Cards render all correctly, I only have the issue of “blank space” where my (invisible) popup cards are located (when they are not shown).

Example:
my grid layout is something like this:

grid-template-columns: 0% 100% 0%
grid-template-rows: auto
grid-template-areas: |
      ". title ."
      ". center1 ."
      ". b1 ." 
      ". b2 ." 
      ". b3 ." 
      ". footer ."

b1, b2 and b3 are my bubble popups (I need to define them in the grid layout because otherwise they will get stacked on top of each other and I can’t edit them anymore via the gui editor).
I have a footer card for navigation purposes at the bottom.

With this configuration, there is a blank space between the center1 card and the footer card.
(see screenshot, blank space in red)

If I remove the bubble popup cards, the space is gone:

If I don’t assign the bubble popup cards to the grid areas (b1, b2, b3), there is also no space but the popup cards get stacked on top of each other and it makes it impossible to edit them in the gui editor:

When I place the popup cards at the top of the configuration of the grid layout as suggested, the blank space moves to the top:

grid-template-columns: 0% 100% 0%
grid-template-rows: auto
grid-template-areas: |
      ". b1 ." 
      ". b2 ." 
      ". b3 ." 
      ". title ."
      ". center1 ."
      ". footer ."

maybe anyone is facing the same issue and has another idea

Maybe I’m silly but is there no way to get a background sourrounding all of the buttons?

I’d like to build interfaces using the pop-up system, without actually having it as a pop-up. Similar to the screenshot below, but that being directly on my dashboard.

The dividers and everything are just too nice and its a shame to not use.

image

You cant use existing solutions like vertical-stack-in-card as the buttons overflow the container.

image

Just want to say these sub-buttons are amazing.

So far I’m using them in combination of the styles + states to conditionally show a battery icon on sensors if the battery is low.

        type: custom:bubble-card
        card_type: button
        entity: binary_sensor.motion_detector_2_occupancy
        tap_action:
          action: more-info
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        styles: |-
          .bubble-sub-button-container {
            display: ${hass.states['binary_sensor.motion_detector_1_battery_low'].state === 'off' ? 'none' : 'initial'} !important;
          }
          .bubble-sub-button {
            color: ${hass.states['binary_sensor.motion_detector_1_battery_low'].state === 'off' ? '#F44336' : 'initial'} !important;
          }
        button_type: state
        sub_button:
          - entity: binary_sensor.motion_detector_2_battery_low
            show_state: true
            show_background: false
            show_icon: true
            scrolling_effect: false
5 Likes

So, I’m still pretty fresh with HA. I’m having some trouble with my bubble popup cards. I’m playing around with the LCARS theme and I’ve figured things out for the most part. Then I discovered bubble pop-ups. I’ve set up my stack of buttons and their appropriate hash/links. I create the vertical stack with the first card being the popup linked to my buttons. I then try to add my lights with my card_mod themes. They work and look great. Then I close the pop-up and next time I open it, the card_mod doesn’t apply and I just have ugly coloured buttons.
I delete and re-apply the card_mod, it works, then next time it isnt applied anymore but still in the YAML.
I have no idea what’s going on but it’s driving me crazy… Any help would be greatly appeciated.
This is what it is supposed to look like

And this is what randomly comes up and I have to re-do the card mods and hope it applies.

Forgive my ignorance but if I wanted to change the icon on the sub button based on the state of the sensor using the custom style template how would I do it?

  • Added the possibility to change the icon in a custom style template, you can now do this: ${state === 'on' ? icon.setAttribute("icon", "mdi:lightbulb") : icon.setAttribute("icon", "mdi:lightbulb-off")};

This is currently not possible, I will have to add this possibility.

Bonjour, very nice. Overview of my light panel.
I have a question related to sub_button. The option to change bagkground depending on state is on but for light i could be nice to have the color of the light. Do you think it is feaseable ?
Exemple i tryy to only have one card for arthur room with two light. You see that the light is blue but yellow on the sub_button

Many thanks

This is possible to do that with the custom styles but in a very complex way, I will add the possibility to do that easily probably in the next release, nice suggestion!

I’ve just taken some time to work on my 100% Bubble Card dashboard (and I’ve loved using the v2 for this!), this is still a work in project and I used the new section view with a lot a custom styles, but I will add some template choices in the next release to support the section view by default. It will look like this (this is just one column/section, I’ve splitted it in two for this picture):

7 Likes

Top thanks.
Another idee, i am not fan of the horizontal-stack button to launch pop-up, do you think a new option in the tap action menu could do it? To use any other bubble-card ?

Look very nice your board !

1 Like

You can use the navigate action with your pop-up hash as navigation_path in any Bubble Card tap action since the first project release and also from any card that supports tap actions.

The horizontal buttons stack is not mandatory and I don’t use it in my new dashboard, I’m opening the pop-ups with sub-buttons like the ones at the right of the room sliders.

This is cool. Would love to know how you are implementing this stuff. Like, are the burger menu sub buttons - do they bring up pop ups for each room or something?

This is exactly that :ok_hand:

Ok I know i’ve asked this before, but any chance you can share your code for this? I would love to set something similar up.

This time I will share it and I’m also working on a new documentation with very advanced examples, most of them are going to be from my dashboard.

3 Likes

Thank you, even better !

how can I increase the width in tablet view?
same for also the position - that it will be upper and I can see the whole bubble card.?

Hi, I tried making a light button card like you have here with a bunch of overflowing sub buttons. Are you able to scroll through them? On my end they won’t move at all and I’m not sure if it’s a bug or if it’s not intended to be scrollable.