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

Awesome. What’s the quickest and easiest way to convert to normal mode?

Just replace type: custom:bubble-pop-up with type: custom:bubble-card and add card_type: pop-up in all your pop-ups in YAML mode. That’s what I did on my setup but there is maybe an easier way.

1 Like

Brilliant.

I’m having a similar issue with the blurry popup card. I’ve attached a screenshot which shows the blurryness. This does only seem to happen on my computer though, not on mobile devices. (you have to kinda compare the popup to the icons along the top).

I’m also struggling with the popup actually popping up. I have multiple buttons which activate popups.

If I open the HA app, and immediately click on a popup - this closes very quickly and I can’t then open that popup until I have opened a different popup first.

Love the look of these, but I may have to drop back to using subviews as the functionality is causing issues.

1 Like

Have you tried the latest beta? And also have you tried setting the pop-up blur setting to 0?

I still don’t understand why it’s happening because I’ve never had this issue, but I hope that the latest beta fixes that :crossed_fingers:

Edit: If it’s still not working after the update can you tell me on what browser you are on desktop?

Unfortunately the scrolling bug in pop-ups is still present in beta 5.

I’ve updated to the latest beta (1.6 beta5).
I’m still getting the blurring in chrome and edge, but this isn’t a problem on mobile.

From a super quick look, it seems that the more annoying issue where I couldn’t load a popup for a second time is fixed. :+1:

1 Like

@Cloos is there any plans to allow for buttons to auto update the icon based on state?.. similar to how mushroom-fan-card shows a spinning fan when it is on. Or mushroom-entity-card shows the mdi:motion-sensor vs mdi:motion-sensor-off icons based on state?

for now I am trying to figure out the style that will allow this (not sure how far off I am though)

      - type: custom:bubble-card
        card_type: button
        entity: binary_sensor.hue_motion_occupancy
        name: Motion
        show_state: true
        styles: |
          .switch-button { 
            icon: ${state === 'on' ? 'mdi:motion-sensor' : 'mdi:motion-sensor-off'} !important; 
          }

I don’t know what you’ve done with this beta, but popups are smoother like the original software of my NSPanel Pro. Maybe more :smiley:

Thank you as usual, and a question:

Which type of card do you have in “pipeline”? (or better: in your head :slight_smile: )

1 Like

May I ask you which theme are you using? Is that the minimalist?

It is the minimalist theme. I have it installed purely for its theme and done use it for its more advanced features.

Can you tell me why it doesn’t change color?

    type: custom:bubble-card
    card_type: pop-up
    hash: '#media'
    icon: mdi:music
    name: Media
    bg_opacity: '90'
    bg_blur: '14'
    shadow_opacity: '3'
    bg_color: '#222222'
    margin_top_mobile: 66px
    styles: |
      #root.editor {
        background: url('/local/idle_art.png') center no-repeat !important;
        {% if not is_state('media_player.spotify_mattia_ticconi', 'idle') and not is_state('media_player.spotify_mattia_ticconi', 'off') %}
        background: url( '{{ state_attr('media_player.spotify_mattia_ticconi', "entity_picture") }}' ) center no-repeat !important; 
        {% endif %}
        filter: blur(150px) saturate(200%) !important;
        background-size: 100% 100% !important;
      }

what are you trying to achieve? are you having cards displayed on top also?

yes of course, it’s just a popup to control the media player. I’m trying to make the background of the popup take the color of the cover of the song being played.

try wrapping all your cards in a custom:stack-in-card and then add the media background to that

The war against bugs and instability continues :unicorn:

v1.6.0

Happy New Year everyone! :beers:

I’m excited to announce that the v1.6.0 stable update of Bubble Card is finally here! This update is all about making Bubble Card work the way it should. I’ve worked really hard to fix almost all known bugs that were affecting Bubble Card’s performance, usability and stability.

I also want to share this discovery: Since the recent updates of Home Assistant (I’m not sure which one exactly), the optimized mode for pop-ups has become obsolete. This is because the regular mode is now exactly as efficient, which greatly simplifies things for both new and current users. I will keep the optimized mode in Bubble Card for now, but it will probably be removed in the future.

This update represents a significant overhaul of the Bubble Card codebase. A majority of the code has been refactored and rewritten, which was a substantial and time-consuming task. This is the primary reason for the delay in releasing this version. However, the payoff is considerable: Bubble Card run smoother on low-end devices but also enhances performance and stability across all devices. The code is also much more maintainable for everyone and for me. Your patience and support have been crucial in this process. A big thank you to all the beta testers for their crucial role in this update!

Can’t wait to hear what you think! And remember, a bug-free software is like a unicorn, some say it doesn’t exist, but with this update, we’re one step closer to finding it!

And here is the biggest Bubble Card changelog of all times:

:heavy_check_mark: Bug fixes and optimizations

  • Empty columns: Fixed the issue of empty columns in the dashboard caused by hidden pop-ups on some setups.
  • Tap actions: All tap actions are now (finally) functioning correctly.
  • Icon glitch: Fixed the icon glitch that occurred when a slider was moving on Safari and iOS.
  • Entity picture: Corrected the entity picture when set as an icon. E.g., icon: /local/image.jpg. Fixed the entity picture (album cover) of a media player. If an icon is defined, it will now switch automatically.
  • Line opacity: Increased the line opacity in the separator for better visibility.
  • Reload UI issue: Resolved the ‘Reload UI’ issue.
  • Errors with some cards: Fixed the compatibility errors with some cards when the pop-ups were closed.
  • Cameras inside pop-ups: Cameras inside pop-ups now load faster after a first initialization.
  • Style adjustments: Made some minor style adjustments for smaller devices.
  • Pop-ups disappearing: Fixed the issue where pop-ups would disappear when the connection was lost or on a mobile device coming out of sleep mode.
  • Pop-ups not opening: Fixed the pop-ups not opening in some cases.
  • Pop-ups still showing: Fixed the pop-ups still showing when the editor was closed.
  • Scrolling inside a pop-up: Fixed when scrolling inside a pop-up and that the content behind it was scrolling too.
  • Top gradient: Fixed the top gradient for pop-ups without an entity.
  • Significant optimizations of the editor: Fixed all issues related to entering editor mode, which is also faster now!
  • Improved the initialization of pop-ups in regular mode: Added a new feature that will automatically reorganize the frontend resources to put Bubble Card at the first position if it’s not already the case, this should improve the pop-ups initialization in regular mode for people with a lot of custom cards. Just reboot Home Assistant after the update to automatically get this optimization.
  • Code refactoring: Refactored the entire code, and it’s much smoother on low-end devices.
  • Various other fixes: Fixed a minor error that was displayed in the Chrome console. Fixed the issue “Popup button randomly stops working” #258. Fixed the issue “Bubble Card log spamming during startup: Cannot read properties of undefined (reading 'entity_id’)” #255.

:bulb: New features

  • Highlight the current hash / view: Added an option to highlight the current hash / view in the horizontal buttons stack with a soft animation. Thank you @Winor for helping me!
  • Haptic feedback: Haptic feedback has been added for the Home Assistant companion app users (the slider button is the coolest one).
  • Show or hide the state of covers: You now have the ability to show or hide the state of covers (default is now show_state: false).

Thank you once again for your continued support!

:beers:

3 Likes

v1.6.1 and v1.6.2 - I had to skip a version for the HACS fix

  • I should have fixed the issue where Bubble Card was missing in HACS for some users! #259
  • Fixed a message that was spamming the developer console. #278
  • The version number shown in the editor is 1.6.1, but it’s actually the v1.6.2.
1 Like

Thanks @Cloos for this card.
Just found it and love it. I’ve got 1 question. I grouped my cards in 3 vertical stacks. I would like to define all of them as a popup (consistent layout) but that starts the view always empty with only the bubblecard buttons at the bottom. Is it possible to define one of the popups as default so that this one is always shown as no other is selected?

Hi and thanks! You can do that, I’ve explained how in that comment:

Thanks for your help, that’s exactly what I needed, Sorry I looked over that comment.

1 Like