Afficher le nom dans un badge mushroom-chip

corto · Février 7, 2025, 1:51

Bonjour,

Mon problème

j’ai crée un badge qui se compose de mushroom chips, lesquels affiche par pièce la température et l’hygrométrie, grâce à l’aide reçue ça marche super, y compris le changement de couleur de la valeur mesurée en fonction de plages de températures.
Mais, pour repérer chaque pièce je suis pour le moment, obligé de jouer sur le background et je préfèrerais afficher le nom de la pièce dans chaque chip en plus de la valeur.
j’ai essayé plusieurs syntaxes et aucune ne fonctionne. Y-a-t-il une solution ?

Merci

les badges

[/img]

mon code

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.t_h_salon_temperature
    show_name: true
    name: Salon
    icon_color: red
    use_entity_picture: true
    color: green
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(220, 100, 50, 0.4);
          {% if states('sensor.t_h_salon_temperature')|float(0) < 15 %}
          --text-color:blue
          {% elif (states('sensor.t_h_salon_temperature')|float(0) >= 15 and states('sensor.t_h_salon_temperature')|float(0) <= 19) %}
          --text-color:orange
          {% elif (states('sensor.t_h_salon_temperature')|float(0) > 19 and states('sensor.t_h_salon_temperature')|float(0) <= 25) %}
          --text-color:green 
          {% elif states('sensor.t_h_salon_temperature')|float(0) > 25 %}
          --text-color:red
          {% endif %}
          }
  - type: entity
    entity: sensor.t_h_salon_humidite
    name: Humidité
    icon_color: light-blue
    use_entity_picture: true
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(220, 100, 50, 0.4);
          --text-color: rgba(0, 188, 212, 1);
        }
  - type: entity
    entity: sensor.t_h_chambre_temperature
    name: T_Chambre
    icon_color: deep-purple
    use_entity_picture: false
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(255, 210, 60, 0.7);
          {% if states('sensor.t_h_chambre_temperature')|float(0) < 15 %}
          --text-color:blue
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) >= 15 and states('sensor.t_h_chambre_temperature')|float(0) <= 19) %}
          --text-color:orange
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) > 19 and states('sensor.t_h_chambre_temperature')|float(0) <= 25) %}
          --text-color: green 
          {% elif states('sensor.t_h_chambre_temperature')|float(0) > 25 %}
          --text-color:red
          {% endif %}
          }
  - type: entity
    entity: sensor.t_h_chambre_humidite
    name: H_Chambre
    icon_color: light-blue
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(255, 210, 60, 0.7);
          color: rgba(0, 64, 30, 1);
        }
  - type: entity
    entity: sensor.capteur_t_h_jardin_temperature
    name: T_Jardin
    icon_color: green
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(189, 256, 150, 0.7);
          {% if states('sensor.capteur_t_h_jardin_temperature')|float(0) < 0 %}
          --text-color:blue
          {% elif (states('sensor.capteur_t_h_jardin_temperature')|float(0) >= 0 and states('sensor.capteur_t_h_jardin_temperature')|float(0) <= 25) %}
          --text-color:green
          {% elif (states('sensor.capteur_t_h_jardin_temperature')|float(0) > 25 and states('sensor.capteur_t_h_jardin_temperature')|float(0) <= 30) %}
          --text-color:orange
          {% elif states('sensor.capteur_t_h_jardin_temperature')|float(0) > 30 %}
          --text-color:red
          {% endif %}
          }
  - type: entity
    entity: sensor.capteur_t_h_jardin_humidite
    name: H_Jardin
    icon_color: blue
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(189, 256, 150, 0.7);
          color: rgba(0, 64, 30, 1);
        }

Ma configuration

[center]## System Information

version	core-2025.2.0
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
user	root
virtualenv	false
python_version	3.13.1
os_name	Linux
os_version	6.6.62-haos-raspi
arch	aarch64
timezone	Europe/Paris
config_dir	/config

Home Assistant Community Store

GitHub API	ok
GitHub Content	ok
GitHub Web	ok
HACS Data	ok
GitHub API Calls Remaining	5000
Installed Version	2.0.5
Stage	running
Available Repositories	1574
Downloaded Repositories	23

Home Assistant Cloud

logged_in	false
can_reach_cert_server	ok
can_reach_cloud_auth	ok
can_reach_cloud	ok

Home Assistant Supervisor

host_os	Home Assistant OS 14.2
update_channel	stable
supervisor_version	supervisor-2025.02.0
agent_version	1.6.0
docker_version	27.2.0
disk_total	117.3 GB
disk_used	6.6 GB
healthy	true
supported	true
host_connectivity	true
supervisor_connectivity	true
ntp_synchronized	true
virtualization
board	rpi4-64
supervisor_api	ok
version_api	ok
installed_addons	File editor (5.8.0), Samba share (12.4.0), ESPHome Device Builder (2024.12.4), Advanced SSH & Web Terminal (20.0.0), Linky (1.5.0)

Dashboards

dashboards	2
resources	14
views	5
mode	storage

Network Configuration

adapters	lo (disabled), end0 (enabled, default, auto), hassio (disabled), docker0 (disabled), veth006830a (disabled), vethe5fcc89 (disabled), veth9b09807 (disabled), vetha383527 (disabled), veth90d45f7 (disabled), veth6ba474c (disabled), veth0f4654c (disabled), vethb06884e (disabled)
ipv4_addresses	lo (127.0.0.1/8), end0 (192.168.1.59/24), hassio (172.30.32.1/23), docker0 (172.30.232.1/23), veth006830a (), vethe5fcc89 (), veth9b09807 (), vetha383527 (), veth90d45f7 (), veth6ba474c (), veth0f4654c (), vethb06884e ()
ipv6_addresses	lo (::1/128), end0 (fe80::1027:efc6:366:6498/64), hassio (fe80::42:a5ff:fec8:fe7d/64), docker0 (fe80::42:ccff:fe2f:61cd/64), veth006830a (fe80::e88d:1ff:fee6:c79/64), vethe5fcc89 (fe80::2433:83ff:fe2c:7123/64), veth9b09807 (fe80::fc90:42ff:feeb:efc7/64), vetha383527 (fe80::c3f:1fff:fe1f:4d04/64), veth90d45f7 (fe80::54f6:d6ff:fe5f:5cee/64), veth6ba474c (fe80::98aa:b9ff:fe38:d877/64), veth0f4654c (fe80::5c48:a5ff:fe84:9efd/64), vethb06884e (fe80::834:b3ff:fe1b:311/64)
announce_addresses	192.168.1.59, fe80::1027:efc6:366:6498

Recorder

oldest_recorder_run	28 janvier 2025 à 00:42
current_recorder_run	6 février 2025 à 11:11
estimated_db_size	29.44 MiB
database_engine	sqlite
database_version	3.47.1

WarC0zes · Février 7, 2025, 2:15

Bonjour,
de base la carte mushroom chip, ne permet pas de mettre un nom.
Mais tu peux contourner le problème avec card_mod, un exemple sur ce post:

corto · Février 7, 2025, 3:22

Bonjour, ça marche , sauf que je n’arrive pas à comprendre comment l’auteur fait pour avoir un affichage sur 2 lignes alors que moi, en respectant, à priori, sa syntaxe, j’ai tout sur la même ligne qui étire le badge !

WarC0zes · Février 7, 2025, 3:29

Montre ton code, pour voir to nerreur .

corto · Février 7, 2025, 3:34

je n’ai pas réussi à coloriser la partie concernée !!!

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.t_h_salon_temperature
    show_name: true
    name: Salon
    icon_color: red
    use_entity_picture: true
    color: green
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(220, 100, 50, 0.4);
          {% if states('sensor.t_h_salon_temperature')|float(0) < 15 %}
          --text-color:blue
          {% elif (states('sensor.t_h_salon_temperature')|float(0) >= 15 and states('sensor.t_h_salon_temperature')|float(0) <= 19) %}
          --text-color:orange
          {% elif (states('sensor.t_h_salon_temperature')|float(0) > 19 and states('sensor.t_h_salon_temperature')|float(0) <= 25) %}
          --text-color:green 
          {% elif states('sensor.t_h_salon_temperature')|float(0) > 25 %}
          --text-color:red
          {% endif %}
          }
  - type: entity
    entity: sensor.t_h_salon_humidite
    name: Humidité
    icon_color: light-blue
    use_entity_picture: true
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(220, 100, 50, 0.4);
          --text-color: rgba(0, 188, 212, 1);
        }
  [color=#255,152,0]- type: template[/color]
[color=#255.152.0]    entity: sensor.t_h_chambre_temperature[/color]
[color=#255.152.0]    icon_color: deep-purple[/color]
[color=#255.152.0]    icon: mdi:thermometer[/color]
[color=#255.152.0]    content: |[/color]
[color=#255.152.0]      Chambre [/color]
[color=#255.152.0]      {{ states('sensor.t_h_chambre_temperature') | float(default=0) }} C°[/color]
[color=#255.152.0]    use_entity_picture: true[/color]
[color=#]    card_mod:[/color]
[color=#255.152.0]      style: |[/color]
[color=#255.152.0]        ha-card {[/color]
[color=#]          --chip-background: rgba(255, 210, 60, 0.7);[/color]
[color=#]          {% if states('sensor.t_h_chambre_temperature')|float(0) < 15 %}[/color]
          --text-color:blue
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) >= 15 and states('sensor.t_h_chambre_temperature')|float(0) <= 19) %}
          --text-color:orange
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) > 19 and states('sensor.t_h_chambre_temperature')|float(0) <= 25) %}
          --text-color: green 
          {% elif states('sensor.t_h_chambre_temperature')|float(0) > 25 %}
          --text-color:red
          {% endif %}
        }
  - type: entity
    entity: sensor.t_h_chambre_humidite
    name: H_Chambre
    icon_color: light-blue
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(255, 210, 60, 0.7);
          color: rgba(0, 64, 30, 1);
        }
  - type: entity
    entity: sensor.capteur_t_h_jardin_temperature
    name: T_Jardin
    icon_color: green
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(189, 256, 150, 0.7);
          {% if states('sensor.capteur_t_h_jardin_temperature')|float(0) < 0 %}
          --text-color:blue
          {% elif (states('sensor.capteur_t_h_jardin_temperature')|float(0) >= 0 and states('sensor.capteur_t_h_jardin_temperature')|float(0) <= 25) %}
          --text-color:green
          {% elif (states('sensor.capteur_t_h_jardin_temperature')|float(0) > 25 and states('sensor.capteur_t_h_jardin_temperature')|float(0) <= 30) %}
          --text-color:orange
          {% elif states('sensor.capteur_t_h_jardin_temperature')|float(0) > 30 %}
          --text-color:red
          {% endif %}
          }
  - type: entity
    entity: sensor.capteur_t_h_jardin_humidite
    name: H_Jardin
    icon_color: blue
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(189, 256, 150, 0.7);
          color: rgba(0, 64, 30, 1);
        }

WarC0zes · Février 7, 2025, 3:41

corto:

  - type: template 
     entity: sensor.t_h_chambre_temperature 
     icon_color: deep-purple 
     icon: mdi:thermometer 
     content: | 
       Chambre 
       {{ states('sensor.t_h_chambre_temperature') | float(default=0) }} C° 
     use_entity_picture: true 
     card_mod: 
       style: | 
        ha-card { 
           --chip-background: rgba(255, 210, 60, 0.7); 
          {% if states('sensor.t_h_chambre_temperature')|float(0) < 15 %} 
          --text-color:blue
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) >= 15 and states('sensor.t_h_chambre_temperature')|float(0) <= 19) %}
          --text-color:orange
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) > 19 and states('sensor.t_h_chambre_temperature')|float(0) <= 25) %}
          --text-color: green 
          {% elif states('sensor.t_h_chambre_temperature')|float(0) > 25 %}
          --text-color:red
          {% endif %}
        }

Il te manque c’est parti du code. il te faut ajouter white-space: pre; dans card_mod, dans la balise ha-card.

il te manque un ; a chaque fin de ligne du text color.

          {% if states('sensor.t_h_chambre_temperature')|float(0) < 15 %} 
          --text-color:blue
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) >= 15 and states('sensor.t_h_chambre_temperature')|float(0) <= 19) %}
          --text-color:orange
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) > 19 and states('sensor.t_h_chambre_temperature')|float(0) <= 25) %}
          --text-color: green 
          {% elif states('sensor.t_h_chambre_temperature')|float(0) > 25 %}
          --text-color:red
          {% endif %}
        }

correction:

          {% if states('sensor.t_h_chambre_temperature')|float(0) < 15 %} 
          --text-color: blue;
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) >= 15 and states('sensor.t_h_chambre_temperature')|float(0) <= 19) %}
          --text-color: orange;
          {% elif (states('sensor.t_h_chambre_temperature')|float(0) > 19 and states('sensor.t_h_chambre_temperature')|float(0) <= 25) %}
          --text-color: green;
          {% elif states('sensor.t_h_chambre_temperature')|float(0) > 25 %}
          --text-color: red;
          {% endif %}
        }

corto · Février 7, 2025, 3:55

IMPECCABLE
mais le manque de ‹ ; › ne posait pas de problèmes tant que je n’ai pas essayé de mettre le ‹ white space › (c’est pour ça que j’avais fini par l’enlever).

Un grand merci
il y a encore des trous (ce n’est pas une raquette mais une passoire) mais je vais finir par y arriver.

WarC0zes · Février 7, 2025, 3:57

Oui, sans un ajout après le text-color, ce n’est pas gênant. Mais pour un code propre il faut toujours un ;.

corto · Février 7, 2025, 5:55

j’en prends bonne note ( en principe il ne faut m’expliquer les choses qu’une fois … mais là il y a beaucoup à m’expliquer ) et j’ai encore des soucis avec les pipe, les > (avec ou sans tiret), les {, (, [ et surtout les indentations quand je copie un bout de code !
Enfin si on considère que je suis reparti de zéro à Noel , je progresse

WarC0zes · Février 11, 2025, 4:08

Ce sujet a été automatiquement fermé après 25 heures. Aucune réponse n’est permise dorénavant.