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

boobi · Juin 15, 2021, 8:03

De rien !

Pour information après la mise a jour de HA a la version supérieur d’aujourd’hui Home Assistant 2021.6.4, la prise en compte de mes modification ont bien été prise en compte :

J’en conclus qu’un redémarrer du serveur ne suffit pas ?

Clemalex · Juin 15, 2021, 10:06

En théorie, si…

Mais c’est ces petits comportements qui me font préférer card-mod…

boobi · Juin 16, 2021, 4:31

card-mod… je vais voir doucement je préfère y aller piano…

peps382000 · Juillet 1, 2021, 7:08

bonjour
je ne comprend pas comment on accède à la console de l’explorateur ?
Chez moi custom-ui ne fonctionne pas, j’ai suivi la procédure décrite au dessus et pas moyen de le faire fonctionner. Je suis à cours d’idées

Version	core-2021.6.6
Type d’installation	Home Assistant Supervised
Développement	false
Supervisor	true
Docker	true
Environnement virtuel	false
Version de Python	3.8.9
Famille du système d’exploitation	Linux
Version du système d’exploitation	5.10.17-v7+
Architecture du processeur	armv7l
Fuseau horaire	Europe/Paris

Clemalex · Juillet 1, 2021, 7:42

https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Open_the_debugger

peps382000 · Juillet 1, 2021, 8:01

merci pour cette réponse si rapide. Dans la console j’ai bien custom ui lancé

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 ›

Clemalex · Juillet 1, 2021, 9:36

@peps382000

Regarde par là en 1er

peps382000 · Juillet 1, 2021, 7:00

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

si je mets

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

ça ne fonctionne pas

Clemalex · Juillet 1, 2021, 8:38

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

Clemalex:

sensor.essence_carrefour_sp95_price:
       templates:
         icon_color: ' if (entities[''sensor.essence_sp95_best_price''].state === ''carrefour'')
           return ''#18c451''; '

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

peps382000 · Juillet 2, 2021, 6:48

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

Clemalex · Juillet 2, 2021, 10:40

Ici:

Clemalex · Juillet 2, 2021, 10:40

Ici:

Coben · Avril 16, 2023, 12:10

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

Stef_42 · Décembre 4, 2023, 2:07

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 ?

WarC0zes · Décembre 4, 2023, 3:03

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';

phil · Décembre 4, 2023, 5:27

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??

WarC0zes · Décembre 4, 2023, 6:00

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';

github.com

Mariusthvdb/custom-ui/blob/master/EXAMPLES.md#single-line-notation

# Some examples using custom-ui.

This is an excerpt of my own package, and can be used
directly if you copy it to your own homeassistant structure and activate packages. Of
course other methods work also, like pointing to a dedicated customize file, and
referencing that in your configuration.yaml

# Always use a guard (for unexpected states).
Of course this holds for Jinja templates in HA too...
The guard is used by setting the `else` clause, which in the examples below are on the
last lines, starting with 'return'. Dont need to use the word `else` itself, though it
will be valid if you do.

Lastly, remember to delimit the lines with a `;` .

Why use custom-ui? 2 huge reasons:

# Icon color

Setting a color for an icon is not possible in core HA. There is no attribute `icon_color` out of the box.

This file has been truncated. show original

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

Stef_42 · Décembre 4, 2023, 8:01

Master of solutions:

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';

Cela ne passe pas :

Pulpy-Luke · Décembre 4, 2023, 8:10

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:

Stef_42 · Décembre 4, 2023, 8:14

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 :