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

Share your Projects! Dashboards & Frontend
,
1351

Interesting for the Mushroom card! I will take a look at that possibility.

1352

Mine is a Samsung Ducted AC. It should all work the same no matter the brand if you have it set up as a climate entity.

1353

you can add the folloing in the styling:

.bubble-button-card-container {
  background-color: ${state < 1000 ? 'var(--success-color)' : state < 1500 ? 'var(--warning-color)' : 'var(--error-color)'};
}
.bubble-icon {
  color: ${state < 1000 ? 'var(--success-color)' : state < 1500 ? 'var(--warning-color)' : 'var(--error-color)'} !important;
  opacity: 0.6 !important;
}
1354

Bubble Card 2

v2.2.0-beta.1

Hi everyone!

I’m finally able to release this new version that fixes the large layout issue on a section view since the new Home Assistant 2024.8 update!

But that’s not all, I’ve worked a lot on some optimizations and fixes. The most noticeable improvement is the pop-ups, they are now much faster and more reliable on all devices/browsers!

This beta is a bit rushed, and I really hope that everything is working as it should!

Thank you all for the fast feedback as always!

:heavy_check_mark: Bug fixes and optimizations

  • HA 2024.8 support: Fixed the large layout issue when used on a section view after the Home Assistant 2024.8 update.
  • Pop-up optimizations: Pop-ups are now much smoother on all devices/browsers!
  • Displayed states/attributes: Fixed and optimized the displayed states/attributes system, the order is now a bit different too.
  • Templates: The entity variable was not defined, this is now fixed! It refers to the card entity.
  • Layout issue: It was impossible to hide the name or the icon in a pop-up header; this is now fixed! #638

I can’t wait for your feedback!

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Reddit Page

:beers:

5 Likes
1355

Hey Cloos,

thanks for the update!

Unfortunately the background stays blurry after closing a pop-up.

1000043801
10000438011344×2992 110 KB

Lukas

1356

Hey,

Since the recent update of HA, my Bubble (v2.1.1) cards seems weird, like lacking a bit of spacing (margin). Also, separators are uglier now:

2

I’m using Material Rounded theme, but this issue also happens with the default theme.

Thanks!

1357

Hi, I’ve just released a new beta that fix that issue, take a look a few post above :slightly_smiling_face:

1 Like
1358

I’m on it, I will try to release a new beta today :crossed_fingers:

2 Likes
1359

Genius! By making the year longer you’ve created more relative time space so that everything could fit.

1 Like
1360

great card. i love it and have what i think it is a great looking mobile dashboard for my family.

i have this:
image

but what i REALLY want it this:
image

where the two left subbuttons are justified to the left and the two right subbuttons are justified to the right.

anything helpful would be appreciated. i know im missing something…

type: custom:bubble-card
card_type: button
card_layout: normal
button_type: name
show_icon: false
show_name: false
sub_button:
  - entity: input_boolean.living_room_mood_lighting_dynamic
    icon: mdi:reload
  - name: ''
    icon: mdi:floor-lamp
    show_background: false
    entity: input_select.living_room_mood_lighting
    show_state: true
    show_attribute: false
    show_last_changed: false
    show_arrow: true
  - name: ''
    entity: input_boolean.movie_time
    show_background: true
    tap_action:
      action: toggle
      navigation_path: '#cover'
    hold_action:
      action: more-info
  - name: ''
    icon: ''
    tap_action:
      action: toggle
      service: input_boolean.toggle
    entity: input_boolean.guest_mode
    hold_action:
      action: more-info
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
  }
  .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;
  }
double_tap_action:
  action: none
tap_action:
  action: none
scrolling_effect: false
1361

Really like your 3rd bubble card. Is that a vacuum? Willing to share the code? :slight_smile:

1362

Is it possible that only the icon changes color?

IMG_0367
IMG_03671170×2532 142 KB

1363

Sure!
That one is all thanks to Cloos! :slight_smile:

It is from the Bubble github examples.
https://github.com/Clooos/Bubble-Card

type: custom:bubble-card
card_type: button
button_type: switch
name: Vacuum
entity: vacuum.downstairs
icon: mdi:robot-vacuum
show_state: true
show_last_changed: true
tap_action:
  action: more-info
button_action:
  tap_action:
    action: more-info
sub_button:
  - name: Battery
    icon: mdi:battery
    show_name: false
    show_icon: true
    show_background: false
    show_attribute: true
    attribute: battery_level
  - name: Return to dock
    icon: mdi:home
    show_background: false
    tap_action:
      action: call-service
      service: vacuum.return_to_base
      target:
        entity_id: vacuum.downstairs
  - name: Pause
    icon: mdi:pause
    show_background: false
    tap_action:
      action: call-service
      service: vacuum.pause
      target:
        entity_id: vacuum.downstairs
  - name: Start
    icon: mdi:play
    tap_action:
      action: call-service
      service: vacuum.start
      target:
        entity_id: vacuum.downstairs
styles: >-
  .bubble-button-card-container {
    /* Change the background color when the vacuum get an error (optional), more details in the styles template section */
    background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;
  }
  .bubble-icon {
    color: white !important;
  }
  .bubble-icon-container {
    background: rgba(230, 100, 180, 1);
  }
  /* Change the first sub-button battery icon based on the battery_icon attribute, more details in the styles template section */
  ${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.downstairs'].attributes.battery_icon)}
1 Like
1364

Bubble Card 2

v2.2.0-beta.2

Hi everyone!

I’m really sorry for the blurred backdrop issue in the previous beta, this is now fixed! I have disabled it on my dashboard and forgot to test it before the release :sweat_smile:

By fixing this, I’ve also found a way to optimize the pop-ups and the backdrop transition even more than in the previous release!

I can’t wait for your feedback!

:heavy_check_mark: Bug fixes and optimizations

  • Pop-up backdrop issue: Sorry again, this is now fixed! #693
  • Pop-up optimizations: Pop-ups are now much smoother magical on all devices/browsers! #661

I can’t wait for your feedback!

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Reddit Page

:beers:

2 Likes
1365

Bubble Card 2

v2.2.0-beta.3

Hi again!

Here is a new beta, and I really believe that it is the true stable candidate. There was still an issue with the pop-up custom styles that were not synced correctly with the pop-up opening.

I’ve also reduced the card name font size by 1 pixel, they were a bit too big on the new layout.

:heavy_check_mark: Bug fixes and optimizations

  • Pop-up custom styles: More info above.
  • Font size adjustments: More info above.

I can’t wait for your feedback!

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Reddit Page

:beers:

2 Likes
1366

When can we see a vertical bubble card hihi

1367

Hey just wondering if this is possible to make this work at the same height or not

IMG_7586
IMG_75861284×404 28.9 KB

I’ve tried this but didn’t work any help would be grateful thank you


.bubble-state::after{
           content: ${hass.states['binary_sensor.livingroom_mmwave_presence'].state === 'on' ? 'url(/local/mdi-motion.png)' : ''};
           display: inline-block;
           color: white;
           height: 10px !important;
           width: 10px !important;
           background-size: contain;
           background-repeat: no-repeat; 
           }
1368

Thanks for this example @Mar1us. Do you happen to know if there is a way to map a gradient to a value? IE I’d like the icon for my PV production to fade from red to yellow to green based on different values of the sensor.

1369

Installed core 2024.8.1 today and noticed a small problem with the popups. When I try to close popup by swyping down I actually move the background - and not the popup - which then results in a reload of the HA-app

1370

Is it possible to add show_background: false to the header (Name/Text) like the Sub-buttons? I’d like it to look like the separator below it, transparent.

image