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

Hi! I just fixed your first point, it was indeed not working with themes with transparent colors.

For your second point this is because it is difficult to show all these informations when there is already the artist/title shown.

The third point was already done, but only when the media player is off.

For your fourth point it was a new feature in the third v2.3.0 beta.

2 Likes

Thank you so much for the feedback, it’s very much appreciated!

I’ve just checked beta 7 and it seems that issue with the overlay is still there:

When the volume button is pressed:

Playing/entity state disappears once the volume button is pressed and closed (“X” button doesn’t go away though):

Once the page is refreshed all is fine:

Regarding point #2 in my case player when is “off” it’s in “Paused” mode (=not “off”), hence card is in active state. Is it possible to do something with it:

Merci pour votre l’aide!

Do you have cleared your cache? I’m unable to reproduce this, and this is working as expected on my side.

Bonjour Cloos,

Oui, biensûr! Je l’ai fait plusieurs fois.
Demain, je vais le tester sur d’autre ordinateurs et je vais vous ecriver.

Can you check in the Bubble Card editor, at the bottom if you see v2.3.0-beta.7? Just to be sure.

And answer in English so that everyone can read what you send :slightly_smiling_face:

Hello Cloos,

Yes, of course, I’ve reinstalled the application, but no result.
Version is 2.3.0 beta-7 indeed:

Weird… Can you check in your browser console if there is any error?

I found out the problem.
It’s because I am using custom styling:

styles: |-
  ha-card {
    --bubble-secondary-background-color: rgba(128, 128, 128, 0.3);
  }
  .bubble-media-player-container {
    background: rgba(0,0,0,0.3) !important;
  }
  .bubble-icon {
    color: ${hass.states['media_player.yandex_station_max_dubai'].state === 'playing' ? 'var(--accent-color)' : 'darkgrey'} !important;
    }

Without it all is ok, but I don’t like how dark it is.
Is there any way to adjust volume background overlay separately?
Also, it will be cool to adjust the color of the “Play” button as in my case it’s always active (as the player if always in “Pause” state).

Standard screen:

Volume button is pressed:

Any idea how to do the same with sub button state?

Done so, it took some work to get the timer functionalilty working.
Here it is:

3 Likes

You mean the Multiple states?

Something like this?
Screen Recording 2024-11-18 140819

More or less the same:

.bubble-sub-button-1{
  background-color: ${
  {
    'scene.scn_gf_lr_test_01': '#36A1D3AA',
    'scene.scn_gf_lr_test_02': '#85A408AA',
    'scene.scn_gf_lr_test_03': '#85ff05AA',
  }[hass.states['input_select.help_gf_lr_sceneselector'].state] ?? '#C8C8D0AA' };
}
3 Likes

Thank you, that helped a lot :slight_smile:

Is there a way to get the number inputs (like the climate card example) onto a button card?

I have my heating controlled by a simple number input, and it would be great to have this on a button /slider for that room.

thx.

I have made 3 sub buttons. A ‘-‘ ‘inputnumber’ ‘+’. The minus and Plus are call actions to decrease or increase the inputnumber.

But would be nice to have this native in button bubble card indeed.

1 Like

Hi,

Trying to change a background color based on state. Does this only work with button, how about climate and the other card types?

I have just added the following custom style to have the play button only highlighted when the media player is on:

.bubble-play-pause-button {
  background-color: ${hass.states['media_player.sonos_wohnzimmer'].state == 'playing' ? 'rgba(255,140,0,1)' : 'white'} !important;
}

grafik

grafik

Would have also expected this as default behaviour, but can be changed easily.

Mind sharing the code for this please? Need something similar for my pool!

Is it possible to add some extra HTML elements into the div-element (with class “bubble-state”)", which overrides the actual state-text?

It seems that - when adding this at the end of the styles-section - this doesn’t seem to work like I would expect:

  ${card.querySelector('.bubble-state').innerHTML = '<div
  class="extra-element"></div>' }

Bubble Card 2

v2.3.0-beta.8

Hi everyone!

We’re getting closer (again!) to the final v2.3.0 release, and this beta brings important refinements to ensure everything is bug-free and covers more use cases. I really hope that this version meets everyone’s expectations and brings us one step closer to a perfect and shiny release :crossed_fingers:

I’m also truly sorry for introducing new breaking changes, but I want everything to be as polished as possible before the stable release, better now than later.

Here’s what’s new in this version:


:warning: Breaking change

  • Backdrop styling changes for pop-ups: The default backdrop is now darker without any blur, improving performance on older devices. To restore the previous blur effect, in the editor just go to your first pop-up on your view, then go to Styling options > Pop-up styling then change Optional - Backdrop blur to 10 (it was the previous value), or add backdrop_blur: 10 in YAML.


:bulb: New features

  • Persistent background color for climate cards: A new toggle in the climate card editor allows users to enable a constant background color when the entity is on. This simplifies the appearance and improves customization options. #933

  • Automatic entity matching for “Call service” actions: A new toggle in the editor ensures Call Service actions will automatically match the card or sub-button entity if defined.

    YAML users can use:

    target:
      entity_id: entity
    

    :warning: Breaking change: If you removed entity_id in the previous beta, you’ll need to update your YAML. This resolves issues such as #935.


:heavy_check_mark: Bug fixes and optimizations

  • Improved light button visibility: Buttons with white light (or without RGB) are now easier to see in bright/light themes. The overall color system has been refined for better handling, and the color can now be customized with the --bubble-light-color variable. #692

  • Synced temperature changes in climate cards: Temperature values are now correctly synchronized when changes occur elsewhere. #942

  • Support for entity_picture in climate cards: The climate card now fully supports entity_picture as the icon. #939

I can’t wait for your feedback as always, and thank you for your continued support! :heart:


Bubble Card news


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!

Community creations


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!

YouTube

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.


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:

8 Likes

Great work, i like it.

1 Like