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

Share your Projects! Dashboards & Frontend
,
168

You could hide the default close button on the second pop-up and replace it with a ‘back’ button. This would be then re-open what ever popup was before it.

This back button example is using a custom:mushroom-chips-card but can be styled however you’d like.

ezgif.com-video-to-gif (4)

You can use card-mod to hide the bubble card title and close button:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#testpopup2'
    margin_top_desktop: 50%
    margin_top_mobile: 50%
    width_desktop: 50%
    card_mod:
      style: |
        ha-card {
           display: none !important;
           }
    back_open: false
  - type: custom:mushroom-chips-card
    chips:
      - type: back
        icon: mdi:arrow-left
1 Like
169

anyone have any pointers on where to start?

1 Like
170

Hi all, can you use a bubble button to trigger a pop-up rather than using the horizontal stack?

171

Hi, you can do that with the custom button:

type: custom:bubble-card
card_type: button
button_type: custom
name: Kitchen
icon: mdi:fridge
tap_action:
  action: navigate
  navigation_path: '#kitchen'
1 Like
172

Mushroom chips using the action chip type with tap: navigation to the hash very well also.

173

Im wondering the same too. Did you find a solution?

174

Hi, can you tell me how you were able to show temperature and humidity in the popup header ? i have two different entities for those values and i can add only either temperature or humidity.

thank you.

175

concatenate both of them in a template sensor, and show this sensor…

{% set hum = states('sensor.banheiro_principal_temp_hum_humidity') | round(0) | string %}
{% set temp = states('sensor.banheiro_principal_temp_hum_temperature') | round(1) | string %} 

{{ temp + '°C | ' + hum + '%' }}
1 Like
176

Great work. Just wondering if there is any reason why the Slider button is significantly choppy when adjusting brightness, compared to other cards like Mushroom and Tile?

177

Hey guys, looking at the documentation it says that you can have either an MDI icon or the entity picture for the icon. I’m trying to create a pop-up bubble card, how do I declare an entity and it’s picture for the icon at the top of the pop up card? I’m trying to make a pop-up card for an entity and I want their photo at the top.

178

No, I do not believe there is a solution.

179

Does someone know which theme they are using in the screenshots? :slight_smile:

180

how can I adjust the height of a pop-up card.
My cards are always not finished at the bottom
Thanks

181

Hello guys!

I’m starting to look at those super cool cards.
As you can see in the following screenshots, I have an issue. This is what I’ve done:

1- Created two “person” cards as a “home” view;
2- Created an horizontal button stack with two buttons and a “trial” popup

Now, when I tap on the “bathroom” popup, It correctly opens but the horizontal button stack disappear until I refresh my page.

image
image1170×2532 88.6 KB
image
image1170×2532 174 KB
image
image1170×2532 111 KB

Am I missing something?

182

How do we increase the Slider size? cheers

183

Stop using kiosk mode!! This bugs it. Alteast it did for me

184

I’m not using it :thinking:
This is a screenshot form the iOS mobile app…

185

You have a second horizontal button stack? If so, try to delete the second one.

1 Like
186

No, only one.

This is my full code:

  - title: Home
    path: home
    icon: 'mdi:home-roof'
    panel: false
    badges: []
    cards:
  # ------------------------------------------------------------------------------------------------
      - type: vertical-stack
        cards:
        - type: horizontal-stack
          cards:
            - type: 'custom:button-card'
              entity: person.andrea
              template:
                - icon_info_bg
                - person_andre
              name: Andre
              variables:
                popup_person_entity: person.andrea
                popup_person_wifi_tracker: device_tracker.ndrs_iphone
                popup_person_gps_tracker: device_tracker.ndrs_iphone
                popup_person_findmy_script: script.trova_iphone_andre
                popup_person_use_entity_picture: true
                popup_person_zones:
                    - zone.home
            - type: 'custom:button-card'
              entity: person.andrea
              template:
                - icon_info_bg
                - person_andre
              name: Andre
              variables:
                popup_person_entity: person.andrea
                popup_person_wifi_tracker: device_tracker.ndrs_iphone
                popup_person_gps_tracker: device_tracker.ndrs_iphone
                popup_person_findmy_script: script.trova_iphone_andre
                popup_person_use_entity_picture: true
                popup_person_zones:
                    - zone.home
        - type: vertical-stack
          cards:
            - type: custom:bubble-card
              card_type: pop-up
              name: Bagno
              icon: mdi:bathtub-outline
              hash: '#bagnopt'
            - type: custom:bubble-card
              card_type: separator
              name: Lampadine
              icon: mdi:lightbulb
            - type: custom:bubble-card
              card_type: horizontal-buttons-stack
              auto_order: false
              1_name: Sala
              1_icon: mdi:sofa
              1_link: '#sala'
              1_entity: switch.bagno_pt
              2_name: Bagno PT
              2_icon: mdi:sofa
              2_link: '#bagnopt'
              2_entity: switch.bagno_pt
187

@Cloos Thank you for your great work!!!
Can you please share your yaml file of the header, thaht would be great!