Check out thisā¦
Look for Animation
1 Like
just as a heads-up, there are some issues during the current 2024.7 beta regarding vertical-stack cards not sizing properly.
some fixes have already been made by the dv team, but not all is fixed, I guess my ask is if anyone isnt yet running the beta, and willing to participate, please do!
Personally I am only affected by my grids with custom:button-card no longer scrolling
- type: custom:mod-card
card_mod:
style: |
:host {
max-height: 500px;
overflow-y: scroll;
}
card:
type: grid
columns: 4
cards:
which is rather annoying too. I am not at all sure this will be fixed (there have been changes in the core cards, that might very well stay, and we need to adapt out card_mod settings for, simple as thatā¦)
anyways, consider this request to join in finding out 
Also, these many āif ā¦ elseā¦ā may be replaced by
{% set STATE = states('sensor.xyz') -%}
{%- set mapper = {
'state_1':'red',
'state_2':'orange',
'state_3':'magenta',
'state_4':'blue',
'state_5':'green',
} -%}
{%- set COLOR = mapper[STATE] if STATE in mapper else 'yellow' -%}
color: {{COLOR}};
1 Like
Thanks for your reply @Ildar_Gabdullin
Unfortunately I still canāt find any way to have the state-icon blink with a particular state, also the change you suggested doesnāt work for me with this code.
card_mod:
style: |
:host {
--card-mod-icon-color:
{% set STATE = states('sensor.[[car]]_charging') -%}
{%- set mapper = {
'disconnected': var(--pink),
'no_power': var(--red),
'starting': var(--cyan),
'stopped': var(--orange),
'complete': var(--white),
} -%}
{%- set COLOR = mapper[STATE] if STATE in mapper else var(--green) -%}
color: {{COLOR}};
}
the above code changes the icon color , it does not blink, or, in other words, activate an animation
is that what you want?
btw, to make the template even more robust, you can use
{%- set COLOR = mapper.get(STATE, 'var(--green)') -%}
in stead of
{%- set COLOR = mapper[STATE] if STATE in mapper else var(--green) -%}
Yes @Mariusthvdb the above was a suggestion to simplify all the elifs in my original code, what I want is the icon to blink when the car state is āchargingā but be static in all other states.
right, but where is the yaml you tried that with? I only found this color template?
is the [[car]] because you are using a decluttering template?
so the animation would be like:
animation: {{'blink 2s ease infinite' if state == 'charging'}} in pseudo code?
and need to find the correct element to set it to
Yes itās inside a decluttering template.
I havenāt yet found a way to get the icon to blink, thatās what Iāve been looking for.
Yes something like that
did you check the link Liquid_cooled suggested, itās all there
I looked through but couldnāt find anything to only blink for a particluar state.
the important thing is to decide if you want to set it global to the picture-elements card, or to a particular element inside the picture-elements card
Ildar has it all spelled out in that example (I wont copy it here, because you can find it above easily enough)
what you then do is first set the animation as a fixed animation.
final step is to template that based on the state. Which really is easy if the previous steps were successful
my suggestion would also be, to first do this outside the decluttering card, because that can be unreliable at times
You composed your old code & mine in a wrong way.
Should be like
...
--card-mod-icon-color: {{COLOR}};
And ofc my proposal using āmapperā is NOT related to your question about animation.
Thanks, I think Iāve found what youāre referring to now.
OK I see now, thanks!
to give you a jump start without templates, do this:
card_mod:
style: |
ha-icon {
--card-mod-icon: mdi:home;
--card-mod-icon-color: green;
animation: blink 2s ease infinite;
}
@keyframes blink {
100% {opacity: 0}
};
this has all mods you need, if you set it per element in the picture-elements card. Test it please, and then take my route to keep sure itās still working per each step
1 Like
Np.
I confess I lost my way a bit too in that example. this seems tighter, more robust, and what I like most is the fact all is set directly to the ha-icon element, which makes the mod easier to maintain too
1 Like
Thanks again for your help, I had to make a couple of changes to get it to work and make it look exactly how I wanted but really appreciate the jump start!
This is the final yaml and itsā working perfectly in the decluttering template.
- type: state-icon
entity: lock.[[car]]_charge_cable_lock
icon: iq:tesla-plug
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if is_state('sensor.[[car]]_charging', 'disconnected') %}
var(--grey);
{% elif is_state('sensor.[[car]]_charging', 'no_power') %}
var(--red);
{% elif is_state('sensor.[[car]]_charging', 'starting') %}
var(--cyan);
{% elif is_state('sensor.[[car]]_charging', 'stopped') %}
var(--orange);
{% elif is_state('sensor.[[car]]_charging', 'charging') %}
var(--green);
animation: blink 2s ease infinite;
{% elif is_state('sensor.[[car]]_charging', 'complete') %}
var(--green);
{% endif %}
}
@keyframes blink {
50% {opacity: 0}
};
state_color: no
tap_action:
action: toggle
style:
top: 88%
left: 90%
and now rewrite this pleaseā¦ it hurts the eye
tbh, I must check why that works in the first place, as you now set the animation to the icon-colorā¦
maybe we can animate the color too, and its a different effect than animating the icon, whihc is what I did above, and what is the āregularā way.