⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

MonsDK · May 11, 2024, 4:38pm

Hi Cloos, thank you for your great work!

Front page is masonry and subpage Kitchen is panel at the moment.

I’ve got version 1.7.3. Found the beta version, but how do i overrule the latest release and install the beta? I’m gonna try to figure that out and see if that helps.

*Update:
Tried redownloading to beta version 2.0.0.6. Still shows 1.7.3 when i make a new bubble card, but the bubble-card.js says “v2.0.0-beta.6”. Didn’t fix the issue unfortunately.

Cloos · May 11, 2024, 5:25pm

Bubble Card 2 - The One?

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.
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

Somedia · May 12, 2024, 5:27am

Hey Cloos,

the new update is amazing, you definitely have an excellent sense for aesthetics. Thanks for your work!

I really like the new 2 rows option for the sub buttons. Would it be possible to also add it to other card types, especially pop-ups and separators?

Cloos · May 12, 2024, 5:42am

First thank you!

For the 2 rows they are available on the separator but I’ve just tested and there is a small CSS issue that I need to fix And I will add it to the pop-ups as well

bacco007 · May 12, 2024, 6:01am

I’m a little bit lost how you get this to work - where do you put this?

Cloos · May 12, 2024, 6:13am

Here is the YAML of the weather card I’ve made, you can see the templates in the custom styles section:

type: custom:bubble-card
card_type: button
card_layout: large-2-rows
button_type: state
entity: weather.maison_2
name: Weather
show_state: true
show_last_changed: false
sub_button:
  - entity: sensor.salon_temperature
    icon: mdi:home-thermometer-outline
    show_state: true
    show_background: false
  - entity: sensor.openweathermap_temperature
    icon: mdi:thermometer
    show_state: true
    show_background: false
  - entity: sensor.maison_realfeel_temperature_max_0d
    name: Today
    show_name: true
    show_state: true
    tap_action:
      action: more-info
  - entity: sensor.maison_realfeel_temperature_max_1d
    name: Tomorrow
    show_state: true
    show_name: true
    show_background: false
styles: >-
  .bubble-button-card-container {
    background: rgba(0,190,240,0.6);
  }
  .bubble-icon {
    opacity: 1;
  }
  ${subButtonIcon[2].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast['weather.maison'].forecast[0].condition))}
  ${subButtonIcon[3].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast['weather.maison'].forecast[1].condition))}

Cloos · May 12, 2024, 11:27am

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!

koleos · May 12, 2024, 1:29pm

Many thanks !

Wolvboot · May 12, 2024, 1:39pm

Thanks for the update!

I still have white on very light buttons for lamps which are extremely hard to read. This happens in all themes. You said this was a bug earlier, is this still on the list to be fixed later on?

If not, is there any workaround? I had to stop using bubble cards due to this. I literally can’t read it.

Cloos · May 12, 2024, 1:55pm

I thought that was fixed I will take a look again!

Mar1us · May 12, 2024, 1:59pm

Really like your work!
Will you also update your dashboard config, when its ready?

Wolvboot · May 12, 2024, 2:10pm

Thanks Cloos, appreciate it! I think it may be something to do with smart bulbs and the white color temperature. Doesn’t happen on switches, they look fine and the theme applies as expected.

Light as purple (perfectly fine):

Light as white as I can make it, listed as 4000K (unreadable):

Somedia · May 12, 2024, 3:29pm

Hey Cloos,

by adding a sub-button without defining an own icon, I would assume that the icon of the entity will be used.
However, in the latest beta version, the icon of the selected main entity is being used. Is this behavior intentional or is it a bug?

Cloos · May 12, 2024, 4:26pm

Thank you for the feedback, I will take a look at this!

koleos · May 12, 2024, 5:46pm

Thank you for last beta.
Quick question, on some dashboard i will mix with other type of cards. By default, background is a specific one.

On some card there is an option to choose the theme to apply. Could it be possible to have the possibility to use either theme of ha or yours?

For now i will change it by the style custom option

Ps: sorry bjg with my icons on the second capture I still need to find out why for some time they don’t show up (not mdi icons)

Merci !

DC01 · May 12, 2024, 6:30pm

I’m having all kinds of issues with beta 8. In a sections dashboard, I can’t seem to edit the horizontal stack as seen in this picture.

I’m also haveing centering issues with pop-ups created before beta 8. I have no custom styling options enabled.

Cloos · May 12, 2024, 6:34pm

Thank you! Indeed there are still some issues, I will take a look at this as soon as I can!

koleos · May 12, 2024, 7:32pm

Hello,

Cover layout is different from other type of cards:

Normal?
Button could be consider as sub_button ?

I am trying to define an icon different for my door that have three state how i adapt this code ?

${state === 'on' ? icon.setAttribute("icon", "mdi:lightbulb") : icon.setAttribute("icon", "mdi:lightbulb-off")};

Thank you

Cloos · May 12, 2024, 7:58pm

For the cover card this is the normal layout, try the large one it looks different.

For the template you can do this:

${state === 'on' ? icon.setAttribute("icon", "mdi:lightbulb") : 
state === 'off' ? icon.setAttribute("icon", "mdi:lightbulb-off") : 
state === 'error' ? icon.setAttribute("icon", "mdi:alert") : 
icon.setAttribute("icon", "mdi:default-icon-if-other-state")}

DerHerzog7 · May 13, 2024, 2:32am

Cloos, I added a separator into the new sections area, but the line isn’t appearing when using the bubble theme? On the lasted Beta.