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

This is the Template sensor helper:

{% set exclusions = ['light.office_1', 'light.office_2', 'light.office_3'] %}
          {{ states.light
            | rejectattr('attributes.entity_id', 'defined')
            | rejectattr('entity_id', 'in', exclusions)
            | selectattr('state', 'eq', 'on') | list | count }}
1 Like

Awesome, works perfectly fine now, thanks!

1 Like

This is not possible. The hash is interpreted only once, when the page loads the first time.
You can try to refresh the page with the hash already in the url to check (make sure it actually refresh for real with CTRL+R) , this should work, but it wont be updated if the hash changes afterwards.
That being said, if you find another way to achieve this let me know :grinning:

That is weird that it doesn’t work with changing colors. Because I can use this exact same thing for changing the URL/Navigation path of the same button without a reload:

              tap_action:
                action: navigate
                navigation_path: >
                  [[[var hash = window.location.hash; if (hash == '#belysning')
                  return 'hem'; else return '#belysning';]]]

Great, is it possible to edit the length of the card? Because if I set a margin at the top like in the picture, part of the card will be hidden. Is it possible to set it to a specific height or to adjust to the screen size?

I have some weird behaviour with lovelace-xiaomi-vacuum-map-card in a Bubble Card.
On desktop when clicking the dropdown:


On mobile when clicking the dropdown:
222
And if I click the dropdown on a normal card (not bubble card), works with mobile and desktop:
33

Cloos, love the Bubble Cards and am enjoying exploring new ways to organize my cards and pages. Thank you for sharing!

I have an issue that I’m running into when trying to activate a scene using sub-buttons, there are 4 scenes. I edit the sub-buttons tap action to include a Call service with scene.turn_on and give the scene name, save and close the editor. Now all the sub-buttons activate the scenes perfectly. If I now go in to edit that bubble card for any reason, all of the scene entities are blank, which obviously means the buttons do not work. I see the info message that shows, but since it talks about “data:”, I didn’t see how it applied to my usage, but I still went into YAML and can confirm that on first edit the scene targets show but are then missing upon the next edit. I’m semi-new to HA, so it could be that I’m attempting to do something that can’t be done. I’m hoping someone can duplicate this error, or point me in a better direction. I’d appreciate any help, thank you!

Cloos, one more comment, and now I’m just being picky :wink:

For the Separator card, it seems strange to me to have a blank buffer UNDER the name as opposed to having a buffer ABOVE the name. Is there any ability to adjust or provide an alternative version that would achieve this? See below for how it looks now (left) to a mock up of an alternate (right).

Hi,
How do I change the header and ‘x’ button bg colour for the pop-up card?
-Sayam

Hi,

Love the card so far! but i do got some suggestions…

  1. Could we get sub buttons under the card instead in the line?
  2. Is it possible to add popups in popups ? For ex id like to have a popup to my room and from there i like to have a popup to my media player. When i close the media player popup i would like to see the popup from the room instead of being at home again.
  3. Could we also get conditionals for sub buttons?
1 Like

Hello together,

is it possible that i can click on the “blue circle” to navigate trough a new site? Or is it only possible to do this via “red circle”

image

I also agree with this. The current behaviour is “strange”

I’m wondering if there is any way to make the swipe on the cards based on relative motioon rather than absolute location? When it comes to swiping near the edge of the screen on mobile, it can be difficult to get it all the way to 100%.

If you change the tap action on button to navigate, you can type in a home assistant URL (such as /mobile/test) or change it to URL and put in any URL.

1 Like

Anyone got tips on using card-mod to style the horizontal stack buttons (to call pop ups). I tried this a while ago but it didn’t work. I obviously need the correct CSS code to modify the buttons.

I want to change background colour and elements like outline thickness and colour.

Thanks.

Thanks! But I want to click on the “blue circled” “button” and not on the button itself. Is there any tap_action code to implement? Or this would be great for updates…then i can Click on two different points to get navigate on each other site…

Tap action button controls the button, and tap action icon the icon :blush:

Ok. But with my code I don’t get a click on it …

    type: custom:bubble-card
    card_type: button
    entity: sensor.temperatursensor_1_wohnzimmer_temperature
    show_state: true
    name: Wohnzimmer
    button_type: switch
    tap_action_button:
      action: navigate
      navigation_path: /lovelace/heizung
    icon: mdi:sofa

Try this, that worked for me removing/lovelace/

navigation_path: heizung

No that is not the issue. It is that i can not click on my button to navigate to my site. I want to click on the red “x” to navigate … but there still nothing happens.

image