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
Pour une fois, un truc de lovelace que je sais faire
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…
Mais déjà je comprends pas car un switch
'ne renseigne pas un état mais commande un appareil…
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"
On est donc pile dans l’inverse de cette phrase
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
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 )
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
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?
Bubule
Avril 18, 2021, 12:45
13
Pffff c’est vrai que çà marche beaucoup mieux ainsi …
(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 …
Clemalex:
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
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
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
Ives
Mai 3, 2021, 9:59
19
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 ?
Ives
Mai 3, 2021, 12:55
21
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)'
2 « J'aime »