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

Je peux te garantir que je passe des heures à lire et à essayer de coller des codes mais je trouve ça vraiment très compliqué… c’est pour ça que certains en font leur métier :stuck_out_tongue:

Bon, j’ai essayé d’utiliser ton code mais ça fonctionne pas, j’ai pourtant l’impression que tout est correct, non ?

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

Résultat:
image

Je viens de regarder… apparemment, c’est un problème de communication entre l’entité et home assistant…
Oui, ça fonctionne !!! Pour la couleur, j’ai compris ! C’était un problème de communication !

J’ai pas compris, un problème de communication ?
l’état du cover était pas open / close ?

c’était un problème de WiFi. Les capteurs de mon module Meross de ma porte de garage ne renvoyaient pas l’état … c’est ce que m’a dit Gemini quand je l’ai questionné sur l’erreur… et de fait.

J’ai réussi à faire ceci, je cherche maintenant comment je peux intégrer une information « Ouvert » ou « Fermé » sur base d’une autre entité pour mon portail.

Avec mon portail, je récupère l’état Open et Closed via l’entité binary_sensor.shellyplus1_e465b8f31738_input_0_input

Et j’aimerais bien que ce soit cette entité qui indique Ouvert ou Fermé + qui colore l’icône en Vert si Fermé, Rouge si Ouvert et Orange si aucun des 2 ci-dessus (en mouvement dans la réalité).

type: horizontal-stack
cards:
  - type: custom:button-card
    aspect_ratio: 1
    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
    aspect_ratio: 1
    entity: switch.portail_switch_0
    name: Portail
    show_icon: true
    icon_height: null
    tap_action:
      action: toggle
    show_state: false
    styles:
      icon:
        - color: white
  - type: custom:button-card
    aspect_ratio: 1
    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

image

a tester, mais ca devrais te mettre ouvert en rouge ou fermer en vert et ouvert en orange si l’eu deux portail est ouvert.

  - type: custom:button-card
    aspect_ratio: 1
    entity: script.portail_et_garage
    name: Portail & Garage
    show_name: true
    show_icon: true
    styles:
      icon:
        - color: white
    tap_action:
      action: toggle
    show_state: true
    state_display: |
      [[[
        if (states['switch.portail_switch_0'].state == 'open' && states['switch.portail_switch_0'].state == 'open')
          return '<font color= "red">Ouvert</font>';
        else if (states['switch.portail_switch_0'].state == 'close' && states['switch.portail_switch_0'].state == 'close')
         return '<font color= "green">Fermer</font>';
        else if (states['switch.portail_switch_0'].state == 'close' && states['switch.portail_switch_0'].state == 'open')
         return '<font color= "orange">Ouvert</font>';
        else if (states['switch.portail_switch_0'].state == 'open' && states['switch.portail_switch_0'].state == 'close')
          return '<font color= "orange">Ouvert</font>';
      ]]]

edit:
corrigé ) && ( , les parenthèses était en trop.

Du coup, tu n’as plus besoin d’exemple ?

Alors je viens de tester, mais j’ai une erreur en retour. J’ai repris le code sur une autre carte car les 2 autres boutons fonctionnent: je me suis permis d’adapter le nom de l’entité qui renvoie le signal On (Ouvert) et Off (Fermé) + j’ai adapté l’entité du portail qui permet de l’ouvrir (entité qui agit comme un interrupteur momentané via mon module Shelly, raison pour laquelle je ne sais pas reprendre son état car elle est toujours Off, elle ne fait que contact sec pour déclencher l’ouverture du portail, ce dernier étant raccordé par ailleurs au courant électrique).

Voici l’erreur envoyée:

ButtonCardJSTemplateError: SyntaxError: Unexpected token ‹ && › in 'if (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ off ›) && (states[‹ bin… ›
tap_action:
action: toggle
type: custom:button-card
group_expand: false
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
size: 40%
color_type: icon
show_name: true
show_state: true
show_icon: true
show_units: true
show_label: false
show_entity_picture: false
show_live_stream: false
card_size: 3
aspect_ratio: 1
entity: switch.portail_switch_0
name: Portail
styles:
icon:
- color: white
state_display: |
[[[
if (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ off ›) && (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ on ›)
return ‹ Ouvert ›;
else if (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ off ›) && (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ off ›)
return ‹ Fermer ›;
else if (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ off ›) && (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ on ›)
return ‹ Ouvert ›;
else if (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ on ›) && (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ off ›)
return ‹ Ouvert ›;
]]]
lock:
enabled: false
duration: 5
unlock: tap

Et voici le code de cette carte Bouton:

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 == 'off') && (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') && (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
      return '<font color= "green">Fermer</font>';
    else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off') && (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
      return '<font color= "orange">Ouvert</font>';
    else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on') && (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
       return '<font color= "orange">Ouvert</font>';
  ]]]

Non, c’est gentil, te tracasse pas, j’essaye juste de régler le problème avec le portail. Ton collègue WarC0zes m’a aidé pour le garage.

pas très clair.

switch.portail_switch_0 ne reporte pas d’état, et binary_sensor.shellyplus1_e465b8f31738_input_0_input est pour reporter l’état du portail ?

quel entité ?

Oui, c’est cela. L’entité binary_sensor.shellyplus1_e465b8f31738_input_0_input doit être utilisée pour reporter l’état du portail.

En fait, la configuration suivante fonctionne sur la mushroom card, et j’aimerais bien la même chose avec la Button Card (plus intuitif quand tu appuies dessus, etc.):

Je te mets tout le code pour éviter de faire des erreurs d’indentation, mais ce n’est que le portail qui est intéressant:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Portail & Garage
    secondary: ''
    icon: mdi:gate-open
    entity: script.portail_et_garage
    layout: vertical
    multiline_secondary: false
    icon_color: white
    tap_action:
      action: toggle
  - type: custom:mushroom-template-card
    primary: Portail
    secondary: >-
      {% if is_state('binary_sensor.shellyplus1_e465b8f31738_input_0_input',
      'off') %}
        Fermé
      {% else %}
        Ouvert
      {% endif %}
    icon: mdi:gate
    entity: switch.portail_switch_0
    layout: vertical
    multiline_secondary: false
    tap_action:
      action: toggle
    icon_color: >-
      {% if is_state('binary_sensor.shellyplus1_e465b8f31738_input_0_input',
      'off') %}
        green
      {% else %}
        red
      {% endif %}
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: |-
      {% if is_state('cover.porte_de_garage', 'closed') %}
        Fermé
      {% else %}
        Ouvert
      {% endif %}
    icon: mdi:gate
    entity: cover.porte_de_garage
    layout: vertical
    multiline_secondary: false
    tap_action:
      action: toggle
    icon_color: |-
      {% if is_state('cover.porte_de_garage', 'closed') %}
        green
      {% else %}
        red
      {% endif %}

Tu as tout ce qu’il faut ci-dessus, il faut juste modifier l’entité, mettre le style pour la couleur de l’icône à la place de la couleur du nom, etc.

mince j’ai mis des parenthèses en trops ) && (.

Ok, ca doit être bon la alors:

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>';
  ]]]

ouvert en rouge
fermer en vert
pas d’état en orange, mais je vois pas a quoi ca va servir, si t’a que deux états.

Chez moi ça sert pour l’état intermédiaire : ouverture ou fermeture en cours (associé au capteur de vibration) et quand la porte du garage est partiellement ouverte (plus de vibrations au niveau du capteur)

1 « J'aime »

Désolé, vous êtes super sympas d’essayer de m’expliquer, mais j’y arrive vraiment pas… :face_with_diagonal_mouth:

J’ai essayé avec la correction de WarC0zes et j’ai des erreurs en retour (voir ci-dessous)

Et Cleya, j’ai essayé de reprendre ce qu’il fallait dans mon code mais ça ne fonctionne pas. Je refais ligne par ligne les indentations pour voir si la logique est la même que chez toi, mais c’est pas possible…

Je suis vraiment nul dans le code, j’essaye de me cantonner aux cartes existantes mais c’est pas toujours possible.

J’aimerais simplement la même chose qu’avec la carte mushroom en fait, mais sur la carte Button.

Voici ma tentative:

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>';
  ]]]

Et l’erreur renvoyée:

ButtonCardJSTemplateError: SyntaxError: Unexpected identifier ‹ état › in 'if (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ on ›) return ‹ <fo… ›
tap_action:
action: toggle
type: custom:button-card
group_expand: false
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
size: 40%
color_type: icon
show_name: true
show_state: true
show_icon: true
show_units: true
show_label: false
show_entity_picture: false
show_live_stream: false
card_size: 3
aspect_ratio: 1
entity: switch.portail_switch_0
name: Portail
styles:
icon:
- color: white
state_display: |
[[[
if (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ on ›)
return ‹ Ouvert ›;
else if (states[‹ binary_sensor.shellyplus1_e465b8f31738_input_0_input ›].state == ‹ off ›)
return ‹ Fermer ›;
else return ‹ pas d’état ›;
]]]
lock:
enabled: false
duration: 5
unlock: tap

Il manque vraiment juste l’état ouvert ou fermé du portail avec la couleur de l’icône :

Le « Désactivé » qui apparaît est l’état du commutateur de l’entité de base, mais c’est pas utilisable en l’état vu que c’est un contact sec.

image

j’ai copier ton code, et juste changer les entités. Ca fonctionne.
il y a un soucis avec ton entité binary_sensor.shellyplus1_e465b8f31738_input_0_input, ca doit pas être le bon nom ou l’état ( on/off)

bouton portail

Ton entité retourne bien On ou Off ou alors elle retourne Open ou Closed ?

1 « J'aime »

Donc à priori, ça doit être ce que je disais, non ?

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 == 'open') 
      return '<font color= "red">Ouvert</font>';
    else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'closed') 
      return '<font color= "green">Fermer</font>';
    else return '<font color= "orange">pas d'état</font>';
  ]]]

Pour le portail, j’en déduis que l’état renvoyé par l’entité est bien On et Off puisque Off fonctionne avec la carte Mushroom.
L’entité doit être correcte aussi puisqu’elle fonctionne avec Mushroom : binary_sensor.shellyplus1_e465b8f31738_input_0_input
Mais il y a bien 2 entités distincties pour le portail: la première qui permet d’ouvrir et de fermer; la deuxième qui doit permettre de renvoyer le statut Ouvert ou Fermé et sur laquelle il faut donc se baser pour colorer l’icône (c’est celle que je colle ici dessus).

Ci-dessous, c’est le code qui fonctionne avec Mushroom, je viens de retester, le portail s’ouvre et se ferme et toutes les informations que je souhaite s’affichent.
C’est juste que ce n’est pas en orange quand le portail est dans une autre position mais c’est un détail.
La mushroom est bien mais on ne se rend pas bien compte quand on a appuyé si ça a fonctionné ou pas avant que l’état ne change, contrairement à la button card.

Et revoici le code de la mushroom:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Portail & Garage
    secondary: ''
    icon: mdi:gate-open
    entity: script.portail_et_garage
    layout: vertical
    multiline_secondary: false
    icon_color: white
    tap_action:
      action: toggle
  - type: custom:mushroom-template-card
    primary: Portail
    secondary: >-
      {% if is_state('binary_sensor.shellyplus1_e465b8f31738_input_0_input',
      'off') %}
        Fermé
      {% else %}
        Ouvert
      {% endif %}
    icon: mdi:gate
    entity: switch.portail_switch_0
    layout: vertical
    multiline_secondary: false
    tap_action:
      action: toggle
    icon_color: >-
      {% if is_state('binary_sensor.shellyplus1_e465b8f31738_input_0_input',
      'off') %}
        green
      {% else %}
        red
      {% endif %}
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: |-
      {% if is_state('cover.porte_de_garage', 'closed') %}
        Fermé
      {% else %}
        Ouvert
      {% endif %}
    icon: mdi:gate
    entity: cover.porte_de_garage
    layout: vertical
    multiline_secondary: false
    tap_action:
      action: toggle
    icon_color: |-
      {% if is_state('cover.porte_de_garage', 'closed') %}
        green
      {% else %}
        red
      {% endif %}

Maintenant quand je colle le code de la button card de Cleya pour le portail, voici ce que j’ai:

Dans le code de Cleya, j’ai pris le soin de remplacer Open et Closed par on et off mais sans succès

Regarde dans les outils de développement les états pour ton entité.

Sur l’image postée, tu as le même message que précédement, ce qui est normal car tu as remis la même chose que précédement… :grinning: