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

[Cloos]

Bubble Card 2

v2.1.1

Hi everyone!

My time has been a bit limited these past few days. I’ve been embracing my new life as a dad, which has been an incredible journey so far. But I want to assure you that I haven’t forgotten about you all and I’ve managed to take some time to work on some issues.

Thank you for your understanding and continued support!

---

Bug fixes and optimizations

• Climate slider: The climate slider now correctly displays the target temperature value.
• Scrollbar issue: Scrollbars were appearing on some browsers since v2.1.0. This issue has now been fixed! #670
• Media player volume fix: @ADHDSquir has resolved an issue with the media player volume slider on some setups. A big thank you to you! (PR #671, fix for #586)

---

I can’t wait for your feedback!

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

---

Ho one more thing, @brunosabot the developer who helped me the most with v2, has just published a very complete article on how he created his Home Assistant dashboard almost entirely with Bubble Card. Go take it a look!

Crafting My Perfect Home Assistant Dashboard

Release Bubble Card v2.1.1 · Clooos/Bubble-Card

[RickFurtado]

@Cloos

Scrollbar issue: Scrollbars were appearing on some browsers since v2.1.0. This issue has now been fixed! #670

Oh bless you. Silly as it may seem I’d stopped working on my mobile dashboard because I couldn’t stand how ugly it was in my browser. Working great in Iridium, you’re the bomb!

[tvds (Tim)]

Hi I absolutely like your work! It’s amazing!
Trying to get my room cards converted to bubble card.
I calculate the lights on or closed and open covers per room using auto-entities:

Lights on:
expand(area_entities('keuken')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count

Cover open:
expand(area_entities('keuken')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count

Covers closed:
expand(area_entities('keuken')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'closed' ) | list | count

Is there any way I can shown these 3 states as separate subbuttons (as I don’t have separate sensors for them)?

[iona]

Did you find or create anything? I’m in the same boat, unfortunately I haven’t found a way to use bubble card for Alarms, as there is no support for arm modes.

[Miczach]

Hi, all i want is to have a custom icon that is already in my www folder

type: custom:bubble-card
card_type: button
entity: switch.lumiere_cuisine
tap_action:
  action: toggle
hold_action:
  action: more-info
card_layout: large
name: Cuisine
picture: /local/image/icons/kitchen.png

Is it possible?
Thanks in advance

[DerHerzog7]

I haven’t as of yet.

@Cloos any chance of supporting alarm modes?

[GeorgeCastanza]

With the popup card, is it possible to place all the popup cards in “one card” but stack them in the 1, 2, 3, 4 position etc.

I have them at the top, and they work when they are each separate cards, but if I stack them, it doesnt seem to “pop-up”.

The below does not work?? (the hash is completed, just cut off)

[amstermk]

I have pop-ups within pop-ups and that works… so…

… did you put the pop-up in a vertical-stack card? would be easier to help if you show the code

Edit: see now, I misunderstood what you try to achieve… you want to have all the popups at one place so it looks cleaner when editing, correct? Don‘t know if that works…

[GeorgeCastanza]

Yeah. I’m just wondering if I am missing something.

[Krona]

Trying to create a sub-button in a separator that will update all my sensors on a page when pressed, but i can’t find a way to call action for multiple entities. Is it not possible? I tried to put the multiple entities in the YAML code but they dissapear and are replaced by {}

[koleos]

Hello, you can create a script with the actions on all your entities and call it

[Krona]

That might have solved it. Only some sensors or none at all update when i press the button now, but maybe that’s because there are no change from earlier state values?

[PodPerson]

Depends what you need it to show / do. Do you need to be able to enter a code, because I haven’t set up anything like that. Maybe if there was an option for a sub button that had a text or number field, but I don’t think that’s available yet. Maybe Cloos will consider implementing that one day if he has time.

Mine is pretty simple. I have an input select which lets me change how the alarm is armed. So I can press the button and then select a state.
I also have a switch which toggles between Armed Home and Disarmed. Press the icon and it toggles that switch.
The button shows the current state (including if it’s Arming), when it was last changed and the icon changes based on the state.

              - type: 'custom:bubble-card'
                card_type: select
                button_type: state
                entity: input_select.security
                name: Security
                show_state: true
                show_last_changed: true
                columns: 1
                card_layout: large-2-rows
                tap_action:
                  action: call-service
                  service: switch.toggle
                  service_data:
                    entity_id: switch.security_home

                styles: |

                      .bubble-icon {
                        animation: ${hass.states['input_select.security'].state === 'Arming' ? 'blink 2s linear infinite' 
                        : hass.states['input_select.security'].state === 'Triggered' ? 'blink 1s linear infinite' 
                        : ''};
                        color: ${hass.states['input_select.security'].state === 'Triggered' ? 'red' 
                          : hass.states['input_select.security'].state === 'Disarmed' ? 'var(--secondary-button-colour)' 
                          : hass.states['input_select.security'].state === 'Away' ? 'var(--high-colour)'
                          : hass.states['input_select.security'].state === 'Night' ? 'var(--low-colour)'
                          : hass.states['input_select.security'].state === 'Home' ? 'var(--primary-button-colour)'
                          : hass.states['input_select.security'].state === 'Arming' ? 'orange'
                          : 'var(--primary-button-colour)'} !important;
                                    }

                      @keyframes blink {
                        50% {opacity: 0; }
                      }
                      ${icon.setAttribute("icon", hass.states['input_select.security'].state === 'Home' ? 'mdi:shield-home' 
                        :hass.states['input_select.security'].state === 'Disarmed' ? 'mdi:shield-off'
                        : hass.states['input_select.security'].state === 'Away' ? 'mdi:shield-key'
                        : hass.states['input_select.security'].state === 'Night' ? 'mdi:shield-lock'
                        : hass.states['input_select.security'].state === 'Arming' ? 'mdi:bell-alert'
                        : 'mdi:bell-alert')}
                        }

[koleos]

Nothing on logs.
Issue still present on 2.1.1
2.0.4 works fine.
Very strange issue.
I tried to remove my custom styles, but problem still present.

Sub button don’t work anymore snif’:
buttons are no more detected as “button” mousse icon don’t change when it goes on the sub-buttons.

Exemple of one card with the issue.
It is not present on some card, I continue to try to narrow what trigger the issue

EDIT: I found it: it is when I put “no action” in the “Doubble Tap action” on “Top action on icon”

type: custom:bubble-card
card_type: button
entity: light.cellier_lumiere
tap_action:
  action: none
double_tap_action:
  action: none
name: 'Cellier '
show_last_changed: true
show_state: true
sub_button:
  - entity: light.cellier_lumiere
    icon: ''
    tap_action:
      action: toggle
    double_tap_action:
      action: more-info
  - entity: binary_sensor.cellier_fenetre
styles: >
  .bubble-button-card-container {
    border-radius: 10px !important;
    background: rgba(70, 240, 70, 0.4);
  }


  .bubble-icon {
    opacity: 1;
    color: white !important;
  }


  .bubble-sub-button-2 {
    background-color: ${hass.states['sensor.mosquitto_broker_openstate_11'].state === 'OPEN_FRENCH' ? 'red' : hass.states['sensor.mosquitto_broker_openstate_11'].state === 'OPEN_HOPPER' ? 'rgba(87, 160, 238, 1)' : 'green'} !important;
  }


  ${subButtonIcon[1].setAttribute("icon",
  hass.states['sensor.mosquitto_broker_openstate_11'].state === 'OPEN_FRENCH' ?
  'kuf:fts_window_2w_open' :
  hass.states['sensor.mosquitto_broker_openstate_11'].state === 'OPEN_HOPPER' ?
  'kuf:fts_window_2w_tilt' :'kuf:fts_window_2w')}
icon: hue:room-closet
button_type: state
hold_action:
  action: none
button_action:
  tap_action:
    action: none
  double_tap_action:
    action: none
  hold_action:
    action: none

[amstermk]

That is a good one! Noticed similar issues… certain bubble cards were more or less dead… Had the same entries at double_tap_action… after removing these everything works again!

…perhaps good idea to open an issue in Github

[Dakononov (Dmitry)]

I created such a card and I would like to know how to do it the same way as in Mushroom cards? I need:

1 .bubble-sub-button-1
icon color based on “state_attr”
icon type based on “state_attr”
icon background color based on “state_attr”

        icon_color: >-
          {% if is_state_attr('media_player.denon_avr_x4000', 'source',
          'NETWORK')%}
            green 
          {% else %}
            grey
          {% endif %}

2 Main icon and icon color based on entity state

Thanks!

my card code is

type: custom:bubble-card
card_type: button
button_type: slider
entity: media_player.denon_avr_x4000
tap_action:
  action: toggle
sub_button:
  - icon: mdi:cast-variant
    tap_action:
      action: call-service
      service: media_player.select_source
      target:
        entity_id: media_player.denon_avr_x4000
      data:
        source: NETWORK
  - entity: media_player.denon_avr_x4000
    icon: mdi:youtube-tv
    tap_action:
      action: call-service
      service: media_player.select_source
      target:
        entity_id: media_player.denon_avr_x4000
      data:
        source: TV AUDIO
card_layout: large
name: Кинотеатр
show_state: true
show_attribute: true
attribute: volume_level
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  } .bubble-state { 
    font-size: 12px !important;
    font-weight: 500 !important; 
    /* justify-content: center !important; */
  }
  .bubble-sub-button {
    height: 40px !important;
    width: 40px !important;
  }

[AdamAutomation]

@Cloos Are there any plans to give the following elements their own CSS Classes:

• State
• Last Change
• Attributes

As you obviously know, all 3 of those elements are inside the “bubble-state” class, without any way to modify the 3 elements independent of each other.

I know I could do it with js, but would be great if I didn’t have to.

Loving these cards. Thanks for everything!!!

EDIT:

It would also be cool if we could edit/modify the order of those elements.

Currently the order is:

State | Last Changed | Attribute

In certain cases, like mine right now, I would like to have the order be:

State | Attribute | Last Changed

I’m using the button/light slider setup, with the attribute being dedicated to light brightness.

So what I am seeing is:

On | 2 Hours Ago | 50%

Which for my purposes, doesn’t make sense for my ADHD brain. I could see others having the same way of seeing it.

Just a thought anyway.

[deerah (Deergitseason)]

is it possible to have a button for one entity, but the state is a different entity? i’d like the button be for the light (so it turns orange when i tap the button), but the state is the temperature of the room. If i do this then I can easily make this card 1 column wide.

(Another possibility is having it be a State type, so the entity is the temperature, have tap action be for the light… in which case, is it possible to change the background color based on the state of the light entity?)

[Cloos]

Hi, take a look at the Template section in the documentation, I explain how you can change the state and also how to change the background color, so you can pick the way you want to achieve that.

[sebster]

I created slider buttons to show the state of charge for my house and car battery. It’s working great by using an input_number helper with min=0 and max=100 to show the percentage as the slider.
Is it possible to change the background color according to the percentage? Something like red if value is below 20%, green above 80% and yellow in between? I tried to adapt some examples but to no avail, did somebody manage this? I’m only able to change the color in general.