Changer la couleur d'une icône en fonction d'une valeur de sensor

Entraide Home Assistant
21

Oui, ta pas de mode d’Edition par UI. C’est quand YAML. Après ta plein d’exemple sur le github et sur le forum ( les liens que je t’es mis)

Quel ligne de code ?
le configuration.yaml, tu y met pas du code pour des cartes. C’est seulement pour la configuration de HA, ou des intégrations ( ou la configuration est par yaml), ou des sensors ou des templates …

22

Ok, je comprends mieux.
je vais essayer de creuser button-card avec tous les exemples présents sur le forum.
Merci à toi.

23

La base de button-card:

type: custom:button-card
entity: switch.ac
name: Air
icon: mdi:air-conditioner
color: rgb(28, 128, 199)

après ta plein d’options possible a ajouter.

24

Merci pour ton aide.
Je vais m’y pencher rapidement.

25

Bonjour,
un petit retour à l’envoyeur car ce tuto m’a grandement aidé pour parvenir à changer la couleur de mon icone en fonction de la température et voici ce que j’ai notamment dû faire :
le « entity » doit être déclaré juste en dessous de « type » sinon il n’affiche rien
je déclare le type d’icon avec « icon: mdi:thermometer »
pour la couleur icon_color : |
il prend une des différentes valeurs selon la condition (if … elif …)

Je pourrrais refaire la même chose pour changer le type d’icone avec :
icon : |
puis au lieu dans mes conditions de mettre les couleurs (red orange green blue) je mettrais ( mdi:thermometer mdi:thermometer-alert etc.)
Voilà, en espérant que cela puisse vous aider.

  - type: custom:mushroom-template-card
    entity: sensor.0x00158d0003226bc1_temperature
    primary: SAM
    secondary: '{{states ("sensor.0x00158d0003226bc1_temperature")}} °C'
    icon: mdi:thermometer
    icon_color: |
      {% if states('sensor.0x00158d0003226bc1_temperature') | float > 25 %}
      red
      {% elif states('sensor.0x00158d0003226bc1_temperature') | float > 23 %}
      orange
      {% elif states('sensor.0x00158d0003226bc1_temperature') | float > 20 %}
      green
      {% else %}
      blue
      {% endif %}
26

Bonjour Campashi,

il me semble que tu n’utilises pas les bonnes conditions : il faut à mon sens que tu indiques : si pourcentage batterie compris entre 0 et 20 % alors telle couleur pour l’icone mais si pourcentage batterie compris entre 21% et 40% alors telle couleur pour l’icone, etc.
C’est à mettre en forme et là, je ne suis pas au point (ça donnerait ça en VB)
if state >= 0% and state < 20 % then …
elseif state >= 20% and state < 40% then …
elseif state >= 40% and state < 60% then …
…
endif

27

Voici un exemple ou je change la couleur et l’icone suivant plusieurs condition, si ca peut aider , …

type: custom:button-card
show_name: false
show_icon: true
name: Chargeur Vélo
tap_action:
  action: toggle
hold_action:
  action: call-service
  service: switch.turn_off
  service_data:
    entity_id: switch.chargeur_velo
  data: {}
double_tap_action:
  action: call-service
  service: switch.turn_on
  service_data:
    entity_id: switch.chargeur_velo
  data: {}
entity: switch.chargeur_velo
icon: |
  [[[ 
    if (states['switch.chargeur_velo'].state == "off") return "mdi:bicycle-electric";
    else if (states['switch.chargeur_velo'].state == "unavailable") return "mdi:battery-alert";
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 121) return "mdi:battery-charging-high" ;
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 119) return "mdi:battery-90" ;
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 116) return "mdi:battery-80" ;
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 112) return "mdi:battery-70" ;
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 110) return "mdi:battery-60" ;
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 107) return "mdi:battery-50" ;
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 104) return "mdi:battery-40" ;
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 100) return "mdi:battery-charging-low" ;
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 90) return "mdi:battery-charging-outline" ;
    return "mdi:battery-charging-high" ;
  ]]]
label: |
  [[[ 
    if ((states['switch.chargeur_velo'].state == "off") && (states['input_boolean.charger_velo_hc'].state == "on") ) return "Ce soir ...";
    else if ((states['switch.chargeur_velo'].state == "off") && (states['switch.chargeur_velo'].state == "off") ) return "Off";
    else if (states['switch.chargeur_velo'].state == "unavailable") return "Unavailable";
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 112) return states['sensor.chargeur_velo_power'].state + 'W ' + Math.round(states['sensor.chargeur_velo_power'].state* 2.8 - 250 ) + '~ %' ;
    else if (parseInt(states['sensor.chargeur_velo_power'].state) >= 90) return states['sensor.chargeur_velo_power'].state + 'W ' + Math.round(states['sensor.chargeur_velo_power'].state* 2.9 - 260 ) + '~ %' ;
    return states['sensor.chargeur_velo_power'].state + 'W Nearly Full' ;
  ]]]
show_label: true
styles:
  name:
    - font-size: 120%
  card:
    - height: 105px
  icon:
    - color: |
        [[[
          if (parseInt(states["sensor.chargeur_velo_power"].state) >= 120) return "red";
          else if (parseInt(states["sensor.chargeur_velo_power"].state) >= 110) return "orange";
          else if (parseInt(states["sensor.chargeur_velo_power"].state) >= 100) return "yellow";
          else if (parseInt(states["sensor.chargeur_velo_power"].state) >= 60) return "green";
          else if (states['input_boolean.charger_velo_hc'].state == "on") return 'green';
          return "grey";
        ]]]