Animation Badges

Voici un exemple de code afin d’animer les badges.

Pour rappels, les badges s’ajoutent par la fenêtre de propriétés de la vue de votre tableau de bord dans un onglet dédié.

Pour ajouter le code suivant, il faut afficher l’
éditeur de configuration de la vue (après avoir cliqué sur Modifier le tableau de bord)

  - title: HACF_2
    path: hacf
    icon: 'cha:hacf'
    badges:
      - entity: sensor.hacf
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .label-badge{
                    {% if (states('input_number.hacf')|int) == 1 %}
                      animation: rotate 2s linear infinite;
                    {% elif (states('input_number.hacf')|int) == 2 %}
                      animation: rotate 1s linear infinite;
                    {% elif (states('input_number.hacf')|int) == 3 %}
                      animation: rotate 0.7s linear infinite;
                    {% endif %}
                  }
                  .label-badge .label{
                    display: none;
                  }   
                  @keyframes rotate{
                    100%{ transform:rotate(360deg); }
                  } 

Ce qui donne :

animate

Il ne vous reste plus qu’à vous amuser.

PS:

Le badge de l’animation affiche une entité dont l’image est un svg directement pris depuis https://materialdesignicons.com/ :

sensor:
  - platform: template
    sensors:
      hacf:
        friendly_name: "hacf"
        unit_of_measurement: "HACF"
        value_template: ""
        entity_picture_template: > 
          {% if (states('input_number.hacf')|int) > 0  %}
            {{"/local/fan.svg"}}
          {% else %}
            {{"/local/fan-off.svg"}}
          {% endif %}

Mais le moins lourd reste le fait d’utiliser custom-ui pour modifier directement l’entité concernée (:warning: elle sera modifiée partout) :

#customize.yaml
input_number.hacf:
  templates:
    entity_picture: if (state > 0) return '/local/fan.svg'; else return '/local/fan-off.svg';
input_boolean.hacf:
  templates:
    entity_picture: if (state == 'on') return '/local/fan.svg'; else return '/local/fan-off.svg';
4 J'aime

Salut,
sympa ce badge animé, je n’en ai pas l’usage pour l’instant mais on ne sait jamais…
Merci pour le partage,

tu es au taquet @Clemalex en ce moment lol t’es partant un icone de print 3D ? ? :smiley:

genre : image

Dans un badge ? oui tu peux par exemple avoir ce rendu :

animate

    badges:
      - entity: sensor.hacf
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  #badge{
                      animation: printing 1.5s linear infinite alternate;
                  }
                  .label-badge .label{
                    display: none;
                  }   
                  @keyframes printing{
                    0% {
                      background-image: url("/local/printer-3d-01.svg");
                    }
                    33% {
                      background-image: url("/local/printer-3d-02.svg");
                    }
                    67% {
                      background-image: url("/local/printer-3d-03.svg");
                    }
                    100% {
                      background-image: url("/local/printer-3d-04.svg");
                    }
                  }

avec ces images faites depuis l’icône disponible sur https://materialdesignicons.com/ et modifiées dans inkscape :
printer-3d-01 printer-3d-02 printer-3d-03 printer-3d-04

Pour le faire dans une carte coup d’œil (glance), il faut s’inspirer de :

Merci @Clemalex, je vais me poser dans le jardin cette apres midi et en faire un max ! Merci encore pour ta patience :slight_smile:

J’irais + chercher un transat… :innocent: