Icon animé

Entraide Home Assistant
1

Mon problème

Bonjour,

Je souhaiterais qu’un icon s’anime suivant l’état de l’entité de mon poêle.
J’ai donc modifié ce fichier qui fonctionne bien pour animer l’icon (changement de forme et de couleur) :

  - type: custom:button-card
    entity: climate.poele_maison
    tap_action:
      action: more-info
    hold_action:
      action: none
    style:
      left: 57%
      top: 27%
    icon: mdi:fire
    show_name: false
    card_mod:
      style: |
        ha-card {
           border: none;
           background: none;
           height: 70px;
         }
    styles:
      icon:
        - animation: flip 2s infinite
    extra_styles: |
      @keyframes flip {
          0% {transform: scaleX(1)}
          49.99% {transform: scaleX(1)}
          50% {transform: scaleX(-1)}
          99.99% {transform: scaleX(-1)}
          100% {transform: scaleX(-1)}
          from {color: red;}
          50% {color: yellow;}
          to {color: red;}
          }

Maintenant j’essaye de le modifier pour qu’il s’anime suivant l’état en ajoutant state value mais certainement pas au bon endroit ou alors il me manque une ligne quelque part :

  - type: custom:button-card
    entity: climate.poele_maison
    tap_action:
      action: more-info
    hold_action:
      action: none
    style:
      left: 57%
      top: 27%
    icon: mdi:fire
    show_name: false
    card_mod:
      style: |
        ha-card {
           border: none;
           background: none;
           height: 70px;
         }
    state:
      - value: "on"
        styles:
          icon:
            - animation: flip 2s infinit;
        extra_styles: |
          @keyframes flip {
          0% {transform: scaleX(1)}
          49.99% {transform: scaleX(1)}
          50% {transform: scaleX(-1)}
          99.99% {transform: scaleX(-1)}
          100% {transform: scaleX(-1)}
          from {color: red;}
          50% {color: yellow;}
          to {color: red;}
          }
      - value: "off"
        icon: mdi:fire

Si quelqu’un pouvais me dire ou j’échoue ?

Ma configuration

System Information

version core-2024.10.2
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.4
os_name Linux
os_version 6.6.46-haos
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.1
Stage running
Available Repositories 1440
Downloaded Repositories 21
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 13.1
update_channel stable
supervisor_version supervisor-2024.10.0
agent_version 1.6.0
docker_version 26.1.4
disk_total 196.2 GB
disk_used 6.4 GB
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization kvm
board generic-aarch64
supervisor_api ok
version_api ok
installed_addons Get HACS (1.3.1), Home Assistant Google Drive Backup (0.112.1), Samba Backup (5.2.0), Mosquitto broker (6.4.1), Zigbee2MQTT (1.40.2-1), go2rtc (1.9.4), File editor (5.8.0)
Dashboards
dashboards 2
resources 16
views 13
mode storage
Recorder
oldest_recorder_run 2 octobre 2024 à 10:15
current_recorder_run 12 octobre 2024 à 11:17
estimated_db_size 119.95 MiB
database_engine sqlite
database_version 3.45.3
Sonoff
version 3.8.1 (ffa7e22)
cloud_online 1 / 1
local_online 1 / 1
___
2

Bonjour,
il y a du bordel :sweat_smile:

ce code n’a rien avoir avec button-card. A supprimer

    style:
      left: 57%
      top: 27%

Pas besoin d’utiliser card_mod, button-card supporte le CSS.

    card_mod:
      style: |
        ha-card {
           border: none;
           background: none;
           height: 70px;
         }

dans button card sa donne:

    styles:
       card:
         - border: none
         - background: none
         - height: 70px

le soucis que tu avais est d’avoir mis extra_styles avec state:. C’est comme le styles, ca doit être au même niveau

Ton code corrigé:

  - type: custom:button-card
    entity: climate.poele_maison
    tap_action:
      action: more-info
    hold_action:
      action: none
    show_name: false
    icon: mdi:fire
    state:
      - value: "on"
        styles:
          icon:
            - animation: flip 2s infinite
      - value: "off"
        icon: mdi:fire
    styles:
       card:
         - border: none
         - background: none
         - height: 70px
    extra_styles: |
      @keyframes flip {
      0% {transform: scaleX(1)}
      49.99% {transform: scaleX(1)}
      50% {transform: scaleX(-1)}
      99.99% {transform: scaleX(-1)}
      100% {transform: scaleX(-1)}
      from {color: red;}
      50% {color: yellow;}
      to {color: red;}
          }

Au lieu de copier des codes sans comprendre ce que tu fais, lit la doc de button-card , tu as plein d’exemple et essayer de comprendre à quoi servent les options.

3

Merci pour ton retour,

En fait j’utilise ce code car j’ai j’ai installé ce button-card sur mon plan c’est donc pour pouvoir le positionner a l’endroit désiré

style:
      left: 57%
      top: 27%

et j’utilise ceci pour n’avoir que l’icon d’affiché sur mon plan

card_mod:
      style: |
        ha-card {
           border: none;
           background: none;
           height: 70px;
         }

Je sais que c’est du bricolage mais je ne voyais pas comment faire pour avoir ce type d’animation sur mon plan…
Merci pour le lien de la doc que j’avais pourtant lu et même relu

4

avec ce code de button-card, ca ne fais pas la même chose ?

    styles:
       card:
         - border: none
         - background: none
         - height: 70px

OK, c’est vrai que tu utilises picture-element, je comprends mieux :wink:

5

Non, si je n’utilise pas la méthode que j’ai faite je n’ai plus rien d’affiché
Oui c’est vrai j’avais zappé de signaler que j’utilise picture-elements…
J’ai essayé le code que tu as modifié en le remodelant pour mon cas et cela ne fonctionne pas, je pense qu’il va falloir que j’abandonne ce projet de vouloir modifié l’icon car je me demande si cela est réalisable du fait que nativement celui-ci change de couleur avec la carte climat. Car même en essayant sur le dashboard directement cela ne fonctionne pas, seule la couleur « native » s’affiche.
Encore merci pour le coup de main
Je vais continuer d’autres expériences :slight_smile:

6

le code fonctionne:
popup8

type: picture-elements
elements:
  - type: custom:button-card
    entity: climate.poele_maison
    tap_action:
      action: more-info
    hold_action:
      action: none
    show_name: false
    icon: mdi:fire
    size: 30%
    state:
      - value: "heat"
        styles:
          icon:
            - animation: flip 2s infinite
      - value: "off"
        icon: mdi:fire
    style:
      left: 50%
      top: 30%
    styles:
      card:
        - border: none
        - background: none
    extra_styles: |
      @keyframes flip {
      0% {transform: scaleX(1)}
      49.99% {transform: scaleX(1)}
      50% {transform: scaleX(-1)}
      99.99% {transform: scaleX(-1)}
      100% {transform: scaleX(-1)}
      from {color: red;}
      50% {color: yellow;}
      to {color: red;}
          }

J’ai enlevé - height: 70px dans styles et ajouter size: 30% pour la taille de l’icône ( que tu modifies, si plus ou moins grosse ).

7

Je viens de refaire l’expérience, effectivement cela fonctionne avec une entité « light » mais pas avec une entité « climat »

8

Oui, parce que climate c’est heat et pas on. change le

- value: "on"

par

- value: "heat"

The state of an HVAC entity

An HVAC entity can have the following states, depending on the specific climate device and its capabilities.

  • Off: The device is turned off.
  • Heat: The device is set to heat to a target temperature.
  • Cool: The device is set to cool to a target temperature.
  • Heat/Cool: The device is set to heat/cool to a target temperature range.
  • Auto: The device is set to a schedule, learned behavior, AI.
  • Dry: The device is set to dry/humidity mode.
  • Fan only: The device only has the fan on. No heating or cooling is taking place.
  • Unavailable: The entity is currently unavailable.
  • Unknown: The state is not yet known.
9

Alors la je sais pas quoi dire
ca fonctionne parfaitement !
bravo et merci encore :slight_smile:
Je vais pouvoir l’appliquer a d’autre entité

1 « J'aime »
10

Utilise button-card, tu n’auras pas besoin d’utiliser du card_mod et c’est moins lourd que si tu utilises card_mod.
card_mod, sert pour d’autre carte qui ne peut pas modifier le CSS.

1 « J'aime »