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

what could be the cause of this:

There is a much newer (and up to date) version of Kiosk Mode (GitHub - NemesisRE/kiosk-mode: 🙈 Hides the Home Assistant header and/or sidebar). Is there a good way to make it work with that?

You are welcome! :smiley: There is no variable available right now, but maybe for the next release!

@Cloos - is it possible to unhide the side/top bar on mobile with the Bubble Card theme? If so, can you tell me how? I like the theme, but not sure about the hidden side and top bar just yet.

I am unable to find these cards in HACS. When I try custom repository I am told it is already in the store.

Searching the store comes up with nothing. Any advise?

Is anyone running into an issue where the dashboard keeps refreshing itself at random intervals? Trying to determine if there is a setting for the cards that prompts this. I built a new dashboard for use on my mounted ipad, but multiple times a day it seems as if my HA app crashes due to the dashboard refreshing.

My other dashboard doesn’t result in the same issue, so I am at a loss for trying to determine what is causing it on my Bubbles dashboard. I do have it set up to auto-close pop-ups after 15 seconds, but I am not using the dynamic horizontal bar at the bottom (changing order based on motion detected).

Any ideas? Thank you in advance!

1 Like

Had the same issue and uninstalled the beautiful cards again :frowning:

That is what I was considering. I like the look of this, but I guess I’ll just circle back and see what it looks like in a few months.

Thank you

1 Like

@sebbaT
I would be interested in all of the code to recreate your example if you still had it…

Sure! Here’s the Menu Bubble-Card along with the two popup cards.

Bubble Card ‘Menu’ Footer

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_name: testpop
1_icon: mdi:account
1_link: '#testpop'
1_entity: light.upstairs_bathroom
rise_animation: false

Main Popup Card

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#testpop'
    name: Settings
    icon: mdi:cog
    margin_top_desktop: 50%
    margin_top_mobile: 50%
    is_sidebar_hidden: true
    width_desktop: 50%
    styles: |
      #root { 
        opacity: 1; 
      }
    auto_close: '5000'
    margin: 0px
    back_open: false
  - type: custom:mushroom-media-player-card
    entity: media_player.toms_bedroom
    use_media_info: false
    show_volume_level: false
    media_controls:
      - play_pause_stop
      - next
      - previous
    collapsible_controls: false
    fill_container: true
    layout: horizontal
    name: Tom Bedroom
    volume_controls:
      - volume_set
  - show_name: true
    show_icon: false
    type: button
    tap_action:
      action: call-service
      service: browser_mod.javascript
      target:
        device_id:
          - THIS
      data:
        code: history.pushState(null, null, "#testpop2");
    entity: light.8bc0abaa_120febac_screen
    show_state: false
    name: MORE POPUPS

Secondary ‘more’ Popup Card (with back button)

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#testpop2'
    margin_top_desktop: 50%
    margin_top_mobile: 50%
    is_sidebar_hidden: true
    width_desktop: 50%
    styles: |
      #root { 
        opacity: 1; 
      }
    card_mod:
      style: |
        ha-card {
           display: none !important;
           }
    margin: 0px
    back_open: false
  - type: custom:mushroom-chips-card
    chips:
      - type: back
        icon: mdi:arrow-left
    card_mod:
      style: |
        ha-card {
           padding: -20px !important;
           }
        ha-card > div {
           justify-content: flex-end !important;
           }
  - type: custom:mushroom-media-player-card
    entity: media_player.kitchen
    use_media_info: false
    show_volume_level: false
    media_controls:
      - play_pause_stop
      - next
      - previous
    collapsible_controls: false
    fill_container: true
    layout: horizontal
    name: Kitchen
    volume_controls:
      - volume_set

Hi! I’m aware of this issue and I can confirm that it will be fixed in 1.6.0 :tada:

1 Like

Seeing an issue when mixed with layout card. I use layout card for my tablets and try to have a fixed size. Each vertical stack card is showing on the bottom of my dashboard making it scrollable. Thoughts?

Will the next version fix the tap_action issue? If not, I may have to switch to another card unfortunately.

Yes, it will be, and it’s already fixed on my side.

I apologize for not responding to all of you, but I’m currently in a significant battle against bugs (and I’m winning!). Here are some issues that have already been fixed in the upcoming v1.6.0:

  • Fixed the issue of empty columns in the dashboard caused by hidden pop-ups.
  • All tap actions on iOS are now functioning correctly.
  • Fixed the icon glitch that occurred when a slider was moving on Safari and iOS.
  • Fixed 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.
  • Increased the line opacity in the separator for better visibility.
  • Fixed the ‘Reload UI’ issue.
  • Fixed all errors with some cards when the pop-ups were closed.
  • Cameras inside pop-ups now load faster.
  • Made some minor style adjustments.
  • Fixed the issue where pop-ups would disappear when the connection was lost or on a mobile device coming out of sleep mode (and probably in all cases).
  • Improved pop-ups in regular mode.
  • Fixed the pop-ups still showing when the editor was closed.
  • Adding bubble-pop-up.js to the configuration.yaml should not trigger the custom element doesnt exist: bubble-pop-up error anymore :crossed_fingers:
  • I’ve refactored the entire code, and it’s much smoother on low-end devices (and it will be a lot easier to maintain!)

And more to come really soon in beta (just to be sure).

5 Likes

@sebbaT
Got this all in my test dashboard… but looks like you are also using a custom JS script?
I see this mentioned, which throws an error since I do not have it.
service: browser_mod.javascript

Could you post this also please?
NM, I found it in hacs, couldn’t find it in the frontend… it was in the integrations area

UPDATE: Holy cow, browser-mod is a world of its own. I like the double popup, but unsure what I have exactly enabled by enabling this new integration (browser-mod). Appreciate the code!

Got to say this card has literally made me use the HA companion app again!
I now have a mobile dashboard with one page using the pop-ups for navigating my smart home for my use case. Amazing stuff and great work @Cloos :smile:

7 Likes

This is cool - do you mind posting your YAML?

The war against bugs and instability continues :unicorn:

v1.6.0-beta.1 :

Hello! I’m excited to announce that the v1.6.0 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.

In this update, I also made a major change. The entire code has been refactored, which makes Bubble Card run smoother on low-end devices and easier for me (and everyone) to maintain!

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

  • Fixed the issue of empty columns in the dashboard caused by hidden pop-ups.
  • All tap actions on iOS are now functioning correctly.
  • Fixed the icon glitch that occurred when a slider was moving on Safari and iOS.
  • 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.
  • Increased the line opacity in the separator for better visibility.
  • Resolved the ‘Reload UI’ issue.
  • Fixed all errors with some cards when the pop-ups were closed.
  • Cameras inside pop-ups now load faster.
  • Made some minor style adjustments for smaller devices.
  • Fixed the issue where pop-ups would disappear when the connection was lost or on a mobile device coming out of sleep mode.
  • Improved pop-ups in regular mode.
  • Fixed the pop-ups not opening in some cases.
  • Fixed the pop-ups still showing when the editor was closed.
  • Fixed the pop-ups background color for some custom themes.
  • Fixed the pop-ups background color that was not changing when switching themes.
  • Fixed when scrolling inside a pop-up and that the content behind it was scrolling too.
  • Fixed the top gradient for pop-ups without an entity.
  • Refactored the entire code, and it’s much smoother on low-end devices.

:bulb: New features

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

Thank you all once again for your continued support! :beers:

7 Likes

Haven’t seen it hit yet (the latest release)…

Curious what would make the bubble cards to be off centered?
Started playing around with some card setups… everything is shifted to the right too much.

UPDATE: NM, I missed the “Beta” part.
Found it, downloaded it and now everything is centered correctly.
image

1 Like

This is in beta, you need to toggle this feature in the Bubble Card page in HACS to get it.

And your issue should be already fixed in this version :crossed_fingers:

1 Like