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

DerHerzog7 · August 8, 2024, 7:03am

For some reason I can’t get this to work…

Is your system a Daikin?

Sporbillis · August 8, 2024, 9:58am

Hello all, first of all thank you for the awesome bubble card. It’s amazing. I have figured out all the things I want to do but I can’t figure out how to do the dynamic background color of each button on the horizontal stack when the state of a light in a room for example is on. Here is what I currently have and it’s not working. It’s always kind of white.

type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: false
highlight_current_view: true
hide_gradient: false
1_name: Entrance
1_icon: fas:dungeon
1_link: '#entrance'
1_entity: sensor.entrance_lights_status
2_name: Hallway
2_icon: mdi:wall-sconce-flat
2_link: '#hallway'
rise_animation: true
card_mod:
  style: |
    /* Ensure the dynamic color reflects the sensor's state */
    .bubble-button[data-index="1"] > .color-background {
      background-color: ${hass.states['sensor.entrance_lights_status'].state === 'on' ? 'orange' : 'black'} !important;
    }
    .bubble-button[data-index="2"] > .color-background {
      background-color: 'default' !important; /* Adjust as needed */
    }

Basically when the entitiy I assigned is on then the background of the button to change color. Can you help? Thanks

Edit:
Figured it out. It seems that the bubble card doesn’t support state of sensor therefore I have to write each entity individually. Here is how i made it work:

type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: false
highlight_current_view: true
hide_gradient: false
1_name: Entrance
1_icon: fas:dungeon
1_link: '#entrance'
1_entity: sensor.entrance_lights_status
2_name: Hallway
2_icon: mdi:wall-sconce-flat
2_link: '#hallway'
rise_animation: true
styles: |
  ha-card {
    margin-bottom: 65px !important;
  }
  .horizontal-buttons-stack::before {
    display: none !important;
  }
  .entrance {
    background-color: ${hass.states['light.smart_rgb_bulb_2104094794039090848948e1e96b2677'].state === 'on' || hass.states['light.smart_rgb_bulb_2104094703472890848948e1e96b1ea6'].state === 'on' ? 'green' : 'black'} !important;
  }

It would be good to support sensor. as well so we can group lights or use the ones we have as sensors.

Thanks!

Edit2:

When i click the button to enter the popup, color goes back to white. Any chance we can keep the color I setup ?

Wolvboot · August 8, 2024, 1:01pm

I’m sure you’re all already aware that the new grid spacing in sections view in 2024.8 messes up the new bubble card thicker section view. Question is whether I should revert to the original look (which seems to work fine, but it’s a bunch of manual labor switching everything back) or if this will be fixed?

slofii · August 8, 2024, 1:02pm

Clooos is already working on it.

github.com/Clooos/Bubble-Card

Margins broken after 2024.8 update

opened 10:05PM - 07 Aug 24 UTC

danewhitfield

bug

**Describe the bug** Margins broken after 2024.8 update **To Reproduce** … Steps to reproduce the behavior: 1. Go to any view that is using the bubble-card 2. See error **Expected behavior** Previously the margins worked fine, expected space between cards within a section. **Screenshots** <img width="1449" alt="Screenshot 2024-08-07 at 23 02 07" src="https://github.com/user-attachments/assets/92e53570-d669-4682-8e62-3d29c8fa71d2"> **YAML** ```yaml type: custom:bubble-card card_type: button button_type: slider entity: light.dining_area name: TV Area force_icon: false show_icon: true show_name: true show_state: false show_last_changed: false show_attribute: false scrolling_effect: true card_layout: large sub_button: - entity: switch.living_room_plug icon: mdi:power-socket-uk tap_action: action: toggle double_tap_action: action: more-info ``` **Informations (please complete the following information):** - OS: All devices - Browser/App: All browsers - Bubble Card version: 2.1.1 - Home Assistant version: 2024.8.0 Thank you! 🍻

Dani_Leal · August 8, 2024, 1:12pm

Hi! I want to make a CSS change that affects all the bubbles without having to put the style in each card. Where should I put it? The style is: .type-custom-bubble-card .bubble-button-background {
box-shadow: var(–ha-card-box-shadow, none);
}

Thanks

Sporbillis · August 8, 2024, 1:25pm

Hello again,
Any idea how to have the card fixed in one place? For example at the top? Now is currently floating and overlapping everything, both desktop and mobile. In the edit view i have it placed in second column 1st row but still works like this. on mobile is even worse. What Am I doing wrong? See my code and screenshot please:

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_name: Entrance
1_icon: fas:dungeon
1_link: '#entrance'
2_name: Hallway
2_icon: mdi:wall-sconce-flat
2_link: '#hallway'
3_link: '#bedroom'
3_name: Bedroom
3_icon: fas:bed
rise_animation: false
auto_order: false
highlight_current_view: false
hide_gradient: false
styles: |
  ha-card {
    margin-bottom: 65px !important;
    position: relative;
    }
  .bubble-button-card-container {
    background: none;
  }
  .horizontal-buttons-stack::before {
    display: none !important;
  }
  .entrance {
    background-color: ${hass.states['light.smart_rgb_bulb_2104094794039090848948e1e96b2677'].state === 'on' || hass.states['light.smart_rgb_bulb_2104094703472890848948e1e96b1ea6'].state === 'on' ? 'orange' : 'black'} !important;
  }
  .hallway {
    background-color: ${hass.states['light.smart_rgb_bulb_2104093499028190848948e1e96aeb56'].state === 'on' || hass.states['light.smart_rgb_bulb_2104094349533890848948e1e96ab3d5'].state === 'on' ? 'orange' : 'black'} !important;
  }
  .bedroom {
    background-color: ${hass.states['switch.bedroom_switch'].state === 'on' ? 'orange' : 'black'} !important;
  }

Dentifrice · August 8, 2024, 2:32pm

Hi, I’m not very good with syntax. I want to change background color based on value.

I read the documentation and I see an example for on and off :

.bubble-button-background {
opacity: 1 !important;
background-color: ${state === ‘on’ ? ‘blue’ : ‘red’} !important;

How can I modify this so that instead of on/off state it is :

Value is less than 10 = green
between 10 and 19 = orange
20 and higher = red

thank you!

Cloos · August 8, 2024, 9:28pm

Hi everyone! If you are using Bubble Card with the new section view, please wait before updating Home Assistant to the new 2024.8 release.

This new HA change is tricky. The cards now have to be 10px shorter, so I’m not even sure if I’ll be able to keep the 2 rows layout.

However, I’m planning to add a new layout where the sub-buttons are below the name/state and the icon. This way, there will be much more space.

We are on it!

moemeli · August 8, 2024, 10:18pm

Hi Cloos!
I made a manual style adjustment to container height 56px to counter the new update.
To me this still looks great, even though a bit narrow edges. For comparison the TV card is a mushroom media card with same form factor as the old large layout of bubble card.
I have no idea why the mushroom card margin/padding still works when bubble doesn’t…

Cloos · August 8, 2024, 10:21pm

Interesting for the Mushroom card! I will take a look at that possibility.

SubJimbo · August 9, 2024, 7:00am

Mine is a Samsung Ducted AC. It should all work the same no matter the brand if you have it set up as a climate entity.

Mar1us · August 9, 2024, 8:26am

you can add the folloing in the styling:

.bubble-button-card-container {
  background-color: ${state < 1000 ? 'var(--success-color)' : state < 1500 ? 'var(--warning-color)' : 'var(--error-color)'};
}
.bubble-icon {
  color: ${state < 1000 ? 'var(--success-color)' : state < 1500 ? 'var(--warning-color)' : 'var(--error-color)'} !important;
  opacity: 0.6 !important;
}

Cloos · August 9, 2024, 3:34pm

Bubble Card 2

v2.2.0-beta.1

Hi everyone!

I’m finally able to release this new version that fixes the large layout issue on a section view since the new Home Assistant 2024.8 update!

But that’s not all, I’ve worked a lot on some optimizations and fixes. The most noticeable improvement is the pop-ups, they are now much faster and more reliable on all devices/browsers!

This beta is a bit rushed, and I really hope that everything is working as it should!

Thank you all for the fast feedback as always!

Bug fixes and optimizations

HA 2024.8 support: Fixed the large layout issue when used on a section view after the Home Assistant 2024.8 update.
Pop-up optimizations: Pop-ups are now much smoother on all devices/browsers!
Displayed states/attributes: Fixed and optimized the displayed states/attributes system, the order is now a bit different too.
Templates: The entity variable was not defined, this is now fixed! It refers to the card entity.
Layout issue: It was impossible to hide the name or the icon in a pop-up header; this is now fixed! #638

I can’t wait for your feedback!

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Somedia · August 9, 2024, 3:49pm

Hey Cloos,

thanks for the update!

Unfortunately the background stays blurry after closing a pop-up.

Lukas

davidcorral94 · August 9, 2024, 4:18pm

Hey,

Since the recent update of HA, my Bubble (v2.1.1) cards seems weird, like lacking a bit of spacing (margin). Also, separators are uglier now:

I’m using Material Rounded theme, but this issue also happens with the default theme.

Thanks!

Cloos · August 9, 2024, 4:45pm

Hi, I’ve just released a new beta that fix that issue, take a look a few post above

Cloos · August 9, 2024, 6:16pm

I’m on it, I will try to release a new beta today

RickFurtado · August 9, 2024, 6:19pm

Genius! By making the year longer you’ve created more relative time space so that everything could fit.

michaelallen · August 9, 2024, 6:33pm

great card. i love it and have what i think it is a great looking mobile dashboard for my family.

i have this:

but what i REALLY want it this:

where the two left subbuttons are justified to the left and the two right subbuttons are justified to the right.

anything helpful would be appreciated. i know im missing something…

type: custom:bubble-card
card_type: button
card_layout: normal
button_type: name
show_icon: false
show_name: false
sub_button:
  - entity: input_boolean.living_room_mood_lighting_dynamic
    icon: mdi:reload
  - name: ''
    icon: mdi:floor-lamp
    show_background: false
    entity: input_select.living_room_mood_lighting
    show_state: true
    show_attribute: false
    show_last_changed: false
    show_arrow: true
  - name: ''
    entity: input_boolean.movie_time
    show_background: true
    tap_action:
      action: toggle
      navigation_path: '#cover'
    hold_action:
      action: more-info
  - name: ''
    icon: ''
    tap_action:
      action: toggle
      service: input_boolean.toggle
    entity: input_boolean.guest_mode
    hold_action:
      action: more-info
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
  }
  .bubble-sub-button-container {
    width: 100%;
    justify-content: space-between !important;
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: inherit !important;
  }
  .bubble-name-container {
    margin-right: 0px !important;
  }
double_tap_action:
  action: none
tap_action:
  action: none
scrolling_effect: false

tvds · August 9, 2024, 7:02pm

Really like your 3rd bubble card. Is that a vacuum? Willing to share the code?