Bouton switch de couleur en fonction d'un état

[Sylvain_G]

Mon problème

J’ai un robot tondeuse et je cherche à faire une télécommande sur HA.
J’ai actuellement 3 boutons « Home », « Manuel » & « Auto » qui permettent d’interagir avec le robot via un envoi de message MQTT.

Et j’aimerai que les boutons aient une couleur en fonction de leur états :

• Blanc s’ils ne sont pas dans cet état
• Clignotant vert lorsqu’on clique dessus
• Vert lorsque l’état est atteint

L’état à suivre étant le sensor.automower_mode

Mon code actuel

le code de ma carte

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:home
        name: Home
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 0F012C0000
            topic: Automower/AM_G2/Cmd/Rawcmd
      - type: custom:button-card
        icon: mdi:gesture-tap
        name: Manuel
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 0F012C0000
            topic: Automower/AM_G2/Cmd/Rawcmd
      - type: custom:button-card
        icon: mdi:refresh-auto
        name: Auto
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 0F012C0000
            topic: Automower/AM_G2/Cmd/Rawcmd

J’ai vu dans ce post Garage Ouvre Toi! - #2 par Argonaute que l’on pouvait avoir des state différents en fonction d’une value mais je n’arrive pas à l’intégrer à un « switch » …
Comment je dois m’y prendre ?

[Sylvain_G]

J’ai trouvé pour le changement de couleur de l’icon avec ce code :

Code avec changement de couleur en fonction de l'état

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:home
        name: Home
        entity: sensor.automower_mode
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 0F812C0003
            topic: Automower/AM_G2/Cmd/Rawcmd
        state:
          - value: home
            color: green
      - type: custom:button-card
        icon: mdi:gesture-tap
        name: Manuel
        entity: sensor.automower_mode
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 0F812C0000
            topic: Automower/AM_G2/Cmd/Rawcmd
        state:
          - value: manu
            color: green
      - type: custom:button-card
        icon: mdi:refresh-auto
        name: Auto
        entity: sensor.automower_mode
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 0F812C0001
            topic: Automower/AM_G2/Cmd/Rawcmd
        state:
          - value: auto
            color: green

Ce qui donne :

Maintenant je séche sur comment faire clignoter le bouton sur lequel j’ai appuyé le temps que le robot atteigne cet état (ou plutôt que sensor.automower_mode renvoi l’état demandé home, manu ou auto)

Une idée ?

[Pulpy-Luke]

Salut,

Si tu n’as pas une info quelque part qui conserve l’état actuel, l’état cible, et l’état réel ça va être compliqué. En tout cas, tu ne peux pas juste t’en sortir avec les boutons : une fois appuyé l’état du bouton est actif

[Sylvain_G]

Comment je peux faire pour que mon bouton « sauvegarde » son appui quelque part ?

En gros mon algo serait celui-ci :
Mon bouton est « blanc » donc pas dans cet état (ex : le sensor.automower_mode n’a pas sa value à home donc le bouton « Home » est blanc.)
J’appuie sur ce bouton « Home », il « sauvegarde » le fait que j’ai appuyé sur ce bouton et fait clignoter le bouton « Home », jusqu’à ce que le sensor.automower_mode ait la valeur home et à ce moment, le bouton « Home » devient vert fixe.

Ce que je ne voit pas, c’est comment « sauvegarder » cet appui sur le bouton « Home »…

[Herbs]

Salut @Sylvain_G

Vite fait à voir si ça correspond à ton besoin (et à adapter les couleurs les états …) :

type: custom:button-card
entity: sensor.automower_mode
name: Robot
icon: mdi:robot-mower
styles:
  card:
    - background-color: |
        [[[
          if (entity.state == 'MAIN_AREA') return 'green';
          else return 'red';
        ]]]
    - animation: |
        [[[
          if (entity.state == 'MAIN_AREA') return 'none';
          else return 'blink 2s ease infinite';
        ]]]

[EDIT] Au final je pense que ça ne va pas le faire au mieux c’est un début de piste …

[Pulpy-Luke]

@Sylvain_G

J’appuie sur ce bouton « Home », il « sauvegarde » le fait que j’ai appuyé sur ce bouton et fait clignoter le bouton « Home », jusqu’à ce que le sensor.automower_mode ait la valeur home et à ce moment, le bouton « Home » devient vert fixe.

Si bouton == home ET sensor.automower_mode != home alors clignotant sinon fixe

[Herbs]

J’ai repris mon bout de code, et jouait avec les outils de dev car j’ai pas « pluggé » la partie « call-service ».

Au final ça donne ça :

@Sylvain_G du coup peut-être que ça peut le faire …

[Sylvain_G]

SI je passe par ce genre de code :

@Pulpy-Luke

Si bouton == home ET sensor.automower_mode != home alors clignotant sinon fixe

Mes boutons « Home » et « Auto » clignoteront en permanence si l’état est à auto…
Ce que je cherche à faire, c’est que le bouton sur lequel j’appuie se mette à clignoter uniquement à partir du moment où j’appuie dessus jusqu’au moment où l’état du sensor arrive à la « valeur » du bouton.
Les boutons ne doivent pas clignoter tant que je n’appuie pas dessus. C’est un état temporaire qui indique à l’utilisateur « J’ai pris en compte ta demande de changement d’état ».

Il faudrait que je crée une variable demande_home_en_cours qui passerait à true lors d’un appuie de bouton sur le bouton home et qui repasserait à false une fois l’état de sensor.automower_mode passé à home.
Avec cette demande_home_en_cours, je pourrais faire clignoter le bouton « Home » avec le code de @Herbs

[Pulpy-Luke]

@Sylvain_G

Mes boutons « Home » et « Auto » clignoteront en permanence si l’état est à auto…

Ben non… si tu es auto, la 1ere partie du IF n’est pas valable donc fixe…
Ce qu’il faut bien faire c’est définir uniquement les cas ou ça clignote …comme ça par défaut c’est fixe.
Fait ton tableau d’états

[Sylvain_G]

J’ai essayé ce code avec l’état du sensor.automower_mode à auto et j’ai bien le bouton « Home » qui clignote rouge en permanence même si je n’appuie pas dessus et le bouton « Auto » qui reste vert fixe

Code

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:home
        name: Home
        entity: sensor.automower_mode
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 0F012C0000
            topic: Automower/AM_G2/Cmd/Rawcmd
        styles:
          card:
            - background-color: |
                [[[
                  if (entity.state == 'home') return 'green';
                  else return 'red';
                ]]]
            - animation: |
                [[[
                  if (entity.state == 'home') return 'none';
                  else return 'blink 2s ease infinite';
                ]]]
      - type: custom:button-card
        icon: mdi:gesture-tap
        name: Manuel
        entity: sensor.automower_mode
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 0F012C0000
            topic: Automower/AM_G2/Cmd/Rawcmd
        state:
          - value: manu
            color: green
      - type: custom:button-card
        icon: mdi:refresh-auto
        name: Auto
        entity: sensor.automower_mode
        tap_action:
          action: call-service
          service: mqtt.publish
          service_data:
            payload: 0F012C0000
            topic: Automower/AM_G2/Cmd/Rawcmd
        styles:
          card:
            - background-color: |
                [[[
                  if (entity.state == 'auto') return 'green';
                  else return 'red';
                ]]]
            - animation: |
                [[[
                  if (entity.state == 'auto') return 'none';
                  else return 'blink 2s ease infinite';
                ]]]

[Pulpy-Luke]

@Sylvain_G

                  if (entity.state == 'home') return 'none';
                  else return 'blink 2s ease infinite';

Evident…
Là tu demande à ne rien faire quand c’est à l’état home mais sinon ça clignote (donc tout ce qui n’est pas home clignote). Il n’y a même pas de comparaison avec le status MQTT du robot …

[Herbs]

@Sylvain_G

Il faudrait que je crée une variable demande_home_en_cours qui passerait à true lors d’un appuie de bouton sur le bouton home

A base de button-card + script + input_boolean y’a surement moyen.

• button-card :

type: custom:button-card
entity: sensor.automower_mode
name: Robot
icon: mdi:robot-mower
styles:
  card:
    - background-color: |
        [[[
          if (entity.state == 'MAIN_AREA') return 'green';
          else return 'red';
        ]]]
    - animation: |
        [[[
          if states['input_boolean.automower_home_demand'].state == 'off')
            return 'none';
          else return 'blink 2s ease infinite';
        ]]]
tap_action:
  action: call-service
  service: script.toggle
  service_data:
    entity_id: automower_home_mode

• le script :

automower_home_mode:
  alias: ce_que_tu_veux
  sequence:
  - service: input_boolean.turn_on
    target:
      entity_id: input_boolean.automower_home_demand
  - service:
    toute la partie mqqt.publish
  - wait_template: "{{ is_state('sensor.automower_mode', 'MAIN_AREA') }}"
  - service: input_boolean.turn_off
    target:
      entity_id: input_boolean.automower_home_demand

Le truc pénible c’est qu’il faudra un second input_boolean pour la partie auto et aussi un second script.

[Pulpy-Luke]

il y a moyen de faire simple :
Si j’ai bien compris 3 états dans MQTT et 3 boutons.
Quand le bouton X est activé et que le MQTT n'est pas à X => clignotement sinon si bouton = même valeur que MQTT (donc activé) => couleur sinon rien

[Sylvain_G]

@Pulpy-Luke

Si j’ai bien compris 3 états dans MQTT et 3 boutons.
Quand le bouton X est activé et que le MQTT n'est pas à X => clignotement sinon si bouton = même valeur que MQTT (donc activé) => couleur sinon rien

C’est exactement ça !

Est-ce que c’est possible uniquement dans le button-card ?

[Pulpy-Luke]

Moi j’irai sur 3 switch (affiché en boutons) comme ça tu peux suivre les états. Par contre il faudrait y adjoindre une exclusion sauf forme d’une automatisation pour n’avoir qu’un switch on à la fois

[bricodx]

voici ce que j’utilise et qui correspond au besoin, c’est très basique mais fonctionnel

type: entities
entities:
  - entity: input_select.tondeuse
    type: custom:multiple-entity-row
    name: Mode
    show_state: false
    style:
      hui-generic-entity-row:
        $: |
          {% if is_state('input_select.tondeuse', 'ON') %}
            state-badge {
            color: red;
          }
          {% elif is_state('input_select.tondeuse', 'AUTO') %}
            state-badge {
            color: green;
          }
          {% endif %}
        .: |
          {% if is_state('input_select.tondeuse', 'ON') %}
            div.entity:nth-child(1) state-badge {
              color: yellow;
            }
          {% elif is_state('input_select.tondeuse', 'AUTO') %}
            div.entity:nth-child(2) state-badge {
              color: yellow;
            }
          {% else %}
            div.entity:nth-child(3) state-badge {
              color: yellow;
            }
          {% endif %}
    entities:
      - type: custom:button-card
        icon: mdi:water-boiler
        state_color: true
        name: 'On'
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: 'ON'
            entity_id: input_select.tondeuse
      - type: custom:button-card
        icon: mdi:water-boiler-auto
        state_color: true
        name: Auto
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: AUTO
            entity_id: input_select.tondeuse
      - type: custom:button-card
        icon: mdi:water-boiler-off
        state_color: true
        name: 'Off'
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: 'OFF'
            entity_id: input_select.tondeuse
    show_header_toggle: true
    state_color: true
title: tondeuse

c’est à base de multiple-entity-row, et je stocke la valeur d’état dans un input_select.
Si cela peut aider

A+ Fred

[Herbs]

Salut @bricodx ,

Peux tu partager un screen de ta carte stp ?

[bricodx]

La couleur de l’icône principal correspond a l’état du input_select : soit rouge pour ON, vert pour AUTO et bleu pour OFF.
Et chaque icône d’action, change de couleur aussi en fonction de l’état du input_select.
D’ailleurs dans ce cas, on pourrait carrément supprimer l’affichage de l’icône principe car on voit bien celui qui est actif.

Après les goûts et les couleurs … il est bien entendu possible de changer les icônes, les couleurs…

[Sylvain_G]

@bricodx

hui-generic-entity-row:

C’est une carte custom a ajouter via HACS ?

[bricodx]

Il y a button-card pour chaque icône buton, et multiple-entity-row pour placer tout ceci sur une ligne.

hui-generic-entity-row correspond à la carte multiple-entity-row. si tu as cette carte, c’est bon.

la partie suivante correspond à l’icône principale

$: |
          {% if is_state('input_select.tondeuse', 'ON') %}
            state-badge {
            color: red;
          }
          {% elif is_state('input_select.tondeuse', 'AUTO') %}
            state-badge {
            color: green;
          }
          {% endif %}

la partie suivante correspond à chaque icône button en changeant le chiffre

.: |
          {% if is_state('input_select.tondeuse', 'ON') %}
            div.entity:nth-child(1) state-badge {
              color: yellow;
            }
          {% elif is_state('input_select.tondeuse', 'AUTO') %}
            div.entity:nth-child(2) state-badge {
              color: yellow;
            }
          {% else %}
            div.entity:nth-child(3) state-badge {
              color: yellow;
            }
          {% endif %}