Ecrire en couleur une entité en fonction de son état

je deviens dingue :upside_down_face:

Voici l’état, c’est off en ce moment et c’est fermé. On voit aussi que l’entité est correcte: binary_sensor.shellyplus1_e465b8f31738_input_0_input

et voici l’état ouvert de cette entité, ça fonctionne bien:

Essaie juste ça et dis moi si la couleur de « fermé » ou « ouvert » change

type: custom:button-card
aspect_ratio: 1
icon: mdi:gate
name: Portail
show_name: true
show_icon: true
styles:
  icon:
    - color: white
tap_action:
  action: toggle
show_state: false
show_label: true
label: |
  [[[
    if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on') 
      return '<font color= "red">Ouvert</font>';
    else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off') 
      return '<font color= "green">Fermer</font>';
    else
      return '<font color= "orange">pas d'état</font>';
  ]]]

Dans la carte Mushroom, en plus de donner l’instruction sur la couleur, on donne aussi une instruction pour ajouter l’entité « secondary » et l’afficher. On ne sait pas faire cela avec la Button Card ?

J’ai modifié mon dernier message. Teste le code mis et dis moi ce que ça donne.

ça fonctionne pas, je ne vois rien, il y a un code d’erreur à la place de l’icône dans le visuel:

par contre, je vois, et je ne regardais pas mes journaux, que j’ai un paquet d’erreurs, peut-être est-ce dû à cela ?

Il y a une série d’erreurs que je devrais corriger dès que je reçois mon nouveau CPL pour le WiFi (2 sur 3 fonctionnent bien)… mais il y en a aussi des nouvelles, mes cartes Erergy ne fonctionnent plus sur mon dashboard depuis aujourd’hui, ma caméra Imou non plus… enfin plein de trucs à régler subitement.

Mais le capteur du portail est bien connecté et dispose de réseau suffisant lui. C’est ça qui est bizarre.

Essaie ça en modifiant l’état de ton entité dans les outils de développement (et remplace « input_boolean » par « binary_sensor » dans tous les « if (states[… » et else if) :

type: custom:button-card
icon: mdi:gate
name: Portail
show_label: true
label: |
  [[[
    if (states['input_boolean.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
      return "fermé";
    else if (states['input_boolean.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
      return "ouvert";
    else
      return "en mouvement";
  ]]]
styles:
  label:
    - color: |
        [[[
          if (states['input_boolean.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
            return 'green';
          else if (states['input_boolean.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
            return 'red';
          else
            return 'orange';
        ]]]

aaaah, on se rapproche !! Tu es fort !!

ça donne ça et ça change l’état en fonction de l’ouverture ou de la fermeture du portail :

image
image

J’ai mis icon à la place de label pour que ce soit l’icône qui soit en couleur. L’orange ne s’affiche pas mais c’est normal en fait, car c’est un contact sec.

Par contre, dernier point à régler, le portail ne s’ouvre et ne se ferme avec une action toggle. Car l’ntité d’ouverture et de fermeture est différente de l’entité qui renvoie à l’état. Il faudrait mettre quelque part dans le code que c’est l’entité switch.portail_switch_0 qui constitue l’action principale du bouton. C’est possible en gardant tout le reste ?

Voici le code actuel:

type: custom:button-card
icon: mdi:gate
name: Portail
show_label: true
label: |
  [[[
    if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
      return "fermé";
    else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
      return "ouvert";
    else
      return "en mouvement";
  ]]]
styles:
  icon:
    - color: |
        [[[
          if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
            return 'green';
          else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
            return 'red';
          else
            return 'orange';
        ]]]

Oui, tu peux mettre l’entité que tu veux car les changements sur le label et la couleur de l’icône sont définis dans les conditions. Tu peux aussi remettre le changement de couleur du label en plus du changement de couleur de l’icône.
Tu peux donc virer les « else » si il n’y a que deux états possibles (on et off)
Si tout fonctionne, je peux te montrer comment faire une seule carte avec tes trois « boutons » avec le même visuel que tes trois cartes Mushroom (icône en vert dans un disque plus sombre ou icône en rouge dans un disque rouge plus sombre aussi)

ça fonctionne à merveille, c’est extra ! :grinning: :ok_hand:

J’ai ajouté mon entité pour l’ouverture / fermeture du portail et j’ai fait une carte avec les 3 boutons.

La seule chose que j’aimerais bien, c’est masquer l’état de mon script car ça ne veut rien dire, mais conserver la même hauteur de bouton que les 2 autres. Car quand j’enlève l’état, le bouton est plus petit du coup. C’est possible aussi ça ?

Peut-être aussi rendre les boutons un peu plus petits, les écritures et les icônes aussi, mais là c’est vraiment du détail :stuck_out_tongue:

Ce que j’imaginais au début sera alors réalisé, merci beaucoup !

image

image

Dernière version du code :

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: script.portail_et_garage
    name: Portail & Garage
    show_name: true
    show_icon: true
    styles:
      icon:
        - color: white
    tap_action:
      action: toggle
    show_state: false
  - type: custom:button-card
    icon: mdi:gate
    name: Portail
    entity: switch.portail_switch_0
    show_label: true
    label: |
      [[[
        if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
          return "fermé";
        else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
          return "ouvert";
        else
          return "en mouvement";
      ]]]
    styles:
      icon:
        - color: |
            [[[
              if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                return 'green';
              else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                return 'red';
              else
                return 'orange';
            ]]]
  - type: custom:button-card
    entity: cover.porte_de_garage
    name: Garage
    show_name: true
    show_icon: true
    tap_action:
      action: toggle
    show_state: true
    state:
      - value: open
        color: red
      - value: closed
        color: green
      - value: opening
        color: orange
      - value: closing
        color: orange

J’aimerais bien donc un bouton comme sur la 2ème image, mais la même taille que les autres…

(je reviens tout-à-l’heure, j’ai la finalisation de ce bouton portail et garage (le script) comme expliqué ci dessus + encore d’autres problèmes à régler, tu me reverras sur le forum :sweat_smile: )

Pour enlever l’état, tu n’as qu’à mettre show_state: false
Pour fixer la taille, il y a plusieurs solutions.

En revanche mettre la solution sur un de tes messages, c’est pas top :smile:

1 « J'aime »

@anon51798830, je vois pas la différence entre mettre sont code dans label au lieu de state_display.

pourquoi ca fonctionne chez moi ?
bouton portail

Parce que tu as la même entité pour la carte et dans les conditions du state_display. Chez lui, l’entité de la carte était différente

@Matt1 J’arrive après la bataille, avec une question:

Si tu n’es pas à l’aise avec le code, je ne sais pas si tu as vu, mais avec la mushroom template card, tu as tout de disponible avec l’éditeur graphique.

Les seules parties de « code » sont donc des templates (au format jinja2) qui servent à définir couleurs, texte et icones et que tu peux tester dans les outils de developpement avant de les mettre dans ta carte.

C’est sans doute une solution qui te permet de te familiariser doucement sans tout faire d’un coup… (en tout cas c’est comme ça que j’ai fait moi)

Ca m’a permi d’aller progressivement au delà des cartes par defaut pour avoir un dashboard plus personalisé.
En plus si tu mixe Tuiles (Tiles) et cartes mushroom, c’est le même look, donc tu peux avoir un dashboard cohérent…
Tu dispose aussi des chips qui se manipulent de la même façon et peuvent être très pratique…

vachement :joy: :rofl:


l’entité de state_display est différente de l’entité principal.

Et quand tu cliques sur le bouton, il se passe quoi ?

sa allume la lumière et l’état change pas vu que c’est une autre entité.

Oui, et le « Fermer » reste en vert :joy:
Voilà pourquoi mon code marche chez lui :crazy_face:

1 « J'aime »

Beh oui !

j’ai utiliser ce code en changeant les entité c’est tout. Ma prise est off, donc ca écris fermé en vert.

type: custom:button-card
aspect_ratio: 1
entity: switch.portail_switch_0
name: Portail
show_name: true
show_icon: true
styles:
  icon:
    - color: white
tap_action:
  action: toggle
show_state: true
state_display: |
  [[[
    if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on') 
      return '<font color= "red">Ouvert</font>';
    else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off') 
      return '<font color= "green">Fermer</font>';
    else return '<font color= "orange">pas d'état</font>';
  ]]]