Bubble Card 2

v2.3.0

Spoiler: This is a massive changelog, please take the time to read it before updating (Minor breaking change alert)

Hi everyone!

I’m back and I’m a bit excited to be finally able to share this new ~~major~~ gigantic update with you all! It took me a lot of time and effort (more than 2 months... damn, that was long), but I’m really proud of how it turned out!

This version introduces a lot of exciting new features, including a highly requested card that many of you have been eagerly waiting for! Alongside these new additions, I’ve fixed way too many bugs and further optimized the code. For some setups, this means even lower resource consumption, and I can say the improvement is truly impressive on low-end/older devices! Yes again... I know.

As always, I can’t wait to hear your feedback. And a huge thank you to all the beta testers and to everyone for your continued support!

P.S.: I’m really sorry for the extensive changelog, I did my best to make it as readable as possible.

Here are the main new features:

Climate card

The climate card is finally available! The mode selection menu is a sub-button that is added automatically when creating the card. You can then modify or remove this sub-button as you wish. After a lot of beta testing, it should supports all type of climate entities and works seamlessly! #398

Select cards and sub-buttons now support attribute lists

Select cards and sub-buttons now support attribute lists for climate, light, and media player entities. This option will only show if your entity is supported. #665

Global CSS variables

You can now modify most of the styles directly in your theme file without needing custom styles! For example, here's my dashboard with less rounded borders and new background colors.

This was achievable with just a few lines added to my theme. Don’t forget to reload your theme using the frontend.reload_themes action, such as via Developer Tools.

Bubble:  
  # Bubble Card variables test
  bubble-border-radius: "8px"
  bubble-main-background-color: "rgb(50,70,90)"
  bubble-secondary-background-color: "rgb(0,70,90)"
  bubble-pop-up-main-background-color: "rgba(200,200,200,0.5)"
  bubble-accent-color: "rgb(100,140,180)"
  bubble-icon-background-color: "rgb(50,80,100)"
  bubble-select-list-width: "200px"
  bubble-select-list-background-color: "rgb(100,140,180)"

I’ll be adding the full list to the documentation soon, but just like with custom styles, you can find all of them by checking the src/cards folder in this repository. In each card folder, you'll find a file named styles.ts. These files contain all the applied styles.

Sub-buttons support light color

If you have a sub-button with a light entity, it will now change its color based on the light’s color. I noticed many of you were achieving this with custom templates, no need for them anymore!

That "Power" sub-button now changes its color based on the light’s color. This pop-up is also modified by the new global variables, though the color harmony might not be the best…

Media player blurred background

A new blurred background option for media player cards based on the media cover has been added, giving a cleaner and more modern look.

Full changelog

⚠️ Breaking change

Backdrop styling changes for pop-ups: The default backdrop is now darker without any blur, improving performance on low-end/older devices. To restore the previous blur effect, in the editor just go to your first pop-up on your view, then go to Styling options > Pop-up styling then change Optional - Backdrop blur to 10 (it was the previous value), or add backdrop_blur: 10 in YAML.

💡 Other 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
Automatic entity matching for "Call service" actions:
A new toggle in the editor ensures Call Service actions will automatically match the card or sub-button entity if defined.

YAML users can use:
```
target:
  entity_id: entity
```
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.
Toggle for disabling background color in sub-buttons:
In the sub-buttons editor, there is now a toggle to disable the background color based on the entity’s state. In YAML: state_background: false. There is also a new toggle to disable the sub-button background colors based on the light color. In YAML: light_background: false.
Select styling:
It's now possible to modify the styles of a select card/sub-button with the new variables. #725
Cover control buttons:
The open/close buttons for covers are now correctly disabled when they should be. #788
Cover stop button:
The stop button for covers is now correctly hidden when not supported.

✔️ Bug fixes and optimizations

Improved light button visibility: Buttons with white light (or without RGB) are now easier to see in bright/light themes. The overall color system has been refined for better handling, and the color can now be customized with the --bubble-light-color variable. #692
Slider optimization:
Button slider updates are now triggered only on release. #686 (Partial optimization for #764)
Slider haptic feedback:
Button slider haptic feedback is now triggered only on release.
Cover attribute fix:
Attributes with a value of "0" were not displayed, this is now fixed! #750
Show name issue:
Disabling the "Text Scrolling Effect" was breaking "Show Name", this is now fixed! #598
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 #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 optimization:
Improved performance of pop-ups for faster load times on some setups (at this point, I’m probably running out of ways to optimize them further! Maybe...).
Fixed pop-up display:
Resolved issues where some pop-ups were not displaying at all, or only after leaving the editor or changing views. #821
Smoother pop-up animations:
Enhanced pop-up animations for a more fluid experience on some setups.
Additional pop-up fixes:
Addressed other pop-up issues, including console errors on some setup. #840 and #791
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.
Slider fixes:
Sliders that were not working anymore are now fixed. #849 #838
Fan sliders:
Fan sliders are now set to 0 when turned off.
No actions on scroll:
Actions are now correctly prevented from triggering when scrolling. #892 and #839
Resolved scrolling issue:
Fixed an issue that sometimes made scrolling impossible, particularly in the editor.
Missing point in displayed state:
Added missing point • when "State" is hidden but "Attribute" and "Last changed" are visible. #872 by @tiagof
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.

New pop-up background element:
Introduced a new separated element for the pop-up background. #895

⚠️ Important: This is a breaking change for users with custom styles that are modifying the pop-up background.

 .bubble-pop-up-background {
   width: 100%;
   height: 100%;
   display: flex;
   top: 0;
   left: 0;
   position: absolute;
   background-color: var(--bubble-pop-up-main-background-color, var(--bubble-pop-up-background-color, var(--bubble-secondary-background-color, var(--background-color, var(--secondary-background-color)))));
   border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 42px)) var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 42px)) 0 0;
   backdrop-filter: var(--custom-popup-filter);
   -webkit-backdrop-filter: var(--custom-popup-filter);
}

ℹ️ Bubble Card news

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.

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don't believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

I have another announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced YAML configurations, custom styles, and templates. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

Thank you so much for being part of this amazing community, your support will always makes a huge difference! ❤️

I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!

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

🍻

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bubble Card v2.3.0