Faire clignotter une valeur / icone

[bartounet]

Bonjour,
J’avance dans le suivi en temps réèl des bus scolaires de mes enfants.
J’aimerai comme à un vrai arret avoir l’effet sympa

• Reste 20 minutes = Vert
• Reste 15 minutes = Orange
• Reste 10 minutes = Orange clignotant
• Reste 15 minutes = Rouge Gras clignotant.
  J’ai essayé avec chat GPT mais il est infoutu de me le faire marcher…

type: entities
entities:
  - entity: sensor.temps_place_des_marronniers
    name: Arrivée Merignac
    icon: mdi:bus-clock
    card_mod:
      style: >
        {% set val = states('sensor.temps_place_des_marronniers') |
        regex_replace('[^0-9]', '') | int(99) %}

        {% if val < 5 %}

        ha-entity-row {
          animation: blink 1s linear infinite;
          background-color: rgba(255, 0, 0, 0.3);
          color: red;
          font-weight: bold;
        }


        @keyframes blink {
          50% {
            background-color: rgba(255, 0, 0, 0.7);
          }
        }

        {% endif %}
  - entity: sensor.temps_bus_guirlande
    name: Arrivée Fleurac
    icon: mdi:bus-clock
    card_mod:
      style: >
        {% set val = states('sensor.temps_bus_guirlande') |
        regex_replace('[^0-9]', '') | int(99) %}

        {% if val < 5 %}

        ha-entity-row {
          animation: blink 1s linear infinite;
          background-color: rgba(255, 0, 0, 0.3);
          color: red;
          font-weight: bold;
        }


        @keyframes blink {
          50% {
            background-color: rgba(255, 0, 0, 0.7);
          }
        }

        {% endif %}

[SoG]

Je vais pas pouvoir t’aider mais je suis intéressé par le résultat

[bartounet]

Au final Gemini m’a aidé.

Ca marche très bien couleur et clignottement

type: entities
entities:
  - entity: sensor.temps_place_des_marronniers
    name: Arrivée Merignac
    icon: mdi:bus-clock
    card_mod:
      style: >
        {% set val = states('sensor.temps_place_des_marronniers') |
        regex_replace('[^0-9]', '') | int(99) %}

        :host {
          {% if val <= 5 %}
            --paper-item-icon-color: red !important;
            color: red !important;
            font-weight: bold !important;
            animation: blink-red 1s linear infinite;
          {% elif val <= 10 %}
            --paper-item-icon-color: orange !important;
            color: orange !important;
            animation: blink-simple 1.5s linear infinite;
          {% elif val <= 15 %}
            --paper-item-icon-color: orange !important;
            color: orange !important;
          {% elif val <= 20 %}
            --paper-item-icon-color: green !important;
            color: green !important;
          {% endif %}
        }

        @keyframes blink-red {
          50% { opacity: 0.3; background-color: rgba(255, 0, 0, 0.1); }
        }

        @keyframes blink-simple {
          50% { opacity: 0.3; }
        }
  - entity: sensor.temps_bus_guirlande
    name: Arrivée Fleurac
    icon: mdi:bus-clock
    card_mod:
      style: >
        {% set val = states('sensor.temps_bus_guirlande') |
        regex_replace('[^0-9]', '') | int(99) %}

        :host {
          {% if val <= 5 %}
            --paper-item-icon-color: red !important;
            color: red !important;
            font-weight: bold !important;
            animation: blink-red 1s linear infinite;
          {% elif val <= 10 %}
            --paper-item-icon-color: orange !important;
            color: orange !important;
            animation: blink-simple 1.5s linear infinite;
          {% elif val <= 15 %}
            --paper-item-icon-color: orange !important;
            color: orange !important;
          {% elif val <= 20 %}
            --paper-item-icon-color: green !important;
            color: green !important;
          {% endif %}
        }

        @keyframes blink-red {
          50% { opacity: 0.3; background-color: rgba(255, 0, 0, 0.1); }
        }

        @keyframes blink-simple {
          50% { opacity: 0.3; }
        }

[WarC0zes]

@bartounet

--paper-item-icon-color

Salut,
bizarre que ca fonctionne, car --paper-item-icon-color a été changer en --state-icon-color.

c’est depuis le core 2025.5.0 :

en plus l’IA, dit un peu n’importe quoi, les !important ne sont pas utile.

[bartounet]

bah bizzarement ca ne marchait pas, il et m’a dit « j’ai compris »
Il faut mettre !important !
et en effet depuis ca à marché