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

I’ve tried using these custom styles within the Button Card pop up styles object and it seems to break the pop up functionality - clicking the button that should open the popup using these custom styles only changes the location path; the popup itself doesn’t actually display.

There are some issues with the pop-up header templates in v2.0.3, but I’m on it! For example it is also impossible to template the icons at the moment.

I have also fixed many other issues and I will try to release a new version today :crossed_fingers:

4 Likes

Hmm. I have a big header for my popup card already.


without but name portion:

          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#gretas-music'
                width_desktop: 100%
              - type: vertical-stack
                cards:
                  - type: custom:bubble-card
                    card_type: media-player
                    entity: media_player.gretas_room
                    card_layout: large
                  - square: true
                    type: grid
                    cards:
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: call-service
                          service: mass.play_media
                          target:
                            entity_id: media_player.gretas_room
                          data:
                            media_type: artist
                            media_id: Taylor Swift
                            artist: Taylor Swift
                            enqueue: replace
                        entity: media_player.gretas_room
                        name: Taylor Swift
                        icon: mdi:music-circle-outline
                        theme: Mushroom Square
                        hold_action:
                          action: none
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: call-service
                          service: mass.play_media
                          target:
                            entity_id: media_player.gretas_room
                          data:
                            media_type: album
                            media_id: The Greatest Showman
                            enqueue: replace
                            album: The Greatest Showman
                        entity: media_player.gretas_room
                        icon: mdi:music-circle-outline
                        hold_action:
                          action: none
                        name: Greatest Showman
                        theme: Mushroom Square
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: call-service
                          service: mass.play_media
                          target:
                            entity_id: media_player.gretas_room
                          data:
                            media_type: playlist
                            media_id: Disney Hits
                            enqueue: replace
                        entity: media_player.gretas_room
                        icon: mdi:music-circle-outline
                        theme: Mushroom Square
                        hold_action:
                          action: none
                        name: Disney Hits
                    columns: 3

Is it cuz i have a nested vertical stack?

Edit: i removed the nested vertical stack with the same results.

I misunderstood. Media-player isn’t a supported type of bubble card, but a media card can be nested in the pop-up.

What card did you use for this? Looks amazing with the map as a background

Would love to say it is all my own work but here is the link.

1 Like

Bubble Card 2

v2.0.4

Hi everyone! Here is a new release that includes many fixes for users who use custom JS templates. It is now much easier to work on them as they no longer break your cards when you modify them!

And there’s more:

:heavy_check_mark: Bug fixes and optimizations

  • Added the missing card variable for the custom templates in some cards.
  • JS custom templates no longer break your cards while you are working on them.
  • Fixed the inability to template some pop-up header elements (like the icons).
  • Fixed an issue that forced a weather icon instead of the user icon.
  • Added the missing column/row forms in the empty column editor.
  • Fixed some issues with the text scrolling effect that was not working/switching correctly in some cases.
  • Fixed the horizontal buttons stack “Highlight current hash / view” feature, it was not working anymore. #569
  • Fixed an issue with custom services in the cover card editor. #550
  • Changed the margin_top_mobile example in the editor. In v2, you must use 50vh instead of 50% to have a half-sized pop-up.
  • Prevented the feedback element from being clicked. PR #578 (from @brunosabot, addressing #533)
7 Likes

Hi Cloos,

I tried with the last 3 versions, including V2.0.4
Everything works on a PC, but not on the phone
tried emptying cache, remove all data but no luck.
The device is a Samsung S20, so not THAT old
Any other suggestions?

Hi, the only possible reason is that you don’t have correctly cleared your cache on your phone, take a look at this (if you use the HA companion app):

Clear the app cache and data on your Galaxy phone.

that’s exactly what I did (10 times by now)

What version do you see in the Bubble Card editor when you are on your phone? (You can see it in the footer)

Edit: Have you installed it with HACS?

Hi,

Is it possible to change the colour of a sub-button icon based on state of an entity?

Screenshot 2024-06-14 at 12.23.11

If the climate state is cool, the icon will change to snowflake with this code:

${subButtonIcon[0].setAttribute("icon", hass.states['climate.a_c_quarto'].state === 'off' ? 'mdi:fan-off' : hass.states['climate.a_c_quarto'].state === 'cool' ? 'mdi:snowflake' : hass.states['climate.a_c_quarto'].state === 'heat' ? 'mdi:fire' : 'mdi:fan' )}

But I also want to change the icon color to blue. Is it possible?

Thank you

You can add this in your custom styles, I will add this example in the documentation:

.bubble-sub-button-1 > ha-icon {
  color: ${hass.states['climate.a_c_quarto'].state === 'on' ? 'green' : 'black'} !important;
}

Thank you!

Awesome!

Thanks

I am loving this card and using it in my dashboard. One question I have though is how do you change the 1 day to go and 0 days to tomorrow and today?

I use the Waste Collection Service Integration which then means I have some sensors set up that get the information directly from my local council.

I’m currently hiding the icon for the seperator card using icon:none, but how do I remove the space where the icon was so the title aligns left?

Alternatively, I could use a Title card as a workaround.

Screenshot 2024-06-14 at 17.21.16

So im using the bubble card pop-up as a pop-up menu for my views which looks really good, but is there a way to get rid of the button up to the right which is unnecessary since i use the pop-up button to close the menu?
I also wonder if its possible to change the opacity of the buttons in the menu, and the background of it.

To get rid of the “X” use the following code in the custom styles section of the popup:


.pop-up > :first-child 
{ display: none !important; }

1 Like