Animations carte Glance

[Clemalex]

Pour capitaliser une demande de @barto_95 sur le discord :

Comment faire pour changer la couleur de l’icône/image suivant l’état d’une entité ?
Et son nom ?
Et son état ?

Vous l’aurez compris, @barto_95 est gourmand

Voici quelques animations pour vous donnez des idées et surtout vous indiquez comment faire sur une carte Coup d'oeil (Glance) :

Il faut installer via HACS, le plugin/carte Card-mod.

Ensuite, amusez vous :

type: glance
entities:
  - entity: input_boolean.hacf
    image: /local/hacf.jpg
    style: |
      state-badge{
        {% if is_state('input_boolean.hacf', 'off') %}
          filter:  brightness(50%) grayscale(100%);
        {% endif %}
      }
      div:nth-child(3){
        {% if is_state('input_boolean.hacf', 'off') %}
          font-weight: 600;
          animation: pulsation 1.3s ease infinite;
          -webkit-animation: pulsation 1.3s ease infinite;
        {% endif %}
      }
      @-webkit-keyframes pulsation {
        0% {
          background: transparent;
          color: white
        }
        50% {
          transform: scale(1);
          background: transparent;
          color: white
        }      
        25%,75% {
          transform: scale(1.2);
          background: radial-gradient(circle, rgba(131,58,180,0.6485252808988764) 0%, rgba(253,29,29,0.8114466292134832) 0%, rgba(252,54,54,0.8) 30%, rgba(252,176,69,0) 50%);;
          color: white
          
        }    
        100% {
          background: transparent;
          transform: scale(1);
          color: white
        }
      }
      @keyframes pulsation {
        0% {
          background: transparent;
          color: white
        }
        50% {
          transform: scale(1);
          background: transparent;
          color: white
        }      
        25%,75% {
          transform: scale(1.2);
          background: radial-gradient(circle, rgba(131,58,180,0.6485252808988764) 0%, rgba(253,29,29,0.8114466292134832) 0%, rgba(252,54,54,0.8) 30%, rgba(252,176,69,0) 50%);;
          color: white
          
        }    
        100% {
          background: transparent;
          transform: scale(1);
          color: white
        }
      }
  - entity: input_boolean.hacf
    image: /local/hacf.jpg
    style: |
      .name{
        {% if is_state('input_boolean.hacf', 'off') %}
          color: red;
          font-weight: 600;
          animation: blink 2s infinite;
          -webkit-animation: blink 2s infinite
        {% endif %}
      }
      state-badge{
        {% if is_state('input_boolean.hacf', 'off') %}
          filter:  brightness(50%) grayscale(100%);
        {% endif %}
      }
      @-webkit-keyframes blink {
        0%,
        50%,
        100% {
          opacity: 1;
          font-size: 1.5em;
        }
        25%,
        75% {
          opacity: 0;
          font-size: 1em;

        }
      }
      @keyframes blink {
        0%,
        50%,
        100% {
          opacity: 1;
          font-size: 1.5em;
        }
        25%,
        75% {
          opacity: 0;
          font-size: 1em;
        }
      }
  - entity: input_boolean.hacf
    style: |
      .name{
        {% if is_state('input_boolean.hacf', 'off') %}
          font-weight: 600;
          color: red;
          text-transform: uppercase;
        {% endif %}
      }
      state-badge{
        {% if is_state('input_boolean.hacf', 'off') %}
          animation: jump 1.2s cubic-bezier(0,1.03,1,.01) 0s infinite normal;
          -webkit-animation: jump 1.2s cubic-bezier(0,1.03,1,.01) 0s infinite normal;
        {% endif %}
      }
      div:nth-child(3){
        {% if is_state('input_boolean.hacf', 'off') %}
          font-weight: 600;
          color: red;
          text-transform: uppercase;
        {% endif %}
      }
      @-webkit-keyframes jump{
        0%,12%,100%{ transform:rotate(0); filter: brightness(1); }
        4%,8%{ transform:rotate(40deg) translateX(-0px);filter: brightness(10);}
        6%,10%{ transform:rotate(-40deg)translateX(0px);filter: brightness(10); }
      }

      @keyframes jump{
        0%,12%,100%{ transform:rotate(0); filter: brightness(1); }
        4%,8%{ transform:rotate(40deg) translateX(-0px);filter: brightness(10);}
        6%,10%{ transform:rotate(-40deg)translateX(0px);filter: brightness(10); }
      }
  - entity: input_boolean.hacf
    image: /local/hacf.jpg
    style: |
      .name{
        {% if is_state('input_boolean.hacf', 'off') %}
          font-weight: 600;
          color: red;
          text-transform: uppercase;
        {% endif %}
      }
      state-badge{
        {% if is_state('input_boolean.hacf', 'off') %}
          filter:  brightness(50%) grayscale(100%);
          animation: jump 1s ease-in-out 0s infinite normal;
          -webkit-animation: jump 1s ease-in-out 0s infinite normal;
        {% endif %}
      }
      div:nth-child(3){
        {% if is_state('input_boolean.hacf', 'off') %}
          font-weight: 600;
          color: red;
          text-transform: uppercase;
        {% endif %}
      }
      @-webkit-keyframes jump{
      @keyframes jump{
        0%,20%,50%,80%,100%{ transform:translateY(0); }
        40%{ transform:translateY(-30px); }
        60%{ transform:translateY(-15px); }
      }
      }

      @keyframes jump{
        0%,20%,50%,80%,100%{ transform:translateY(0); }
        40%{ transform:translateY(-30px); }
        60%{ transform:translateY(-15px); }
      }

[telenaze]

Salut,
Super la Carte, merci beaucoup pour le travail.
Il ne reste plus qu’a l’adapter à nos besoins.

[telenaze]

Sur la troisième identité, je ne vois pas comment changer la couleur de l’icône, aurais-je loupé quelque chose

Par ailleurs, j’essaie de remplacer la condition:

{% if is_state('counter.puisard_comptage_activation', '0') %}

qui fonctionne très bien par,

{% if is_state('counter.puisard_comptage_activation', > '0') %}

mais cela ne fonctionne pas, j’ai également essayé

{% if is_state('counter.puisard_comptage_activation', != '0') %}

mais en vain.
J’avoue ne pas être très doué avec le code, aussi si vous aviez une solution à me fournir se serait super cool.

[telenaze]

Bien, j’ai avancé depuis mon dernier post, faut dire que j’y suis depuis plus de 2 heures maintenant.
Voici le code de ma carte:

  - entity: counter.puisard_comptage_activation
    name: Activation
    card_mod: null
    style: |
      :host {
        --card-mod-icon-color:  {% if is_state('counter.puisard_comptage_activation', '1') %} #ff3333 !important
          {% else %}
            green
          {% endif %};
      }
      :state-badge{
        {% if is_state('counter.puisard_comptage_activation', '1') %}
          filter:  brightness(50%) grayscale(100%);
        {% endif %}
      }
      div:nth-child(3){
        {% if is_state('counter.puisard_comptage_activation', '1') %}
          font-weight: 600;
          animation: pulsation 1.3s ease infinite;
          -webkit-animation: pulsation 1.3s ease infinite;
        {% endif %}
      }
      @-webkit-keyframes pulsation {
        0% {
          background: transparent;
          color: white
        }
        50% {
          transform: scale(1);
          background: transparent;
          color: white
        }      
        25%,75% {
          transform: scale(1.2);
          background: radial-gradient(circle, rgba(131,58,180,0.6485252808988764) 0%, rgba(253,29,29,0.8114466292134832) 0%, rgba(252,54,54,0.8) 30%, rgba(252,176,69,0) 50%);;
          color: white
          
        }    
        100% {
          background: transparent;
          transform: scale(1);
          color: white
        }
      }
      @keyframes pulsation {
        0% {
          background: transparent;
          color: white
        }
        50% {
          transform: scale(1);
          background: transparent;
          color: white
        }      
        25%,75% {
          transform: scale(1.2);
          background: radial-gradient(circle, rgba(131,58,180,0.6485252808988764) 0%, rgba(253,29,29,0.8114466292134832) 0%, rgba(252,54,54,0.8) 30%, rgba(252,176,69,0) 50%);;
          color: white
          
        }    
        100% {
          background: transparent;
          transform: scale(1);
          color: white
        }
      }

Maintenant je souhaiterai que inversé les conditions, c’est à dire que la forme se fasse quant:
« counter.puisard_comptage_activation » est différent de ‹ 0 ›.

[Clemalex]

La fonction is_state() est directement issue de la documentation.

@telenaze

{% if is_state('counter.puisard_comptage_activation', > '0') %}

Tu ne peux pas faire ceci car ce n’est pas permis par la fonction.

Tu peux en revanche utiliser l’inverse en utilisant la clé not :

{% if not is_state('counter.puisard_comptage_activation', '0') %}
  filter:  brightness(50%) grayscale(100%);
{%- endif %}

Tu obtiendras la même chose avec :

{% if (states("counter.puisard_comptage_activation") | float) != 0 -%}
  filter:  brightness(50%) grayscale(100%);
{%- endif %}

[telenaze]

Génial !

Merci pour la rapidité de la réponse, j’ai vraiment encore beaucoup à apprendre

[Bruno]

Sympas ces animations.
Question de base: quand je mets une image dans mon dossier image (/config/image/nomimage.jpg), l’image n’apparait pas dans la card

type: glance
entities:
  - entity: input_moninput
    image: /config/image/nomimage.jpg

Je la mets peut être au mauvais endroit ? ou je manipule mal l’emplacement « /local/ » que je ne trouve pas à la racine de mon système ?
Merci

[telenaze]

En fait il faut déposer l’image ici:
\192.168.1.65\config\www\images
192.168.1.65 étant l’adresse ip de ton hassio.
Ensuite tu accèdes à cette image avec le lien :

/local/images/image.jpg

pour ton cas cela fait:

type: glance
entities:
  - entity: input_moninput
    image: /local/image/nomimage.jpg

[Bruno]

Top, merci pour l’explication

[Clemalex]

@Bruno

/config/image/nomimage.jpg

Comme le dit @telenaze , le chemin n’est pas bon.

Sous HA, pour rendre disponible une ressource dans Lovelace, il faut la mettre dans le dossier /config/www

Si le dossier www n’est pas présent il faut le créer sous /config/www et redémarrer. Le redémarrage n’est à faire qu’à la création du dossier, ensuite, l’ajout des fichiers à l’intérieur les rend automatiquement disponible.

Tout ce qui se trouve dans le dossier /config/www est disponible en lecture depuis un accès extérieur. Il n’y a pas besoin de mot de passe pour y acéder mais il faut néanmoins connaitre le chemin.

L’arborescence à l’intérieur de ton dossier /config/www est libre. Tu peux donc très bien avoir :

www
  |-> Dossier_1
              |-> fichier1.txt
  |-> Dossier_2
              |-> fichier2.js
  |-> Dossier_3
              |-> fichier3.jpg

Chaque fichier est alors accessible depuis l’extérieur aux adresses suivantes :

http(s)://<NOM_DE_DOMAINE>:<PORT>/local/dossier_1/fichier1.txt
http(s)://<NOM_DE_DOMAINE>:<PORT>/local/dossier_2/fichier2.js
http(s)://<NOM_DE_DOMAINE>:<PORT>/local/dossier_3/fichier3.jpg

Pour ne pas être dépendant de ton nom de domaine et de ton port, dans Lovelace, il est recommandé d’utiliser le lien symbolique /local

Ce qui donne donc pour les liens précédents à mettre dans une carte (ou dans les ressources sous Configuration → Tableaux de bord → Ressources) :

/local/dossier_1/fichier1.txt
/local/dossier_2/fichier2.js
/local/dossier_3/fichier3.jpg

[Bruno]

Bonjour,
Je ne trouve pas le moyen de réduire la taille de police du nom de l’entité. Pouvez-vous m’aider ?
Merci

[Clemalex]

@Bruno

Je ne trouve pas le moyen de réduire la taille de police du nom de l’entité

ici, l’épaisseur du texte est augmentée et mit en majuscule, essaye de mettre la propriété css font-size: 5px; pour voir :
edit: le code est pour l’état

@Clemalex

      div:nth-child(3){
        {% if is_state('input_boolean.hacf', 'off') %}
          font-weight: 600;
          color: red;
          text-transform: uppercase;
        {% endif %}

[Clemalex]

@Bruno je viens de me relire et je te donne la solution pour l’état et non le nom…

Pour le nom c’est ici :

@Clemalex

    style: |
      .name{
        {% if is_state('input_boolean.hacf', 'off') %}
          font-weight: 600;
          color: red;
          text-transform: uppercase;
        {% endif %}
      }

[Guizmos]

Salut et merci pour ce travail.
Je voudrais utiliser ces animations pour faire quelque chose de spécifique.
Explication ;

Je voudrais que lorsque mon capteur d’ouverture de ma boîte aux lettre passe a ‹ on › que les animations se déclenche. Mais je souhaite qu’elle reste active même quand le capteur repasse à ‹ off ›. Pour m’alerter que le facteur est passé en gros. Et idéalement un tap_action reinitialise les animations…

Y’a t’il une possibilité d’après vous?

[Clemalex]

@Guizmos

Y’a t’il une possibilité d’après vous?

Oui c’est ce que j’ai :

[Mon Dashboard] - @Clemalex

Mise à jour de l’animation : [animate]

Code de la carte

style: | @keyframes pulsation { 25% { transform: scale(1.3); } 100% { box-shadow: 0 0 0 40px rgba(128, 0, 128, 0), 0 0 0 6px rgba(128, 0, 128, 0) inset; transform: scale(1) } } #courrier{ animation: {% if is_state('input_boolean.test2', 'on') %} pulsation 1s infinite ease-in; {% else %} None {% endif %} ; entity: input_boolean.test2 name: Ouvertures…

Il faut passer par un booléen qui passe à Vrai quand le capteur passe a vrai. Et c’est ce booléen qui est utilisé dans les cartes.

Et un tap action agit sur le booléen et le remet à Faux.

[Guizmos]

Super, merci pour ta réponse
J’ai réussi à l’adapter pour ma card

Encore une petite demande, plutot que d’avoir l’icône qui bouge, est-il possible d’avoir la coleur du fond de la carte qui clignote ?

EDIT: trouvé une solution, y’a peut-être plus efficace…

  style: |
    @keyframes bgcolorswap {
      0% {
        background-color: red;
      }
      25% {
        background-color: transparent;
      }
      50% {
        background-color: red;
      }
      75% {
        background-color: transparent;
      }
      100% {
        background-color: red;
      }
     }
  styles:
    card:
      - animation: bgcolorswap 4s linear infinite

EDIT 2: en jouant sur le code précédent, j’obtiens quelque chose de mieux

  style: |
    @keyframes bgcolorswap {
      0% {
        background-color: red;
      }
      100% {
        background-color: transparent;
      }
     }
  styles:
    card:
      - animation: bgcolorswap 1s linear infinite

[Kriss]

C’est génial d’avoir des posts comme celui-ci car le CSS, c’est pas vraiment intuitif…
Il y a un truc que je n’ai pas vu (sauf erreur de ma part) : comment espacer les entités car sur ma carte, chaque entité a une bordure mais elles se touchent.
Un grand merci à ceux qui pourront m’aider !

[Clemalex]

Partage ton code pour voir

[Kriss]

Oui, pardon j’aurais dû le faire dès le début…
Je pense que je n’arrive pas à identifier la bonne balise.

type: glance
title: Couleur Tempo
show_name: true
show_icon: false
show_state: false
entities:
  - entity: sensor.rte_tempo_couleur_actuelle
    name: Aujourd'hui
    card_mod:
      style: |
        :host .name {
          font-weight: bold;
          font-size: 120%;
          padding: 0.7em;
          }
        :host {
          border-style: solid;
          border-radius: 12px;
          border-color: {% if is_state('sensor.rte_tempo_couleur_actuelle', 'ROUGE') %}
                          Red
                        {% elif is_state('sensor.rte_tempo_couleur_actuelle', 'BLANC') %}
                          DimGray
                        {% elif is_state('sensor.rte_tempo_couleur_actuelle', 'BLEU') %}
                          DodgerBlue
                        {% else %}
                          LightGray
                        {% endif %};
          background: {% if is_state('sensor.rte_tempo_couleur_actuelle', 'ROUGE') %} 
                        red 
                      {% elif is_state('sensor.rte_tempo_couleur_actuelle', 'BLANC') %} 
                        White
                      {% elif is_state('sensor.rte_tempo_couleur_actuelle', 'BLEU') %} 
                        DodgerBlue
                      {% else %}
                        LightGray
                      {% endif %};
           color: {% if is_state('sensor.rte_tempo_couleur_actuelle', 'BLANC') %} 
                   DimGray 
                  {% else %}
                   White 
                  {% endif %};
          }
  - entity: sensor.rte_tempo_prochaine_couleur
    name: Demain
    card_mod:
      style: |
        :host .name {
          font-weight: bold;
          font-size: 120%;
          padding: 0.7em;
           }
        :host {
          border-style: solid;
          border-radius: 12px;
          border-color: {% if is_state('sensor.rte_tempo_prochaine_couleur', 'ROUGE') %}
                          Red
                        {% elif is_state('sensor.rte_tempo_prochaine_couleur', 'BLANC') %}
                          DimGray
                        {% elif is_state('sensor.rte_tempo_prochaine_couleur', 'BLEU') %}
                          DodgerBlue
                        {% else %}
                          LightGray
                        {% endif %};
          background: {% if is_state('sensor.rte_tempo_prochaine_couleur', 'ROUGE') %} 
                        red 
                      {% elif is_state('sensor.rte_tempo_prochaine_couleur', 'BLANC') %} 
                        White
                      {% elif is_state('sensor.rte_tempo_prochaine_couleur', 'BLEU') %} 
                        DodgerBlue
                      {% else %}
                        LightGray
                      {% endif %};
           color: {% if is_state('sensor.rte_tempo_prochaine_couleur', 'BLANC') %} 
                   DimGray
                  {% else %}
                   White 
                  {% endif %};
          }