Hi, I have made my own button card (on the right) but I would like to have a circle around my icon as well, if that is possible, but I can’t get it to work. Does anyone know how to do it?
Is it possible to color button card based on applied aystem theme? I have my buttons colored black with white font, but on phone where I use light theme, I would like to switch that.
So for instance if I have light theme, display it white/black font for me, however at the same time, if my wife is using black theme, color them black.
You need to work with themes and the corresponding theme variables.
You set a variable in the theme file and use that variable in your css code for the button. Then your color changes with the used or better selected theme. Take a look around in the theme you’re using.
Note: the selected theme is device, not user specific.
I’m struggling to figure out how to approach this. Any and all advice would be greatly appreciated.
I have a handful of Wiz Bulbs, integrated through the recently added Wiz Integration. I’m looking to enhance the “color” on a button when one of the bulb effects is in use. The ‘auto’ color works great when the entity attribute [color_mode] either [color_temp] or [rgbw].
However, if I use one of the baked in effects, the entity attribute [color_mode] changes to [brightness], and the icon color defaults to the stock orange-ish color. I’d like to override this with an effect specific color somehow.
Can someone help me out? Have two grabs of the state attributes to show what I’m up against.
min_mireds: 153
max_mireds: 454
effect_list:
- Ocean
- Romance
- Sunset
- Party
- Fireplace
- Cozy
- Forest
- Pastel Colors
- Wake up
- Bedtime
- Warm White
- Daylight
- Cool white
- Night light
- Focus
- Relax
- True colors
- TV time
- Plantgrowth
- Spring
- Summer
- Fall
- Deepdive
- Jungle
- Mojito
- Club
- Christmas
- Halloween
- Candlelight
- Golden white
- Pulse
- Steampunk
- Rhythm
supported_color_modes:
- color_temp
- rgbw
color_mode: color_temp
brightness: 128
friendly_name: Office02
supported_features: 4
hs_color:
- 27.827
- 13.281
rgb_color:
- 255
- 236
- 221
xy_color:
- 0.355
- 0.343
color_temp: 183
min_mireds: 153
max_mireds: 454
effect_list:
- Ocean
- Romance
- Sunset
- Party
- Fireplace
- Cozy
- Forest
- Pastel Colors
- Wake up
- Bedtime
- Warm White
- Daylight
- Cool white
- Night light
- Focus
- Relax
- True colors
- TV time
- Plantgrowth
- Spring
- Summer
- Fall
- Deepdive
- Jungle
- Mojito
- Club
- Christmas
- Halloween
- Candlelight
- Golden white
- Pulse
- Steampunk
- Rhythm
supported_color_modes:
- color_temp
- rgbw
color_mode: brightness
brightness: 128
friendly_name: Office02
supported_features: 4
effect: Romance
Does anyone know if it is possible to set up an icon like a battery icon and change it by colour to the lowest percentage of a list of entities?
Example:
Battery state of the temperature sensor in the living room is 100%
Battery state of the temperature sensor in the sleeping room is 80%
Battery state of the temperature sensor in the office is 30%
Display the chosen colour for <40 on the icon, because the battery state of the office is the lowest.
What I have got now, and it works for 1 entity, but I want to add another 2 entities to the script.
That shows the lowest percentage as my example.
@JasonVT, My initial thought is using the variables feature of the button card to specify your list of entities as an array variable, then in your state checks you use the scripting feature to get the min value of all the entities in the variable.
A different way to go that I find useful for myself is the battery state card. I have mine set up to be hidden unless batteries are below a specified minimum, and only those low batteries are shown. It also handles color gradients based on percentage of remaining battery.
I have also experimented with conditionally showing a small battery icon overlay on the same button card that I use to show/control the battery operated device. I use the custom_fields feature of the button card for the overlay. The nice thing about overlays is they can be clicked separately from the rest of the button to see the details of the battery.
I have looked around, but I can’t seem to find an answer to my query - I suspect its simple, but I can’t work it out! I’m guessing its a case of using the button grid, but can’t seem to make it work.
I want to try and create a button that appears like the mock-up I’ve shown below. It would be for an electric car, and uses two sensors - one the battery percent, and the other the mileage range. (Be aware, I accidentally used the total car milage in my mock up, hence the mileage showing so high lol)
So ideally, i just want a button that allows a very quick glance at the range and battery… I plan to then look at changing the icon to orange when the battery goes below 25%. Though need to get the below sorted first.
Hi
taking a cue from this post, I’m inserting animated icons in a picture-element card.
However, I have problems with templates, or rather I’m not very practical.
this is what I am entering to simulate the movement of some lawn sprinklers
i am stuck when i want to add a variable to @keyframes.
I ask if you can tell me how to insert the code to recall the variable:
The [[[…]]] JavaScript template can’t be in the middle like you have it. The whole yaml property value has to be a JavaScript template. You can then return a value with the variable inserted. See original post down in the alerting sensor section for an example.
Thanks for the reply.
Now i fixed the links to the javascript template following your advice.
It works, however, wanting to do one more thing, I am still stuck
I hope you can give me another help
I don’t understand why the variable `origin800: … it accept the variation of the value in the various button-cards,
while the variable turn:… which commands me the keyframes value it does not change, it maintains the value of the first over all
I thought it worked the same way?
i have an group of lights, now i want to display the count of lights turn on in an button-card (as state or name).
i created a template like this: {{expand(state_attr('binary_sensor.lampen', 'entity_id'))| selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} with home assistant.
I can’t get button-card to work with this template. Can someone explain me how to get the count of lights turn on with button-card
i read something about that plain javascript should be used, but could not find any further informations to query the objects.
I’m using custom fields and I just can’t figure how to get my battery field to animate only when the battery is charging…
If I just insert - animation: blink 1s linear infinite
Then this works but I only want the animation when battery state changes to charging, any help appreciated thanks.
While I admit I do not know anything about custom fields yet (it’s the next thing I want to learn), I was able to get a custom:button-card to flash its icon when my phone is charging.
The generic_custom_button template just sets the default appearance. Not sure if this is of any use to you but my example uses a slightly different IF comparison. I’m not sure of the differences between how your code is written compared to mine but I notice mine uses brackets instead of curly braces and my IF comparison is enclosed in parenthesis.
Can someone help me with this? I want the animation working only when I click on the button. In my code the animation start to work when the sensor binary turns on.
This is amazing @Shan, is there any chance you could share the yml for your person tracking card(s)? I’d love to shamelessly plagiarise it - it’s exactly what I’ve been attempting to create to no avail!
@Shan, thank you - super helpful! I’ve fiddled around and adjusted it slightly to suit my needs and have everything working less for the zone icon updating. Despite the zone state txt (home/away) updating correctly I cannot get the icon to update with the corresponding state.
I’ve removed some of your java as I don’t use geolocation data and instead track home/away presence via network tracking but fear I might’ve broken something and can’t find the issue!
I’ve also followed the guidance of the github and added the triggers-update function but that doesn’t seem to make a difference.
N.B - the below yaml doesn’t include the phone java as that’s working as intended.
Also if it helps when the card is first created and the state is ‘home’ it display the correct icon. It’s only when the card updates to away the icon then get stucks on that icon.
