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

[syrys]

Just recently started testing out bubble card, and @Cloos, love the card/project! And love the docs!

I have couple of suggestions/questions.

Suggestions / Feature Requests:

Would be nice to have the ability to template the optional attribute (secondary line under the name) of a button card to show custom data. In my case, i would love to be able to use bubble button card to represent a room, display current temperature of the room on the 2nd line as well as when the last motion was (in addition, would be good to have access to some global function that converts the last changed timestamp to something short like “2s” or “5m” or “5mins”).

Would be pretty neat to be able to have sub buttons/bubbles with different sizes. So in my usecase of using bubble button for a room card, would be nice to use the larger size variant (two rows), then use the first couple of sub buttons to the right as full size buttons (controlling lights), then couple of more sub buttons that show temperature/humidity/motion thats stacked up vertically. I say this, but i can also understand the complexity around how on earth you would map that on the editor. Just some food for thought.

Question:

So, what i said above is actually sort of doable (TY again for the amazing docs). Im doing something like:

styles: >
  ${card.querySelector('.bubble-state').innerText = 
  hass.states['sensor.temp_livingroom_1_temperature'].state + "°C"}

There are couple of problems:

1. I want to be able to add an icon for motion on/off in this section. Is there some way i can do that?
2. Writing some JS function to convert the last updated timestamp to a short time stamp is easy, but writing it in a one liner is pretty annoyingly unreadable. Any easy way i can attach some global JS function and call it within this styles section to format the timestamp?

[Cinamon]

I love to use this card! I want to set the name of a separator bubble-card in the middle of this button. so i get a line, then text, then a line again.
I tried a lot with CSS styling but nothing works to get the name in the center of the button.

[flobidan]

Hooray! Global stile customization is really the main thing missing to make this standard card, as it becomes more and more tedious to copy and paste an adjusted stile into each single card. Looking forward to have this as stable release!

This is also due to the standard settings simply not working out when you use the light theme. Standard light button:

off:

on:

Icon barely visible and overall color difference between off and on too low.

[manuel_R]

Hello, would it be possible to share the codes for your page? Thanks you

[herbert1910 (Herbert)]

Hi.
can someone tell me where I have to make the css entries?
Regards
Hermann

[joq3]

Would it be possible to replace the volume slider on the Media-card with buttons, or maybe have the option to have buttons?
I think the slider is way to sensitive and prone to inputs by mistake, and controlling volume should not be one accidental touch where you go from 10% to 100%.

Would love to see this in a future update, I tried making it myself in a hacky way, but cannot make it work

[Cloos]

You can do that with sub-buttons, have you tried this way?

[joq3]

Yes, but that means I have to show all the buttons at all times. I like the way the Volume control only appears after clicking the volume icon. After adding volume up, down and percentage as sub-buttons there is not much space left for the Artist and Song.
What I tried was to modify the slider to not react to inputs and add buttons for volume up and down.

[joq3]

I have noticed some kind of bug, if you have scrollable title set to true, it does sometime scroll the title even though it is not to big? A refresh solves this. Is it possible to fix this issue?

[ausfas]

@Cloos

.bubble-sub-button-1 {
  background-color: ${hass.states['light.your_light'].state === 'on' ? 'blue' : 'red'} !important;
}

I was about to raise a bug but wanted to check again unless I’m color blind.The issue is with rgba (0,0,0,0.2) the background also changes with state, despite using the right syntax but rgba (0,0,0,0,0.9) seems to work fine. As you can see with 0.2 it still get the blue tint in the back ground which it should not.

- type: custom:bubble-card
        card_type: button
        entity: switch.laundry_socket_2_1
        show_state: true
        icon: mdi:power-socket-au
        name: Spare
        styles: |
          .bubble-sub-button-1 {
            background-color: rgba(0, 0, 0, 0.2) !important;
          }          
          .bubble-sub-button-1 > ha-icon {
            color: ${hass.states['switch.laundry_socket_2_1'].state === 'on' ? 'red' : 'green'} !important;
          }

- type: custom:bubble-card
        card_type: button
        entity: switch.laundry_socket_2_1
        show_state: true
        icon: mdi:power-socket-au
        name: Spare
        styles: |
          .bubble-sub-button-1 {
            background-color: rgba(0, 0, 0, 0.9) !important;
          }          
          .bubble-sub-button-1 > ha-icon {
            color: ${hass.states['switch.laundry_socket_2_1'].state === 'on' ? 'red' : 'green'} !important;
          }

[Will_Fezz]

Did you figure this out?

[ausfas]

No, still clueless… though the backup option is to apply the appropriate full RGBA…may be, but the theme is not an issue as the default theme is giving the same issue.
How are others managing to keep the unchanged background?