Mushroom & Chips & icon_color

FROlCi · Mai 15, 2023, 3:35

Hello,

Je n’arrive pas à faire changer la couleur de l’icone dans une carte de type mushroom-chip (j’ai trouvé qques sujets ici et sur le site EN et… en reprenant à chaque fois les exemples donnés cela ne fonctionne pas pour moi):

type: custom:mushroom-chips-card
chips:
  - type: weather
    entity: weather.xxxx
    show_conditions: true
    show_temperature: true
  - type: entity
    entity: sensor.pollens_91_risklevel
    icon_color: >
      {% if states('sensor.pollens_91_risklevel') == '1' %}
        green
      {% elif states('sensor.pollens_91_risklevel') == '2' %}
        orange
      {% else %}
        red
      {% endif %}
alignment: justify

ce code dans la partie dev tools me retourne bien orange actuellement (j’ai aussi essayé avec states(entity…) mais pas plus de chance).

J’ai également forcé la valeur icon_color via une customization (customize.yaml):

sensor.pollens_91_risklevel:
  templates:
    icon_color: "if (state === '1') return 'green';
      if (state === '2') return 'orange';
      else return 'red';"

qui est bien pris en compte:

mais toujours rien

J’ai certainement loupé qque chose ou j’ai vraiment loupé qque chose ?
Merci pour vos lumières

Pulpy-Luke · Mai 15, 2023, 3:58

Salut,

type: entity c’est pas mushroom ça, c’est une carte de base HA.
Donc il faut passer par card_mod pour ajuster la couleur, pas par les templates

type: custom:mushroom-chips-card
chips:
  - type: weather
    entity: weather.xxxx
    show_conditions: true
    show_temperature: true
  - type: entity
    entity: sensor.pollens_91_risklevel
    card_mod:
      style: |
        ha-card {
          {% if states('sensor.pollens_91_risklevel') == '1' %}
            --card-mod-icon-color: green;
          {% elif states('sensor.pollens_91_risklevel') == '2' %}
            --card-mod-icon-color: orange;
          {% else %}
            --card-mod-icon-color: red;
          {% endif %}
        }

FROlCi · Mai 15, 2023, 4:08

Merci @Pulpy-Luke
A force de chercher et lire les forums EN j’ai trouvé comment faire avec les templates:

type: custom:mushroom-chips-card
chips:
  - type: weather
    entity: weather.xxxxxxx
    show_conditions: true
    show_temperature: true
  - type: template
    entity: sensor
    icon: mdi:alert-decagram-outline
    content: "Pollens: {{states('sensor.pollens_91')}}"
    icon_color: |
      {% if states('sensor.pollens_91_risklevel') == '1' %}
        green
      {% elif states('sensor.pollens_91_risklevel') == '2' %}
        orange
      {% else %}
        red
      {% endif %}
alignment: justify

Ce qui donne:

Donc 2 solutions pour le prix d’une

WarC0zes · Mai 15, 2023, 4:11

FROlCi:

J’ai également forcé la valeur icon_color via une customization (customize.yaml):
sensor.pollens_91_risklevel:
  templates:
    icon_color: "if (state === '1') return 'green';
      if (state === '2') return 'orange';
      else return 'red';"
qui est bien pris en compte:

image929×246 16.7 KB

mais toujours rien

Bonjour,
petite information:

Not all Lovelace cards are equal

Not all core HA cards use the same icon handling. Because of that custom-ui doesn’t work with

Thomas Loven’s Card-mod, which is an amazing plugin for Lovelace with many features, to the rescue.

EMqA · Mars 2, 2024, 8:25

Bonjour.
J’essaye de faire ce que je crois être sensiblement la même chose mais dans le contexte d’un dashboard « Mushroom Strategy ».
Le code, c’est pas si simple quand on débute.
Jusque là aucun de mes essais ne fonctionne. est-ce même possible ?

          - type: template
            entity: sensor
            icon: mdi:lightning-bolt
            content: 'auj: {{states(''sensor.edf_tempo_current'')}}'
            icon_color: |
              {% if states('sensor.edf_tempo_current') == 'BLEU' %}
                DodgerBlue
              {% if states('sensor.edf_tempo_current') == 'BLANC' %}
                silver
              {% if states('sensor.edf_tempo_current') == 'ROUGE' %}
                red
              {% else %}
                disabled
              {% endif %}
          - type: entity
            entity: sensor.edf_tempo_tomorrow
            icon_color: |
              {% if is_state('sensor.edf_tempo_tomorrow', 'BLEU' %}
                DodgerBlue
              {% if is_state('sensor.edf_tempo_tomorrow', 'BLANC' %}
                silver
              {% if is_state('sensor.edf_tempo_tomorrow', 'ROUGE' %}
                red
              {% else %}
                disabled
              {% endif %}

Tochy · Mars 2, 2024, 11:21

Salut
Regarde la structure du if dans icon_color 2 post plus haut

EMqA · Mars 3, 2024, 8:27

Merci pour l’indice. Ca fonctionne.
Il me manquait aussi le _ sur « card_mod ».

          - type: entity
            entity: sensor.edf_tempo_current
            card_mod:
              style: |
                ha-card {
                  {% if states('sensor.edf_tempo_current') == 'BLEU' %}
                    --card-mod-icon-color: DodgerBlue;
                  {% elif states('sensor.edf_tempo_current') == 'BLANC' %}
                    --card-mod-icon-color: silver;
                  {% elif states('sensor.edf_tempo_current') == 'ROUGE' %}
                    --card-mod-icon-color: red;
                  {% else %}
                    --card-mod-icon-color: disabled;
                  {% endif %}
                }

Edit : J’ai même fini par trouver un rendu qui me va mieux.
Capture d’écran 2024-03-03 à 17.07.23

          - type: template
            entity: sensor
            icon: mdi:flash
            content: J
            card_mod:
              style: |
                ha-card {
                  {% if states('sensor.edf_tempo_current') == 'BLEU' %}
                    --card-mod-icon-color: DodgerBlue;
                  {% elif states('sensor.edf_tempo_current') == 'BLANC' %}
                    --card-mod-icon-color: silver;
                  {% elif states('sensor.edf_tempo_current') == 'ROUGE' %}
                    --card-mod-icon-color: red;
                  {% else %}
                    --card-mod-icon-color: disabled;
                  {% endif %}
                }
          - type: template
            entity: sensor
            icon: mdi:flash-outline
            content: J+1
            card_mod:
              style: |
                ha-card {
                  {% if states('sensor.edf_tempo_tomorrow') == 'BLEU' %}
                    --card-mod-icon-color: DodgerBlue;
                  {% elif states('sensor.edf_tempo_tomorrow') == 'BLANC' %}
                    --card-mod-icon-color: silver;
                  {% elif states('sensor.edf_tempo_tomorrow') == 'ROUGE' %}
                    --card-mod-icon-color: red;
                  {% else %}
                    --card-mod-icon-color: disabled;
                  {% endif %}
                }

Tochy · Mars 3, 2024, 5:08

Logiquement si tu utilisent des mushroom chips template ce qui semble être le cas tu n’as pas besoin du card_mod pour la couleur d’icone :

type: custom:mushroom-chips-card
chips:
       - type: template
            entity: sensor
            icon: mdi:flash
            content: J
            icon_color: |-
              {% if states('sensor.edf_tempo_current') == 'BLEU' %}
                DodgerBlue;
              {% elif states('sensor.edf_tempo_current') == 'BLANC' %}
                silver;
              {% elif states('sensor.edf_tempo_current') == 'ROUGE' %}
                red;
              {% else %}
                disabled;
              {% endif %}

Ce code devrait fonctionner en mettant les bonnes indentation car la j’ai fait un peu à l’arrache