Bubble Card 2

v2.5.0-beta.7

Here's a fast release to fix some more issues.

• Fixed attributes evaluation:
  Attributes like attribute: forecast[0].templow were not working anymore, this is now fixed! #1264

• No dashboard/dashboard blinking:
  I reverted a change made in v2.5.0-beta.6 that was not working as expected.

v2.5.0-beta.6

Hi everyone!

The beta is not over yet, but we should be really close this time! This release brings important improvements and fixes, especially for the new module system. Thank you again for all your feedback!

But that's not all! @MrBearPresident has finally added the ability to change the number of rows in a section view! The sub-buttons will also reorganize to make use of the newly available space! This is still just the first step, we plan to make even more use of that space in future releases!

💡 New features and enhancements

• Section view enhancements:
  Added the ability to change the number of rows in a section view. See details above. PR #1172 by @MrBearPresident, thank you again!

• Improved attribute selector:
  The attribute selector now correctly detects the entity at the same level. You can easily use it like this:

  - name: entity
    label: "Entity"
    selector:
      entity: {}
  - name: attribute
    label: "Attribute"
    selector:
      attribute: {}

• Module migration update:
  The style_templates key is now replaced by modules in your YAML configuration. This change is automatically migrated in the editor.

• New checkConditionsMet support for modules:
  Modules can now use the checkConditionsMet function, allowing advanced condition-based logic with the condition selector.

• .is-on and .is-off classes:
  Most cards now automatically receive .is-on and .is-off classes for easier custom styling.

✔️ Bug fixes and optimizations

• Instant initialization of custom styles, templates, and modules:
  Custom styles, templates, and modules now load instantly when the page is rendered.

• Refactored modules editor code:
  The modules editor code has been refactored for better efficiency and future maintenance.

• Fixed incorrect card variable inside pop-up cards:
  The card variable now works correctly for custom templates and modules inside pop-up cards. #1255

• Fixed module value removal issue:
  Removing a value from a module editor now correctly updates the configuration. #1244

• Default module behavior fixed:
  The Home Assistant default styling module is no longer disabled when another module is selected. You can still disable it manually.

• Updated "Home Assistant default styling" module:
  Enhanced consistency across more Home Assistant themes.

• Updated "Customize the icon container color" module:
  This module now uses a list of predefined colors instead of an RGB color picker. Breaking change: Previous RGB values are no longer supported.

• Fixed the horizontal button stack gap:
  The visual gap between horizontal button stacks and the card above is now bigger in section views.

• Reverted actions behavior to v2.4.0:
  This update reverts the action handling to its previous behavior. #1250

• More custom style compatibility fixes:
  Additional fixes to improve compatibility with previous custom styles. Special thanks to @brunosabot!

v2.5.0-beta.5

This beta should fixes the last issues! 🤞

• Fixed pop-up behavior resetting scroll position:
  The dashboard should now stay in place when opening a pop-up, like in the previous releases.

• Fixed an indentation issue in the modules info box:
  Code blocks are now indented correctly.

v2.5.0-beta.4

Thank you so much again for all your feedback!

Read this is you don't see any modifications after editing your /www/bubble/bubble-modules.yaml.

• Added missing setup informations:
  It seems that there was a missing step in the "How to use" the modules in the editor, and in the bubble-modules.yaml.

  Add these lines in your configuration.yaml under homeassistant::

  homeassistant:
    allowlist_external_dirs:
      - /config/www/bubble
      # Not needed if you already have this line:
      - /config/www

  Now save and restart Home Assistant, then check if the warning in the Modules editor is gone.

v2.5.0-beta.3

This beta fixes the custom styles that weren’t working as expected in previous versions!

• Fixed incompatibility issues with more custom styles:
  The issue with custom styles disappearing or behaving oddly should be now resolved. If you had any problems with your custom styles in the previous betas, this update should fix them!

v2.5.0-beta.2

Here's the 100th release! 🎉 (Damn it's a beta...)

• Fixed incompatibility issues with some custom styles:
  This is the first feedback I got, fixing compatibility with some custom styles/templates. Like this one: [Example] Square Room Summery Cards #927.

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:

🍻