Ajouter un "badge" à un icone en fonction du précédent état

[pcan]

Salut,

Je cherche à ajouter un « badge » qui serait un icone connu de HA sur l’icone d’une tile card en fonction de l’état précédent.

Un truc un comme ceci afin de donner une indication sur la tendance de l’évolution de l’état de l’entité dans la carte.

Exemple, ajouter comme badge l’icone (mdi:chevron-down-circle-outline) sur l’icone température de la carte si la température est en train de descendre, et son inverse (mdi:chevron-up-circle-outline) si la température augmente.

Je ne vois pas trop comment faire ça si ce n’est en utilisant card-mod, mais ensuite je sèche.
Merci d’avance pour votre aide

Edit: dans un premier temps, je voudrais simplement arriver à ajouter le badge, ce sera déjà pas mal.
Je chercherais ensuite comment récupérer l’état précédent pour réaliser le calcul qui permettra de changer le le badge.

[WarC0zes]

Bonjour,
sur la carte tile, le badge est afficher suivant la class de l’entité. Tu peut pas ajouter un badge manuellement.
Tu peut utiliser la carte Mushroom Template, qui permet de configurer un badge avec icone et couleur.

piitaya/lovelace-mushroom/blob/main/docs/cards/template.md

un exemple de @Herbs

Custom carte cover de mushroom / template

Salut @jerome6994 Je crois (selon la doc) que le badge ne peut contenir que des icônes, donc ça laisse une possibilité de tricher. On peut obtenir ça : [mush-badge] Avec ce code : type: custom:mushroom-template-card primary: Ouvrants secondary: | {% set all = expand('group.ouvrants')| list -%} {% set closed1 = all | selectattr('state','eq','off')|list|count%} {% set open1 = all | selectattr('state','eq','on')|list|count%} Fermés : {{closed1}} / ouverts : {{open1}} icon: | {% if is…

[pcan]

Merci @WarC0zes, côté rendu, c’est une bonne alternative car en plus ça rentre bien dans les grilles des vues sections.

Je vais passer à la suite et voir s’il est simple de changer le badge en fonction de l’état de l’entité pour commencer.

[WarC0zes]

Je t’es mis un exemple de @Herbs dans mon post précédent.

[pcan]

Salut,

J’avais laissé tout ça de côté pendant un moment, je m’y suis remis en utilisant mushroom-card, j’ai pas mal progressé, et ça donne un bon résultat bien que j’ai encore des choses à raffiner:

En revanche, les couleurs du thème ne sont pas correctement appliquées par rapport à tile-card de HA:

Pire, certaines couleurs telles que dodgerblue ne semblent pas prises en compte

Une idée ?
La carte est dans un dashboard configuré en mode yaml, et il est de type section.

Le code la carte:

- type: custom:mushroom-template-card
  primary: "{{ area_name(config.entity) }}"
  secondary: "{{ states(config.entity) }} °C"
  icon: mdi:thermometer
  entity: sensor.sensor_weather_terrasse_jardin_temperature
  tap_action:
    action: none
  hold_action:
    action: none
  double_tap_action:
    action: none
  icon_color: >
    {% set _temp = states(config.entity)|float(0.0) %}
    {% if _temp <= 10.0 %} lightblue
    {% elif _temp <= 15.0 %} lightskyblue
    {% elif _temp < 19.0 %} dodgerblue
    {% elif _temp <= 23.0 %} green
    {% elif _temp <= 25.0 %} orange
    {% elif _temp <= 29.0 %} red
    {% else  %} purple
    {% endif %}
  # icon_color: dodgerblue
  badge_icon: |-
    {% if is_state('binary_sensor.trend_temp', 'on') %} mdi:chevron-up-circle-outline
    {% elif is_state('binary_sensor.trend_temp', 'off') %} mdi:chevron-down-circle-outline
    {% else %} mdi:crosshairs-question
    {% endif %}
  badge_color: |-
    {% if is_state('binary_sensor.trend_temp', 'on') %} red
    {% elif is_state('binary_sensor.trend_temp', 'off') %} blue
    {% endif %}

[WarC0zes]

@pcan

En revanche, les couleurs du thème ne sont pas correctement appliquées par rapport à tile-card de HA

Oui, les couleurs de la carte mushroom sont différente de HA.

    # Colors
    mush-rgb-red: 244, 67, 54
    mush-rgb-pink: 233, 30, 99
    mush-rgb-purple: 106, 107, 201
    mush-rgb-deep-purple: 111, 66, 193
    mush-rgb-indigo: 63, 81, 181
    mush-rgb-blue: 33, 150, 243
    mush-rgb-light-blue: 3, 169, 244
    mush-rgb-cyan: 0, 188, 212
    mush-rgb-teal: 0, 150, 136
    mush-rgb-green: 76, 175, 80
    mush-rgb-light-green: 139, 195, 74
    mush-rgb-lime: 205, 220, 57
    mush-rgb-yellow: 255, 235, 59
    mush-rgb-amber: 255, 193, 7
    mush-rgb-orange: 255, 152, 0
    mush-rgb-deep-orange: 255, 111, 0
    mush-rgb-brown: 121, 85, 72
    mush-rgb-light-grey: 189, 189, 189;
    mush-rgb-grey: 158, 158, 158
    mush-rgb-dark-grey: 96, 96, 96;
    mush-rgb-blue-grey: 96, 125, 139
    mush-rgb-black: 0, 0, 0
    mush-rgb-white: 255, 255, 255

Je me suis fais un thème, en changeant les couleurs.

  #mushroom color
  mush-rgb-red: 255, 0, 0  #244, 67, 54 par défaut
  mush-rgb-blue: 33, 150, 255
  mush-rgb-green: 0, 128, 0  #76, 175, 80
  mush-rgb-yellow: 255, 240, 0

[pcan]

Merci de cette précision, ça explique tout …

C’est un peu dommage que ça surcharge le thème, ça oblige ensuite surcharger mushroom :-/ qui semble plus limité dans sa palette de couleurs

[pcan]

Pour la solution à l’ensemble de ce que je cherchais à faire, en complément du code de la carte que j’ai posté précédemment, je précise que j’ai créé une entité de type « trend » (binary_sensor.trend_temp) sur mon entité sensor.sensor_weather_terrasse_jardin_temperature configurée comme suit afin de connaitre la tendance de la valeur du capteur de température:

Pas certain que les réglages soient optimal, mais ça donne des résultats satisfaisant.

Merci encore @WarC0zes de m’avoir orienté sur mushroom card template pour le badge.

Je vais aussi essayer de jouer avec un capteur de dérivée pour essayer de montrer une tendance plus précise.

[WarC0zes]

J’oublier , tu peux utiliser les couleurs en hexa, ca fonctionne.

icon_color: '#44739E'

[pcan]

oui, j’avais remarqué également

Je viens aussi de tomber la dessus

Mushroom Cards Card Mod Styling/Config Guide

C’est parfait ce guide

[WarC0zes]

Oui, il la déjà été partager dans plusieurs sujet sur le forum.
Il est dans mes favoris déja

Présentation + [Mon Dashboard] BBE

Il faut le faire avec card_mod voir ce lien: Postn°3: Main Icon Styling : pour changer la taille de l’icone Main Icon Background/Shape Styling : pour changer la taille du chip, position etc… Sinon a la place des chips tu peux utiliser des cartes mushroom sans mettre les info principales ni secondaires, l’icone est à peine plus grosse, mais c’est plus compliqué à faire je trouve…

Faire clignoter icone, pour carte poubelles

Bonjour, Faut utiliser card_mod, l’installer a partir de HACS. [mushrrom anime pulse] Puis ajouter ce code: card_mod: style: | ha-state-icon { animation: pulse 2s linear infinite; } Suivant un état d’une entité: card_mod: style: | ha-state-icon { {% if is_state('fan.rpi_cooling_fan','off') %} animation: none; {% else %} animation: pulse 2s linear infinite; {% endif %} } Plein d’exemple pour mushrrom card:

Card_mod - Mushroom en fonction de l état d’une entité

Bonjour, voici les modifications. [mushrrom anime] - type: custom:mushroom-template-card icon: | {% if is_state('binary_sensor.portes', 'on') %} mdi:door-open {% else %} mdi:door-closed {% endif %} icon_color: | {% if is_state('binary_sensor.portes','on') %} red {% else %} green {% endif %} badge_icon: |- {% set all = expand('binary_sensor.portes')| list -%} {% set on1 = all | selectattr('state','e…

[pcan]

Du coup me voila partie pour essayer d’ajouter une animation

Mais sans succès

avec ceci, je n’ai pas d’animation, mais j’ai bien la rotation du badge :

card_mod:
  style: |
    {% set val = states('input_number.trend2')|float * 22.5 %}
    {% if val > 0.0 %}
      {% set v = 360 - int(min(90,val)|float(0.0)) %}
    {% elif val < 0.0 %}
      {% set v = 360 - int(max(-90,val)|float(0.0)) %}
    {% else %}
      {% set v = 0 %}
    {% endif %}
    mushroom-badge-icon {
      rotate: {{v}}deg;
    }

    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
        opacity: 0.2 !important;
      }
      @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
        70% {box-shadow: 0 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }

Sans la rotation, ceci fonctionne :

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
        70% {box-shadow: 0 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }

En gros, je n’arrive pas à combiner les 2 modif de style …
Il ya quelque chose que je n’ai pas saisi dans card_mod

[WarC0zes]

Pas de soucis !
faut utiliser .: |, pour revenir a la racine de la carte

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
        70% {box-shadow: 0 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }
   .: |
    {% set val = states('input_number.trend2')|float * 22.5 %}
    {% if val > 0.0 %}
      {% set v = 360 - int(min(90,val)|float(0.0)) %}
    {% elif val < 0.0 %}
      {% set v = 360 - int(max(-90,val)|float(0.0)) %}
    {% else %}
      {% set v = 0 %}
    {% endif %}
    mushroom-badge-icon {
      rotate: {{v}}deg;
    }

[pcan]

@WarC0zes

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
        70% {box-shadow: 0 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }
   .: |
    {% set val = states('input_number.trend2')|float * 22.5 %}
    {% if val > 0.0 %}
      {% set v = 360 - int(min(90,val)|float(0.0)) %}
    {% elif val < 0.0 %}
      {% set v = 360 - int(max(-90,val)|float(0.0)) %}
    {% else %}
      {% set v = 0 %}
    {% endif %}
    mushroom-badge-icon {
      rotate: {{v}}deg;
    }

Ha j’avais pourtant essayé un truc comme ça sans succès !
Ton code fonctionne en rajoutant une indentation à partir .: |

Impec

[pcan]

@WarC0zes (ou d’autres bien entendu ), saurais tu comment faire la même chose (uniquement l’animation) sur la classe .shape pour une carte tuile ?

Je sèche à nouveau

J’ai tenté plusieurs combo pour arriver au bon sélecteur après diverses lecture, mais rien à faire

card_mod:
  style:
    #.icon-container .icon$: |
    ha-tile-icon$: |
      .shape {
        animation: pingorange 2s infinite !important;
      }
      @keyframes pingorange {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7);}
        70% {box-shadow: 0 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }

[WarC0zes]

pas réussi a faire autre chose que ca:

type: tile
entity: light.0x00158d0002e75493
card_mod:
  style: |
    ha-tile-icon {
      animation: pulse 2s linear infinite;
    }

[pcan]

OK, merci quand même d’avoir essayé.

ça me rappelle un peu pourquoi j’ai toujours détesté faire du front