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

sebbaT · December 19, 2023, 3:22am

Glad you got it up and running!

Browser_mod is really powerful and useful for a huge amount of things in HA. Worth looking into.

It isn’t actually needed for this and you can simply use navigate in your tap action:

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: navigate
      navigation_path: '#testpop2'
    entity: light.8bc0abaa_120febac_screen
    show_state: false
    name: MORE POPUPS

raz0rf0x · December 19, 2023, 4:23am

I did it this way:

I have the code in this post.

nirav · December 19, 2023, 8:12pm

Here you go mate. I added a “tag” starting with ‘ENTER_YOU_XXX’ where i could.

Repo:

Cloos Theme:

Get all the components listed in Cloos very detailed and easy to read guide(best I have seen so far by a contributing dev)

Bubble Card:

Again follow the guide and this forum post

Media card:
Sonarr:

Plex:

Enjoy!

DerHerzog7 · December 19, 2023, 10:13pm

Sweet! Thank you!

DerHerzog7 · December 19, 2023, 10:17pm

What are you using for the PS5 integration?

nirav · December 20, 2023, 10:53am

THis is what i use:

super easy to setup and works really well

DerHerzog7 · December 20, 2023, 9:54pm

ah brilliant. that’s what i’m using

Mattia2399 · December 21, 2023, 10:55am

Can anyone tell me how to make the popup background the same color as the running track?

chintito4ever · December 21, 2023, 11:34am

Are you trying to make the background color dynamically change?

Mattia2399 · December 21, 2023, 12:28pm

oh yes, that’s it, based on the track
@chintito4ever

Home49-Connect · December 21, 2023, 7:56pm

Salut, j’utilise bubble-card cela fonctionne parfaitement sur pc mais sur mobile j’ai une erreur et je ne vois pas comment corriger cela. Si tu avais une piste à me donné.

En gros j’ai l’ensemble de mes cartes qui apparaît avec comme erreur “Custom element doesn’t exist: bubble-pop-up” cela me le fait avec le pop-up régulier ou optimisé.

Cloos · December 21, 2023, 8:16pm

The war against bugs and instability continues

v1.6.0-beta.2 :

Hi! Here is a new update that should fix all the new issues introduced in v1.6.0-beta.1. This new version was a huge challenge for me, as it involved a complete overhaul of the entire code structure. However, I sincerely hope that everything is working flawlessly now!

And given the uncertainty of getting another version out before the holidays, I’d like to take this opportunity to say Merry Christmas and Happy New Year to all of you!

Bug fixes

Fixed “bg_color, bg_opacity don’t work” #246
Fixed? “bubble card error android webiew” #247
This one should be definitely fixed “Reload issue still present on 1.6.0-1 beta” #248
This one too “Beta v1.6 Won’t load on Android Companion App” #252
This one too? “Scrolling is not smooth on Android” #253

There is now a small issue with this fix from v1.6.0-beta.1 (but it works after a refresh):

Fixed the pop-ups background color that was not changing when switching themes.

Cloos · December 21, 2023, 8:18pm

Take a look here:

github.com/Clooos/Bubble-Card

custom element doesnt exist: bubble-pop-up

opened 08:52PM - 19 Nov 23 UTC

tgribble

bug?

hi thanks for the bubble card issue is i have done the configuration.yaml …addition : frontend: extra_module_url: - /hacsfiles/Bubble-Card/bubble-pop-up.js but there is an error i have looked for the bubble-pop-up.js file in my home assistant and found it is in this folder but i cant get the bubble card top work even after changing the url ? location : /volume1/docker/homeassistant/config/www/community/Bubble-Card/bubble-pop-up.js what should i change the url to please? the error i get is : custom element doesnt exist: bubble-pop-up thanks

Mattia2399 · December 21, 2023, 9:31pm

Hi @Cloos, congratulations on these cards! Do you know how to solve the problem described above?

Cloos · December 22, 2023, 5:48pm

Hi, I guess that it’s not possible (or pretty difficult to do) because that color is not just a color, it’s a gradient or a blurred image.

Mattia2399 · December 22, 2023, 6:56pm

But I already did it for the background under the cover, but I can’t get it to work in the popup

Chiran · December 22, 2023, 7:54pm

Is there any way to have the popup button bar always be in front of the cards? When i open the first popup button it’s in front, but whenever i open any other card the bar is behind the card.

Cloos · December 22, 2023, 8:08pm

Hi! Just put your horizontal buttons stack at the last position of your dashboard to fix that

Home49-Connect · December 23, 2023, 3:12pm

So I tried this so well understood:

remove the js URL from the configuration.yaml - system reboot
go back to 1.4.4 - system reboot
modify my maps in yaml with ‘type: custom:bubble-pop-up’ - system reboot
upgrade via hacs to 1.5.3 - system reboot
add js URL to configuration - system reboot

But this was causing more trouble, because before I’d only had problems with the mobile version, but now it was doing it on the PC too. So I opted for the version with the added javascript resources, despite the advice you gave below, but there were no more problems. And I don’t think I have a big configuration because I don’t feel any slowdown.

Otherwise to be sure it is rather advised in the frontend to specify the version at the end of the url or not?

Otherwise thank you for this beautiful card.
Chakalis49

Edit: I’m on a raspberry pi 4 2Go

Core: 2023.12.3
Supervisor: 2023.12.0
Operating System: 11.2
User Interface: 20231208.2

Alors j’ai essayer cela si bien compris:

supprimer l’URL js de la configuration.yaml - redémarrage système
revenir à 1.4.4 - redémarrage système
Modifier mes cartes en yaml avec ‘type: custom:bubble-pop-up’ - redémarrage système
mise à niveau via hacs vers 1.5.3 - redémarrage système
ajouter l’URL js à la configuration - redémarrage système

Mais cela causais plus de soucis car avant j’avais des soucis que sur la version mobile mais là cela le faisait aussi sur pc. J’ai donc opté pour la version de l’ajouté en ressources javascript malgré que tu déconseillais un peu plus bas, mais là plus aucun soucis. Et je ne pense pas avoir une grosse configuration car je ressens aucun ralentissement.

Sinon pour être sur il est plutôt conseillé dans le frontend de précisé la version à la fin de l’url ou non ?

Sinon merci pour cette magnifique carte.
Chakalis49

Edit: Je suis sur un raspberry pi 4 2Go

Core: 2023.12.3
Supervisor: 2023.12.0
Operating System: 11.2
Interface utilisateur: 20231208.2

Cloos · December 23, 2023, 3:30pm

If you added it as a resource directly via the UI, it’s exactly the same as using custom:bubble-card for your pop-ups (no need to use custom: bubble-pop-up), it’s not that it’s discouraged, it’s just that it’s useless because there is no optimization like that.

Besides, the “optimization” only concerns the loading of the page when you see the content of the pop-ups appear for a fraction of a second, in optimized mode it doesn’t happen and that’s the only difference.