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

[Cloos]

Bubble Card 2

v2.3.0-beta.2

Hi everyone!

Here is a huge beta release with some new features, a lot of bug fixes, and major optimizations! I’ve also worked a lot on the editor, it should not freeze anymore on some setups/browsers

Here are all the details:

---

New Features

• Slider live update: Added an option in the editor to revert to the slider previous behavior. In YAML you can add slider_live_update: true. #817

  

• Pop-up slide to close distance: You can now change the « Slide to close distance » in the pop-up editor. In YAML you can add slide_to_close_distance: 300, this is the distance that you need to slide (in pixels) to close a pop-up.

  

• Select border variable: You can now change the border CSS of a selected select card with the —bubble-select-border variable. #794

• Separator line color variable: You can now change the separator line background color with —bubble-line-background-color.

• Light color variable: You can now replace the light color variable with --bubble-light-color, for example on a slider button you can change it like this in your custom styles:

  ha-card {
    --bubble-light-color: var(--accent-color);
    --bubble-icon-background-color: var(--ha-card-background);
  }
  .bubble-range-fill {
    opacity: 1 !important;
  }
  

Bug Fixes and Optimizations

• Editor freezing issue: The editor is not freezing anymore on some setups/browsers. #799 #698
• Page initialization: Faster page initialization on some setups.
• CPU usage: Significantly lower CPU usage on some setups. #799 and maybe #711
• Pop-up background update: Pop-up background_update feature fixed, try this if you have an issue displaying a specific pop-up.
• Pop-up speed: Pop-ups are now faster (yes again) on some setups.
• Long term memory management: Better long term memory management. #799
• Event listeners for pop-ups: Better and lighter event listeners system for handling the pop-ups.
• Global event listeners for tap actions: Better and lighter global event listeners system for handling the tap actions.
• Select arrow background variable: Replaced the select arrow background variable with --bubble-select-arrow-background-color. #794
• Dropdown menus in pop-ups: Some dropdown menus from some custom cards were not appearing when placed inside of a pop-up, this is now fixed! #469 and #816
• Hold action optimization: The hold action is now automatically triggered after the delay.
• Safari slider button issue: Fixed an issue on Safari where slider buttons were flashing when a pop-up was opened.
• Media player icon issue: Fixed? Issue with Media Player Icon (z-index?) appearing in front of sticky moving card. #823
• Binary sensors icon: Fix: recover icon from binary_sensors. #828 by @brunosabot
• Google Wifi Online value: Fix: support Google Wifi Online value as active. #829 by @brunosabot
• Cover card icon variable: Fix icon variable in cover-card. #776 by @Muenchen-Michi
• Styling fixes: Some various styling fixes.

---

I can’t wait for your feedback as always!

Oh, and one more thing! I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

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

Release Bubble Card v2.3.0-beta.2 · Clooos/Bubble-Card

[stefan1982 (Stefan)]

@clooos: Any help would be appreciated…

[Cloos]

Hi! Bubble Card doesn’t supports Jinja templates, take a look at the GitHub documentation, there is a Templates section that explain how you can do this.

[edcoppen]

Hi there, your cards are very smart. I’m trying to change font colour and see you’ve achieved this, but I can’t work out which part of your code does it.

If you can help I’ll be very grateful. None of the examples on GitHub relate to text colour.

[Will_Fezz]

    .bubble-button-card-container {
        color: whatever-color
    }

Add this to styling options —> Custom Styles/Templates. It should work.

[Cloos]

Thank you for helping him! You just forgot to add the !important; at the end of the color: line.

[edcoppen]

So I tested this and it changed the title text. I am actually hoping to change the colour of just a sub-button text.

I am using show attribute to show the current temperature of a climate entity. I want to add a conditional so that the temperature text in the sub button becomes red when the heating is on. Is this possible please?

Edit: For anyone trying to achieve something similar this is what I eventually puzzled out…

.bubble-sub-button-2 {
  color: ${hass.states['climate.study'].attributes.hvac_action === 'heating' ? 'red' : ''} !important;
}

[DBunevich (Dmitry Bunevich)]

Many thanks!
Actually, does it work for you?
I’ve tried, but it doesn’t:

type: custom:bubble-card
card_type: select
entity: select.dehumidifier_wind_speed
card_layout: large
styles: |-
  .bubble-select-card-container:
    background: rgba(0,0,0,0.3) !important;
        }

I have the same problem assigning custom “Accent” colour too to “Select” and “mini-media-player” cards.

[nightfever]

@DBunevich

.bubble-select-card-container:

change it to .bubble-select-card-container {

[stefan1982 (Stefan)]

Amazing… thank you again @Clooos!

If we update to the newest version, and my bubble-buttons are fully overwritten by custom CSS stylings, are there going to be a lot of changes needed? Or is it perfectly backwards compatible?

would love to try the new v2.3 beta, but I’m a bit hesitant todo so, as I’m not sure if my dashboard will survive the update. I really have a lot of custom styles defined and functionality inside the custom styles section…

[Cloos]

There is no breaking change in this release, so you can update without hesitation. And you can still go back if you want, your config will not change.

[DBunevich (Dmitry Bunevich)]

@Cloos,
I would like to thank you for such an amazing card which is actually a design language by itself (at times it’s better than Mushroom cards). Thanks to “Bubble Cards” I was able to update my Dashboard, make it more consistent and modern.

Few suggestions which I would like to share:

Separator:

1. Would be useful to make it active by the to active “More-info” if there is a weather or something else

Media:

1. Would be useful to have incremental volume change instead of slider only
2. Other “Cover” options would be good to have

Pup-up:

1. Would be good to adjust max size of the pop-up for the desktop (in my case it’s very big, but on the phone all is ok)

Slider:

1. Slider doesn’t work correctly with my “switch” entity which is used for the water valve. Mushroom similar card works fine instead.

Horizontal stack cards:

1. It would be good if it will have more customization available. I was also trying to change the colour, but “Templates” instruction doesn’t work for some reason, or I made a mistake

Main menu:

Climate control:

Lighting:

Media card (very big remote control in pop-up):

Industrial equipment:

[DBunevich (Dmitry Bunevich)]

Does anyone know if it is possible to make conditional cards based on 3 criterias of the entity:

styles: |2-
        .bubble-sub-button-1 { 
         background-color: ${hass.states['switch.entrance_water_valve'].state === 'on' ? 'var(--accent-color)' : 'rgba(0,0,0,0.2)'} !important;
          }
        ${subButtonIcon[0].setAttribute("icon", hass.states['switch.entrance_water_valve'].state === 'off' ? 'mdi:valve-closed' : 'mdi:valve-open')}
          }

I would like to conditional change the icon based on the following criteria of number.entrance_water_valve_threshold:

0 - mdi:valve-closed
1-60 - mdi:valve
61-100 - mdi:valve-open

[ciddi89 (Christian)]

This should work:

${subButtonIcon[0].setAttribute("icon", 
  hass.states['switch.entrance_water_valve'].state == 0 
    ? 'mdi:valve-closed' 
    : (hass.states['switch.entrance_water_valve'].state > 0 && hass.states['switch.entrance_water_valve'].state <= 60) 
      ? 'mdi:valve' 
      : 'mdi:valve-open')}

[DBunevich (Dmitry Bunevich)]

Apparently it doesn’t work. Do you have any ideas?

[ciddi89 (Christian)]

yes it is the wrong entity. sorry. try this:

${subButtonIcon[0].setAttribute("icon", 
  hass.states['number.entrance_water_valve_threshold'].state == 0 
    ? 'mdi:valve-closed' 
    : (hass.states['number.entrance_water_valve_threshold'].state > 0 && hass.states['number.entrance_water_valve_threshold'].state <= 60) 
      ? 'mdi:valve' 
      : 'mdi:valve-open')}

[DBunevich (Dmitry Bunevich)]

Thank you so much! It works now!

[Neokimx]

How did you manage to change the background color of the horizontal button stack at the bottom?

[flobidan]

Does this mean that you click on “solar elevation” and the card below changes? How did you implement it, with helpers and conditions for the different cards?

[DBunevich (Dmitry Bunevich)]

Yes, exactly, and it’s very handy thing to use. I am using it now across all the dashboard.
I’ve taken instructions from the guy on the Youtube:
Create Dashboard Tabs in Home Assistant (youtube.com)

It’s only the code in the dashboard. Helpers and other things are not required.

Should you have any questions, please let me know.