Changer de couleur d'un bouton pendant une certaine durée

DanDu64 · Avril 28, 2024, 4:11

Bonjour,

Je suis en train de créer un Dashboard pour activer la fermeture de mon portail, avec l’utilisation d’une custom-card et pour utilisation sur une tablette murale. Rien de difficile me direz vous … sauf que le portail est connecté à une box TAHOMA (pour matériel Somfy) et qu’il ne donne pas de retour de son état (dans HA) !!!. Je n’ai absolument rien comme retour d’état. J’insiste là-dessus.

Cependant il se ferme au bout de 120 secondes. Donc là je souhaiterai plutôt utiliser un timer, pour indiquer que le portail a bien été ouvert, et qu’il l’est encore pdt la durée du timer. (Pendant cette durée, je souhaite que l’icone ou le bouton se colore).
Ensuite il reprend sa couleur initiale.

Je ne suis pas un pro de HA, je le découvre petit à petit.

Merci beaucoup pour votre aide.

Cleya · Avril 28, 2024, 4:33

Voici un exemple :
forum

Il te faut un timer et un script pour l’appui sur le bouton

Si tu veux le code et le script, n’hésite pas à me le demander

Sinon, tu peux aussi ajouter deux capteurs d’ouverture zigbee (un en position porte du garage fermé et un en position porte du garage ouverte) et un capteur de vibration zigbee (qui t’indiquera quand la porte est en mouvement). C’est ce que j’ai fait avec ma motorisation de porte de garage Somfy RTS.

Yoyouri · Avril 28, 2024, 4:36

Salut,
C’est exactement ceux que je cherchais à faire depuis quelques temps et que j’ai résolu ce matin ici

Moteur de porte de garage Somfy en RTS et donc sans retour d’état que je remonte via Overkiz

Le début du poste concerne la création des retours d’état et la fin le code.

N’hésite pas si problème

Cleya · Avril 28, 2024, 4:40

Lol « j’ai résolu ce matin »

Yoyouri · Avril 28, 2024, 4:45

C’est mon poste que j’ai résolu !!
Mais en effet sans ton aide ça aurait été impossible, encore merci

DanDu64 · Avril 28, 2024, 4:51

J’ai justement fait ça: un timer, et un script. Mais ensuite pour combiner ça dans mon « custom-card » … je sèche
Je vais regarder la réponse de @Yoyouri et vous tiens au jus.

Merci

Cleya · Avril 28, 2024, 4:53

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

Le code de la carte :

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 rendu :
forum

Tu as tout ici Il suffit juste de remplacer dans le code les « input_boolean » par ton entité. En cas de souci pour l’adapter, n’hésite pas à me demander.

Yoyouri · Avril 28, 2024, 5:31

@Cleya, pour les néophytes, il faut comprendre que toutes ces lignes de codes avec des éléments externes (entitées) ça devient vite compliqué d’adapter

D’ailleurs, c’est quoi la différence entre ton input.boolean et mon input.text ?
Y a t-il un avantage à utiliser le premier ?

Cleya · Avril 29, 2024, 5:40

Bonjour @Yoyouri

La différence entre un input_boolean et un input_text est que l’input_boolean, comme son nom l’indique, ne peut prendre que deux valeurs : true ou false (on ou off). Il correspond à un « interrupteur » à deux positions dans les entrées :

Un input_text accepte un nombre de valeurs bien plus important (je ne sais pas combien ni s’il y a une limite) et chaque valeur peut contenir 255 caractères maximum. Dans ton cas, un input_text permet d’avoir les 4 valeurs qui t’intéressent : Ouvert, Ouverture, Fermé, Fermeture mais un input_boolean aurait pu suffir. Un input_text utilise plus de mémoire qu’un input_boolean (1 octet : 0 ou 1).

Plouf34 · Avril 29, 2024, 7:10

ton input_boolean correspond a ton capteur d’ouverture/fermeture?

Cleya · Avril 29, 2024, 7:28

Non, c’est juste un interrupteur virtuel. Il faut les remplacer par ce qui te permet d’ouvrir et fermer ta porte de garage.
Si tu est intéressé, ouvre un autre sujet avec tes besoins propres.

DanDu64 · Mai 1, 2024, 5:19

Par un temps pluvieux j’ai étudié tout ça. Et ça fonctionne bien.

Merci bcp !

Cleya · Mai 1, 2024, 5:22

Bonsoir, de rien, passe le sujet en résolu dans ce cas (sur la réponse qui t’a apporté la solution )

pascal_ha · Mai 5, 2024, 4:25

Bonjour @Cleya

J’ai essayé de modifier le code de ma carte, pour avoir icon et le label en fonction du binary_sensor.
Mais ça ne fonctionne pas pour icon.
Peux-tu me venir en aide.Merci

type: custom:button-card
entity: switch.garage_door
name: Garage
aspect_ratio: 2/1
tap_action:
  action: toggle
icon: |
  [[[
    if (states['binary_sensor.garage_door'].state == 'off')
      return 'mdi:garage-variant';
    else if (states['binary_sensor.garage_door'].state == 'on')
      return 'mdi:garage-open-variant';
  ]]]
label: |
  [[[
    if (states['binary_sensor.garage_door'].state == 'off')
      return '<font color= "green"><b>fermé</font>';
    else if (states['binary_sensor.garage_door'].state == 'on')
      return '<font color= "red"><b>ouvert</font>';
  ]]]
show_label: true
show_last_changed: false
styles:
  card:
    - background-color: white
    - filter: opacity(100%)
    - padding: 0.1%
    - text-transform: null
    - font-size: 10px
    - border-radius: 10px
    - color: black
    - border: |
        [[[
         if (states['binary_sensor.garage_door'].state == 'off')
         return '2px solid blue';
         else if (states['binary_sensor.garage_door'].state == 'on')
         return '2px solid red';
        ]]]       
  icon:
    - color: |
        [[[
         if (states['binary_sensor.garage_door'].state == 'off')
         return 'blue';
         else if (states['binary_sensor.garage_door'].state == 'on')
         return 'red';
        ]]]

Edit: j’ai trouvé j’ai oublié les 3 crochets à la fin


icon: |
  [[[
    if (states['binary_sensor.garage_door'].state == 'off')
      return 'mdi:garage';
    else if (states['binary_sensor.garage_door'].state == 'on')
      return 'mdi:garage-open';
  ]]]

pascal_ha · Mai 8, 2024, 1:01

Bonjour @Cleya

J’essaie d’adapter ma carte pour avoir le même « effet » que sur ta carte :

C’est-à-dire, quand j’actionne le switch.garage (impulsion ON pendant 1s) la porte s’ouvre ou se ferme et l’icône change en fonction de l’État du binary_sensor (contact de position).

Je voudrais que l’icône soit animée (clignote) durant le mouvement (30s) à chaque fois que le switch.garage passe en ON

Si. J’ai bien compris, il faut que je crée un timer (timer.garage_timer), et créer le script, mais je n’arrive pas à adapter ton code avec mes entités et avec ma carte.

Voici mon code pour le bouton:

type: custom:button-card
entity: switch.garage_door
name: Garage
aspect_ratio: 2/1
tap_action:
  action: toggle
icon: |
  [[[
    if (states['binary_sensor.garage_door'].state == 'off')
      return 'mdi:garage-variant';
    else if (states['binary_sensor.garage_door'].state == 'on')
      return 'mdi:garage-open-variant';
  ]]]
label: |
  [[[
    if (states['binary_sensor.garage_door'].state == 'off')
      return '<font color= "green"><b>fermé</font>';
    else if (states['binary_sensor.garage_door'].state == 'on')
      return '<font color= "red"><b>ouvert</font>';
  ]]]
show_label: true
show_last_changed: false
styles:
  card:
    - background-color: white
    - filter: opacity(100%)
    - padding: 0.1%
    - text-transform: null
    - font-size: 10px
    - border-radius: 10px
    - color: black
    - border: |
        [[[
         if (states['binary_sensor.garage_door'].state == 'off')
         return '2px solid blue';
         else if (states['binary_sensor.garage_door'].state == 'on')
         return '2px solid red';
        ]]]       
  icon:
    - color: |
        [[[
         if (states['binary_sensor.garage_door'].state == 'off')
         return 'blue';
         else if (states['binary_sensor.garage_door'].state == 'on')
         return 'red';
        ]]]

Merci de ton aide, (faut-il que je crée un nouveau sujet ?)

Cleya · Mai 9, 2024, 6:19

Bonjour @pascal_ha j’essaye de regarder ça dans la journée.

Pour commencer, il n’est pas utile de spécifier ton interrupteur (switch.garage_door) comme entité.
C’est ton capteur d’ouverture/fermeture ainsi que ton timer (timer.garage_timer) de 30 secondes qui piloteront l’animation (clignotement de l’icône). Il faudra créer un script qui lancera le timer et le toggle de ton interrupteur (switch.garage_door).

Le code adapté à ta carte :

type: custom:button-card
name: Garage
aspect_ratio: 2/1
icon: |
  [[[
    if (states['binary_sensor.garage_door'].state == 'off')
      return 'mdi:garage-variant';
    else if (states['binary_sensor.garage_door'].state == 'on')
      return 'mdi:garage-open-variant';
  ]]]
label: |
  [[[
    if (states['binary_sensor.garage_door'].state == 'off' && states['timer.garage_timer'].state == 'idle')
      return '<font color= "green"><b>fermé</font>';
    else if (states['binary_sensor.garage_door'].state == 'on' && states['timer.garage_timer'].state == 'idle')
      return '<font color= "red"><b>ouvert</font>';
  ]]]
show_label: true
show_last_changed: false
styles:
  card:
    - background-color: white
    - filter: opacity(100%)
    - padding: 0.1%
    - text-transform: null
    - font-size: 10px
    - border-radius: 10px
    - color: black
    - border: |
        [[[
         if (states['binary_sensor.garage_door'].state == 'off')
           return '2px solid blue';
         else if (states['binary_sensor.garage_door'].state == 'on')
           return '2px solid red';
        ]]]       
  icon:
    - color: |
        [[[
          if (states['binary_sensor.garage_door'].state == 'off' && states['timer.garage_timer'].state == 'idle')
            return 'blue';
          else if (states[binary_sensor.garage_door'].state == 'on' && states['timer.garage_timer'].state == 'active')
            return 'red';
        ]]]
    - animation: |
        [[[
          if (states['timer.essai_timer'].state == 'active')
            return 'blink 2s ease infinite';
        ]]]
tap_action:
  action: call-service
  service: script.garage_toggle
hold_action:
  action: none

Le script :

alias: garage_toggle
sequence:
  - service: timer.start
    metadata: {}
    data: {}
    target:
      entity_id: timer.garage_timer
  - type: toggle
    device_id: switch.garage_door
    domain: switch
mode: single

Il faudra probablement modifier le device_id et ajouter l’entity_id propre à ton interrupteur (switch.garage_door).

Cleya · Mai 9, 2024, 3:28

@pascal_ha , j’ai édité mon message précédent avec l’ajout du code et du script.

pascal_ha · Mai 9, 2024, 5:27

Merci @Cleya

Oui, je n’avais pas bien saisi cette subtilité , le script avec les if, les then m’avait perdu.

Mais C’est bon avec ce nouveau code sa fonctionne, il manque juste un ’ devant le deuxième binary.

Cleya:

icon:
    - color: |
        [[[
          if (states['binary_sensor.garage_door'].state == 'off' && states['timer.garage_timer'].state == 'idle')
            return 'blue';
          else if (states[binary_sensor.garage_door'].state == 'on' && states['timer.garage_timer'].state == 'active')
            return 'red';

et le dernier Timer.essai_timer dans l’animation à remplacer par timer.garage_timer

J’ai légèrement modifié pour avoir une icône de couleur différente pendant le déplacement

code icon_color

  icon:
    - color: |
        [[[
          if (states['binary_sensor.portail_door'].state == 'off' && states['timer.portail_timer'].state == 'idle')
            return 'blue';
          else if (states['binary_sensor.portail_door'].state == 'on' && states['timer.portail_timer'].state == 'active')
            return 'orange';
           else if (states['binary_sensor.portail_door'].state == 'on' && states['timer.portail_timer'].state == 'idle')
            return 'red';           
        ]]]
    - animation: |
        [[[
          if (states['timer.portail_timer'].state == 'active')
            return 'blink 2s ease infinite';

J’ai dû recréer le script, car il ne voulait pas le prendre sous le nom de script.garage_toggle, mais sous le nom de script.1755xxxx , même après l’avoir renommé.(pas compris pourquoi)