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';
5 « 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 :

https://forum1.hacf.fr/t/animations-carte-glance/3903?u=clemalex

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 : lovelace-card-mod/3_badges.yaml at master · thomasloven/lovelace-card-mod · GitHub

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

Bonjour
Comme @Plouf34, je souhaite faire varier la couleur des badge de présences suivant la localisation.
J’ai bien regardé le post Github de Thomas LOVEN, je ne comprends pas où écrire le code?
J’ai l’impression qu’il faille créer un nouveau fichier yaml (3_badges.yaml), mais comment inclut-on ce nouveau fichier?
Est-ce un « !include » dans le fichier "configuation.yaml?
Ensuite, comment codons-nous le fait que si la personne est absente, le badge sera rouge et si elle est présente, il sera vert.
Merci pour l’aide.
Stéphane

Beaucoup de questions… :innocent:

Commence par ici :

https://forum1.hacf.fr/t/personnaliser-ses-cartes-avec-card-mod/4447

Bonjour à tous, j’aimerai changer la couleur de mes badges en fonction de leurs états, j’ai déjà réussi à leur mettre la couleur que je souhaitait en présent mais en absent rien ne change.
J’ai appliqué le code du lien plus haut de ce post de ThomasLoven
J’ai suivis ce code à la lettre, la partit badge passe sans problème mais, la partit card elle ne semble pas du tout fonctionné. Je ne sais pas pourquoi. Pourriez vous m’aidez s’il vous plais ?

Partage ton code… :innocent:

Et tu devrais suivre le lien juste dessus ton message, il contient plusieurs lien très intéressant… Peut etre que les badges y sont détaillés…

C’est quoi la partie badge VS partie carte ?

C’est bon j’ai trouvé je partagerai le code si quelqu’un en a besoin. :wink:

N’attends pas, fais le !

:wink:

1 « J'aime »

Voilà pour les membres qui en aurait besoin, après à adapter à ces besoins. :wink:

title: Maison
views:
  - title: Maison
    badges:
      - entity: person.mikael
        name: Mikael
        style: |
          :host {
            {% if is_state('person.mikael','not_home') %}
             --label-badge-red: purple;
             {% endif %}
            {% if is_state('person.mikael','home') %}
             --label-badge-red: green;
             {% endif %}
          }
4 « J'aime »

Question: comment récupères tu les valeurs possibles pour faire tes conditions ? Dans ton ex ‹ not_home › et ‹ home › tu les as pris où ? Car je cherche à modifier des badges de mon alarme mais impossible de trouver les valeurs qu’il me faut pour changer mes couleurs

Dans les Outils de développement onglets ETATS

Merci je vais pouvoir m’amuser un peu :slight_smile:

Bonjour à tous,
Hier j’ai mis en place 3 capteurs, j’aimerais qu’ils soient vert quand la température du frigo est en dessous de 10. Rouge quand la valeur est en dessus de 10.

J’ai cherché sur les forums mais je n’ai trouvé que des badges changeant selon la présence de personne ou non. J’ai essayé d’adapter le code mais je n’y arrive pas, je ne sais pas ce qu’il faut renseigner.

Une âme charitable aurait-elle la solution?
Merci!

Salut,

J’ai trouvé ici les éléments pour te répondre :
https://www.home-assistant.io/docs/configuration/templating/

Je n’ai pas de capteurs dans mon frigo, mais j’ai adapté et testé ce code à partir d’un capteur de température météo quelconque et ça marche. Tu n’as plus qu’à changer les noms de tes capteurs et les seuils de température que tu veux (ici > 4 dans mon exemple, chez toi ce sera plutôt < 10, d’après ton post) :

views:
  - path: default_view
    title: Maison
    badges:
      - entity: sensor.netatmo_clermont_ferrand_temperature
        style: |
          :host {
            {% set state = states('sensor.netatmo_clermont_ferrand_temperature') %}
            {% if is_number(state) and state | float > 4 %}
              --label-badge-red: green;
            {% else %}
              --label-badge-red: red;
            {% endif %}
          }