Try using == instead of ===
Id like to allign the subbuttons to the right except for the first one…
Anyone know if its possible? If so how ? ^^
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Personen
icon: mdi:home
tap_action:
action: navigate
navigation_path: "#personen"
entity: sensor.thuis_teller
show_state: true
state_background: false
show_background: false
- name: Updates
entity: group.all_update_entities
show_background: false
tap_action:
action: navigate
navigation_path: "#updates"
icon: mdi:update
show_state: false
visibility:
- condition: state
entity: group.all_update_entities
state: "on"
- name: Plex
icon: mdi:plex
show_background: false
tap_action:
action: navigate
navigation_path: "#plex1"
entity: sensor.tautulli_stream_count
show_state: true
visibility:
- condition: state
entity: sensor.tautulli_stream_count
state_not: "0"
- name: Energie
icon: mdi:lightning-bolt
show_background: false
tap_action:
action: navigate
navigation_path: "#energie"
entity: sensor.p1_meter_active_power
show_state: true
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-button-card-container {
background: none;
border: none;
}
.bubble-sub-button {
height: 46px !important;
width: 46px !important;
}
.bubble-sub-button-container {
display: flex !important;
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
modules:
- default
scrolling_effect: false
Is it possible to set local svg picture as subbutton icon using subButtonIcon[0].setAttribute?
Thank you.
What’s the difference between === and == ?
=== is for strict comparisons, so for example if attributes.daysTo contains a number, and you do a strict comparison with a string as you were doing (=== '0'), the comparison will fail. It would work if you compared with a number (=== 0), or use a non-strict comparison (== '0').
More info here if you’re interested.
1 Like
Thank you makes sense.
I use a select card to control preset positions of my awnings. However I also control the awnings with the slide. Is there a way to remove selection from the the pulldown menu, so that the same preset can become active again. Let’s say I selected 80%, and after 10 minutes I want to activate again 80%.
Thanks.
Need some help from experts.
I have a location( button) card and I would like to change a background color for each location, but stuck with 2 colors for home or other
type: custom:bubble-card
card_type: button
entity: sensor.yevgeniy_location
name: Yevgeniy
button_type: state
show_state: true
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === 'home' ? 'teal' : 'red'} !important;
}
modules:
- default
But before it was changing color
- type: custom:bubble-card
card_type: button
entity: sensor.yevgeniy_location
name: Yevgeniy
button_type: state
show_state: true
styles: |-
.bubble-button-background {
background-color: ${
{
home: 'green',
'Church': 'antique white',
'Dacha': '#7fffd4',
'Дача': '#7fffd4',
'Artem House': '#0d98ba',
'Irina work': '#556b2f',
not_home: '#d2691e',
'Yevgeniy Work': 'teal',
'Parents home': '#b8860b',
'Sonia Home': '#e75480',
'Sonia Work': '#e75480',
}[state] ?? 'red'
}
What should I change to replicate this
Thank you
On my pc it’s working without adding overflow: scroll !important;, but then it is not working on my phone.
With overflow: scroll !important;, it works also on the phone, but the subbuttons are overlap each other.
- above, is with overflow: scrol. I can scroll on phone and pc
- below, is without overflow: scrol, i can’t scroll on phone but can scroll on pc.
This is how I solved it! I don’t know if it’s the best, but it works!
.bubble-button-background {
background-color: ${
state === 'Na poslu'
? '#009bd6'
: state === 'Kod kuće'
? "#205A28"
: state === 'Kod Minje'
? "#6C7A89"
: state === 'Kod Bojane'
? "#6C7A89 "
: state === 'Kod Smiljke'
? "#6C7A89"
: state === 'Odsela'
? "#354649"
: state === 'U odlasku'
? "#cd7700"
: state === 'U povratku'
? "#9F4298"
: ''} !important;
}
2 Likes
How to change the color of the ring depending on the condition?
type: custom:bubble-card
card_type: button
button_type: state
icon: mdi:account
name: test
scrolling_effect: false
entity: sensor.branislav_location
modules:
- default
card_mod:
style: |
.bubble-button-card:after {
content: "";
position: absolute;
top:2px;
left: 2px;
width: 38px;
height: 38px;
border: 4px solid transparent;
border-radius: 50%;
border-color: green;
}
My idea is that depending on the condition, the color of the ring will change. I tried adding an if condition inside “border-color” but it doesn’t work at all, it’s obviously not good semantically.
border-color: |
{% if (entity.state == 'Kod kuće') %}
green;
{% elif (entity.state == 'Na poslu') %}
blue;
{% endif %}
......
border-color: ${
state === 'Kod kuće'
? green
: state === 'Na poslu'
? blue
};
.....
Any help is welcome!!!
Hi everyone!
These past few days, I’ve worked a lot on the upcoming v2.5.0, and with modules coming in, I wanted to complete the major refactoring of Bubble Card that I started since v1.6.0. And I’ve finally almost finished! 
If you want to know more, I’ve shared quite a lot here, and I can say this update will bring huge changes, not just in how easy customizations will be (unified CSS classes with backward compatibility), but also in performance, overall project size (only 65ko!), and most importantly, how much easier it will be to maintain!
On top of this new structure, I also took the opportunity to add some features, like tap actions for cards that didn’t have them yet and even the ability to use !import in the module’s YAML file! I also decided to make the “large layout” the default, since the section view have become a lot more popular and the size difference isn’t that significant. But most importantly, I’ve fixed an incredible number of old and new WTH issues!
I’ll be on vacation for a week, so I won’t have time to release the new beta just yet, but once I’m back, there shouldn’t be much left to do before it’s ready!
Well, that’s all! See you in a week everyone!
16 Likes
Fan of the bubble cards and particularly the pop ups. I have moved much of my dashboard over from standard mushroom cards. One item I am struggling with though is here:
What I have is a Mushroom template card where the title/name is pulling through the name of the day for +2 days and +3 days.
The template for the Wednesday card is:
type: custom:mushroom-template-card
primary: "{{ (now() + timedelta(days=2)).strftime('%A') }}"
secondary: "{{ states('sensor.solcast_pv_forecast_forecast_day_3')|round(2) }} kWh"
icon: ""
entity: sensor.solcast_pv_forecast_forecast_day_3
multiline_secondary: false
The sensor exists for the 32.44 kWh value and I have already created a different Helper sensor (if it is needed) so that I can call and it would return “Wednesday”
Is there some way to make the Wednesday and Thursday card from Bubble Card, to sit nicely alongside the “Tomorrow” card.
Solved it by using some other similar code. I cant just use the template code direct, but having already set up a new helper sensor where the state returns the name of the Day
That is this one:
{{ (now() + timedelta(days=2)).strftime('%A') }}
I can now use:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.solcast_pv_forecast_forecast_day_3
hold_action:
action: more-info
double_tap_action:
action: more-info
name: Tomorrow
styles: |-
styles: |
${card.querySelector('.bubble-name').innerText = hass.states['sensor.day_in_2_days'].state}
show_icon: false
And get this:
Thursday is the centre button being the day after tomorrow currently.
1 Like
instead of iframe:
I just updated to the latest bubble card today and my entire dashboard looks like this now…
Those were all pop up cards in a vertical stack. I don’t see any posts here about it and I didn’t see in the release notes about a change I would have to make.
Anyone know what’s gone wrong?
Thanks
Thanks for the code snippet. This always returns the day in English, even though my HA language is a different one. Do you know if this can be adjusted?
Edit:
Just found this code snippet, which does the same thing but is versatile in terms of language:
Tomorrow is {{ ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'][now().weekday()+1] }}
1 Like
Revert 1 version before the version you are using right NOW, and then update again to the newest beta. For me, that fixed al problems I had.
Also make sure to flush your browser cache, and refresh home assistant theme cache.