Changer l'icone en fonction de l'état d'une entité dans le dashboard

[Tidjy]

Bonjour,

Mon problème

Je suis nouveau sur HA et aussi sur ce forum. Ca faisait un petit moment que je voulais faire passer ma domotique à un nouveau supérieur et j’ai découvert les joies de HA mais cela ne se fait donc pas sans passer par quelques difficultés. Trêve de blabla…

Je suis en train de mettre en place un dashboard. J’ai crée un groupe de lumières sur HA et son modèle qui me retourne en state le nombre de lumières allumées. Ca fonctionne. Cependant en ajoutant cette entité dans une carte de type tuile de mon dashboard, j’ai visiblement pas moyen de changer l’icone ni sa couleur en fonction du state de mon groupe de lumières.

type: tile
entity: sensor.lumieres_allumees
name: Lumières ON
icon: >-
  {% if (states(entity) > 0 %} # si au moins 1 lumière allumée
    mdi:lightbulb-on
  {% else %}
    mdi:lightbulb-off
  {% endif %}

Je m’attendais à ce que ça fonctionne mais ce n’est pas le cas. J’ai toutes les infos que je veux mais pas d’icon qui apparait. J’ai vu qu’il existe des modules via HACS qui me permettrait de faire ce que je veux mais je suis un puriste sur l’utilisation des fonctionnalités core de HA plutôt que d’ajouter des modules de la communautés à droite et à gauche du simple fait qu’une MAJ de HA peut tout casser si le module communautaire n’est plus maintenant. Donc ma question est : Il y a t-il une solution native ou les devs de HA proposera t-il ce genre de fonctionnalité dans le futur ?

Sinon je suis surpris que ça ne soit pas une fonctionnalité de base dans HA.

Merci.

[WarC0zes]

Bonjour,
ce n’est pas disponible pour la carte tuile. Tu es obligé de passer par la carte card-mod, si tu veux modifier le CSS.
Ou la possibilité avec la carte mushroom template.
Ou avec custom-ui, qui permet de faire des template sur une entité pour l’icone et la couleur de l’icone.

Changer l'icône d'une entité à partir de son état

Bonsoir, je m’adresse à vous ce soir car je n’arrive pas à changer l’icône de mon entité en fonction de la valeur du sensor qui est un pourcentage, j’utilise cette icône pour m’indiquer l’espace qui me reste sur mon volume de NAS dans le menu déroulant. J’ai essayé avec la condition IF dans le fichier customize.yaml mais cela ne m’affiche pas l’icone. Voici le code que j’ai essayé : sensor.sga4nrb9d_volume_1_volume_utilise: show_last_changed: true templates: icon : >- {% if (sta…

Pas de solution native. Mais tu as peu de risque que card-mod ou mushroom soit cassé par une maj de HA. Au pire ca sera fixé assez vite.
Moi je suis un puriste des cartes additionnelles , sinon c’est trop limité pour moi
Peu être une carte tuile template dans le futur, comme le dev est celui de mushroom.

Sinon, pour le changement de couleur suivant un état, tu as ca en natif. Il faut passer par un thème

Home Assistant frontend

exemple:

frontend:
  themes:
    my_theme:
      state-binary_sensor-door-off-color: green
      state-binary_sensor-door-on-color: red

[Tochy]

Salut
Si tu as créé un groupe de lumières, normalement lorsque une lumière est à ON le groupe passe à ON

En utilisant une carte tuile pour le groupe l’icône devrait être grisée si groupe à OFF et de couleur si groupe à ON.

As tu besoin qu’en plus l’icône change entre on et off ?

[Tidjy]

@WarC0zes merci bon à savoir pour la création de template pour la couleur des l’icone.

@Tochy L’entité de la tuile c’est pas exactement le groupe de lumières mais le nombre de lumières allumées dans ce groupe. Ainsi le state ne me retourne pas « on »/« off » mais le nombre de lumières allumées (0, 1, 2, etc…).

Mais oui, j’ai besoin de changer l’icone en fonction du nombre de lumières allumées. Du coup j’ai essayé card-mod mais sans résultat :

type: tile
features_position: bottom
entity: sensor.lumieres_allumees
name: Lumières ON
card_mod:
  style: |
    :host {
        {% if (states(entity)|int > 0) %}
          --card-mod-icon: mdi:lightbulb-on
        {% else %}
          --card-mod-icon: mdi:lightbulb-off
        {% endif %}
    }

L’icone est celle par défaut de l’entité mais impossible de la faire changer.

[WarC0zes]

un exemple :

type: tile
features_position: bottom
entity: sensor.lumieres_allumees
name: Lumières ON
card_mod:
  style: |
    ha-card {
      {% if states(config.entity)|int(0) > 0 %}
       --card-mod-icon: mdi:lightbulb-on;
      {% else %}
       --card-mod-icon: mdi:lightbulb-off;
      {% endif %}
    }

mais un groupe de lumière c’est on/off, le code serait comme telle :

type: tile
features_position: bottom
entity: sensor.lumieres_allumees
name: Lumières ON
card_mod:
  style: |
    ha-card {
      {% if states(config.entity) == 'on' %}
       --card-mod-icon: mdi:lightbulb-on;
      {% else %}
       --card-mod-icon: mdi:lightbulb-off;
      {% endif %}
    }

Pour la couleur de l’icone:

type: tile
features_position: bottom
entity: sensor.count_lumieres_rdc
name: Lumières ON
vertical: false
card_mod:
  style: |
    ha-card {
      {% if states(config.entity)|int(0) > 0 %}
       --card-mod-icon: mdi:lightbulb-on;
       --tile-color: yellow !important;
      {% else %}
       --card-mod-icon: mdi:lightbulb-off;
       --tile-color: grey !important;
      {% endif %}
    }

[Tidjy]

Merci, ça marche !

type: tile
features_position: bottom
entity: sensor.lumieres_allumees
name: Lumières ON
vertical: false
card_mod:
  style: |
    ha-card {
        {% if (states(config.entity)|int > 0) %}
          --card-mod-icon: mdi:lightbulb-on;
          --tile-color: var(--amber-color) !important;
        {% else %}
          --card-mod-icon: mdi:lightbulb-off;
          --tile-color: var(--grey-color) !important;
        {% endif %}
    }

J’ai aussi testé Mushroom Templates et c’est beaucoup plus simple je trouve. Cela dit je trouve Mushroom Templates permet de créer de nouveaux types de cartes alors que card mod se limite à la stylisation des cartes. Donc j’hésite sur quoi parti pour ce genre de customisation. En faite pour modifier le style des éléments d’une carte card mod est plus approprié et sans doute moins lourd en terme d’utilisations de ressources.

Aussi pour card mod je n’ai pas trouvé où récupérer la liste complète des propriétés disponibles comme « –card-mod-icon » par exemple.

[herveaurel]

Je suis plus adepte du 100% natif, et j’essaie de me passer des surcharges.
Avec la carte Tile, il suffit de jouer avec le paramètre Visibility pour que la bonne carte s’affiche au bon moment.
Exemple avec ma conso électrique :

Sur le tableau de bord :

Même logique pour les sondes de températures, je veux icon bleu si inférieur a 19, et rouge si supérieur a 24, j’ai donc tout ceci :

Le tableau de bord :

[Tidjy]

D’accord, j’aime bien l’idée. Je me pose quand même la question de la performance. J’ai une 20taine de capteurs à implémenter dans mon tableau de bord, sur une même vue. Je suppose que plus il y a de conditions pour afficher tel ou tel carte, plus il y a de la ressource consommée. Etant sur un Raspi 5 de 8go j’essaie d’anticiper dés maintenant. Ca va pas être facile de tout changer vers une notre solution de cartes si ça fini par bugguer. Du coup ma question est de savoir si ton tableau charge plus lentement ? Est ce que tes cartes s’affichent correctement de suite ?

[herveaurel]

Depuis que j’ai stoppé les custom pour du natif, t’imagine même pas comment ça tourne beaucoup mieux ! RPI 4…

[Tidjy]

Ok, je garde cette solution dans un coin. Ca fait pas mal de possibilités que je viens découvrir. Merci à tous de votre contribution

[WarC0zes]

@Tidjy

J’ai aussi testé Mushroom Templates et c’est beaucoup plus simple je trouve. Cela dit je trouve Mushroom Templates permet de créer de nouveaux types de cartes alors que card mod se limite à la stylisation des cartes. Donc j’hésite sur quoi parti pour ce genre de customisation. En faite pour modifier le style des éléments d’une carte card mod est plus approprié et sans doute moins lourd en terme d’utilisations de ressources.

Au contraire card-mod est un peu plus lourd, que mushroom template. Tout dépend ce que tu veux faire.
Changer l’icône, la couleur de l’icône, Mushroom template sera bien mieux. Pour le reste card-mod sera plus pousser dans la customisation.

@Tidjy

Aussi pour card mod je n’ai pas trouvé où récupérer la liste complète des propriétés disponibles comme « –card-mod-icon » par exemple.

GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

Tu as ce post qui regroupe des exemples de modification avec card-mod sur pas mal de carte :

🔹 Card-mod - Add css styles to any lovelace card

Et celui-là pour les cartes mushroom et card-mod:

Mushroom Cards Card Mod Styling/Config Guide

[Jeffodilo]

Et si tu veux cumuler mushroom template et card_mod pour avoir icône à ta façon (taille couleur, fond de shape…) + badge avec le nombre de lumières allumées voici un exemple modifiable à souhait

type: custom:mushroom-template-card
entity: light.lumieres_maison
icon: mdi:lightbulb-group
tap_action:
  action: navigate
  navigation_path: /dashboard-tablette/lumieres
secondary: ""
multiline_secondary: true
icon_color: >-
  {% if states('light.lumieres_maison') == 'on'%} yellow {% else %} white {%
  endif %}
primary: ""
badge_color: deep-orange
badge_icon: |-
  {% set on1 = states('sensor.nb_light_on') | int %} {% if on1 == 0 %}
    mdi:numeric-0
  {% elif on1 == 1 %}
    mdi:numeric-1
  {% elif on1 == 2 %}
    mdi:numeric-2
  {% elif on1 == 3 %}
    mdi:numeric-3
  {% elif on1 == 4 %}
    mdi:numeric-4
  {% elif on1 == 5 %}
    mdi:numeric-5
  {% elif on1 == 6 %}
    mdi:numeric-6
  {% elif on1 == 7 %}
    mdi:numeric-7
  {% elif on1 == 8 %}
    mdi:numeric-8
  {% else %}
    none
  {% endif %}
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: grey !important;
        --icon-symbol-size: 20px;
        --icon-size: 60px;
      }
    .: |
      ha-card {
        background: transparent !important;
        border: none;
        box-shadow: none;
      }
      ha-state-icon {
        --icon-symbol-size: 40px;
      }

[Tochy]

Salut
Comme ça, cela fera moins de ligne :

badge_icon: |-
  mdi:numeric-{{states('sensor.nb_light_on') | int}}

Pas sur de la syntaxe exacte mais je sais que ça fonctionne.

[Jeffodilo]

Je vais tester, ca semble prometteur, merci.
Top ça fonctionne

[Tochy]

Voilà ce que j’avais fait pour la batterie :

{% set pourcent = (states('sensor.victron_battery_soc')|int /10) |round(0) *10 %}
mdi:battery-{{pourcent}}

C’etait pour l’icon mais ça devrait le faire pour une badge_icon aussi

[Jeffodilo]

Salut,
Très intéressant aussi, je garde de côté, merci