How to use time into templates for styling purposes

Configuration Frontend
1

Hi there, I have created several cards with this custom card integration, it is nice, now I wanto to go one step forward and make it more beautifull and usefull.

The idea is

when the presence sensor detects presence, I want it to “ping” the shape

when it just detect it with a 0.5s duration
2 seconds after if the presence is on change to 1 sec
4 seconds after if the presence is on change to 1.5 sec
6 seconds after if the presence is on change to 2 sec
just when presence is OFF then I want to do the same but backwards

dont even know how to start

any helping hand?

2

I came up to this

.shape {
              --icon-symbol-size: 20px;
              --icon-size: 50px;
              --shape-color: orange !important;  
              border: 2.5px outset green;
              --shape-animation: ping 3s infinite;
             }

what I cant get is how to change the speed over time

so first I tink I need to determine the time the entity entered on on state

I am making tries into the template editor in developer options but I get no result

I know that now() gives the current time but dont know how to indert it into the states statement.

{% set cambio = as_timestamp('switch.light.ladron_pasillo_0_enchufe_1.last_changed' %}

gives error, the second sentence, first one is fine

3

now I got to this, but does not work for me

card_mod:
    style:
              mushroom-shape-icon$: |
                .shape {
                  --icon-symbol-size: 20px;
                  --icon-size: 50px;
                  --shape-color: rgba(142, 215, 148, 1 );
                  --icon-color: rgba(232, 186, 200, 1);
                  --shape-animation: 
                    [[[
                      if (switch.ladron_pasillo_0_enchufe_1.state === 'on') {
                      const timeSinceChanged = Date.now() - new Date(switch.ladron_pasillo_0_enchufe_1.last_changed).getTime();
                      if (timeSinceChanged < 2000) {
                        return 'blink-fast 0.5s infinite';
                      } else if (timeSinceChanged < 4000) {
                        return 'blink-slow 1s infinite';
                      }
                      }
                      return 'none';
                    ]]];
                    animation: var(--shape-animation);
                  }
                  @keyframes blink-fast {
                    0% {box-shadow: 0 0 0 0 red, 0.7);}
                    70% {box-shadow: 0 0 0 10px transparent;}
                    100% {box-shadow: 0 0 0 0 transparent;}
                  }
                  @keyframes blink-slow {
                    0% {box-shadow: 0 0 0 0 red, 0.7);}
                    70% {box-shadow: 0 0 0 10px transparent;}
                    100% {box-shadow: 0 0 0 0 transparent;}
                  }

couold you please lend a hand?

4

I am not using mushrooms.
So, my remarks are general:

  1. What you are trying to use is card-mod which supports jinja templates. But you defined something looking like a JS-template which is used in a custom:button-card and cannot be used in card-mod.
  2. To template some css variable, you should use something like
card_mod:
  style:
    …
    xxx {
      …
      some_css_property: {{ some jinja template }}
    }

or:

    xxx {
      …
      {% if … -%}
      some_css_property: …;
      {%- endif %}
    }

There are dedicated mushroom threads where you can ask all your card-mod-related questions.

1 Like