Bubble Card 2

v2.5.0-beta.8

If you missed the previous beta releases, please check this changelog. Then please read this:

Hi everyone!

Here comes v2.5.0-beta.8! This is (again) a major update, because with the arrival of modules, I wanted to keep Bubble Card's structure as unified as possible to make customization easier (I know many of you use Bubble Card for that reason). More importantly, I wanted to prevent future breaking changes that could affect community-created modules and custom styles.

That’s why this version introduces a lot of structural changes, unifying element classes, CSS styles, code structure, and even card functionalities. These changes might break some of your custom styles and modules, even though I worked hard to avoid that. For example, the cover card now has the exact same structure as the other cards, which could affect your customizations.

This long-overdue task was something I kept postponing, but wow, everything is now so much cleaner and more logical! On top of that, this massive effort will make future maintenance much easier and faster, and I realized it also boosted performance a lot for an even smoother experience on slower devices!

This new structure also gave me maybe a bit too much motivation, leading to tons of new features, like major slider improvements, many new editor options, plenty of optimizations and bug fixes!

You now need to hold it to be able to change its value, it also now support tap and double tap actions!

Plus, the editor is finally more stable and responsive than ever!

I also want to thank @StaleLoafOfBread, @hamayelq and @gregoriohc for their great first contributions!

Also, I really count on you for submitting your issues if you encounter any problems, as I've made so many changes 🤞

Here's the full (probably not, I fixed so many things along the way) changelog:

💡 New features and enhancements

• CHANGE: Better slider button:
  You now need to hold it to be able to change its value #1014 #1045

• CHANGE: New normal layout for the cover card:
  For better consistency with other cards.

• CHANGE: The large layout is now the default in a section view:
  For section view users, all current and new cards are now defaulted to the large layout. I advise you to keep it this way, this improve usability a lot on mobile devices.

• Min/max/step values for sliders:
  YAML: min_value:, max_value: and step:. #304 #903

• Min/max values for media player volume sliders:
  YAML: min_volume: and max_volume:. #1269

• Min/max/step values for the climate card:
  YAML: min_temp, max_temp: and step:.

• Support for almost all entities in sliders:

  • Native support for battery sensors.
  • All entities with numerical states can now be displayed within a defined range (the entity must be added in YAML mode, min_value: and max_value: are required). This is perfect to display your current power production for example.

• Read-only slider option:
  YAML: read_only_slider: true.

• "Tap action on card" added to most cards:
  Added to sliders, climate, media player, and cover cards.

• Improved usability and accessibility:

  • Larger touch areas for feature buttons.
  • Improved contrast for sub-button icons and labels (auto color change based on background color).
  • Mute icon now visually changes based on volume status in the media player card.

• Better default separator line color:
  Improves contrast on various backgrounds.

• Support for !include in bubble-modules.yaml:
  Matches Home Assistant’s YAML capabilities.

  default:
      !include default.yaml

• Brightness transition in light sliders:
  YAML: light_transition: true and light_transition_time: 500 (default). PR #1301 by @hamayelq.

• Min/max temp limits with haptic and visual feedback:
  This one looks fantastic! PR #1306 by @hamayelq.

• subButtonState variable for custom templates:
  For example, you can now finally add subButtonState[0] === 'on' in your templates! PR #1280 by @gregoriohc.

• Show last updated time for entities:
  YAML: show_last_updated: true. PR #1289 by @StaleLoafOfBread.

✔️ Bug fixes and optimizations

• Refactored a lot of code for better and faster maintenance.

• Optimized memory usage for stable performance over time.

• Improved pop-up performance across all devices and browsers #1211.

• Improved overall performance on all devices #1236.

• Significantly improved editor performance.

• No need to refresh the page after editing pop-ups anymore (finally!).

• Unified classes, CSS, elements, and structure across all cards.

• Fixed various issues with sub-buttons.

• Fixed volume slider issue in media player on iOS #1196.

• Fixed missing "curtain" icon.

• Fixed weather temperature being hidden when 0 #1213.

• Fixed "Card flashing bug" in 2.5.0 beta #1276.

• Fixed missing previous rows value conversion #1277.

• Fixed actions being triggered after dragging over an element #839.

• Fixed module styles priority:
  Styles written in the card now take precedence over module styles. PR #1290 by @StaleLoafOfBread

• Fixed missing ha-icon attribute PR #1329 by @StaleLoafOfBread.

• The +/- buttons in the climate card now respect min/max values.

• Added missing supported entities in the slider editor #1221.

• Fixed "icon color change" issue in beta 2.5.0-beta.6 #1266.

Enjoy testing this beta, and thank you for being part of this awesome community! 🍻

ℹ️ 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:

🍻