[Résolu] Modifier les couleurs et icônes de ce bouton

Entraide Home Assistant
1

Bonjour,

Voilà j’ai créé un bouton et j’aimerais modifier l’icône et la couleur en fonction de l’état.

Mais là je ne comprends pas encore comment coder

show_name: true
show_icon: true
type: button
entity: switch.camera_salon_bypassed
color: red
name: Camera Salon
show_state: false
icon: mdi:shield-off-outline

Si quelqu’un peut m’aider, ça me permettra aussi de comprendre dans ce cas-ci.

J’aimerais que à l’état classique il soit vert avec un bouclier plein et sinon rouge avec l’icône actuelle.

Merci

2

Bonjour,
utilises button-card (a installer a partir de HACS), ça sera plus simple et performent que la carte button et card_mod.

Un exemple :

type: custom:button-card
entity: switch.camera_salon_bypassed
name: Camera Salon
show_state: false
section_mode: false
state:
  - value: on
    color: green
    icon: mdi:shield-outline
  - value: off
    color: red
    icon: mdi:shield-off-outline

Si tu l’utilises dans une vue en mode section, met section_mode: sur true.

Si besoin, tu as une super article pour utiliser button-card :

3

Merci c’est vraiment top.

J’en profite pour te poser une autre question.

Dans mon cas si je place l’état sur True, ça m’indique Désactivé (ce qui dans ce cas là est logique car c’est à la base un bouton pour exclure un capteur)

Mais j’aimerais savoir s’il est possible que l’affichage indique l’inverse, ce qui dans mon cas indiquerait que le capteur est actif et donc pas exclu.

En gros sur cette capture, que ça indique juste pour l’affiche l’inverse de ce que dit le capteur “activé” au lieu de “désactivé” ou même encore mieux si on peut indiquer “Inclus” à la place de “désactivé” et “Exclus” à la place “D’activé”

1000114301
10001143011080×533 41.6 KB

4

Trouvé avec un peu d’aide de l’IA :blush:

show_name: true
show_icon: true
entity: switch.camera_salon_bypassed
name: Camera Salon
show_state: true
state_display: >
  [[[ if (entity.state === 'off') return 'Inclus';
      if (entity.state === 'on') return 'Exclus';
      return entity.state; ]]]
type: custom:button-card
section_mode: false
state:
  - value: "on"
    color: red
    icon: mdi:shield-outline
  - value: "off"
    color: green
    icon: mdi:shield-check
5

Bonjour,

Voici une petite simplification du code en sachant que l’état ne peut ^tre que “on” ou “off”, une expression ternaire suffit :

type: custom:button-card
entity: switch.camera_salon_bypassed
name: Camera Salon
show_name: true
show_icon: true
show_state: true
state_display: >
  [[[ return entity.state === 'on' ? 'Exclus' : 'Inclus'; ]]]
state:
  - value: "on"
    color: red
    icon: mdi:shield-outline
  - value: "off"
    color: green
    icon: mdi:shield-check

Tu gagnes ainsi 2 lignes de code. Tu trouveras des explications sur cet opérateur ternaire dans l’article dont @WarC0zes t’a donné le lien.