Animer un icône pendant une durée déterminée

Entraide Home Assistant
1

Bonjour à tous,

Mon problème

Je contrôle l’ouverture d’un portail depuis un bouton simple. Je cherche à animer un icône supplémentaire pendant 45s, qui est la durée de mouvement du portail.

Dans mon idée, c’est lorsqu’on presse le bouton qu’on doit déclencher l’animation. Du côté des automatismes, on peut bien intercaler une durée dans une action, mais je n’ai pas trouvé le moyen de déclencher une animation. Ce n’est sans doute pas la bonne méthode.
Est ce que quelqu’un a déjà fait ce genre de chose ?

merci :slight_smile:

le code

     cards:
      - type: custom:mushroom-template-card
        primary: |-
          {% if is_state("sensor.light_intensity", "0") %}
              Le portail est fermé
          {% else %}
              Le portail est ouvert
          {% endif %}
        secondary: Appuyer pour actionner
        icon: |-
          {% if is_state("sensor.light_intensity", "0") %}
             mdi:boom-gate-outline
          {% else %}
             mdi:boom-gate-up
          {% endif %}
        layout: vertical
        icon_color: |-
          {% if is_state("sensor.light_intensity", "0") %}
              red
          {% else %}
              green
          {% endif %}
        badge_color: |-
          {% if is_state("sensor.light_intensity", "0") %}
              white
          {% else %}
              blue
          {% endif %}
        fill_container: true
        badge_icon: ''
        tap_action:
          action: call-service
          service: automation.trigger
          target:
            entity_id: automation.test
          data:
            skip_condition: true
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
              --icon-symbol-size: 50px;
              --icon-size: 80px;
              }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:ship-wheel
        badge_icon: ''
        icon_color: green
        card_mod:
          style: |
            ha-state-icon {
              animation: wobbling 1s linear infinite;
            }
            @keyframes wobbling {
              0% {transform: rotate(180deg);}
              100% {transform: rotate(360deg);}
            }

Ma configuration

System Information

version core-2024.4.4
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.2
os_name Linux
os_version 6.6.25-haos
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 5000
Installed Version 1.34.0
Stage running
Available Repositories 1467
Downloaded Repositories 1
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 12.2
update_channel stable
supervisor_version supervisor-2024.04.0
agent_version 1.6.0
docker_version 25.0.5
disk_total 78.0 GB
disk_used 8.5 GB
healthy true
supported true
board generic-aarch64
supervisor_api ok
version_api ok
installed_addons File editor (5.8.0), Studio Code Server (5.15.0), NGINX Home Assistant SSL proxy (3.9.0), Samba share (12.3.1), ESPHome (2024.4.1), Terminal & SSH (9.13.0)
Dashboards
dashboards 4
resources 2
views 2
mode storage
Recorder
oldest_recorder_run 21 avril 2024 à 19:35
current_recorder_run 26 avril 2024 à 13:50
estimated_db_size 59.57 MiB
database_engine sqlite
database_version 3.44.2
___
2

Bonjour,

cela correspond certainement a ce que tu cherche.
un peu de recherche avec la loupe en haut du Forum et tu trouve en 2 secondes.
:wink:
Animation icône porte garage

ou encore :

Résultats de recherche pour « animation icone »

ou encore

Home Assistant Icons: Borders, Backgrounds and Advanced Animation

3

A mon sens, il faut associer un timer qui se met en route au clic et qui s’arrête au bout des 45 secondes et ajouter une condition à l’animation. Je devrais pouvoir le faire avec une cutom:button-card mais pas avec une mushroom

4

Merci pour ton retour. en effet j’avais deja trouvé certains de ces liens, mais il concernent surtout l’animation de bouton. Ce qui me pose problème, c’est le fait que l’animation doit etre déclenchée sur l’action d’un bouton, et durer 45s. et c’est ça que je ne parviens pas à faire.

5

@Cleya Je ne me suis pas encore intéressé au button-card mais il y a peut être plus de facilité à le faire. Je vais regarder de ce côté là. Avec la mushroom, je ne vois pas comment m’y prendre.

6

J’ai une demande identique d’un autre côté. Je regarde ça en fin d’aprèm :

1 « J'aime »
7

Problème réglé pour ma part par les scripts déjà créé qui écrient l’état de ma porte de garage dans un input_text
J’ai pu via le script écrire un premier état de mouvement et indiquer le temps (30 secondes) à attendre pour écrire l’état final
Ensuite j’ai rajouté dans le code de ma carte les mouvement intermédiaire

type: custom:button-card
entity: input_text.etat_porte_garage
name: Garage
icon: |
  [[[
    if (states['input_text.etat_porte_garage'].state == 'Fermé')
      return 'mdi:garage';
    else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
      return 'mdi:garage-open';
    else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
      return 'mdi:garage-alert';
    else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
      return 'mdi:garage-alert';
  ]]]
show_label: true
label: |
  [[[
    if (states['input_text.etat_porte_garage'].state == 'Fermé')
      return '<font color= "green"><b>Fermé</font>';
    else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
      return '<font color= "red"><b>Ouvert</font>';
    else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
      return '<font color= "orange"><b>Fermeture</font>';
    else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
      return '<font color= "orange"><b>Ouverture</font>';
  ]]]
aspect_ratio: 3/1
styles:
  name:
    - font-size: 0.9em
    - justify-self: middle
    - align-self: end
  card:
    - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
    - border: 2px rgba(211,211,211,1.0) outset
  icon:
    - border-radius: 50%
    - border: none
    - box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
    - box-shadow: |
        [[[
          if (states['input_text.etat_porte_garage'].state == 'Fermé')
            return '0px 0px 5px 5px rgba(0,128,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
            return '0px 0px 5px 5px rgba(255,0,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
        ]]]
    - background-color: |
        [[[
          if (states['input_text.etat_porte_garage'].state == 'Fermé')
            return 'rgba(0,128,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
            return 'rgba(255,0,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
            return 'rgba(255,140,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
            return 'rgba(255,140,0,0.5)';
        ]]]
    - width: 60px
    - height: 60px
    - color: |
        [[[
          if (states['input_text.etat_porte_garage'].state == 'Fermé')
            return 'rgba(0,255,0,1.0)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
            return 'rgba(255,0,0,1.05)';
          else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
            return 'rgba(255,140,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
            return 'rgba(255,140,0,0.5)';
        ]]]
tap_action:
  action: call-service
  service: script.portail_fermer
hold_action:
  action: call-service
  service: script.portail_ouvert
8

Voilà ce que ça peut donner avec un timer et un script pour l’appui sur le bouton :

forum

Le code :

type: custom:button-card
aspect_ratio: 3/1
entity: input_boolean.position_garage
name: Garage
icon: |
  [[[
    if (states['input_boolean.position_garage'].state == 'off')
      return 'mdi:garage';
    else if (states['input_boolean.position_garage'].state == 'on')
      return 'mdi:garage-open';
  ]]]
show_label: true
label: |
  [[[
    if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'idle')
      return '<font color= "green"><b>fermé</font>';
    else if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'active')
      return '<font color= "orange"><b>fermeture</font>';
    else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'idle')
      return '<font color= "red"><b>ouvert</font>';
    else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'active')
      return '<font color= "orange"><b>ouverture</font>';
  ]]]
styles:
  name:
    - font-size: 0.9em
    - justify-self: middle
    - align-self: end
    - color: rgba(255,255,255,0.6)
  card:
    - background-color: rgba(64,64,64,0.8)
    - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
    - border: 2px rgba(211,211,211,1.0) outset
  icon:
    - border-radius: 50%
    - border: none
    - box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
    - box-shadow: |
        [[[
          if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'idle')
            return '0px 0px 5px 5px rgba(0,128,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'active')
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'idle')
            return '0px 0px 5px 5px rgba(255,0,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'active')
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
        ]]]
    - background-color: |
        [[[
          if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'idle')
            return 'rgba(0,128,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'active')
            return 'rgba(255,140,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'idle')
            return 'rgba(255,0,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'active')
            return 'rgba(255,140,0,0.5)';
        ]]]
    - width: 60px
    - height: 60px
    - color: |
        [[[
          if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'idle')
            return 'rgba(0,255,0,1.0)';
          else if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'active')
            return 'rgba(255,140,0,1.0)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'idle')
            return 'rgba(255,0,0,1.0)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'active')
            return 'rgba(255,140,0,1.0)';
        ]]]
    - animation: |
        [[[
          if (states['timer.essai_timer'].state == 'active')
            return 'blink 2s ease infinite';
        ]]]
tap_action:
  action: call-service
  service: script.essai_garage
hold_action:
  action: none

Le script :

alias: essai_garage
sequence:
  - service: timer.start
    metadata: {}
    data: {}
    target:
      entity_id: timer.essai_timer
  - if:
      - condition: state
        entity_id: input_boolean.position_garage
        state: "on"
    then:
      - service: input_boolean.turn_off
        metadata: {}
        data: {}
        target:
          entity_id: input_boolean.position_garage
    else:
      - service: input_boolean.turn_on
        metadata: {}
        data: {}
        target:
          entity_id: input_boolean.position_garage
mode: single