merci beaucoup 
Bubble Card 2
v2.1.0-beta.1
Hi everyone!
I’m back! The past few weeks have been quite busy for me and I haven’t slept much because… I’m now a dad! And I’m so proud of this new achievement! 
Despite the new and joyous responsibilities, I’ve managed to take some time to address some of the recently submitted issues.
I also have a good news for some users. By fixing an issue with the haptic feedback feature, I found a massive memory leak in the sub-buttons actions. This was consuming the RAM and the CPU over time and was mainly noticeable on low-end devices. This issue was slowing down/breaking the pop-ups on some setups. I can say that everything is A LOT faster and everything is working perfectly now!
But that’s not all! I also wanted to introduce a new card to the collection. Here are all the details:
Select card
You now have the possibility to add a dropdown menu for your input_select entities! This new card also supports the sub-buttons and all the common Bubble Card features.
And here is the list of all other new features and bug fixes:
New features
- Select card: More details above, in YAML you can add it with
card_type: select, the YAML is basically the same as the buttons. - Deep attributes: @brunosabot added the ability to get deeper values in the attributes, like
forecast[0].templow. PR #577 - Assist action: You can now add the Assist action in the editor. #595
Bug fixes and optimizations
- Sub-button tap action none: Setting a sub-button tap action to none is not blocking a slider anymore.
- Sub-button state: Fixed an issue where the sub-button state was not always updated.
- Pop-up CSS issues: Some pop-up CSS issues have been fixed.
- Sub-buttons settings: Options in state button disabled have been fixed. #606
- Memory leak: A massive memory leak in the sub-buttons has been fixed. More info above. #612
- Haptic loop issue: The haptic loop issue has been resolved. #601
- Input_select options: The inaccessible
input_selectoptions in a pop-up have been fixed. #565 - HA 2024.7 compatibility: Fixed the pop-up preview in the HA 2024.7 editor.
- Icon resizing: The issue with not being able to resize the icon with a custom style in the separator has been fixed. #593
I’m planning to fix more issues and I still have a lot of new features in my head!
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:
14 Likes
Congrats on becoming a dad! New update looks awesome.
I went to try the new dropdown card immediately, but it only seems to accept input_select and not select as an entity. Any reason for that?
To be honest I didn’t even know that there was a select entity 
I will add it in the next beta!
Edit: Can you try to add one manually in YAML to see if it works?
2 Likes
Edit: Can you try to add one manually in YAML to see if it works?
That kinda works - the list is displayed correctly, but selecting options does nothing. I think it’s because there’s a different service name for that (input_select.select_option vs select.select_option).
1 Like
That makes sense indeed! It will be easy to fix then 
Is there any way to change the font colour of the bubble buttons in styling, particularly the sub buttons?
I’ve got the icons changing colour based on entity state, but would like the text to match.
1 Like
I’m having an issue with the HA to-do list card in a pop-up. Opening the edit dialog on a list item closes the pop-up. I checked and this doesn’t happen with other HA pop-ups, like the more info dialog for light entities. Is there a workaround for this?
I think it may be the same as this issue on github
Yes, see the docs, via the styling options, e.g. for the first sub-button:
.bubble-sub-button-1 {
color: black;
}
If you want it variable, it would be something like this:
.bubble-sub-button-1 {
color: ${hass.states[‘sensor.mytemperature’].state > 25 ? ‘crimson’ : ‘black’} !important;
}
1 Like
I had the icons changing colour, just didn’t realise that removing the "> ha-icon " part would make it affect the text instead. I even tried putting ha-text and ha-font there but stupidly didn’t consider removing it altogether.
Looked through the docs, but couldn’t see a bit specifying font colour.
Thank you.
Pretty nice room card 
willing to share the code?
Hi,
How can i change to show the borders of those cards with “dark” theme? I cant seem to get the borders when using dark theme… Light theme it works good
Thanks. It’s still very much a work in progress. I’m currently arguing with my aircon button which is refusing to behave. For some reason I can’t figure out, deleting:
.bubble-sub-button-1 > ha-icon { }
stops the main (red sun) icon from spinning.
edit: Nope. Not finished very obvious bug in colour and icon for some sub buttons which I now need to fix.
edit 2: Fixed. forgot to remove the ’ surrounding numbers when copy/pasting from string versions.
But I think the light ones for my secondary page are finished for now. I can share the lounge one. The rest are just slightly adjusted as needed for each of my lights:
- type: custom:bubble-card
card_type: button
button_type: slider
scrolling_effect: false
show_last_changed: true
show_attribute: true
show_state: false
show_name: false
card_layout: large-2-rows
entity: light.lounge
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: call-service
data:
entity_id: input_select.light_lounge_mode
service: input_select.select_next
sub_button:
- name: Motion
entity: binary_sensor.ms_lounge
show_icon: true
show_background: false
show_state: true
- name: Motion
entity: sensor.temp_lounge
show_icon: true
show_background: false
show_state: true
- name: Mode
entity: input_select.light_lounge_mode
show_icon: true
icon: mdi:lightbulb-group-outline
show_background: false
show_state: true
- name: Auto Mode
entity: switch.light_lounge_auto_default_mode
show_name: false
show_icon: true
show_background: false
show_state: true
- name: Auto On
entity: automation.light_lounge_auto_on
show_name: false
show_icon: true
show_background: false
show_state: true
- name: Auto Off
entity: automation.light_lounge_auto_off
show_name: false
show_icon: true
show_background: false
show_state: true
styles: |
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.ms_lounge'].state === 'on' ? 'mdi:run-fast' : 'mdi:walk')}
${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_lounge'].state <= 15 ? 'mdi:thermometer-chevron-down'
: hass.states['sensor.temp_lounge'].state <= 25 ? 'mdi:thermometer'
: 'mdi:thermometer-chevron-up')}
${subButtonIcon[3].setAttribute("icon", hass.states['switch.light_lounge_auto_default_mode'].state === 'on' ? 'mdi:transition-masked' : 'mdi:transition')}
${subButtonIcon[4].setAttribute("icon", hass.states['automation.light_lounge_auto_on'].state === 'on' ? 'mdi:motion-sensor' : 'mdi:motion-sensor-off')}
${subButtonIcon[5].setAttribute("icon", hass.states['automation.light_lounge_auto_off'].state === 'on' ? 'mdi:light-switch' : 'mdi:light-switch-off')}
.bubble-icon-container {
margin-left: 0px;
margin-right: 1px;
}
.bubble-state {
font-size: 10px !important
}
.bubble-sub-button-1 {
color: ${hass.states['binary_sensor.ms_lounge'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
}
.bubble-sub-button-1 > ha-icon {
color: ${hass.states['binary_sensor.ms_lounge'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
}
.bubble-sub-button-2 {
color: ${hass.states['sensor.temp_lounge'].state <= 15 ? 'var(--low-colour)'
: hass.states['sensor.temp_lounge'].state <= 25 ? 'var(--primary-button-colour)'
: 'var(--high-colour)'} !important;
}
.bubble-sub-button-2 > ha-icon {
color: ${hass.states['sensor.temp_lounge'].state <= 15 ? 'var(--low-colour)'
: hass.states['sensor.temp_lounge'].state <= 25 ? 'var(--primary-button-colour)'
: 'var(--high-colour)'} !important;
}
.bubble-sub-button-3 {
color: ${hass.states['input_select.light_lounge_mode'].state === 'Bright' ? 'var(--light-bright)'
: hass.states['input_select.light_lounge_mode'].state === 'Soft' ? 'var(--light-soft)'
: hass.states['input_select.light_lounge_mode'].state === 'Dim' ? 'var(--light-dim)'
: hass.states['input_select.light_lounge_mode'].state === 'Dark' ? 'var(--light-dark)'
: hass.states['input_select.light_lounge_mode'].state === 'Night' ? 'var(--light-soft)'
: 'var(--primary-button-colour)'} !important;
}
.bubble-sub-button-3 > ha-icon {
color: ${hass.states['input_select.light_lounge_mode'].state === 'Bright' ? 'var(--light-bright)'
: hass.states['input_select.light_lounge_mode'].state === 'Soft' ? 'var(--light-soft)'
: hass.states['input_select.light_lounge_mode'].state === 'Dim' ? 'var(--light-dim)'
: hass.states['input_select.light_lounge_mode'].state === 'Dark' ? 'var(--light-dark)'
: hass.states['input_select.light_lounge_mode'].state === 'Night' ? 'var(--light-soft)'
: 'var(--primary-button-colour)'} !important;
}
.bubble-sub-button-4 {
color: ${hass.states['switch.light_lounge_auto_default_mode'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
}
.bubble-sub-button-4 > ha-icon {
color: ${hass.states['switch.light_lounge_auto_default_mode'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
}
.bubble-sub-button-5 {
color: ${hass.states['automation.light_lounge_auto_on'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
}
.bubble-sub-button-5 > ha-icon {
color: ${hass.states['automation.light_lounge_auto_on'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
}
.bubble-sub-button-6 {
color: ${hass.states['automation.light_lounge_auto_off'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
}
.bubble-sub-button-6 > ha-icon {
color: ${hass.states['automation.light_lounge_auto_off'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
}
My main page is mostly done, though I need to figure out how to fix an issue with the weather not letting me template hourly temperatures and add that to the Weather button. But if you want any of the codes for those buttons, feel free to let me know.
2 Likes
Question because this is the first day where I’ve really tried to figure out templates with bubble card and I can’t figure the logic behind this out.
Why does having “{}” make a difference?
eg:
${subButtonIcon[0].setAttribute("icon", hass.states['input_select.aircon_speed'].state == '0' ? 'mdi:numeric-0-circle'
: hass.states['input_select.aircon_speed'].state == '1' ? 'mdi:numeric-1-circle'
: hass.states['input_select.aircon_speed'].state == '2' ? 'mdi:numeric-2-circle'
: hass.states['input_select.aircon_speed'].state == '3' ? 'mdi:numeric-3-circle'
: hass.states['input_select.aircon_speed'].state == '4' ? 'mdi:numeric-3-circle'
: hass.states['input_select.aircon_speed'].state == '5' ? 'mdi:numeric-5-circle'
: 'mdi:air-conditioner')}
{ }
.bubble-sub-button-1 > ha-icon {
color: ${'var(--primary-button-colour)' } !important;
}
This works to change icon and colour for the sub button. But if I delete the { } before the colour section, the icon will change but not the colour. Also, I can literally type anything in between those { } and it still works.
I could accept it if it was consistent, but I didn’t add that to my light buttons and the colour and icons work fine. What am I missing here?
Take a look at your browser console, templates errors are displayed in it and that will help you understand what’s wrong with it 
You can also try to add this template at the end of you custom styles.
YAML mode give’s you most control
But UI mode is easier to understand, this is up to you to pick the way you want to follow.
Hi, I have some difficulties to change icon and color by status
type: vertical-stack
cards:
- type: horizontal-stack
title: Salon
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
name: Salon
entity: light.salon
icon: phu:yeelight-bulb
show_last_updated: true
sub_button:
- name: Baie vitrée
show_attribute: true
show_icon: true
show_state: true
entity: binary_sensor.detecteur_ouverture_porte_baie_vitree_contact
- name: Temperature
entity: sensor.temperature_salon_temperature
icon: mdi:temperature-celsius
show_icon: false
show_background: true
show_attribute: true
show_state: true
- name: Chauffage
entity: climate.radiateur_salon
icon: mdi:temperature-celsius
show_icon: false
show_background: true
show_attribute: true
show_state: true
styles: |
.bubble-state {
font-size: 10px !important;
font-weight: 600 !important;
opacity: 1 !important;
/* justify-content: center !important; */
}
.bubble-icon {
opacity: 1;
/* color: ${state < 25 ? 'red' : state < 50 ? 'orange' : 'green'} !important; */
color: white !important;
}
.bubble-range-fill {
/* background: linear-gradient(to right, red 25%, orange 25% 50%, green 50%) !important; */
background: ${state < 25 ? 'red' : state < 50 ? 'orange' : 'green'} !important;
}
/* .is-on .bubble-sub-button-1 {
background-color: gray !important;
} */
/*
.bubble-range-slider {
background: linear-gradient(to right, red 25%, orange 25% 50%, green 50%) !important;
}
*/
.bubble-sub-button-1 {
background-color: ${hass.states['binary_sensor.detecteur_ouverture_porte_baie_vitree_contact'].state == "off" ? 'green' : hass.states['binary_sensor.detecteur_ouverture_porte_baie_vitree_contact'].state == "on" ? 'red' : 'blue' } !important;
}
.bubble-sub-button-2 {
background-color: ${hass.states['sensor.temperature_salon_temperature'].state < 18 ? 'blue' : hass.states['sensor.temperature_salon_temperature'].state < 22 ? 'green' : 'red' } !important;
}
.bubble-sub-button-3 {
background-color: ${hass.states['climate.radiateur_salon'].state == "off" ? 'gray' : hass.states['climate.radiateur_salon'].state = "comfort" ? 'red' : hass.states['climate.radiateur_salon'].state = "eco" ? 'green' : 'blue' } !important;
}
I wish first sub button is green with icon door-close when is off, and red with icon door-open when is on.
Second sub button, change color by temperature, with icon temperature up when it’s over 18 and down when it’s less than 18.
Third sub button gray with icon radiator-off when state if off, red and icon radiator-on when it’s comfort, green with icon radiator when it’s eco, and blue when it’s other.
But I haven’t the right icon and color with the code.
Need some help in styling.
Trying to mimic chip card with bubble card. I mean, only want to have icon (no name or state), and have the card to fill 1x1 in grid and hace the icon centered.
Tanks, on my side little issue with this beta. My sub buttons don’t toggle anymore… navigate is ok