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

MrBearPresident · November 26, 2024, 10:13am

2.a) For the color of the dropdown button:

.bubble-dropdown-arrow{
  Background: red;
}

2.b) For the placement. Everything is possible but this would be loads of work. Checkout: CSS Layout - The position Property if this really needed for you.

3.) Conditional text:

${card.querySelector('.bubble-name').innerText = state === 'on' ?  hass.states['media_player.bedroom_tv'].state : 'Off' }

For more examples checkout: Clooos/Bubble-Card Share Your Custom Styles Templates And Dashboards · Discussions · GitHub

Quokka1979 · November 26, 2024, 12:25pm

I can’t seem to hide the “unavailable”

type: custom:bubble-card
card_type: button
sub_button:
  - entity: sensor.washer_time_remaining
    show_state: true
    show_name: false
    show_background: false
    show: |
      [[[ return entity.state !== 'unavailable'; ]]]
  - show_background: false
    show_state: true
    entity: sensor.laundry_thermostat_temperature
button_action:
  tap_action:
    action: navigate
    navigation_path: "#Laundry"
name: Laundry
icon: mdi:washing-machine
entity: light.office
styles: |-
  ${subButtonIcon[0].setAttribute("icon",
   hass.states['sensor.washer_time_remaining'].state === 'unavailable' ?
   '' : 'mdi:progress-clock')}
  ${subButtonIcon[0].parentNode.querySelector(".state").style.display =
   hass.states['sensor.washer_time_remaining'].state === 'unavailable' ? 'none' : 'block'}

Screenshot 2024-11-26

It will show the remaining time if the washing machine is running. I used the following code to hide the icon when unavailable, but have no luck with states or text.

  ${subButtonIcon[0].setAttribute("icon",
   hass.states['sensor.washer_time_remaining'].state === 'unavailable' ?
   '' : 'mdi:progress-clock')}

Thanks

MrBearPresident · November 26, 2024, 3:16pm

Hey

In this example ([Example] Timer-cards with round progressbar. · Clooos/Bubble-Card · Discussion #937 · GitHub), I hide a sub-button.

This I do simply by adding the “hidden” class.

${(() => {if(hass.states['timer.help_house_testtimer'].state != 'active'){card.querySelector('.bubble-sub-button-2').classList.add("hidden")}})()}

I hope this gives you a direction.

Quokka1979 · November 26, 2024, 6:24pm

Thanks mate, it works like a charm.

edcoppen · November 27, 2024, 7:33am

Thanks for your reply, to me and everyone else!

How do I amend the theme please? I’ve looked at the bubble theme and can’t see bubble-accent-color within it. I assumed I’d just change the colour there.

MrBearPresident · November 27, 2024, 12:24pm

It is not in there.
Not all variables are included in @cloos his theme.

You can just add it or make a new one.
The values I use for the theme, are also not in @cloos his theme.

It does not have to be much.

stban1983 · November 27, 2024, 1:14pm

Thanks a lot, but i’havent get it work with cover bubble card…
Maybe it will be included one day in the card

MrBearPresident · November 27, 2024, 1:41pm

I really doubt that it ever will be included as a default.
But you can always make a feature request.

Check this example for the full code. It should just work.

Cloos · November 27, 2024, 2:08pm

Hi everyone!

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don’t believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

Today I have an announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced YAML configurations, custom styles, and templates to help you get even more out of Bubble Card. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons, like little sub-buttons that can display icons based on any entity state. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

Here is the link:

Thank you so much for being part of this amazing community, your support will always makes a huge difference!

P.S.: The final v2.3.0 is almost done, thanks again to all the testers!

Showing a sub-button state on two lines

Adding Home Assistant like badges to any card

Customizing labels and icons inside a select sub-button

Showing formatted date and time in a separator without using any entity

alexander.stein1 · November 27, 2024, 10:50pm

Can I do this for sub-buttons too? And if so how do i get the state of those sub-button entities? it seems to only be getting the state of the main button entity. Thanks in advance!

Mar1us · November 28, 2024, 8:48am

The icon color is in the examples in the documentation:

Mar1us · November 28, 2024, 9:15am

Is there a way to close the popup on a action? For example i have my own header and want with a tap on the x to close the popup

Cloos · November 28, 2024, 12:56pm

Hi! Yes you can, just use this tap_action:

    button_action:
      tap_action:
        action: navigate
        navigation_path: "#"

stefan1982 · November 28, 2024, 2:18pm

Could you post a screenshot?

amstermk · November 28, 2024, 2:31pm

Have a look here: ⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch - #1877 by MrBearPresident

Andrea_Ciullini · November 28, 2024, 4:59pm

Hello, can i use bubble card to create a card as this?:
google lights

MrBearPresident · November 28, 2024, 11:19pm

With this awesome bubble cards almost nothing is impossible.

For this you would need a Boolean helper and a light-group.

Screen Recording 2024-11-29 001159

In the gif the percentage is not shown, but this is simply done.

type: grid
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.help_house_lightgroup
    sub_button:
      - entity: input_boolean.help_house_testboolean
        icon: mdi:chevron-down
        tap_action:
          action: toggle
    tap_action:
      action: toggle
    card_layout: large
    show_state: true
    show_attribute: true
    attribute: brightness
    styles: >-
      ${subButtonIcon[0].setAttribute("icon",
      hass.states['input_boolean.help_house_testboolean'].state === 'on' ?
      'mdi:chevron-up' : 'mdi:chevron-down')}
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: light.dev_ff_hw_lamp
        button_type: slider
        tap_action:
          action: toggle
      - type: custom:bubble-card
        card_type: button
        entity: light.dev_gf_lr_cornerlamp
        button_type: slider
        tap_action:
          action: toggle
    visibility:
      - condition: state
        entity: input_boolean.help_house_testboolean
        state: "on"

Milou020789 · November 29, 2024, 5:02am

Hello,

I added a bubble card button on my dashboard, but i have white text color, is it possible to change this to another color?

benm7 · November 29, 2024, 5:15am

Needed to update the first pop up card again, and then it worked. Was on 10 already so just opened the first one and saved it again and then it worked. Thanks again!

MrBearPresident · November 29, 2024, 7:06am

second most elegant solution is to add follow code to the style part of the bubble card.

:host{
  --primary-text-color: #ff5555;
}

Most elegant solution would be to add this to your theme: