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

[Cloos]

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

[koleos]

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]

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]

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

[koleos]

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]

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]

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.

[joq3]

Looks fantastic, but I am not sure I understand the changes. At the moment I have Home Assistant setup as a max width, to be able to have the same type of design on both mobile and desktop. Would this change make it easier to have separate designs but still very manageble? I don’t like how Home Assistant reorginize the cards all the time.

By the way, how is your button bar on top setup? If you select an icon, will a card popup and the icon get highlighted? Because I can’t manage to get my floating dock icons to change color when a bubble card is open.

Can you share your configuration?

This is mine at the moment:

[Cloos]

I have applied a custom style on it, here it is:

.bubble-line {
  background: white;
  opacity: 0.1;
}

[Cloos]

Haha my old dashboard, you should really try the new section view, it allows to do just one column like on my old one. And I really like how easy and fast it is to create a nice and clean dashboard on it.

For the buttons bar I’ve made it with a Bubble text button and some custom styles, but I will probably add it as a card layout as well. But the color is not changing when a pop-up is open, that should be feasible with a custom style template, I will take a look at that.

Here is the YAML, I was planning to add that one in the examples:

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
name: ''
sub_button:
  - name: Mute
    icon: mdi:volume-off
    tap_action:
      action: toggle
      service: input_boolean.toggle
    entity: input_boolean.mode_silencieux
  - name: Covers
    icon: ''
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#volets'
    entity: cover.piece_principale
  - name: Shopping list
    icon: mdi:cart-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#liste'
  - icon: mdi:video-outline
    name: Security
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#securite'
  - name: Settings
    icon: mdi:cog
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#configuration'
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
  }
  .bubble-sub-button {
    height: 46px !important;
    width: 46px !important;
  }
  .bubble-sub-button-container {
    width: 100%;
    justify-content: space-between !important;
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: inherit !important;
  }
  .bubble-name-container {
    margin-right: 0px !important;
  }

[max5962]

@Cloos

you should really try the new section view, it allows to do just one column like on my old one. And I really like how easy and fast it is to create a nice and clean dashboard on it.

Awesome !
Can you share your yaml ? please

[Cloos]

I will explain everything in the new Bubble Card documentation

[maurizio53 (Maurizio Fabiani)]

What is changed in beta 8?
Now i get this:

And before i was able to see all the buttons in the horizontal stack

This is what i have in the UI editor:

and the buttons are 8.

[DerHerzog7]

Brilliant, thank you!

[hazio]

@Cloos Are there any ways to automatically collapse the controls when state is ‘off’? If not, would you consider implementing it please? Thanks

[Cloos]

Great idea indeed, I will change that in the next release!

[Cloos]

I’ve tried to replicate your issue today with no luck, can you tell me how to reproduce this issue exactly?

[Cloos]

This issue is already fixed on my side, I will release a new beta as soon as I can.

[DC01]

Which issue? The inability to edit the horizontal stack or the offset pop up issue?

[DerHerzog7]

So I’ve been trying to figure out how to get your sub button icons to work with my weather sensors.

I have a sensor generated by the Bureau of Meteorology called “sensor.melbourne_mdi_icon_0”

This returns a MDI icon based on the current weather (or forecast). ie. today it’s returning mdi:weather_sunny

How would I convert the sensor into the relevant icon in your custom styles?

Cheers!