ausfas
(Ausfas)
September 23, 2024, 7:23am
1553
using now()…
spent a lot of time with ChatGPT to make it work last evening
${(() => {
const timerState = hass.states['timer.washing_machine'];
const finishTime = new Date(timerState.attributes.finishes_at);
const now = new Date();
// Sub-button 3 for formatted finish time
card.querySelector('.bubble-sub-button-3').innerText =
timerState.attributes.finishes_at ?
"Finishes at: " +
finishTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) :
"";
// Sub-button 2 for remaining time
const remainingTime = finishTime - now;
const subButton = card.querySelector('.bubble-sub-button-4');
if (remainingTime > 0) {
const remainingMinutes = Math.round(remainingTime / (1000 * 60));
const hours = Math.floor(remainingMinutes / 60);
const minutes = remainingMinutes % 60;
subButton.innerText = `Remaining: ${hours}h ${minutes}m`;
} else {
subButton.innerText = "Completed";
}
})()}
1 Like
ausfas
(Ausfas)
September 23, 2024, 7:41am
1554
I however, want to apply the style at the theme level instead of applying for every button manually.
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === 'on' ? 'rgba(222,176,107,1)' : ''} !important;
}
.bubble-sub-button-1 {
background-color: ${hass.states['switch.laundry_socket_3'].state === 'on' ? 'rgba(57, 54, 70, 1)' : 'rgba(57, 54, 70, 1)'} !important;
}
I have tried this in the theme but its not working
card-mod-root-yaml: |
.: |
bubble-card {
:host {
--bubble-button-background-color: rgba(222, 176, 107, 1) !important; # Main button background
--bubble-sub-button-background-color: rgba(57, 54, 70, 1) !important; # Sub-button background
}
}
while this applies at ha-card level
card-mod-card: |
ha-card {
transition: none !important;
border-style: none !important;
--bubble-button-background-color: rgba(222, 176, 107, 1) !important; # Main button background
--bubble-sub-button-background-color: rgba(57, 54, 70, 1) !important; # Sub-button background
}
I need to apply to this
<div class="bubble-button-card switch-button">
within ha-card… not sure … how to yet.
RKCKBN
(Rkckbn)
September 23, 2024, 9:49am
1555
Thanks a lot, modified your code and got now that I want:
styles: >
${(() => {
const now = new Date();
const startTime = new Date(hass.states['input_boolean.onoffsleeptimertv'].last_changed);
const runningTime = now - startTime;
card.querySelector('.bubble-state').innerText = hass.states['input_boolean.onoffsleeptimertv'].state === 'on' ? "On since " + new Date(runningTime).toLocaleTimeString([], {minute:'2-digit'}) + " Minutes" : "Off"
})()}
Sorry that I cannot help you with your style issue in return…
Natilus
(Rodels)
September 24, 2024, 7:36pm
1556
hey would you like to share the codes for this card? it`s just what I am looking for, but my coding skills are not that good (yet)
edcoppen
(Edcoppen)
September 25, 2024, 7:16am
1558
I am hoping someone can help overcome the dashboard slowing down. If I have a few stock cards everything is instant. After building out a full dashboard with bubble cards everything is so slow it is unusable.
I am running full HA as a VM on a Synology DS923+. The resource monitor on the NAS and also within HA show that the resources are not the limit.
This leads me to suspect that something within this raw dashboard code may be the problem. It is almost entirely bubble cards.
Any suggestions would be most appreciated. Thank you
Create collaborative code files online for your technical interviews, pair programming, teaching, etc.
Try disabling the blur, it has a big impact on performance of the device (not the server)
1 Like
Abunafha
(Abunafha)
September 25, 2024, 12:52pm
1560
Hi
Is there a way to change color of close button of the popup? What is the related styling ?
Borat
September 25, 2024, 5:45pm
1561
Hi all… I am building a dashboard based on this awesome card and getting better at styling, but I am struggling with one thing i want to do that I am sure must be possible. I want to create a button to increment an input number based on clicking the icon on left or right. I want the current value of the number to show in the center of the button… similar to a mushroom climate card. I can get the left and right parts ok with an icon and sub button, but cant work out how to get an entity value to show in the middle. Any suggestions or similar examples out there pls?
Thanks
Zenia
(Yevgeniy)
September 30, 2024, 11:16am
1562
Good day , everyone. I am playing with bubble cards for couple days now and want to ask experts, is it possible to have 2 raw of the horizontal buttons cards?
Something like that:
I use vertical stack card for this , but it’s shows like that only when dashboard in edit mode, than first card cover the second one.
Like that
My idea is to have this 2 cards show only in mobile view, because in tablet and PC view I use a sidebar for floors.
TY
DBunevich
(Dmitry Bunevich)
September 30, 2024, 2:05pm
1564
Dear all,
In case anyone needs:
Conditional battery state card change, here is the code (don’t forget to change sensors):
styles: |2-
.bubble-sub-button**-1** > ha-icon {
color: ${hass.states['sensor.lywsd02_temperature'].state < 15 ? 'blue' : (hass.states['sensor.lywsd02_temperature'].state >= 25 ? 'red' : 'yellow')} !important;
}
}
${subButtonIcon[0].setAttribute("icon",
hass.states['sensor.living_room_remote_battery'].state >= 90 ? 'mdi:battery' :
(hass.states['sensor.living_room_remote_battery'].state >= 80 ? 'mdi:battery-80' :
(hass.states['sensor.living_room_remote_battery'].state >= 70 ? 'mdi:battery-70' :
(hass.states['sensor.living_room_remote_battery'].state >= 60 ? 'mdi:battery-60' :
(hass.states['sensor.living_room_remote_battery'].state >= 50 ? 'mdi:battery-50' :
(hass.states['sensor.living_room_remote_battery'].state >= 40 ? 'mdi:battery-40' :
(hass.states['sensor.living_room_remote_battery'].state >= 30 ? 'mdi:battery-30' :
(hass.states['sensor.living_room_remote_battery'].state >= 20 ? 'mdi:battery-20' :
(hass.states['sensor.living_room_remote_battery'].state >= 10 ? 'mdi:battery-10' : 'mdi:battery-alert')))))))))} !important;
}
Change of the card background opacity:
styles: |2-
* {
background-opacity: 0.5 !important;
.bubble-button-card-container {
background: rgba(0,0,0,0.3) !important;
}
}
Change of the card border radius:
30px - Bubble card style
20px - Mushroom card style
styles: |2-
* {
border-radius: 30px !important;
}
1 Like
I have a theme applied to this dashboard and that is where the blue color is coming from for my ceiling fan switch. The switch colors are taking the color from the theme, but the sliders are still using the translucent orange. How can I have the sliders uses the same color and opacity as the switches?
Cheers!
ausfas
(Ausfas)
October 2, 2024, 10:53am
1566
In the same boat… waiting for theme level changes for each entity.
1 Like
Hello, I feel like a real beginner for this kind of questions, but how do you add a module like time or temperature, because I try to enter integers in name but nothing happens
Thank you very much
DBunevich
(Dmitry Bunevich)
October 2, 2024, 4:15pm
1568
Guys, does anyone know how to change background of the “Select” card.
Standard code doesn’t work:
type: grid
cards:
- type: custom:bubble-card
card_type: select
styles: |2-
* {
background-opacity: 0.5 !important;
.bubble-button-card-container {
background: rgba(0,0,0,0.3) !important;
}
}
entity: input_select.small_bedroom_scenes
card_layout: large
force_icon: false
show_state: true
show_last_changed: true
show_attribute: false
Hallo
October 3, 2024, 5:49pm
1569
Your Trend-Card is amazing? Can you pls share your code?
If you want an entity state in the name itself you need to template it.
In the UI you can find this in Styling Options > Custom Styles / Templates
Inside that, paste in this code (make sure to replace the entity with the one you want)
${card.querySelector('.bubble-name').innerText = hass.states['sensor.your_entity_here'].state};
Is it possible to set an active state for. a sub-button, based on the position-attribute of a cover/blind entity?
I have configured my cover card to have 4 positions. 0%, 10%, 75% 100%. The current state is in the last 3 positions “open”, which lead me to setting the active status of the sub-button to set according the position it currently has.
Does someone have a solution for this?
Now the sub-buttons are always set as “active” once the cover/blinds > 1% open, and otherwise they are all inactive. What I want is to set the active state as on, only where the state attribute of the cover is equal to the preferred position of the sub-buttons position of the blind/cover.
I tried the following, which doesn’t seem to work:
type: custom:bubble-card
card_type: button
button_type: state
card_layout: large
tap_action:
action: toggle
show_attribute: true
show_last_changed: false
show_state: true
layout_options:
grid_columns: full
grid_rows: 1
sub_button:
- show_state: false
show_icon: true
show_icon: true
{% if state_attr("cover.rollerblind_0001", "current_position") == 0 %}
show_background: true
{% else %}
show_background: false
{% endif %}
name: Dicht
show_name: false
tap_action:
action: call-service
service: cover.set_cover_position
target:
entity_id: cover.rollerblind_0001
data:
position: 0
hold_action:
action: more-info
icon: mdi:window-shutter
- show_icon: true
show_name: false
name: Ventileer
tap_action:
action: call-service
service: cover.set_cover_position
target:
entity_id: cover.rollerblind_0001
data:
position: 10
hold_action:
action: more-info
icon: mdi:window-shutter-settings
{% if state_attr("cover.rollerblind_0001", "current_position") == 10 %}
show_background: true
{% else %}
show_background: false
{% endif %}
- show_icon: true
show_name: false
name: Opstaan
tap_action:
action: call-service
service: cover.set_cover_position
target:
entity_id: cover.rollerblind_0001
data:
position: 100
hold_action:
action: more-info
icon: mdi:window-shutter-open
{% if state_attr("cover.rollerblind_0001", "current_position") == 100 %}
show_background: true
{% else %}
show_background: false
{% endif %}
- show_icon: true
show_name: false
name: Open
tap_action:
action: call-service
service: cover.set_cover_position
target:
entity_id: cover.rollerblind_0001
data:
position: 30
hold_action:
action: more-info
icon: mdi:window-shutter-cog
{% if state_attr("cover.rollerblind_0001", "current_position") == 30 %}
show_background: true
{% else %}
show_background: false
{% endif %}
name: Deuren achterzijde
icon: ""
scrolling_effect: false
show_name: false
show_icon: true
force_icon: false
entity: cover.rollerblind_0001
double_tap_action:
action: more-info
attribute: current_position
styles: |-
* {
font-size: 13px !important;
color: #333;
font-weight: normal !important;
letter-spacing: normal !important;
}
edcoppen
(Edcoppen)
October 4, 2024, 8:17am
1572
Can anyone please help me change the text colour of a sub button?
The current temperature text is an attribute of the climate entity.
Thank you in advance
Change it to .bubble-select -card-container
Im also having this problem. Dit you find out how to solve this?