Changer Icon en fonction de l'état

Bonjour à tous

J’ai passé pas mal de temps pour chercher sur le Forum la possibilité de changer l’icon en fonction de son état MAIS j’avoue que je mis perd un peu.
Car tous mes essais sont infructueux …

C’est pourquoi je vous partage mon code et si vous pouvez me dire mon erreur

type: entities
title: PISCINE
icon: mdi:pool
show_header_toggle: false
entities:
  - type: divider
  - entity: switch.volet_piscine
    name: Volet
    show_icon: false
    icon: mdi:window-shutter
    style:
      hui-generic-entity-row:
        $: |
          state-badge  {
            color: green;
            {% set state=states('switch.volet_piscine') %}
            {% if state=='on' %}
            color: red;
            icon: mdi:window-shutter-open
            {% endif %}
          }
card_mod:
  style: |
    ha-card > h1 > div {
      color: black;
    }

    ha-card {
      --ha-card-background:  rgba(200,190,190,0.5);
      }

Avec OFF j’ai ceci

image

Avec ON j’ai ceci

image

tout fonctionne sauf l’icon volet n’est pas ouvert

Bonjour,

Pourquoi ne pas changer le switch en volet (cover) ?

Dans les paramètres de l’entité : « Afficher en tant que ».

L’entité switch.volet_piscine deviendra cover.volet_piscine. Vous devrez alors changer vos automatisations si jamais vous avez automatisé l’ouverture et la fermeture (en fait pas nécessaire car l’entité switch existera toujours mais sera cachée)

Bonjour,
tu peu customiser ton entité directement et tu n’aura plus besoin de la customiser dans t’es carte.

Avec GitHub - Mariusthvdb/custom-ui: Adapted Custom-ui for HA 110+ / HA 2021.6

Tu l’installe a partir de HACS.

Dans ton configuration.yaml tu rajoute c’est ligne en dessous de homeassistant: (si tu la pas créer le)

homeassistant:
  customize: !include customize.yaml

Redémarre home assistant.
Tu créer un fichier customize.yaml dans le répertoire /config
et tu ajoute ce code:

switch.volet_piscine:
  friendly_name: Volet Piscine
  templates:
    icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
    icon: "if (state === 'on') return 'mdi:window-shutter-open'; else return 'mdi:window-shutter';"

Ton entité aura la couleur verte sur fermer avec l’icone voler fermer et en rouge avec icone volet ouvert quand c’est ouvert.

Tu peu recharger le customize sans redémarrer HA, dans outils de développement et tu recharge emplacement et personnalisation

@WarC0zes

j’ai suivi tes instructions mais j’ai une erreur

peux-tu me dire pourquoi ?
Merci

Ta bien ajouter c’est ligne dans le configuration.yaml et redémarrer HA ?

oui

image

C’est une erreur de VSCode ? Si oui faut juste l’ignorer, elle disparaîtra dans une prochaine mise à jour

Voila , @Makai a trouvé pendant que je chercher lol. C’est un soucis de VSCode, edit avec autre chose pour le coup.

la je ne comprend : edit avec autre chose …

Hello

pour modifie les fichiers cela veux dire

installe ceci
https://notepad-plus-plus.org/downloads/

Ignore l’erreur, ou utilise File editor, ou edit avec notepad++ en samba ( partage réseau ) .

j’ai essayé avec une autre entité et la je n’ai pas d’erreur

Mais cela ne fonctionne as

image

mon code

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.0x00158d0008ce43da_temperature
    name: T° Référence
    show_state: true
card_mod:
  style: |

    ha-card {
      --ha-card-background:  rgba(200,190,190,0.5);
      }


???

Normal que ta pas d’erreur ton entité existe pas. Ta mis deux s a sensor. Faut pas ce focaliser sur l’erreur, c’est un bug de VSCode.

ssensor.0x00158d0008ce43da_temperature:  #ligne 7

Effectivement

avec la modification pas d’erreur mais toujours pas fonctionnelle

Tu vois les modifications que quand il y a un changement d’état ou redémarrer HA.

Bon j’ai redémarré HA mais toujours pas bon, une idée ???

je vois pas ce qui bloquerai. Seul chose que je vois différent de ma config, c’est l’emplacement de

homeassistant:
  customize: !include customize.yaml

qui ce trouve après t’es !include. essayer de mettre c’est partie avant ( comme dans ma capture ).

Chez moi, j’ai installer Custom-ui par HACS:

ajouter la ligne customize: !include customize.yaml dans le configuration.yaml:

créer un fichier customize.yaml dans /config. Puis ajouter les entités a modifier:

Une autre question

Tu as écrit plus haut, que je n’ai plus besoin de customiser dans les cartes !!
Alors je pense que l’écriture de mon code est certainement à revoir ??
Si oui peux-tu me donner un exemple

Merci

Faut supprimer la partie changement de couleur et d’icone.

Exemple a partir de ton code. Juste avec ce code, ton entité aura une icone et couleur différent suivant son état.

Avant:

type: entities
title: PISCINE
icon: mdi:pool
show_header_toggle: false
entities:
  - type: divider
  - entity: switch.volet_piscine
    name: Volet
    show_icon: false
    icon: mdi:window-shutter
    style:
      hui-generic-entity-row:
        $: |
          state-badge  {
            color: green;
            {% set state=states('switch.volet_piscine') %}
            {% if state=='on' %}
            color: red;
            icon: mdi:window-shutter-open
            {% endif %}
          }
card_mod:
  style: |
    ha-card > h1 > div {
      color: black;
    }

    ha-card {
      --ha-card-background:  rgba(200,190,190,0.5);
      }

Après:

type: entities
title: PISCINE
icon: mdi:pool
show_header_toggle: false
entities:
  - type: divider
  - entity: switch.volet_piscine
    show_icon: true
card_mod:
  style: |
    ha-card > h1 > div {
      color: black;
    }
    ha-card {
      --ha-card-background:  rgba(200,190,190,0.5);
      }

car tu a ce code dans customize:

switch.volet_piscine:
  friendly_name: Volet Piscine
  templates:
    icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
    icon: "if (state === 'on') return 'mdi:window-shutter-open'; else return 'mdi:window-shutter';"