Bubble Card 2

v2.5.0-beta.1

Hi everyone!

Here we go with v2.5.0-beta.1! This 99th release brings a huge new feature along with numerous optimizations for an even smoother experience! I’ve literally spent all the time I could over the past few weeks on this version, not only because it was awesome to work on, but also because it’s amazing to see how this will push the project forward!

No more teasing! The biggest change in this release is the new Module feature, allowing you to finally manage custom styles and templates in a separate YAML file! But this new feature is so much more powerful than that, it lets you add actual features yourself in the Bubble Card editor, using all the default Home Assistant form options! I can't wait to see what you all will create with it!

Here's what the YAML looks like for this particular example, and notice how simple the editor part is!

icon_container_color:
    name: "Example: Customize the icon container color"
    version: "v1.0"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1231"

    unsupported:
        - horizontal-buttons-stack
        - separator

    description: |
        An RGB color picker to customize the icon container color.
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        icon_container_color:
            - 100
            - 150
            - 180
        </pre></code-block>

    code: |
        .bubble-icon-container {
          opacity: 1 !important;
          background-color: rgb(${this.config.icon_container_color}) !important;
        }

    editor:
      - label: "Color"
        selector:
            color_rgb: {}

That's why I've created a new discussions category where you can find and share them! I've already shared 4 of mine! In these discussions, you can for example find this one, it was highly requested and applies Home Assistant’s default styling to Bubble Card!

I've already added some modules by default, so you can test them directly! But if you want to edit or add modules, first copy the bubble-modules.yaml file from /www/community/Bubble-Card/ (if installed via HACS) to /www/bubble/ (Create the folder if it doesn't exist).

Also, the editor received a big optimization pass, improving its performance and responsiveness, especially for complex dashboards with heavy pop-ups! I also finally improved the colors to match more themes!

Here's the full changelog:

💡 New features and enhancements

• New Module system for custom styles and templates:
  A new way to define and manage styles/templates within a single YAML file. More info above. #1081

• Home Assistant theme-friendly module:
  Added a module that automatically adapts to Home Assistant's default styling and themes. More info above. #1144

• Direct testing of cards/templates in edit mode:
  Cards/templates are now working normally in the editor.

• New .bubble-container selector:
  You can now target each card container in your custom styles with a single unified selector.

• New --bubble-border CSS variable:
  Allow more flexibility for styling borders in your Bubble Card setups.

• Added a box to display template/modules errors in the editor:
  This make debugging much easier as it not needed to open the browser console anymore.

• Access to the this variable in custom templates/modules:
  Expanding customization possibilities.

✔️ Bug fixes and optimizations

• Custom styles and templates now apply instantly:
  All custom styles are now applied instantly when the page load.

• Fixed crash with spaces in attribute names:
  Resolves an issue where attributes containing spaces was not working. PR #1229 by @sbwilson fixing #1082. Thank you so much!

• Editor styling improvements:
  Various enhancements for for better color contrasts. #1214

• Fixed "Tap action on icon" issue:
  Attempted fix for some tap actions problems. #990

• Dashboard scrolling blocked issue:
  The system that prevents dashboard scrolling when a pop-up is open has been improved. Should fix #913

• Fixed the pop-up "slide from the header to close" on iOS:
  Pop-up header swipe gesture now works correctly on iOS.

• Missing borders in horizontal button stacks on newer iOS/macOS:
  Resolves visual inconsistencies. #1124

• Major Safari optimizations:
  Improved performance and compatibility for Safari on iOS and macOS.

• Fixed a memory leak in text scrolling effect:
  Boosting overall performance over time.

• Greatly optimized editor performance for dashboards with many pop-ups:
  Editing is now significantly faster on complex setups. Fixes #698

• Refactored and improved the custom styles/templates system:
  Better overall performance.

• Editor code quality improvement:
  Improved editor code structure for better maintenance. PR #1173 by @MrBearPresident. Thank you so much!

• Custom templates with errors no longer break the card or the entire view
  Finally!

And maybe more…

This update brings Bubble Card closer to being the ultimate dashboard customization tool! As always, I’d love to hear your feedback, so don’t hesitate to share your thoughts and suggestions on the new Modules system!

Enjoy testing this beta, and thanks again 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:

🍻