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

Bonjour a tous,

Avant les dernières mises a jour,j’avait mes icônes qui changeait de couleur au grès des différent états de mes capteurs,mais depuis plus rien.
Mes icônes changent bien d’états mais les couleurs restent toutes bleu,et la couleur c’est plus sympa!!

On ma donné ce lien :GitHub - Mariusthvdb/custom-ui: Adapted Custom-ui for HA 110+

J’ai tenté de reproduire un peu ce qui est indiqué dedans,mais sans succès…toujours mes icônes bleus… :unamused:

Est ce que vos icônes sont toujours colorés?et si oui,est ce que quelqu’un peut m’aider a trouver ce qui ne fonctionne pas?

Merci d’avance!

Bonjour,

Depuis quelques versions (ici), les icônes ne changent plus de couleur.

As-tu la dernière version de CustomUI ? Car depuis les version HA110+, l’ancienne méthode (‹ extra_html_url ›) ne fonctionne plus correctement et sera bientôt obsolète.

Je viens juste de mettre a jour CustomUI depuis l’ancienne méthode vers la nouvelle et tout fonctionne.

Ce plugin est disponible dans HACS à condition d’ajouter le lien https://github.com/Mariusthvdb/custom-ui comme dépôt personnalisé.

Sinon sans HACS, voici ce que j’ai fait :

  1. Se rendre sur le dépot officiel qui a été donné au post1: CustomUI

  2. Cliquer sur le lien donné dans la partie Installing is super easy

  3. Quand vous êtes sur la page de Custom-UI.js, cliquez sur le bouton « RAW » pour afficher le contenu javascript. Vous devriez avoir ceci : Custom-UI_RAW

  4. Copier/coller ou enregistrer le fichier ( :warning: depuis le format RAW) dans votre dossier « www » de home assistant (ie: sur raspberry, cela donne « /home/homeassistant/.homeassistant/www/custom_ui/custom_ui.js » où j’ai rangé le module dans un dossier portant son nom)

  5. Depuis Home Assistant, se rendre à « Configuration » :arrow_right: « Tableaux de bord Lovelace » :arrow_right: puis Onglet « Ressources »

  6. Appuyer sur le bouton :heavy_plus_sign: en bas a droite de la vue puis renseigner :

Url: /local/custom_ui/custom_ui.js
Type de ressource: Module Javascript

:warning: Remarquez que le chemin « /home/homeassistant/.homeassistant/www/custom_ui/custom_ui.js » est devenu « /local/custom_ui/custom_ui.js » pour la simple raison que dans Home assistant la référence au dossier « www » se fait par « local »

  1. Vider le cache de votre navigateur (CTRL+SHIFT+R pour chrome et firefox)

  2. Ajoutez dans le fichier de configuration les lignes suivantes (si elles ne sont pas déjà présentes !) :

homeassistant:
  customize: !include customize.yaml
  1. Depuis un gestionnaire de fichier, ouvrir le fichier « customize.yaml » (seulement pour changer la couleur d’îcone selon l’état d’une ou plusieurs entités)
    9a. Renseigner une entité et sa couleur d’icône comme ceci:
     alarm_control_panel.alarme:
       templates:
         icon_color: if ( (state === 'armed_home') || (state === 'armed_away') ) return
           '#df4c1e'; else return '#0da135';
     switch.cuisine_lampes:
       icon_color: red

9b. Enregistrer et redémarrer Home Assistant

  1. Par Home Assistant, « Configuration » :arrow_right: puis tout en bas « Personnalisation », rechercher le « Nom » de l’entité dont vous voulez modifié la couleur d’icône, puis cliquer sur son « Nom » (J’insiste sur le « Nom » car si vous avez des customisations au niveau des ‹ friendly_name ›, vous pouvez vite ne pas retrouver l’entité car elle porte son « Nom » suivant son état.

  2. Dans la nouvelle vue, cliquer sur « Sélectionnez un attribut à remplacer » puis « Other »

  3. Dans les champs qui sont apparu, renseigner de la manière suivante :

Attribute name: icon_color
Attribute value: red

« Attribute value » peut prendre toutes les valeurs css (red, #f00, rgb(255,0,0), etc.)

  1. Cliquer sur le bouton « Save » et retourner sur la page lovelace, faite apparaître l’entité dont vous avez changé la couleur et profitez !

  2. Bonus:
    Voici quelque unes de mes customisations:

     #Suivant l'état de l'entité elle-même
     #
     sensor.tentative_de_connexion_failed:
       templates:
         icon_color: if (state === '0') return '#00ff00'; else return '#ff0000';
     ###############################################################################
 
 
     #Suivant l'état d'une autre entité
     #
     sensor.essence_carrefour_sp95_price:
       templates:
         icon_color: ' if (entities[''sensor.essence_sp95_best_price''].state === ''carrefour'')
           return ''#18c451''; '
     ###############################################################################
 
     #Suivant l'état de plusieurs entités
     #
     sensor.temperature_salon:
       templates:
         friendly_name: Température Salon
         icon: if (entities['input_select.chauffage_salon'].state === 'Off') return 'mdi:power';
           if (entities['input_select.chauffage_salon'].state === 'Eco') return 'mdi:weather-night';
           if (entities['input_select.chauffage_salon'].state === 'Confort') return 'mdi:fire';
           if (entities['input_select.chauffage_salon'].state === 'Hors-gel') return 'mdi:snowflake-alert';
           if (entities['input_boolean.heating_room_salon'].state === 'off') return 'mdi:weather-night';
           if (entities['input_boolean.heating_room_salon'].state === 'on') return 'mdi:fire';
           else return 'mdi:help-circle';
         icon_color: if (entities['input_select.chauffage_salon'].state === 'Off') return
           'darkgray'; if (entities['input_select.chauffage_salon'].state === 'Eco') return
           'forestgreen'; if (entities['input_select.chauffage_salon'].state === 'Confort')
           return 'orangered'; if (entities['input_select.chauffage_salon'].state === 'Hors-gel')
           return 'deepskyblue'; if (entities['input_boolean.heating_room_salon'].state
           === 'off') return 'forestgreen'; if (entities['input_boolean.heating_room_salon'].state
           === 'on') return 'orangered'; else return 'fuchsia';
     ###############################################################################
     	  
     #Renvoit la couleur qui est définie par le thème actuellement appliqué
     #
     sensor.volet_rue_position:
       templates:
         icon_color: return 'var(--primary-color)';
     ###############################################################################
4 J'aime

Merci pour ton taf! par contre chez moi aucun changement même après avoir suivi le process :frowning:

voici mon code sur customize.yaml :

 binary_sensor.water_leak_sensor_158d0002879c04:
      friendly_name: Niveau Max Clim
      icon: mdi:cup-water
      templates:
        icon_color: if (state === 'Humide') return '#fc030f'; else return '#ff0000';

t’as une idée?

merci par avance

Bonjour @Mara,

:warning: Attention à l’indentation dans les fichiers yaml. Dans le code que tu fournis, il y a un problème d’indentation.

et en mettant simplement (l’indentation du code est corrigée ci-dessous):

binary_sensor.water_leak_sensor_158d0002879c04:
  friendly_name: Niveau Max Clim
  icon: mdi:cup-water
  icon_color: red 

est-ce que binary_sensor.water_leak_sensor_158d0002879c04 à son icône rouge dans une carte entités (pas la carte entité sans s) ?

Non toujours pas malgré la modif :
image
image

Alors qu’elle devrait maintenant l’avoir pas défaut selon la nouvelle config, non?

L’icône par contre est prise en compte ?

Oui et elle est une icone officielle de google.

Dois-je supprimer une ressource obsolète de custom_UI qui ferait conflit?

C’est exactement ça !

Efface tout ce qui concerne l’ancienne integration.

Et refait la manip que j’ai expliqué.
:warning: il faut copier le fichier téléchargé au format RAW.

Si la source n’est pas RAW, ca ne marchera pas.

Concernant les icônes, elles se trouvent ici :
https://materialdesignicons.com/

Ensuite, pour approfondir, il y a dispo sur HACS plusieurs integrations d’icônes (font-awesone par exemple)

Merci pour ton aide! j’ai déjà materialdesignicons.
Que contient ton repertoire \custom_ui hormis ton script custom_ui.js? tout l’ancien contenu? du coup je ne sais même pas quoi supprimer tant c’est une usine à gaz :grimacing:

Je n’ai rien d’autre dans mon dossier mis a part le custom_ui.js

Et dans la console de l’explorateur vois tu :

image

?

As tu bien ajouté le module javascript dans les ressources de ton dashboard ?
image

1 J'aime

T’es au top! grâce à la console j’ai pu identifier une faute de frappe sur le nom de mon script (le gros lourd) :sleepy:

Merci à toi :wink:

Heureux que cela fonctionne.

Tu vas peut-être pouvoir m’aider pour un dernier petit détail, en fait j’aimerais mettre une icone + y ajouter une couleur mais ça me met une icone par défaut. Vois tu une erreur dans mon code?

EDIT: en fait c’est bon pour l’icone mais la couleur reste toujours verte même après avoir vidé le cash. Pourtant quand la valeur est sur ‹ humide › elle est censé être de couleur rouge, tu vois où j’ai pu foirer?

binary_sensor.water_leak_sensor_158d0002879c04:
  friendly_name: Niveau Max Clim
  templates:
    icon_color: >
      if (state === 'Humide') return '#f7735c';
      return '#74ed86';  
    icon: >
      if (state === 'Humide') return 'mdi:cup-water';
      return 'mdi:cup-water';

Supprimer le >, c’est lui qui pose problème (également pour icon)

binary_sensor.water_leak_sensor_158d0002879c04::
  friendly_name: Niveau Max Clim
  templates:
    icon_color: 
      if (state === 'Humide') return '#f7735c';
      return '#74ed86';  
    icon: 
      if (state === 'Humide') return 'mdi:cup-water';
      return 'mdi:cup-water';
          return 'mdi:cup-water';

:warning: Ton icône sera constamment mdi:cup-water.

ça ne change absolument rien, j’ai même simplifié le code testé sur d’autres entités comme les portes , fais des copier/coller de tes exemples et rien n’y fait, la couleur reste celle définit par défaut comme ci-dessous (alors que j’ai défini l’ouverture sur la couleur rouge) :
image

je continue à gratter… merci quand même pour ton aide :slight_smile:

Dans ton code je vois === ''Ouvert , il faut mettre ce qu’ il y a dans la partie outils de développement . C’est ici que tu vois les valeurs des capteurs.

Lovelace affiche ‹ ouvert › mais l’état du capteur est simplement on, derrière c’est Lovelace qui transcrit.

Mais si tu met simplement return red; et return 'mdi:home' cela fonctionne ? (toujours sous la balise template:)

Et tu vérifie bien dans une carte entités ?

  • Oui c’est bien une carte entités
  • regarde:
    image
  • oui avec des simples return cela fonctionne mais ce sont les transitions de couleurs qui ne fonctionnent pas.

Tu as laissé === Ouvert met plutôt === 'on'

1 J'aime