Modifier la couleur d'un button-card en comparant 2 valeurs de capteurs

Bonjour,

je suis en train de me prendre la tête avec un truc qui me paraissait simple à la base

je veux comparer une production solaire et une consommation maison et changer la couleur d’un bouton card en fonction du resultat de la comparaison

type: custom:button-card
entity: sensor.energie_maison_hors_ecs
name: Maison hors ECS
icon: hass:flash
size: 12%
color: blue
show_state: true
styles:
  card:
    - font-size: 10px
    - background-color: |
        [[[
          if ((states['sensor.energie_maison_hors_ecs'].state) < (states['sensor.shellyem_98cdac1f4888_channel_1_power'].state))
               return "#FF99CC";
          return "#CCFF99";
        ]]]
  state:
    - justify-self: center
    - font-size: 20px

en fait la comparaison ne fonctionne pas, je dois me planter au niveau des parantheses ou alors ce n’est pas possible ???

si production superieure à conso maison :
image

si production inferieure à conso maison :
image

ca reste vert au lieu de passer au rouge sur le bouton maison hors ECS

precision : pour la production solaie je compare par rapport à une valeur et cela fonctionne

type: custom:button-card
entity: sensor.prodsolajust
name: Production Solaire
icon: mdi:white-balance-sunny
size: 12%
color: orange
show_state: true
styles:
  card:
    - font-size: 12px
    - background-color: |
        [[[
          if (states['sensor.shellyem_98cdac1f4888_channel_1_power'].state > 5)
            return "#FFFF33";
          return "white";
        ]]]
  state:
    - justify-self: center
    - font-size: 24px

si quelqu’un à une idée
par avance merci

edit :
precision pour Energie maison hors ECS il s’agit d’un template

     - platform: template
       sensors:
        energie_maison_hors_ecs:
        friendly_name: "Energie maison hors ECS"
        unit_of_measurement: 'W'
        value_template: "{{ states('sensor.shellyem_b05179_channel_2_power') |float + 
states('sensor.shellyem_98cdac1f4888_channel_1_power') |float - states('sensor.shellyem_b05179_channel_1_power') | float }}"    

Salut @Christophe69480

Là vite fait, de base je dirai qu’il manque au moins un « else » :

type: custom:button-card
entity: sensor.energie_maison_hors_ecs
name: Maison hors ECS
icon: hass:flash
size: 12%
color: blue
show_state: true
styles:
  card:
    - font-size: 10px
    - background-color: |
        [[[
          if ((states['sensor.energie_maison_hors_ecs'].state) < (states['sensor.shellyem_98cdac1f4888_channel_1_power'].state))
               return "#FF99CC";
          else return "#CCFF99";
        ]]]
  state:
    - justify-self: center
    - font-size: 20px

merci pour la réponse
toujours KO
effectivement il manque le else mais déja la comparaison ne fonctionne pas, cela est-il seulement possible ?
en effet quand je modifie dans le code > en <, il n’y a aucun effet

Oui c’est possible, testé chez moi avec 2 de mes entités :

debug

Dans les outils de dev si tu mets :

{{ states('sensor.energie_maison_hors_ecs') }}

{{ states('sensor.shellyem_98cdac1f4888_channel_1_power') }}

Ça te donne quoi ?

j’ai bien les valeurs
ce qui me fait dire que c’est ma comparaison qui est mal ecrite

je pense que tu viens de me mettre sur la piste avec ton exemple, merci !
maintenant en modifiant > et < j ai un changement de couleur, il y avait un probleme de syntaxe
mais avec state je compare l’état et pas la valeur

je vais essayer avec value

type: custom:button-card
entity: sensor.energie_maison_hors_ecs
name: Maison hors ECS
icon: hass:flash
size: 12%
color: blue
show_state: true
styles:
  card:
    - font-size: 10px
    - background-color: |
        [[[
          if ((states['sensor.energie_maison_hors_ecs'].value) > (states['sensor.shellyem_98cdac1f4888_channel_1_power'].value))
               return "#CCFF99";
          else return "#FF99CC";
        ]]]
  state:
    - justify-self: center
    - font-size: 20px

maintenant j attend le soleil pour voir si cela fonctionne avec value

bon j’avance

ca ne marche pas avec value, du moins pas reussi
peut être lié au fait que sensor.energie_maison_hors_ecs est un template ?

cela fonctionne avec state mais il ne prend que le premier diqit
exemple 200 et 1000 pour lui 2 est superieur à 1, donc 200 > 1000 !!

type: custom:button-card
entity: sensor.energie_maison_hors_ecs
name: Maison hors ECS
icon: hass:flash
size: 12%
color: blue
show_state: true
styles:
  card:
    - font-size: 10px
    - background-color: |
        [[[
          if ((states['sensor.energie_maison_hors_ecs'].state) < (states['sensor.shellyem_98cdac1f4888_channel_1_power'].state))
               return "#CCFF99";
          else return "#FF99CC";
        ]]]
  state:
    - justify-self: center
    - font-size: 20px

comment lui faire prendre la comparaison en valeur ?

En passant an float ce qui doit être des strings… donc un truc comme |float dans le calcul.

merci pour l’aide

button-card refuse, du moins j’ai un soucis de syntax pour intégrer |float

type: custom:button-card
entity: sensor.energie_maison_hors_ecs
name: Maison hors ECS
icon: hass:flash
size: 12%
color: blue
show_state: true
styles:
  card:
    - font-size: 12px
    - background-color: |
        [[[
           if (states['sensor.energie_maison_hors_ecs'].state > states['sensor.shellyem_98cdac1f4888_channel_1_power'].state)
               return "#CCFF99";
          else return "#FF99CC";
        ]]]
  state:
    - justify-self: center
    - font-size: 24px

je vais exprimer le besoin, car je pense que je suis mal parti

je voudrais comparer ces 2 valeurs (conso maison hors routeur (template) et production solaire (sensor shelly)
et visualiser le resultat de la comparaison,

au départ, je voulais afficher une couleur sur un bouton, si 1>2 => rouge et si 1<2=> vert
et je n’y arrive pas avec button-card

si quelqu’un à une idée, le but est d’afficher sur mon dasboard le resultat de cette comparaison peut importe le moyen ou l’intégration

pour l’instant je vais contourner avec un template et le resultat de l operation


mais il doit y avoir plus simple

par avance merci

je pose ici ma solution avec button-card + template si cela interesse quelqu’un
merci @tous pour vos pistes de recherche
je pense qu’il y a plus simple mais le resultat correspond à l’idée de départ

type: custom:button-card
entity: sensor.energie_maison_hors_ecs
name: Maison hors ECS
icon: hass:flash
size: 12%
color: blue
show_state: true
styles:
  card:
    - font-size: 10px
    - background-color: |
        [[[
          if ((states['sensor.indreseau'].state) > 0)
               return "#CCFF99";
          else return "#FF99CC";
        ]]]

  state:
    - justify-self: center
    - font-size: 20px

template dans configuration.yaml

  - platform: template
    sensors:
     indreseau:
        friendly_name: "independance au reseau"
        unit_of_measurement: 'W'
        value_template: "{{ (states('sensor.shellyem_98cdac1f4888_channel_1_power')|float) - (states('sensor.energie_maison_hors_ecs')|float)  }}"          

image

L’idée de @golfvert doit être pas mal, le détail à prendre en compte c’est que « button-card » utilise des template « js » et pas « jinja ».

Donc ajouter un simple " | float " comme on peut le faire couramment ailleurs ne va pas fonctionner.

J’y connais rien en js mais en fouinant un peut sur le net peut-être que le code suivant peut fonctionner :

styles:
  card:
    - font-size: 12px
    - background-color: |
        [[[
           if (parseFloat(states['sensor.energie_maison_hors_ecs'].state).toFixed(2) > parseFloat(states['sensor.shellyem_98cdac1f4888_channel_1_power'].state).toFixed(2))
             return "#CCFF99";
          else return "#FF99CC";
        ]]]

Bref sans garantie :wink:

trop fort !!!
je confirme à l’air de fonctionner (j’attend le soleil demain pour être sûr)
merciii

edit : non KO aussi, j’abdique avec le template j’ai contourné
74 > 200 aussi, il ne prend pas la valeur mais le 1er digit
merci quand même d’avoir cherché

Hum vraiment bizarre :thinking:

J’ai beau le tester dans tous le sens, ça fonctionne à chaque manip à la maison.

Ça fonctionne quand tu passes de « > » à « < » ?

Ou c’est uniquement l’actualisation « dynamique » du bouton, qui ne passe pas ?

Si je passe de < a > , j ai bien un changement d état

Ce qui me pose problème

Si capteur 1 = 100
Et
Capteur 2 = 200

C1 inférieur C2 il passe vert donc vrai

Si capteur 1 = 200
Et
Capteur 2 = 100

C1 inférieur C2 il passe rouge donc Faux

Ça ça marche

Mais si

Si capteur 1 = 50
Et
Capteur 2 = 200

C1 inférieur C2 il devrait passer au vert
Mais il compare juste 5 et 2 donc passe au rouge
Car pour lui 5 supérieure a 2

Il ne tient compte que du premier chiffre et pas de la valeur totale

J’ai contourné mon problème en faisant le calcul sous forme de template
Et dans button card je cherche la valeur positive ou négative pour gérer ma couleur

Il y a probablement un moyen de faire plus simple mais cela fonctionne

En tout cas merci pour ton aide

J’ai réussi à reproduire.

Bref avec le code précédent et en virant les :

.toFixed(2)

Ça devrait passer (et sinon je sais plus …) :upside_down_face:

1 « J'aime »

bon tjrs KO (je pense)
mais laisse tomber, merci d’avoir passé du temps

j’ai pas de soleil pour faire le test, mais en mettant la valeur de comparaison en dur
voila le resultat

test 1 consigne à 200 et conso maison à 320 donc vert OK
image

test 2 consigne à 400 et maison à 320 donc rouge OK

test 3 consigne à 400 maison à 3200 => vert au lieu de rouge donc KO
image

je ferais un test avec les 2 capteurs en comparaison au cas où, le soucis viennent de la consigne en dur

Ok, juste au cas ou voilà comment je fais mes tests :

test 1 :

test 2 :

test 3 :

Bonne fin de soirée :wink:

1 « J'aime »

je vais creuser
merci
bonne soirée aussi