Button-card couleur differentes

Bonjour,

Grace à @Clemalex j’ai réussit à commencer à comprendre comment marche la card Button-car.

Mais la je bloque encore même en lisant la doc, je penses qu’il me manque des connaissances.

Je voudrais que ma couleur de mon bouton change en fonction de l’état d’un switch.

En gros quand mon volet est ouvert le bouton « volet ouvert » est vert et quand il est fermé bien … le contraire. Cela grâce aux switch de fermeture.

Je suis pas sur de savoir ou Integer cela dans le code.

Si qq’un a une idée pour me diriger

type: vertical-stack
title: Centralisation des volets
cards:
  - type: 'custom:button-card'
    color: 'rgba(255, 255, 255.)'
    name: Tout ouvrir
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.volet_bureau
        entity: cover.volet_bureau
        color: 'rgba(255, 255, 255.)'
        icon: 'mdi:window-shutter-open'
        name: Bureau
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.volet_salon
        entity: cover.volet_salon
        color: 'rgba(255, 255, 255.)'
        icon: 'mdi:window-shutter-open'
        name: Salon
  - type: 'custom:button-card'
    color: 'rgba(255, 255, 255.)'
    name: Tout fermer
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.volet_bureau
        entity: cover.volet_bureau
        color: 'rgba(255, 255, 255.)'
        icon: 'mdi:window-shutter'
        name: Bureau
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.volet_salon
        entity: cover.volet_salon
        color: 'rgba(255, 255, 255.)'
        icon: 'mdi:window-shutter'
        name: Salon

volets

Pour une fois, un truc de lovelace que je sais faire :slight_smile:
Il faut rajouter styles: dans la carte.
Donc, un truc comme ça:

      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.volet_salon
        entity: cover.volet_salon
        icon: 'mdi:window-shutter'
        styles:
           icon:
              - color: >
                [[[
                if (entity.state == "Open") return 'green';
                if (entity.state == "Close") return 'red';
                ]]]
        name: Salon

Et virer la ligne color:

1 J'aime

Même si la réponse de @golfvert convient parfaitement, il y a un autre moyen pour ne pas utiliser de Javascript lorsque l’on veut que le style change en fonction de l’entité déclarée.

Lorsque tu utilises un button-card, la clé entity_id est optionnelle.
Lorsqu’elle est renseignée, on peut alors styliser la carte en fonction de l’état de cette entité.

Le Javascript de @golfvert peut être utilisé pour par exemple changer le nom du bouton suivant s’il est fermé ou non

- type: 'custom:button-card'
  tap_action:
    action: call-service
    service: cover.close_cover
    service_data:
      entity_id: cover.volet_salon
  entity: cover.volet_salon
  icon: 'mdi:window-shutter'
  name: >
    [[[
      if (entity.state == "closed") return 'Fermé';
      return 'Fermer le salon';
    ]]] 
  state:
    - value: 'closed'
      styles:
        icon:
          - color: red
    - value: 'open'
      styles:
        icon:
          - color: green
    - operator: 'default'
      styles:
        icon:
          - color: blue

Documentation

@Clemalex et @golfvert merci pour vos retour mais dans ce que je lis je ne vois pas le moment ou c’est mon switch " etate qui indique le fai que mon volet es ouvert ou fermé. Je n’ai peu etre pas été asez claire la dessu

Reformule dans ce cas… :innocent: :+1:

Mais déjà je comprends pas car un switch 'ne renseigne pas un état mais commande un appareil… :blush:

Mais déjà je comprends pas car un switch 'ne renseigne pas un état mais commande un appareil…

Bien en faite comme je n’ai pas de retour d’état sur mes volets, j’ai mis des interrupteurs relié a des esp pour savoir quand le volet est ouvert ou fermé. Et comme sous HA ca apparait comme switch ,d’ou le fait que j’en parle comme ca.

Donc je voudrais que la couleur changer en fonction de l’état de ce " switch"

volets

On est donc pile dans l’inverse de cette phrase :wink:

Du coup, il faut utiliser le javascript comme l’a montré @golfvert mais en modifiant un peu :

      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.volet_salon
        entity: cover.volet_salon
        icon: 'mdi:window-shutter'
        styles:
           icon:
              - color: >
                  [[[
                    //Si le switch est allumé
                    if (states['switch.volet_salon'].state == 'on') return "green";
                    //sinon (car c'est un booléen)
                    return "red";
                  ]]]
        name: Salon

regarde la documentation de la carte, trouveras plein d’exemple dont celui-ci appliqué à une couleur de fond :+1:

Hello,

Je m’insère dans la discussion…
J’utilise le même procédé pour mes cartes, mais en utilisant d’autres état d’entités que celui du bouton.
Plus précisément, je rends moins visibles des boutons en fonction de l’état d’un input_boolean.
Autant lorsque je n’ai qu’un seul booléen cela se passe bien. Je l’écris ainsi :


  - color: >
      [[[
        if (states['input_boolean.bit_a'].state == 'on') return 'green'
          return 'red'
      ]]]

Autant lorsque j’ai plusieurs conditions (or ou and) je n’arrive pas à écrire l’équation correctement
(j’arrive à les écrire dans les markdown, mais pas dans les button card :upside_down_face: )

Exemple non fonctionnel :


  - color: >
      [[[
        if (states['input_boolean.bit_a'].state == 'on' and states['input_boolean.bit_b'].state == 'on') return 'green'
          return 'red'
      ]]]

Comment faut-il écrire ce type d’équation dans les button card ?

Les balises [[[ indique à l’interpréteur que c’est du Javascript donc le et s’ecrit && et le ou s’ecrit ||.

Plus d’informations →

1 J'aime

Ok merci je vais test mais j’ai justement regardé la doc avant de poster et j’avoue que je n’ai pas tilté… certainement parce que je ne maitrise pas encore bien

      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.volet_bureau
        entity: cover.volet_bureau
        icon: 'mdi:window-shutter-open'
        styles:
           icon:
              - color: >
                [[[
                  //Si le switch est allumé
                  if (states['switch.volet_bureau'].state == 'on') return "green";
                  //sinon (car c'est un booléen)
                  return "red";
                ]]]
        name: Bureau

voila ce que j’ai fait et ca passe pas, il me dit que j’ai une erreur. Meme en faisant un copier collé de ton code @Clemalex

ca semble venir de cette syntaxe : if (states[‹ switch.volet_bureau ›].state == ‹ on ›) return « green »;

« missed comma between flow collection entries at line 22, column 29 »

ok j’ai reussit en adaptant ca :grin:

Mais j’ai encore besoin de vous.

Dans mon code il y a ca :

title: Centralisation des volets
cards:
  - type: 'custom:button-card'
    color: 'rgba(255, 255, 255.)'
    name: Tout ouvrir
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.volet_bureau
        entity: cover.volet_bureau
        icon: 'mdi:window-shutter-open'
        styles:
          icon:
            - color: |
                [[[
                  if (states['switch.volet_bureau'].state == 'on') return 'green'
                  return 'grey'
                ]]]
        name: Bureau

Je comprend pas comment fonction le "tout ouvrir " sachant que rien ne lui est indiqué comme devices… normal?

Pffff c’est vrai que çà marche beaucoup mieux ainsi … :+1:
(rigolez pas, j’ai eu le problème inverse dans les markdown alors que j’insistais avec les && (y’a pas l’icone pied dans le derrière…)

Il manque des espaces, le début du code Javascript n’est pas décalé par rapport à la clé color…

Voici ce que ça doit être (rien n’a changé mis à part l’ajout d’espace…) :

- type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.volet_bureau
        entity: cover.volet_bureau
        icon: 'mdi:window-shutter-open'
        styles:
           icon:
              - color: >
                  [[[
                    //Si le switch est allumé
                    if (states['switch.volet_bureau'].state == 'on') return "green";
                    //sinon (car c'est un booléen)
                    return "red";
                  ]]]
        name: Bureau

Bein il ne fonctionne pas…si ?

Pour dire de tout ouvrir, cela se passe sur le service appelé (au niveau des entités)

tap_action:
  action: call-service
  service: cover.open_cover # Action d'ouverture
  service_data:
    entity_id: 'cover.volet_salon, cover.volet_jardin' # <- Deux volets ici

Donc ça donnerais, avec l’explication fourni à @Bubule :

type: vertical-stack
title: Centralisation des volets
cards:
  - type: 'custom:button-card'
    color: 'rgba(255, 255, 255.)'
    name: Tout ouvrir
    tap_action:
      action: call-service
      service: cover.open_cover
      service_data:
        entity_id: 'cover.volet_bureau, cover.volet_salon' # 2 volets
    entity: cover.volet_bureau
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.volet_bureau
        entity: cover.volet_bureau
        icon: 'mdi:window-shutter-open'
        styles:
          icon:
            - color: |
                [[[
                  if (states['switch.volet_bureau'].state == 'on') return 'green'
                  return 'grey'
                ]]]
        name: Bureau

non justement …

je commence à comprendre. D’ailleur il faut obligatoirement la ligne : entity: cover.volet_bureau ? car la on ne parle que du volet bureau. C’est normal?

Desolé je met du temps à comprendre

Le mieux est de faire des tests :+1:

Mais non, tu n’en as pas besoin dans ton cas, car tu stylises ta carte en fonction de d’autres capteur…et les actions également…

Bon grâce à vous voila ce que j’ai fait.
Si ca peut servir ceux qui cherche.

title: Centralisation des volets
cards:
  - type: 'custom:button-card'
    color: 'rgba(255, 255, 255.)'
    name: Tout ouvrir
    tap_action:
      action: call-service
      service: cover.open_cover
      service_data:
        entity_id: 'cover.volet_bureau, cover.volet_salon'
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.volet_bureau
        entity: cover.volet_bureau
        icon: 'mdi:arrow-up-bold-box-outline'
        styles:
          icon:
            - color: |
                [[[
                  if (states['switch.volet_bureau'].state == 'on') return 'green'
                  return 'grey'
                ]]]
        name: Bureau
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.volet_salon
        entity: cover.volet_salon
        icon: 'mdi:arrow-up-bold-box-outline'
        styles:
          icon:
            - color: |
                [[[
                  if (states['switch.switch_volet_salon'].state == 'off') return 'green'
                  return 'grey'
                ]]]
        name: Salon
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.stop_cover
          service_data:
            entity_id: cover.volet_bureau
        entity: cover.volet_bureau
        icon: 'mdi:close-outline'
        color: grey
        name: Bureau stop
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.stop_cover
          service_data:
            entity_id: cover.volet_salon
        entity: cover.volet_salon
        icon: 'mdi:close-outline'
        color: grey
        name: Salon stop
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.volet_bureau
        entity: cover.volet_bureau
        icon: 'mdi:arrow-down-bold-box-outline'
        styles:
          icon:
            - color: |
                [[[
                  if (states['switch.volet_bureau'].state == 'off') return 'green'
                  return 'grey'
                ]]]
        name: Bureau
      - type: 'custom:button-card'
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.volet_salon
        entity: cover.volet_salon
        icon: 'mdi:arrow-down-bold-box-outline'
        styles:
          icon:
            - color: |
                [[[
                  if (states['switch.switch_volet_salon'].state == 'on') return 'green'
                  return 'grey'
                ]]]
        name: Salon
  - type: 'custom:button-card'
    color: 'rgba(255, 255, 255.)'
    name: Tout fermer
    tap_action:
      action: call-service
      service: cover.close_cover
      service_data:
        entity_id: 'cover.volet_bureau, cover.volet_salon'
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        name: Désctiver volets matin
        tap_action:
          action: call-service
          service: input_boolean.turn_off
          service_data:
            entity_id: input_boolean.volets_soir
        entity: input_boolean.volets_soir
        icon: 'mdi:toggle-switch-off-outline'
        styles:
          icon:
            - color: |
                [[[
                  if (states['input_boolean.volets_soir'].state == 'off') return 'green'
                  return 'grey'
                ]]]
      - type: 'custom:button-card'
        name: Activer volets matin
        tap_action:
          action: call-service
          service: input_boolean.turn_on
          service_data:
            entity_id: input_boolean.volets_soir
        entity: input_boolean.volets_soir
        icon: 'mdi:toggle-switch-outline'
        styles:
          icon:
            - color: |
                [[[
                  if (states['input_boolean.volets_soir'].state == 'on') return 'green'
                  return 'grey'
                ]]]

Bon je ne suis pas satisfait à 100% mais ca fera l’affaire

Bonjour,

type: 'custom:button-card'
entity: sensor.conso_eau_jour

Je souhaiterais que la couleur de l’icon change au delà d’une certaine valeur du sensor. Est-ce possible ?

Je me réponds à moi même pour d’éventuels futurs lecteurs car c’est le genre d’exemple basique que j’aime bien trouver sur le forum.
Dans cet exemple l’icone est :

  • rouge clignotant lorsque la consommation d’eau journalière dépasse 500 litres
  • bleu fixe si la consommation d’eau journalière est inférieure à 500 litres
type: 'custom:button-card'
name: Eau
entity: sensor.conso_eau_jour
state:
  - value: 500
    operator: '>='
    color: red
    styles:
      icon:
        - animation:
            - blink 1s linear infinite
  - value: 500
    operator: <
    color: 'rgb(43, 116, 158)'