Bubble Card v2.0.1

Bubble Card 2

v2.0.1

Fixed the wrong v2 file, if you have installed the v2.0.0 please update.

v2.0.0

Hi everyone!

About 9 months ago, I released the very first beta of Bubble Card. Since then, I have been improving it in my spare time, but as some of you know the latest versions did not add many features, mainly because the list of bugs was getting longer but also because I had started a complete restructuring of the code to allow better maintenance in the future.

For this version, I had considerable help from @brunosabot, an experienced developer who helped me push the restructuring even further. But he didn’t just settle for a better structure, he also corrected and improved many points along the way!

This new structure finally allowed me to focus on some of the features that I wanted to add since the very first version, and now after 4 months of intensive development here is a preview!

Sub-buttons

This is the biggest new feature of this version, it is now possible to add customized buttons in almost all the cards already available, even the separator! This allows for almost endless possibilities! I can't wait to see what you are going to create with these!

The first button handles a vacuum with multiple sub-buttons and the second one is a slider with a sub-button that shows the brightness percentage and one that can toggle the light directly.

A separator with a sub-button that shows the room temperature.

The sub-button editor is really easy to use and almost everything can be customized.

New media player card



I’ve also added a new card to handle a media player, you can even add your own custom sub-buttons in it!

These buttons are not sub-buttons but you can show/hide the ones you need.

The pop-up header is now a Bubble button



This feature was requested for a long time, you can now change your pop-up header to act as a slider if you want to (this means you can add sub-buttons too!).



This is some sort of breaking change compared to the previous release, to add back the power button or the state just add some sub-buttons in the editor 🙂

Advanced states 



You now have the possibility to add an attribute or the last changed time next to the state on almost every card types, and translated to every available languages!



Section view support

Bubble Card now fully supports the Home Assistant section view, you can change the card layout to make the card bigger and also change the number of columns or rows the card should occupy in your section view (only on the cards that support that option). These layouts are also supported in all other view types.

New editor

This release comes with an all new GUI for the editor, and also with a lot of fixes! For example the horizontal buttons stack editor is now instant. I've also added the possibility to add tap actions directly in it, as well as the custom styles!



Tap actions everywhere



The Home Assistant tap actions are really helpful, that’s why I’ve added them in new places. Such as on the buttons or the sub-buttons to allow even more customization.



Performance, stability and a lot of bug fixes



This was the first thing that was worked on for this version, to everyone who had issues in the past this version is for you! Especially for iOS and Safari users!

New documentation

I've worked a lot on a new and much clearer documentation with a lot of new examples. Go take a look at it!

But that's not all!

Here is the list of all other new features and bug fixes:

💡 New features

• Breaking change: No more custom button, all buttons are customizable now.
• Section support and new layouts: You can now change the layout to make the cards bigger to fit the new Home Assistant section view. In YAML, you have access to card_layout: large and card_layout: large_2_rows if you want 2 rows of sub-buttons. These layouts are also working on the other view types.
• Section column and rows support: In YAML, you can change that with columns: 2 and rows: 1 for example. Thank you again @brunosabot for that part!
• Default icons: There is now default icons for the entities when you create a new button.
• New state button: @brunosabot added a new state card, the difference is that it shows the more info panel when you tap/click on it and that its background is not changing color.
• New name/text button: I've added a new button to only show text if you need, this is perfect for the new pop-up header for example.
• Forcing icons: You can now add force_icon: true to always display the icon instead of the entity picture. It's also available in the editor.
• Sliders supports more entities: Slider buttons now supports the cover position and input_number.
• Switch supports more entities: Switch buttons now support more entity types (if an entity type is not supported you can now edit the default action).
• Texts auto-scrolling: Long texts in small cards are now scrolling by default if the content is longer than its container, perfect for small screens. You can disable it with scrolling_effect: false.
• Button switch color: If you add a light that handles colors in your switch, the background will now automatically change accordingly.
• Styles changes: Some styles have changed a bit.
• Editor optimization: The card preview in the editor is now sticky when you scroll. But there is so much more changes in it!
• Pop-up in editor: When you enter the editor, the pop-ups are now collapsed to take less space.
• Haptic feedback: I've added haptic feedback everywhere for the HA companion app users, they are also smoother!
• Icons templating: It is now possible to change all the icons with templates! More info in the documentation.
• Custom weather icon template: You can also get the weather icon based on a weather entity or any sensor that returns the weather condition, like sunny will return mdi:weather-sunny. This is helpful to make a weather card based on a state button for example. More info in the documentation.
• New card variable: I've added this for the custom styles, it returns the card element in the DOM. You can take a look at the documentation for some examples.
• Possibility to disable the "close by clicking outside" pop-up feature: You can change this behavior in the editor or in YAML by adding close_by_clicking_outside: false.
• And I'm probably forgetting some others!

✔️ Bug fixes and optimizations

• Dashboard column layout: This old issue is now finally fixed! I've removed the column_fix, just place your pop-up before all cards to ensure a correct layout.
• Pop-up now covers all cards correctly: Changed pop-up z-index to 5.
• Pop-up top gradient: I've replaced it by a mask to make it looks better.
• Pop-up position: The pop-up should now be centered correctly in all cases (there is still the margin fix if you need it).
• Pop-up custom styles: They are now working correctly.
• Entity picture fix: The entity picture are now working when accessing Home Assistant from outside of the local network.
• Horizontal buttons stack fixes: The HBS is not covering the last card of your view anymore. And a lot of other issues are now fixed, thanks to @brunosabot!
• Variable support for the pop-ups: The pop-up background can now be a variable of a theme.
• Pop-up fix removed: Fixed and removed the unnecessary fix for when the sidebar is hidden.
• Slider fixes: Fixed the behavior of the sliders in some cases.
• Quicker tap actions: Double-tap action delay reduced from 300ms to 200ms and there is no delay anymore if double tap is set to none.
• Sliding to close a pop-up optimization: Changed the slide to close threshold from 300px to 400px because it was too sensitive.
• And sooo much more from @brunosabot and me!

And that's all... I would also like to say thank you again to the numerous beta testers who have been of immense help on this long process.

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

🍻

Bubble Card v2.0.0

Bubble Card 2

v2.0.0

Hi everyone!

About 9 months ago, I released the very first beta of Bubble Card. Since then, I have been improving it in my spare time, but as some of you know the latest versions did not add many features, mainly because the list of bugs was getting longer but also because I had started a complete restructuring of the code to allow better maintenance in the future.

For this version, I had considerable help from @brunosabot, an experienced developer who helped me push the restructuring even further. But he didn’t just settle for a better structure, he also corrected and improved many points along the way!

This new structure finally allowed me to focus on some of the features that I wanted to add since the very first version, and now after 4 months of intensive development here is a preview!

Sub-buttons

This is the biggest new feature of this version, it is now possible to add customized buttons in almost all the cards already available, even the separator! This allows for almost endless possibilities! I can't wait to see what you are going to create with these!

The first button handles a vacuum with multiple sub-buttons and the second one is a slider with a sub-button that shows the brightness percentage and one that can toggle the light directly.

A separator with a sub-button that shows the room temperature.

The sub-button editor is really easy to use and almost everything can be customized.

New media player card



I’ve also added a new card to handle a media player, you can even add your own custom sub-buttons in it!

These buttons are not sub-buttons but you can show/hide the ones you need.

The pop-up header is now a Bubble button



This feature was requested for a long time, you can now change your pop-up header to act as a slider if you want to (this means you can add sub-buttons too!).



This is some sort of breaking change compared to the previous release, to add back the power button or the state just add some sub-buttons in the editor 🙂

Advanced states 



You now have the possibility to add an attribute or the last changed time next to the state on almost every card types, and translated to every available languages!



Section view support

Bubble Card now fully supports the Home Assistant section view, you can change the card layout to make the card bigger and also change the number of columns or rows the card should occupy in your section view (only on the cards that support that option). These layouts are also supported in all other view types.

New editor

This release comes with an all new GUI for the editor, and also with a lot of fixes! For example the horizontal buttons stack editor is now instant. I've also added the possibility to add tap actions directly in it, as well as the custom styles!



Tap actions everywhere



The Home Assistant tap actions are really helpful, that’s why I’ve added them in new places. Such as on the buttons or the sub-buttons to allow even more customization.



Performance, stability and a lot of bug fixes



This was the first thing that was worked on for this version, to everyone who had issues in the past this version is for you! Especially for iOS and Safari users!

New documentation

I've worked a lot on a new and much clearer documentation with a lot of new examples. Go take a look at it!

But that's not all!

Here is the list of all other new features and bug fixes:

💡 New features

• Breaking change: No more custom button, all buttons are customizable now.
• Section support and new layouts: You can now change the layout to make the cards bigger to fit the new Home Assistant section view. In YAML, you have access to card_layout: large and card_layout: large_2_rows if you want 2 rows of sub-buttons. These layouts are also working on the other view types.
• Section column and rows support: In YAML, you can change that with columns: 2 and rows: 1 for example. Thank you again @brunosabot for that part!
• Default icons: There is now default icons for the entities when you create a new button.
• New state button: @brunosabot added a new state card, the difference is that it shows the more info panel when you tap/click on it and that its background is not changing color.
• New name/text button: I've added a new button to only show text if you need, this is perfect for the new pop-up header for example.
• Forcing icons: You can now add force_icon: true to always display the icon instead of the entity picture. It's also available in the editor.
• Sliders supports more entities: Slider buttons now supports the cover position and input_number.
• Switch supports more entities: Switch buttons now support more entity types (if an entity type is not supported you can now edit the default action).
• Texts auto-scrolling: Long texts in small cards are now scrolling by default if the content is longer than its container, perfect for small screens. You can disable it with scrolling_effect: false.
• Button switch color: If you add a light that handles colors in your switch, the background will now automatically change accordingly.
• Styles changes: Some styles have changed a bit.
• Editor optimization: The card preview in the editor is now sticky when you scroll. But there is so much more changes in it!
• Pop-up in editor: When you enter the editor, the pop-ups are now collapsed to take less space.
• Haptic feedback: I've added haptic feedback everywhere for the HA companion app users, they are also smoother!
• Icons templating: It is now possible to change all the icons with templates! More info in the documentation.
• Custom weather icon template: You can also get the weather icon based on a weather entity or any sensor that returns the weather condition, like sunny will return mdi:weather-sunny. This is helpful to make a weather card based on a state button for example. More info in the documentation.
• New card variable: I've added this for the custom styles, it returns the card element in the DOM. You can take a look at the documentation for some examples.
• Possibility to disable the "close by clicking outside" pop-up feature: You can change this behavior in the editor or in YAML by adding close_by_clicking_outside: false.
• And I'm probably forgetting some others!

✔️ Bug fixes and optimizations

• Dashboard column layout: This old issue is now finally fixed! I've removed the column_fix, just place your pop-up before all cards to ensure a correct layout.
• Pop-up now covers all cards correctly: Changed pop-up z-index to 5.
• Pop-up top gradient: I've replaced it by a mask to make it looks better.
• Pop-up position: The pop-up should now be centered correctly in all cases (there is still the margin fix if you need it).
• Pop-up custom styles: They are now working correctly.
• Entity picture fix: The entity picture are now working when accessing Home Assistant from outside of the local network.
• Horizontal buttons stack fixes: The HBS is not covering the last card of your view anymore. And a lot of other issues are now fixed, thanks to @brunosabot!
• Variable support for the pop-ups: The pop-up background can now be a variable of a theme.
• Pop-up fix removed: Fixed and removed the unnecessary fix for when the sidebar is hidden.
• Slider fixes: Fixed the behavior of the sliders in some cases.
• Quicker tap actions: Double-tap action delay reduced from 300ms to 200ms and there is no delay anymore if double tap is set to none.
• Sliding to close a pop-up optimization: Changed the slide to close threshold from 300px to 400px because it was too sensitive.
• And sooo much more from @brunosabot and me!

And that's all... I would also like to say thank you again to the numerous beta testers who have been of immense help on this long process.

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

🍻

Bubble Card v2.0.0-rc.1

Bubble Card 2 - First release candidate

If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.

Version 2.0.0-rc.1

Hi everyone!

After reviewing all your feedback on the previous beta, I can now confidently say that Bubble Card 2 is no longer a beta. It required a lot of work, and I’m extremely proud and relieved to finally be able to release the first release candidate!

I also have something to say to the Kiosk Mode (from NemesisRE) users. To ensure full compatibility, here are the steps to follow (I will add this to the v2 documentation):

• First for your kiosk mode config, remove hide_sidebard: true or kiosk: true and just keep that under kiosk_mode:

  kiosk_mode:
    hide_header: true

• Then go to your HA profile configuration then toggle this:

  

• This will now works as expected.

💡 New feature

• I've added the possibility to disable the « close by clicking outside » pop-up feature in the editor. You can change this behavior in YAML by adding close_by_clicking_outside: false.

✔️ Bug fixes and optimizations

• Custom style templates are now updated correctly when added inside a pop-up.
• Fixed an issue where a pop-up was turning black when a dropdown was opened inside it. #521
• Added the missing default sensor icons. #543
• Fixed an issue where some cards were not displaying (outside of the editor) when added inside a pop-up. #491
• Changed the slide to close threshold from 300px to 400px because it was too sensitive.

As always, I can't wait for your feedback!

Enjoy! 🍻

Bubble Card v2.0.0-beta.12

Bubble Card 2 - The... One?

If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.

Version 2.0.0-beta.12

Hi everyone!

The previous beta was a good one but it was still not perfect. I also found and fixed some new issues, but also a memory leak in the pop-ups, everything is more stable and even smoother now!

This release should be a really good candidate!

✔️ Bug fixes and optimizations

• Fixed a memory leak in the pop-ups
• Custom styles are now correctly applied to a pop-up without a header
• The sliders now update the input only when they are released
• Fixed numerous styling issues with the pop-up header
• Fixed an issue when a dropdown was opened inside a pop-up #539
• Changed the label in the editor for the entities supported by the slider buttons
• I might have also fixed some issues with pop-up centering

I can't wait for your priceless feedback!

Enjoy! 🍻

Bubble Card v2.0.0-beta.11

Bubble Card 2 - The Closest One? 🤞

If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.

Version 2.0.0-beta.11

Hi! Here's another new beta. I've said this a lot, but this one should be really close to the stable version!

There are still some known compatibility issues with some cards and with the Fully Kiosk Browser, but aside from that, everything should now work as expected!

✔️ Bug fixes and optimizations

• Fixed the state button background color, which was different from other buttons when a custom style was defined
• The button actions are now working for state buttons
• The sub-buttons are now displaying the correct icon in all cases



These features were added in beta 9, but I forgot to mention them:


• You can now scroll inside a button if the content overflows
• I’ve moved all settings related to the pop-up header button to the "Header settings" section in the editor

As always, I can't wait for your feedback!

Enjoy! 🍻

Bubble Card v2.0.0-beta.9

Bubble Card 2 - The True And Last One? 🤞

If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.

Version 2.0.0-beta.9

Hi everyone!

The past two weeks have been incredibly busy for me, but I’m excited to finally present the latest (and possibly final?) beta for Bubble Card 2!

I really took my time to test it further and I’m hopeful that this version will meet all expectations! 🙏

I can't wait for your feedback as always and here is another extensive changelog:

💡 New features

• Added the card variable for the custom styles, it returns the card element in the DOM. For example you can now change the color of a sub-button when a pop-up is open, like this:

  ${window.addEventListener('location-changed', () => { 
  card.querySelector('.bubble-sub-button-1').style.backgroundColor = this.location.href.includes('#kitchen') ? 'blue' : '';
  })}

✔️ Bug fixes and optimizations

• Fixed an issue where the editor doesn’t work when a sub-button has an action to call a service #514
• Fixed some CSS issues for the separator card
• Fixed the behavior of the sliders in some cases #208
• Added haptic feedback on everything, they are also smoother!
• Button tap action added to the pop-up header in the editor
• Pop-up header z-index increased for better layering
• Double-tap action delay reduced from 300ms to 200ms for quicker tap-action
• Regression fixed: Buttons set to Name/Text now correctly use Button Actions #517
• Default cursor implemented for tap action when none is specified
• Default tap actions corrected in the editor
• No delay implemented if double tap is set to none (finally!)
• Media player buttons are now hidden when the media player is off
• Fixed an issue where hiding previous and power button of the media player card was not working #523.
• Pop-up header button switch background color now changes based on the entity state
• Columns and rows labels replaced with fractions for clarity (e.g., 1/4)
• Fixed an issue where states were not updating anymore #511
• If a sub-button is added without defining an icon, the icon of the sub-button entity will be used
• Scrolling text effect issues resolved
• Switch button color corrected when the entity is a light with a bright color
• Sub-buttons CSS no longer forced to allow custom styles
• Fixed an issue where horizontal button stack doesn’t scroll on some browsers #505 (from @brunosabot)
• Fixed an issue when a Frigate card is added inside a pop-up #513 (from @brunosabot)

I also want to say thank you to all the testers who assisted me in hunting down the remaining issues!

Bubble Card v2.0.0-beta.10

Bubble Card 2 - The Real True One? 🤞

If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.

Version 2.0.0-beta.10

I've just fixed the scrollbar issue for Windows users that was introduced in the v2.0.0-beta.9, I really hope that it was the last issue! 🤞

Version 2.0.0-beta.9

Hi everyone!

The past two weeks have been incredibly busy for me, but I’m excited to finally present the latest (and possibly final?) beta for Bubble Card 2!

I really took my time to test it further and I’m hopeful that this version will meet all expectations! 🙏

I can't wait for your feedback as always and here is another extensive changelog:

💡 New features

• Added the card variable for the custom styles, it returns the card element in the DOM. For example you can now change the color of a sub-button when a pop-up is open, like this:

  ${window.addEventListener('location-changed', () => { 
  card.querySelector('.bubble-sub-button-1').style.backgroundColor = this.location.href.includes('#kitchen') ? 'blue' : '';
  })}

✔️ Bug fixes and optimizations

• Fixed an issue where the editor doesn’t work when a sub-button has an action to call a service #514
• Fixed some CSS issues for the separator card
• Fixed the behavior of the sliders in some cases #208
• Added haptic feedback on everything, they are also smoother!
• Button tap action added to the pop-up header in the editor
• Pop-up header z-index increased for better layering
• Double-tap action delay reduced from 300ms to 200ms for quicker tap-action
• Regression fixed: Buttons set to Name/Text now correctly use Button Actions #517
• Default cursor implemented for tap action when none is specified
• Default tap actions corrected in the editor
• No delay implemented if double tap is set to none (finally!)
• Media player buttons are now hidden when the media player is off
• Fixed an issue where hiding previous and power button of the media player card was not working #523.
• Pop-up header button switch background color now changes based on the entity state
• Columns and rows labels replaced with fractions for clarity (e.g., 1/4)
• Fixed an issue where states were not updating anymore #511
• If a sub-button is added without defining an icon, the icon of the sub-button entity will be used
• Scrolling text effect issues resolved
• Switch button color corrected when the entity is a light with a bright color
• Sub-buttons CSS no longer forced to allow custom styles
• Fixed an issue where horizontal button stack doesn’t scroll on some browsers #505 (from @brunosabot)
• Fixed an issue when a Frigate card is added inside a pop-up #513 (from @brunosabot)

I also want to say thank you to all the testers who assisted me in hunting down the remaining issues!

Bubble Card v2.0.0-beta.8

Bubble Card 2 - The True One?

If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.

Version 2.0.0-beta.8

Hi again!

This release should fix all the new issues introduced in the beta.7, and also the last older one.

Is this the true one this time? 🍻

💡 New features

• Added the missing pop-up header layouts

✔️ Bug fixes and optimizations

• Fixed the « last changed » showed by default
• Fixed the default icon template not working after beta.7
• Fixed a pop-up issue with the position of dropdowns (like with the xiaomi-vacuum-map-card, probably Mushroom too)
• You don’t need to refresh a section view anymore when leaving the editor on a view with pop-ups
• Fixed the DOM changing for sub-button icons, that was slowing down everything!
• Fixed a sub-button CSS issue on the separator when there is no sub-buttons
• Fixed the cover card icons color when the large layout is selected
• Fixed the separator "2 rows" layout
• Fixed a compatibility issue with the position of the horizontal buttons stack and the fully kiosk extension (not sure if it works, but @brunosabot opened a PR on the Fully kiosk GitHub page in the same time).

Well, again... and again... and agaiiiin fingers crossed, we are so clooosed! 🤞

Bubble Card v2.0.0-beta-7

Bubble Card 2 - The One?

If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.

Version 2.0.0-beta.7

Hi!

This new beta is a major one. I've finally added the full support of the new section view! And I can now say that this is my recommended way to start with Bubble Card, I just love it! I've also added a new large layout for most of the cards to fit this new view type, but also a new large one where you can have two rows of sub-buttons!

Also, I've finally redesigned my dashboard to be 100% Bubble Card (except for the Frigate card, so let's say 99%). Here is what you can achieve now with this new release in the new section view:

My next big step is to finish the new documentation (WIP), and I'm planning to add a lot of advanced examples to customize Bubble Card! We are getting closer!

I can't wait for your feedback as always!

💡 New features

• Section support and new layouts: You can now change the layout to make the cards bigger to fit the new Home Assistant section view. In YAML, you have access to card_layout: large and card_layout: large_2_rows if you want 2 rows of sub-buttons. These layouts are also working on the other view types.

• Section column and rows support: In YAML, you can change that with columns: 2 and rows: 1 for example. Thank you again @brunosabot for that part!

• Sub-button custom icon template: You can now change the sub-buttons icons with a template. Here is an example of a template that changes the icon of the third sub-button (0 is 1) based on an entity state: ${subButtonIcon[2].setAttribute("icon", hass.states['mower.garden'].state === 'error' ? 'mdi:alert' : 'mdi:robot-mower')}, try that in the custom styles editor.

• Custom weather icon template: You can also get the weather icon based on a weather entity or any sensor that returns the weather condition, like sunny will return mdi:weather-sunny. This is helpful to make a weather card based on a state button for example. Here is how you can do that: ${subButtonIcon[2].setAttribute("icon", getWeatherIcon(hass.states['weather.home'].state))}

✔️ Bug fixes and optimizations

• Fixed the pop-up close on click feature
• Fixed the issues with the sub-buttons tap actions
• Fixed a lot of button and sub-buttons editor issues with the help of @brunosabot!
• Removed the possibility to set actions on a button when the button is a slider (this was not working together)
• Fixed a memory leak in the sub-buttons code
• The pop-ups are not taking space anymore when placed in a section view
• And fixed a lot more!

Well, again... and again... fingers crossed 🤞

Bubble Card v2.0.0-beta.6

Bubble Card 2 - The True Final Beta?

Version 2.0.0-beta.6

💡 New features

• Added the possibility to change the icon in a custom style template, you can now do this: ${state === 'on' ? icon.setAttribute("icon", "mdi:lightbulb") : icon.setAttribute("icon", "mdi:lightbulb-off")};

✔️ Bug fixes and optimizations

• Fixed an issue with the custom icons of the cover buttons
• Fixed an issue on the button slider when the entity is an input_number
• Changed last_updated to last_changed for the states
• Removed scrolling effect in the sub-buttons editor (it was unused)
• Fixed some color issues in the editor
• Fixed the horizontal button stack errors
• Fixed the pop-up default color on some themes
• Changed pop-up z-index to 5

Well again... fingers crossed 🤞