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

Bonjour WarC0zes,

Tout d’abord merci pour vos réponses rapide, ca me fait vraiment plaisir.

J’ai vraiment du mal a comprendre pourquoi parfait on doit mettre des |, ou des |>; ou alors meme des >-

Il en va de meme pour les balise {%, qui parfois doivent etre comme ca {%-. C’est très mystérieux pour moi.

En tout cas merci beaucoup pour l’exemple, mais ca ne donne rien… Je continue a triturer dans tout les sens voir ce que ca donne, mais pour l’instant pas grand chose ;/

type: custom:mushroom-entity-card
entity: switch.shellyplus1_b8d61a854d70_switch_0
tap_action:
  action: toggle
icon: |
  {%- if is_state('binary_sensor.exterieur_garage_contact','off') -%}
        mdi:garage
  {%- else -%}
        midi:garage-open

J’ai aussi essayé pour icon-color, c’est pareil.

binary_sensor.exterieur_garage_contact existe bien et est a l’état off.



Ta oublier la balise de cloture {% endif %} et respecte bien les espaces.
Essaye comme ca:

avec {%- xxxxx -%} c’est pour le multiligne ( option multiline_secondary: true). Pour simple ligne {% xxxxx %}.

Edit:
j’ai corriger le mdi:garage-open

Merci WarC0zes.

Bon, c’est pas mieux, j’ai le même résultat.

En tout cas merci pour les explications, je vais creuser et je ferais un retour ici si je trouve la bonne formule :wink:

j’avais pas fait attention, c’est mdi:garage-open

Edit:
j’ai tester chez moi et ca fonctionne pas aussi. Faut passer par la carte mushroom-template-card et pas mushroom-entity-card.

T’es mon sauveur, ca fonctionne bien pour moi aussi :wink: :wink:

je vais faire pareil pour afficher une couleur différente en fonction de l’état etc…

Encore merci! @WarC0zes

1 « J'aime »

Pour le moment je n’ai pas encore trouvé de solutions qui fonctionnent.

Merci en tout cas o ceux qui ont pris le temps de répondre.

Si je trouve la solution je la posterai ci. Quoiqu’il en soit j’ai tout de même, encore, beaucoup appris sur HA.

Tu utilises le mauvais type de mushroom pour faire ce que tu veux.

@WarC0zes l’a précisé plus haut :

Oui, effectivement j’utilisais le mauvais type de mushroom card.
J’ai essayé avec avec template sans succès. Probablement par ma faute, mais je n’ai pas encore identifié l’erreur en question…

Je regarde et je fouille à droite et à gauche pour tenter de mieux comprendre et surtout trouver une solution.

Je remarque que lorsque je fixe des conditions, en l’occurrence le pourcentage de batterie de ma voiture, c’est toujours la dernière condition, par défaut qui est prise en compte. Cela voudrait dire que je n’ai pas correctement définie la valeur de test, dans cet exemple « <60 ». J’ai essayé « <60% » et « <60 % », mais sans succès…

type: custom:stack-in-card
cards:

  • type: custom:mushroom-template-card
    primary: Tesla
    secondary: ‹ {{ states(« sensor.titine_battery ») | round(0) }} % ›
    icon: ‹ {{ ‹ ‹ mdi:battery-10 › › if is_state(entity, ‹  ›< 60 ›‹ ) else ‹ ‹ mdi:battery-90 › › }} ›
    entity: sensor.titine_battery
    tap_action:
    action: null
    navigation_path: null
    hold_action:
    action: null
    icon_color: ‹ {{ ‹ ‹ red › › if is_state(entity, ‹  ›< 60 ›‹ ) else ‹ ‹ green › › }} ›
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
    style: |
    :host([dark-mode]) {
    background: rgba(var(–rgb-primary-background-color), 0.2);
    }
    :host {
    background: rgba(var(–rgb-primary-text-color), 0.025);
    –mush-icon-size: 150px;
    height: 66px;
    margin-left: -18px !important;
    }

Capture d’écran 2023-03-11 à 14.56.56

Bonjour,

Je n’arrive pas malgré tous les exemples présentés ci-dessus, à changer la couleur de mon icône en fonction d’une valeur de mon sensor.

Mon « sensor.linky_periode_tarifaire_en_cours » prend des valeurs de type HPJB, HCJB, etc., en fonction des jours et heures.
J’aimerais que sa couleur soit en adéquation avec chaque valeur reçue.

linky

Voici le code de la Card :

type: vertical-stack
cards:
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: none
    entity: sensor.linky_periode_tarifaire_en_cours
    name: Couleur du Jour
    show_state: true
    icon_height: 75px
    hold_action:
      action: none
    icon: mdi:calendar-month-outline
  - show_name: true
    show_icon: true
    show_state: true
    type: glance
    entities:
      - entity: sensor.linky_couleur_du_lendemain
      - entity: sensor.linky_puissance_apparente
      - entity: sensor.linky_intensite_instantanee
    state_color: true
    theme: Github Dark Theme
title: Linky

Si vous avez une solution à mon problème, un grand merci par avance.
A bientôt,

Bonjour,
avec card-mod tu peu faire ca pour la carte glance ta plein d’exemple ici

Par contre la carte button, je te conseille de passer par la carte button-card qui peu être personnaliser dans tout les sens comparé a button.

Ta un sujet dessus [CARTE] Button-Card

Bonjour WarC0zes,

Merci pour ces infos mais je rencontre quelques difficultés à utiliser button-card. Une fois installé par HACS, lorsque je le sélectionne comme Carte, il ne m’affiche aucun éditeur visuel. C’est normal ?
D’ailleurs, je n’ai vraiment pas compris si je devais ajouter quelques lignes de code dans le fichier « configuration.yaml » et si oui quelles lignes de code.
Merci de ton aide.
A+

Pour info : je débute sur Home Assistant et j’ai réussi à reproduire mes automations d’avant. Je cherche maintenant à optimiser ma domotique avec la puissance de Home Assistant.

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 …

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

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.

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

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 %}

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

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