Comment colorer ses icônes pour les débutants? #Tuto débutant N°1

merci pour cette réponse si rapide. Dans la console j’ai bien custom ui lancé
image
donc je vais regarder de plus pêt mon fichier customize.yaml. je voulais simplement faire un essai
switch.60053804840d8e63b569:
icon_color: if (entities[‹ switch.60053804840d8e63b569 ›].state === ‹ Off ›) return
‹ forestgreen ›

@peps382000

Regarde par là en 1er

j’avais bie mis ces 2 lignes dans le fichier configuration.yaml
Si je mets dans customize.yaml le code suivant:

switch.60053804840d8e63b569:
  icon_color: 'red'

ça fonctionne
image
si je mets

switch.60053804840d8e63b569:
  icon_color: if (entities['switch.60053804840d8e63b569'].state === 'off') return
           'red'

image
ça ne fonctionne pas

J’ai donné des exemples dans le post 2 :

Tu peux remarquer que tu n’as pas mis la balise templates

bonjour
Merci, ça fonctionne
mes erreurs
oubli du template, du cote avant le If et à la fin de la ligne et un problème d’indentation (là je ne comprend pas pourquoi je n’avais pas d’erreur du type bad indentation)
j’arrive maintenant à changer la couleur de l’icone et le friendly_name
est il possible de changer l’état par exemple « home » en « connecté »
encore un grand merci pour ton aide

Ici:

Ici:

Salut a tous,
Desolé pour le deterrage…
@Clemalex : J’ai bien suivit ton tuto et resussi a faire ce que je voulais, a savoir changer la couleur d’une icone en fonction de l’etat d’un autre sensor.
Voici mon code dans customize.yaml :

sensor.mode_thermostat_cuisine:
  templates:
    friendly_name: Température Cuisine
    icon: if (entities['sensor.mode_thermostat_cuisine'].state === 'Off') return 'mdi:power';
      if (entities['sensor.mode_thermostat_cuisine'].state === 'Eco') return 'mdi:weather-night';
      if (entities['sensor.mode_thermostat_cuisine'].state === 'Confort') return 'mdi:fire';
      if (entities['sensor.mode_thermostat_cuisine'].state === 'Hors-gel') return 'mdi:snowflake-alert';
      else return 'mdi:help-circle';
    icon_color: if (entities['sensor.puissance_thermostat_cuisine'].state === '0') return 'green'; else return 'red';

Cependant deux ou trois questions :

  • ce code fonctionne avec une carte « entitéS » mais pas « entité »
  • possible de faire la meme chose sur une carte mushroom? cela ne semble pas fonctionner…

le code suivant ne fonctionne pas, les icones changent mais pas la couleur, ce qui peut etre handicapant si la on a plus de 2 etats pour faire varier la couleur… :
(sensor.etat_thermostat_cuisine est un binaire)

sensor.mode_thermostat_cuisine:
  templates:
    friendly_name: Température Cuisine
    icon: if (entities['sensor.mode_thermostat_cuisine'].state === 'Off') return 'mdi:power';
      if (entities['sensor.mode_thermostat_cuisine'].state === 'Eco') return 'mdi:weather-night';
      if (entities['sensor.mode_thermostat_cuisine'].state === 'Confort') return 'mdi:fire';
      if (entities['sensor.mode_thermostat_cuisine'].state === 'Hors-gel') return 'mdi:snowflake-alert';
      else return 'mdi:help-circle';
    icon_color: 
      if (entities['sensor.etat_thermostat_cuisine'].state === '0') return 'green';
      if (entities['sensor.etat_thermostat_cuisine'].state === '1') return 'red';

Merci pour vos réponses

Hello,

J’ai une manip à faire dans le même style, à savoir, imposer à une icône la couleur et l’état en fonction d’autres entités. J’ai en effet mes volets en KNX et j’aimerais faire de la logique dans HA. Si mes volets du RDC sont ouverts alors je modifie l’icône « Volets du RDC » qui pilote tous les volets du RDC.

J’ai essayé cela mais cela ne fonctionne pas :

homeassistant:
  customize: 
    cover.volets_rdc:
      templates: 
        icon: if (entities['cover.cuisine'].state === 'closed') return 'mdi:window-shutter';
           if (entities['cover.volet_salon'].state === 'closed') return 'mdi:window-shutter';
           if (entities['cover.volet_baie_sejour'].state === 'closed') return 'mdi:window-shutter';
           if (entities['cover.volet_baie_salon'].state === 'closed') return 'mdi:window-shutter';
           if (entities['cover.volet_chambre_parentale'].state === 'closed') return 'mdi:window-shutter';
           if (entities['cover.volet_porte_buanderie'].state === 'closed') return 'mdi:window-shutter';
	   if (entities['cover.volet_fenetre_buanderie'].state === 'closed') return 'mdi:window-shutter';
           else return 'mdi:window-shutter-open';
    icon_color: if (entities['cover.cuisine'].state === 'closed') return 'white'; 
		if (entities['cover.volet_salon'].state === 'closed') return 'white'; 
		if (entities['cover.volet_baie_sejour'].state === 'closed') return 'white'; 
		if (entities['cover.volet_baie_salon'].state === 'closed') return 'white'; 
		if (entities['cover.volet_chambre_parentale'].state === 'closed') return 'white'; 
		if (entities['cover.volet_porte_buanderie'].state === 'closed') return 'white'; 
		if (entities['cover.volet_fenetre_buanderie'].state === 'closed') return 'white'; else return 'yellow';

Pouvez vous m’aider svp ?

Rajoute un > a icon: et icon_color:

cover.volets_rdc:
  templates:
    icon: >
      if (entities['cover.cuisine'].state === 'closed') return 'mdi:window-shutter';
      if (entities['cover.volet_salon'].state === 'closed') return 'mdi:window-shutter';
      if (entities['cover.volet_baie_sejour'].state === 'closed') return 'mdi:window-shutter';
      if (entities['cover.volet_baie_salon'].state === 'closed') return 'mdi:window-shutter';
      if (entities['cover.volet_chambre_parentale'].state === 'closed') return 'mdi:window-shutter';
      if (entities['cover.volet_porte_buanderie'].state === 'closed') return 'mdi:window-shutter';
      if (entities['cover.volet_fenetre_buanderie'].state === 'closed') return 'mdi:window-shutter';
      return 'mdi:window-shutter-open';
    icon_color: > 
      if (entities['cover.cuisine'].state === 'closed') return 'white'; 
      if (entities['cover.volet_salon'].state === 'closed') return 'white'; 
      if (entities['cover.volet_baie_sejour'].state === 'closed') return 'white'; 
      if (entities['cover.volet_baie_salon'].state === 'closed') return 'white'; 
      if (entities['cover.volet_chambre_parentale'].state === 'closed') return 'white'; 
      if (entities['cover.volet_porte_buanderie'].state === 'closed') return 'white'; 
      if (entities['cover.volet_fenetre_buanderie'].state === 'closed') return 'white';
      return 'yellow';

bonjour ,
en ce qui me concerne depuis une semaine ou deux et sans avoir modifié mon fichier customize, la couleur des mes volets en fonction de leur état (ouvert ou fermé) ne fonctione plus…
voici un extrait de mon code dans customize

######################personnalisation couleurs icones####################
cover.volet_bureau:
       templates:
         icon_color: >
           if (state === 'open') return '#ff0000'; else return '#009933';
        
         
cover.volet_salle_a_manger_2:
       templates:
         icon_color: > 
           if (state === 'open') return '#ff0000'; else return '#009933';
         

j’ai uniquement changé la couleur red en #ff0000 et green en ‹ #009933 › mais rien n’y fait…
qqun a une idée svp??

j’ai ca pour une lumière. Peu être le === a changer en == et enlever le else. Sinon regarder l’état des volet si ca pas changer, peu être plus open.

    icon_color: >
      if (state == 'on') return '#ff0000';
      return '#00b300';

Edit:
le === gène pas, mais plutot le else.

Cela ne passe pas :

Salut,

Comme souvent en yaml, les espaces sont importants !
Là entre templates: et icon tu en as facile 4 au lieu de 2

Pareil, là 7 espaces entre cover.volet_bureau: et templates: :crazy_face:

Merci je n’ai pas vu lors de ma copie que je n’avais pas pris « templates » avec…
Par contre j’ai un souci sur l’état avec ce code :


@ljleyoshi avait eu ce souci en 2021 mais pas de retour sur le problème.

Et ça ne marche pas :

Salut,
ta un soucis sur l’état de cover.volets_rdc, comme c’est en unknown , ca affiche rien normal.
Si je comprends, ta un groupe de volet , et l’entité du groupe tu veut faire changer l’icone qui englobe plusieurs entités?

Si tu mets un customize sur toute les entité du groupe au lieu de le faire sur l’entité du groupe. Ca devrais être bon je pense.

Bonjour Pulpy-luke,
merci de ton aide malheureusement cela ne fonctionne pas… voici un extrait de mon code

cover.volet_bureau:
  templates:
    icon_color: >
      if (state === 'open') return '#ff0000'; return '#009933';
        
         
cover.volet_salle_a_manger_2:
  templates:
    icon_color: > 
      if (state === 'open') return '#ff0000'; return '#009933';
         
cover.volet_salon_2:
  templates:
    icon_color: > 
      if (state === 'open') return '#ff0000'; return '#009933';

Je suis autodidacte sur home assistant et ce qui me déstabilise un peu c’est que, jusqu’à maintenant, même avec ces espaces en trop (encore merci, j’apprends encore qq chose), et bien cela fonctionnait parfaitement… du coup je tourne en rond

De ce qu’il me semble c’est qu’en KNX je n’ai pas de retour d’état pour cette adresse de groupe. Mais dans HA quand je l’utilise, j’ai bien "Ouvert " ou « Fermé ».


L’icône et la couleur fonctionnent bien seulement si j’utilise ce bouton « Volets RDC » pour ouvrir ou fermer les volets mais je voudrais justement mettre à jour ce bouton quand j’utilise les volets indépendamment.
On ne peut pas forcer l’icône et la couleur sur « Volets RDC » en fonction de tous mes volets concernés ?

En fait le souci c’est pas tellement que ça marche avec des erreurs, mais qu’à un moment donné, l’erreur à un impact et on sais pas faire le lien. Donc autant faire attention à écrire les yaml au mieux, pour éviter les déconvenues
Perso j’ai pas un === mais un ==

input_boolean.activation_chauffage:
  friendly_name: Chauffage
  templates:
    icon: |
      if (state == 'on') return 'mdi:radiator';
      return 'mdi:radiator-off';
    icon_color: >
      if (state == 'on') return 'red';
      return 'disabled';

Personnellement j’ai du mal à mettre un sens au status d’un groupe …
Par exemple un volet ouvert + un volet à 25% + un volet fermé, ça donne quoi ?

  • Ouvert ? un peu ouvert ?
  • Fermé mais pas trop ?
  • (100%+25%+0%)/3 ?
  • (100%+75%+0%)/3

Les seuls états valables sont open (tous ouverts) ou fermé (tous fermés) et donc se base sur l’état du groupe et pas sur l’état des composants du groupe comme tu l’écris à mon avis