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)

animate

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

animate (1)

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:

Bonjour
Savez vous comment changer la couleur du badge des person selon leur localisation? Quand présent, badge en bleu par exemple, quand away, en rouge par exemple?

C’est détaillé ici : https://github.com/thomasloven/lovelace-card-mod/blob/master/test/views/3_badges.yaml

20210906_091009

  - title: card-mod
    path: card-mod
    badges:
      - entity: sun.sun
        name: Red text
        card_mod:
          style: |
            :host {
              color: red
            }
      - entity: sun.sun
        name: Lorem
        card_mod:
          style: |
            :host {
              --label-badge-red: purple;
            }
      - entity: sun.sun
        name: Ipsum
        card_mod:
          style: |
            :host {
              --label-badge-background-color: teal;
            }