Nouveaux badges et couleurs icones (card_mod)

Bonjour à tous,

Qui aurait trouvé svp, le code card_mod pour modifier la couleur de l’icône des nouveaux badges basée sur l’état, la carte: type: entity ?

Par exemple pour la carte TILE c’est :

card_mod:
  style: |
    ha-tile-icon {
        {% if states(config.entity)|float(0) >= 98.8 %}
          --tile-color:var(--green-color);
        {% elif states(config.entity)|float(0) > 96 %}
          --tile-color:var(--light-blue-color);
        {% elif states(config.entity)|float(0) > 88%}
          --tile-color:var(--amber-color);
        {% elif states(config.entity)|float(0) > 60 %}
          --tile-color:var(--orange-color);
        {% elif states(config.entity)|float(0) <= 60 %}
          --tile-color:var(--red-color);
       {% endif %}
    }

Pourquoi tu n’utilises pas un mushroom template ?
Pas besoin de card mod avec.

Car les nouveaux titres de sections ont des badges possibles sur la meme ligne

1 « J'aime »

Ok je n’avais pas compris que tu parlais des nouveaux headers.
Aucune idée je n’est pas encore regardé ni fait la maj.

Salut @herveaurel

Un truc du genre peut-être ?

type: heading
icon: mdi:fridge
heading_style: subtitle
heading: test
badges:
  - type: entity
    entity: sensor.date
card_mod:
  style: |
    .content.subtitle > ha-icon {
      color: red;
    }

Excellent… mais je cherche pour la partie droite, les badges ! :laughing:

alors ça :

type: heading
icon: mdi:fridge
heading_style: subtitle
heading: test
badges:
  - type: entity
    entity: sensor.date
card_mod:
  style: |
    :host {
      --icon-color: red !important;    
    }

Hélas non, le but étant d’avoir un template personnalisé sur chaque entité, si j’ai 3 entités de badge, il me faut pouvoir les séparer.


Mais je vais finir par passer par Custom UI car je n’y arrive pas

Bon j’ai trouvé ça sur le net :

type: heading
icon: mdi:fridge
heading_style: subtitle
heading: test
badges:
  - type: entity
    entity: sensor.date
  - type: entity
    entity: input_number.color_print_count
card_mod:
  style:
    .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
      ha-heading-badge {
        --icon-color: red;
      }
    .badges hui-heading-badge:nth-child(2) hui-entity-heading-badge $: |
      ha-heading-badge {
        --icon-color: green;
      }   

la source

1 « J'aime »

Merci ! J’avais cherché pourtant !!!
Pas super pratique mais ca va me dépanner pour quelques entités !!!

card_mod:
  style:
    .badges hui-heading-badge:nth-child(5) hui-entity-heading-badge $: |
      ha-heading-badge {
        {% if states('input_boolean.reveils') == 'on' %}
          --icon-color: dodgerblue;
        {% else %}
          --icon-color: ;
       {% endif %}
      }

J’avoue, ce n’est pas trop optimisé :confused:

Surtout que « card mod » peut engendrer quelques longueurs dans le chargement des pages depuis quelque temps.

1 « J'aime »

J’ai tout abandonné pour passer au max en cartes natives ou au pire légèrement de mushrrom, mais j’ai 2-3 bricoles où j’ai encore besoin de personnalisation.
Mon lovelace est passé de 19000, à 9000 lignes donc… Ca va !
J’ai tres peu de codage maintenant.

Bonjour,
pourquoi utiliser card_mod ?
Ah, pour des couleurs suivant l’état :wink:
Mal réveiller encore …


type: heading
heading: Salon
heading_style: title
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.lywsd03mmc_0945_temperature
    color: red

edit:
Si , j’étais bien réveillé :joy:

  - type: entity
    show_state: true
    show_icon: true
    entity: light.0x00158d0002e75493
    color: dodgerblue
    tap_action:
      action: toggle


1 « J'aime »

Oui, pour la plupart ! Mais…

Tu gères comment pour un sensor template, par exemple :

  • mon compte à rebours du nombre de jour restants avant de sortir la poubelle, quand 0, icône de la couleur de la poubelle…
  • Ou bien « group.reveil » dont l’état est toujours « unknow » car les entités sont trop complexes mais malgré tout je veux que l’icône change de couleur basé sur l’état d’un input…
  • Ou bien le sensor de la RAM utilisée, que je veux rouge si + de 70%…
    :laughing:

Vu comme ça, c’est sûr. À part passé par card_mod, pas trop le choix.

Je me suis basé sur ton exemple, pensant que c’était l’entité du badge :

Voilà, donc j’utilise la méthode card_mod quand pas le choix, sinon j’ai déja tout passé en color: state bien évidemment !

Ayant tout abonné au profit de maximum de carte natives, mon nouveau tableau de bord, grace a HA qui évolue très bien, ressemble à ceci, avec ces nouveaux headers que j’aime beaucoup !

J’ai tester avec Custom-ui, pour eviter card_mod, mais ca ne fonctionne pas. Les couleurs des icônes, ne fonctionnent pas. :frowning:
je vais ouvrir une issue, voir si le dev peut corriger ca.

Ah ! Chez moi ca fonctionne pourtant… Je pensais même prendre le temps de tout enregistrer dans Customize.yaml pour me prendre encore moins la tete, surtout si le sensor doit se retrouver sur plusieurs pages, ca evite la répétition du code card_mod…

T’as fait quoi pour que ça fonctionne ?

    binary_sensor.0x00158d0007ef4edc_contact:
      friendly_name: Porte Entrée
      templates:
        icon_color: >
          if (state == 'on') return '#ff0000';
          return '#00b300';
        icon: >
          if (state == 'on') return 'phu:panel-glass-door2-open';
          return 'phu:panel-glass-door2-close';

L’icône change bien, mais je n’ai pas les couleurs.

Non ! J’enregistre les états icônes et couleurs icônes dans le fichier customize.yaml :wink: