parseFloat(hass.states['sensor.gridimport_wh'].state).toFixed(1)
this is how I do it on mine.
2 Likes
I would like to define some CSS variables for the bubblecard in my own custom theme, and use them inside the bubble cards…
Now, how should I do that? When trying it seems the scope of the CSS variables which I declare inside a theme, do not have the scope to be applied inside the bubble card classes?
So… In my_theme.yaml I declare the following variables:
--fuchsia: 231, 60, 126;
--fuchsia-light: rgba(var(--fuchsia), 1);
And in bubble card styling section I do the following:
type: custom:bubble-card
card_type: button
button_type: slider
entity: light.my_lights_group
styles: |-
.bubble-button-card-container {
/** --fuchsia: 231, 60, 126; */
/**--fuchsia-light: rgba(var(--fuchsia), 1); */
background: var(--fuchsia-light) !important;
}
Offcourse I set the theme inside my preferences, reloaded all yaml-code, reloaded the theme and cleared the browser cache.
I also tried:
type: custom:bubble-card
card_type: button
button_type: slider
entity: light.my_lights_group
styles: |-
.bubble-button-card-container {
/** --fuchsia: 231, 60, 126; */
/**--fuchsia-light: rgba(var(--fuchsia), 1); */
background: 'var(--fuchsia-light)' !important;
}
But none of these work unfortunatly. Any idea why not and how to fix this?
Hi guys, can someone help me with coloring my sub-button conditionally?
I created a template sensor which gives me True or False depending on my solar production and consumption. If the solar production is greater than my consumption the sensor state is True, otherwise false.
Now I want to color a sub-button depending of the state of this sensor. What I tried so far:
.bubble-sub-button-1 {
background-color: ${
hass.states['sensor.pv_uberschuss'].state == true ? "var(--good-color)" :
"none"
} !important;
}
Unfortunately the condition does not work and the sub-button nevers gets colored.
What is wrong here? How can I compare a state to a boolean?
Thanks in advance
Are you sure your sensor-name is the one you need? If it’s a boolean, it should be probably hass.states[‘binary_sensor.pv_uberschuss’].state instead of hass.states[‘sensor.pv_uberschuss’].state.
1 Like
Your answer helped me to get the right direction.
Before I created a template sensor which had the states “true” and “false”. This was indeed
hass.states['sensor.pv_uberschuss'].state
But I wasn’t able to check if this state is “true” or “false” because I don’t know how to compare the state with those “words”.
But now I deleted the template sensor and created a new binary sensor instead:
hass.states['binary_sensor.pv_uberschuss_binary'].state
And in the bubble styles I can now check if the binary sensor is “on” or “off”.
.bubble-sub-button-1 {
background-color: ${
hass.states['binary_sensor.pv_uberschuss_binary'].state == "on" ? "var(--good-color)" :
"none"
} !important;
}
1 Like
Great! Glad it worked out the way you wanted and I was able to help
Anyone? I also noticed that when using a vertical stack on the normal dashboard, the gaps are not like that. So the gaps are only bigger in pop-ups for some reason. Can’t find a setting for that either
My code to set decimal numbers (Example: 23.2 °C and 53 %)
${card.querySelector('.bubble-state').innerText =
parseFloat(hass.states["sensor.lywsd03mmc_eingangsbereich_temperature"].state).toFixed(1) + " °C • " +
parseFloat(hass.states["sensor.lywsd03mmc_eingangsbereich_humidity"].state).toFixed(0) + " %"
}
Same Code (Replace . to ,)
${card.querySelector('.bubble-state').innerText =
parseFloat(hass.states["sensor.lywsd03mmc_eingangsbereich_temperature"].state).toFixed(1).replace('.', ',') + " °C • " +
parseFloat(hass.states["sensor.lywsd03mmc_eingangsbereich_humidity"].state).toFixed(0) + " %"
}
3 Likes
Is there a guide somewhere for camera popups?
I’m just not sure how to integrate non-bubble cards into a popup?? (or how to show a camera??)
Have you gotten any further with this? I’ve been looking for the same thing for a while now. Unfortunately I don’t have enough knowledge to set this up myself.
Just moving over from mushroom cards to bubble cards, just sharing where I’m at after the first day:
Temperature Cards show temps relative to 75F (Blue cooler, red warmer), battery states go from green at 100% to Red at 0%, and I’ve got a bunch of contional cards that will appear if something is out of the ordinary, like severe weather or smoke or something. Still working on pop up cards, for now this is all on one screen.
1 Like
did you found a solution there?
Like this. Are you templating the changed shape of the bubblecard somehow? I want to use a mix of bubble + mushroom cards and want to get the bubblecards styled more similarly to mushroom so they work better together.
1 Like
At the moment just using the inbuilt style function of the bubble cards. I am sure you could make it simpler but not got to that yet.
.bubble-button-card-container {
color: rgba(244, 67, 54, 1) !important;
font-family: Quicksand;
background: White !important;
box-shadow: 0px 3px 8px 0px rgba(244, 67, 54, 0.35) !important;
border-radius: 20px;
border-style: solid;
border-width: 1px;
border-color: rgba(244, 67, 54, 0.35) !important;
}
.bubble-icon {
color: rgba(244, 67, 54, 1) !important;
}
.bubble-sub-button {
color: White !important;
background-color: rgba(244, 67, 54, 1) !important;
border-radius: 12px;
}
.bubble-icon-container {
background-color: white
border-radius: 20px;
border-style: solid;
border-width: 1px;
border-color: rgba(244, 67, 54, 0.2) !important;
}
Perfect, thanks - will have a play.
Would you mind sharing the yaml?
If you have the time. There’s parts I’d like to steal haha.
Side question for all, does anyone have issues with the state update on the card taking a while to update?
Like if I turn the light on via the dashboard it will indicate it is on through everything but the state which will remain as Off and vice versa.
Watch the indentation of your (CSS) code. I noticed that - when the indentation of your CSS isn’t on the correct level of indentation - the CSS sometimes is ignored, which leads to unexpected results.
Just a tip…
Will when I get the chance.
Yeah I know. It has been bugging me that the indents are wrong but at the moment it is very much a work in progress. Planning to finish it all and then go back and clean up some of the code.
Although so far not had the problem you described.