Animations carte Glance

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 :cake: :cupcake: :pancakes:
:yum: :kissing_smiling_eyes:

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); }
      }
6 J'aime

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

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

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. :slight_smile:

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 ›.

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

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 %}

Génial !

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

1 J'aime

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

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

Top, merci pour l’explication

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

:information_source: 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.

:warning: 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

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

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

@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 :

4 messages ont été fusionnés à un sujet existant : [CARTE] Button-Card