Animation button-card

francki85 · Novembre 16, 2024, 4:28

Bonjour a tous,

Mon problème

Après plusieurs recherches et essais je n’arrive pas a créer une automatisation pour qu’une carte s’anime suivant l’état d’un capteur
la carte :

type: custom:button-card
tap_action:
  action: toggle
entity: switch.portail
name: Portail
state:
  - value: "on"
    icon: mdi:gate-open
    styles:
      card:
        - animation: bgcolorswap 1s linear infinite
  - value: "off"
    icon: mdi:gate
styles:
  card:
    - border: none
    - background: gray
extra_styles: |
  @keyframes bgcolorswap {
  0% {background-color: red;}
  100% {background-color: gray;}
  }

et ce que j’ai commencé a mettre pour l’automatisation suivant l’état du capteur mais pour l’action je bloque :

alias: animation portail
description: ""
triggers:
  - entity_id: binary_sensor.capteur_portail_contact
    to: "on"
    trigger: state
actions: null

A moins que je n’ai pas besoin d’automatisation pour activer la carte suivant l’état du capteur mais je ne vois pas comment faire… le but étant d’avoir la carte qui s’anime quand le portail est ouvert

Merci pour votre aide.

anon26006247 · Novembre 16, 2024, 4:37

Bonsoir,

Il ya plusieurs exemple sur le forum. Ici notamment :

Il n’y a pas besoin d’automatisation pour lancer l’animation, il suffit de le faire quand ton capteur change d’état : il faut donc lier ta custom:button-card à ton capteur et lancer l’animation sur une condition.

Dans l’exemple donné, les actions sont basées sur un input_number mais pour ton besoin, il suffit de remplacer l’input_number par l’état de ton capteur : quand capteur ouvert lancer l’animation.

francki85 · Novembre 16, 2024, 5:12

merci pour ton retour,
Je comprend qu’il faut quleque chose comme ca ?

type: custom:button-card
tap_action:
  action: toggle
entity: switch.portail
name: Portail
state:
  - value: "{ if states('binary_sensor.capteur_portail_contact') == 'on' }"
    icon: mdi:gate-open
    styles:
      card:
        - animation: bgcolorswap 1s linear infinite
  - value: "{ if states('binary_sensor.capteur_portail_contact') == 'off' }"
    icon: mdi:gate
styles:
  card:
    - border: none
    - background: gray
extra_styles: |
  @keyframes bgcolorswap {
    0% {background-color: red;}
    100% {background-color: gray;}
  }

Il doit y avoir une erreur quelque part encore car cela ne fonctionne pas

anon26006247 · Novembre 16, 2024, 5:15

Effectivement, ça ne peut pas fonctionner comme cela. Tu voudrais que le fond de ta button-card clignote du gris au rouge quand ton garage est ouvert, c’est bien ça ?
Je te fais un exemple dans 5 minutes si tu veux bien.

francki85 · Novembre 16, 2024, 5:19

oui c’est tout a fait ca avec l’icon qui change aussi suivant l’état
ca serait super je continu a chercher ou se trouve mon erreur

anon26006247 · Novembre 16, 2024, 5:30

Teste ça :

type: custom:button-card
tap_action:
  action: toggle
entity: switch.portail
icon: mdi:gate
show_icon: true
name: Portail
state:
  - value: "on"
    icon: mdi:gate-open
    styles:
      card:
        - animation: bgcolorswap 2s linear infinite
        - background: red
  - value: "off"
    icon: mdi:gate
    styles:
      card:
        - background: gray
styles:
  card:
    - border: none
    - background: gray
    - animation: none
extra_styles: |
  @keyframes bgcolorswap {
    0% {
      background-color: red;
    }
    50% {
      background-color: gray;
    }
    100% {
      background-color: red;
    }
  }

Mais avec ce code, le clignotement est indépendant de l’état de ton capteur. Pour inclure l’état de ton capteur, il faut ajouter une condition dans

styles:
  card:

francki85 · Novembre 16, 2024, 5:34

merci,
non cela ne fonctionne pas
le switch ne donne qu’une impulsion (état très bref du « on ») c’est pour cela que j’ai rajouter un capteur de porte pour avoir l’état du portail qu’il soit actionné soit par le switch ou soit télécommande ou encore bouton d’ouverture.

francki85 · Novembre 16, 2024, 5:40

je doit donc conserver :

"{ if states('binary_sensor.capteur_portail_contact') == 'on' }"

anon26006247 · Novembre 16, 2024, 5:40

Oui, j’ai fait le test avec un input_boolean qui reste « on » jusqu’au clic suivant…

Je te propose un nouveau code dans 5 minutes

anon26006247 · Novembre 16, 2024, 5:47

type: custom:button-card
tap_action:
  action: toggle
entity: switch.portail
icon: mdi:gate
show_icon: true
name: Portail
state:
  - value: "on"
    icon: mdi:gate-open
  - value: "off"
    icon: mdi:gate
styles:
  card:
    - border: none
    - background: |
        [[[
          if (states[''binary_sensor.capteur_portail_contact''].state == 'on')
            return 'red';
          else
            return 'gray';
        ]]]
    - animation: |
        [[[
          if (states[''binary_sensor.capteur_portail_contact''].state == 'on')
            return 'bgcolorswap 2s linear infinite';
          else
            return 'none';
        ]]]
extra_styles: |
  @keyframes bgcolorswap {
    0% {
      background-color: red;
    }
    50% {
      background-color: gray;
    }
    100% {
      background-color: red;
    }
  }

Celui-ci devrait fonctionner

francki85 · Novembre 16, 2024, 5:51

je regarde de plus pret car la je n’ais plus rien d’affiché

anon26006247 · Novembre 16, 2024, 5:57

type: custom:button-card
tap_action:
  action: toggle
entity: switch.portail
icon: mdi:gate
show_icon: true
name: Portail
styles:
  card:
    - border: none
    - background: |
        [[[
          if (states['binary_sensor.capteur_portail_contact'].state == 'on')
            return 'red';
          else
            return 'gray';
        ]]]
    - animation: |
        [[[
          if (states['binary_sensor.capteur_portail_contact'].state == 'on')
            return 'bgcolorswap 2s linear infinite';
          else
            return 'none';
        ]]]
  icon:: |
    [[[
      if (states['binary_sensor.capteur_portail_contact'].state == 'on')
        return 'mdi:gate-open';
      else
          return 'mdi:gate';
    ]]]

extra_styles: |
  @keyframes bgcolorswap {
    0% {
      background-color: red;
    }
    50% {
      background-color: gray;
    }
    100% {
      background-color: red;
    }
  }

Des quotes avaient été doublées lors du copié-collé. C’est pour ça que tu n’avais plus rien d’affiché. Là ça doit être bon

francki85 · Novembre 16, 2024, 6:01

merci super ca fonctionne, sauf pour l’icon qui reste fermé
j’essaye de modifier

anon26006247 · Novembre 16, 2024, 6:02

type: custom:button-card
tap_action:
  action: toggle
entity: switch.portail
show_icon: true
icon: |
  [[[
    if (states['binary_sensor.capteur_portail_contact'].state == 'on')
      return 'mdi:gate-open';
    else
      return 'mdi:gate';
  ]]]
name: Portail
styles:
  card:
    - border: none
    - background: |
        [[[
          if (states['binary_sensor.capteur_portail_contact'].state == 'on')
            return 'red';
          else
            return 'gray';
        ]]]
    - animation: |
        [[[
          if (states['binary_sensor.capteur_portail_contact'].state == 'on')
            return 'bgcolorswap 2s linear infinite';
          else
            return 'none';
        ]]]
extra_styles: |
  @keyframes bgcolorswap {
    0% {
      background-color: red;
    }
    50% {
      background-color: gray;
    }
    100% {
      background-color: red;
    }
  }

Ce coup-ci c’est bon Je dois être un peu fatigué

francki85 · Novembre 16, 2024, 6:06

super ce coup ci tout fonctionne parfaitement !
merci beaucoup, je vais étudier un peut tout ca pour adapter aussi la chose a ma boite aux lettres
encore merci

anon26006247 · Novembre 16, 2024, 6:07

De rien. Passe ton sujet en résolu si c’est bon pour toi