[Besoin d’aide] Afficher dynamiquement le nom de la pièce (area) dans mini-graph-card

Greg.o · Décembre 14, 2025, 10:32

Bonjour à tous

Je cherche une solution élégante pour afficher automatiquement le nom de la pièce (lié à l’area) dans une carte mini-graph-card sur mon dashboard Home Assistant.

Objectif

J’ai 6 capteurs de température nommés comme ceci :
sensor.temp_hum_1_temperature à sensor.temp_hum_6_temperature

Ces capteurs sont bien assignés à des zones/pièces dans Home Assistant (area_name est correct).
Je souhaite créer un dashboard tablette (8") où chaque carte affiche :

La température
Une mini courbe de tendance
Et surtout : le nom de la pièce automatiquement, sans le taper à la main

Ce que j’ai déjà essayé

Template sensor avec area_name() :

template:
  - sensor:
      - name: "Nom pièce capteur 1"
        state: "{{ area_name('sensor.temp_hum_1_temperature') }}"

Utilisation de ce sensor dans mini-graph-card :

name: sensor.nom_piece_capteur_1

Mais cela affiche juste littéralement :
sensor.nom_piece_capteur_1 au lieu du nom de la pièce.

Tentative avec :

name: "{{ states('sensor.nom_piece_capteur_1') }}"

Échec, mini-graph-card ne semble pas supporter les templates dans name.

J’ai aussi mod-card et layout-card installés pour la mise en page.

Ma question

Comment afficher dynamiquement le nom de la pièce associée à un capteur dans une carte mini-graph-card ?
Existe-t-il une astuce, une carte alternative ou une intégration (comme card-templater) qui permettrait de le faire proprement, sans devoir dupliquer les noms manuellement ?

Je suis preneur de toute idée :

card-templater ?
Templating via friendly_name ?
ui-lovelace-minimalist ?
Autre carte visuellement proche mais plus souple ?

Merci beaucoup

btncrd · Décembre 14, 2025, 10:36

Bonjour,
Tu dois pouvoir le faire avec une custom:button-card avec ta mini-graph-card en custom_fields
Regarde ce post, tu y trouveras des pistes : Quel type de carte pour capteur température + humidité? - #257 par Integra.

Pulpy-Luke · Décembre 14, 2025, 10:40

Salut,

La pièce n’est pas ratachée à un entité, mais à un device… Donc il faut remonter la chaine

{{ area_name(device_id('sensor.chevet1_suite_device_temperature')) }}

Greg.o · Décembre 14, 2025, 11:23

Merci pour l’aide.

Voici mon code :

type: custom:mini-graph-card
name: {{ area_name(device_id('sensor.chevet1_suite_device_temperature')) }}
entities:
  - sensor.temp_hum_1_temperature
show:
  graph: line
  fill: false
  extrema: false
  labels: false
  line_width: 3
  hours_to_show: 6
  points_per_hour: 2
  icon: mdi:thermometer
  font_size: 40

Malheureusement, voici le résultat :

Lorsque j’ouvre à nouveau l’éditeur de carte en mode Yaml, il a même remplacé le name par cette expression :

"[object Object]": null

Je pense que c’est parce que les cartes n’interprètent pas le Jinja. Non ?

Pulpy-Luke · Décembre 14, 2025, 11:52

ça c’est mon nom à moi …
Ceci dit, c’est pas la solution complète, mini-graph ne prends pas en charge les templates
Un exemple

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: "{{ area_name(device_id('sensor.sonde_jardin_temperature')) }}"
    secondary: "{{ states('sensor.sonde_jardin_temperature') }} °C"
    icon: mdi:thermometer
    features_position: bottom
  - type: custom:mini-graph-card
    entities:
      - sensor.sonde_jardin_temperature
    show:
      fill: false
      graph: line
      icon: false
      name: false
      state: false
      labels: false
      extrema: false
      average: false

Greg.o · Décembre 14, 2025, 2:00

Mais oui, quel âne !! J’ai modifié certaines lignes, mais pas celle-là !

Greg.o · Décembre 14, 2025, 2:48

J’ai testé ta solution, et c’est ce dont j’avais besoin : merci !. Voici mon code :

cards:
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:mushroom-template-card
        primary: "{{ area_name(device_id('sensor.temp_hum_1_temperature')) }}"
        secondary: "{{ states('sensor.temp_hum_1_temperature') }} °C"
        icon: mdi:thermometer
        features_position: bottom
        card_mod: null
        style: |
          ha-card {
            margin-bottom: 0px;  # ajuste la valeur si nécessaire
          }
      - type: custom:mini-graph-card
        entities:
          - sensor.temp_hum_1_temperature
        show:
          fill: false
          graph: line
          icon: false
          name: false
          state: false
          labels: false
          extrema: true
          average: false
        card_mod: null
        style: |
          ha-card {
            margin-top: 0px;  # ajuste la valeur si nécessaire
          }

et le résultat :

J’ai une autre question :

je n’ai pas utilisé le vertical-stack-in-card, mais stack-in-car avec l’option vertical
on voit dans mon code que j’ai rajouté du style, car comme on peut voir sur le screenshot, il y a une démarcation entre les card, et je n’en veux pas.

Une idée de comment la supprimer ? Le code plus haut ne la supprime pas.

WarC0zes · Décembre 14, 2025, 3:27

bonjour,
en ajoutant border: none; dans la partie card_mod :

        card_mod:
          style: |
            ha-card {
              margin-bottom: 0px;  # ajuste la valeur si nécessaire
              border: none;
            }

en plus tu as un problème d’indentation .

btncrd · Décembre 14, 2025, 3:51

Ou alors en utilisant une custom:button-card sans card_mod

Tochy · Décembre 14, 2025, 3:54

Vas y fait nous un autre travail collaboratif

Greg.o · Décembre 14, 2025, 11:55

Merci à toutes vos contibutions, j’approche du résultat que je souhaite.

type: custom:button-card
entity: sensor.temp_hum_1_temperature
name: >
  [[[ return states['sensor.nom_piece_temp_1'].state; ]]]
custom_fields:
  graph:
    card:
      type: custom:mini-graph-card
      entities:
        - sensor.temp_hum_1_temperature
      show:
        fill: false
        graph: line
        icon: false
        name: false
        state: true
        labels: true
        extrema: true
        average: false
styles:
  card:
    - aspect_ratio: 1/1
    - box-shadow: 4px 4px 8px
  graph:
    - align-self: bottom
    - justify-content: center
  icon:
    - width: 10%
  grid:
    - grid-template-areas: "\"i\" \"n\" \"graph\""
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content

Il m’a fallu un travail intense sur la button-card dont je ne maitrise que 5% actuellement. J’ai passé beaucoup de temps à essayer de comprendre pourquoi cette carte n’acceptait pas les templates Jinja. Et j’ai été déçu de voir que le nom de la pièce dans laquelle est le sensor est accessible par Jinja, mais pas par JS.

En cherchant, j’ai créé un template retournant le nom de la pièce, sous les conseils de ChatGPT, mais en n’étant pas encore tout à fait convaincu de l’avantage de cette méthode par rapport à taper directement le nom de la pièce dans le code de la carte.

To be Continued…

btncrd · Décembre 15, 2025, 9:36

Greg.o:

custom_fields:
  graph:
    card:
      type: custom:mini-graph-card
      entities:
        - sensor.temp_hum_1_temperature
      show:
        fill: false
        graph: line
        icon: false
        name: false
        state: true
        labels: true
        extrema: true
        average: false
styles:
  card:
    - aspect_ratio: 1/1
    - box-shadow: 4px 4px 8px
  graph:
    - align-self: bottom
    - justify-content: center
  icon:
    - width: 10%
  grid:
    - grid-template-areas: "\"i\" \"n\" \"graph\""
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content

Tu es plutôt pas mal sur la maitrise de custom:button-card. Il y a juste un truc à modifier pour les styles des custom_fields : tu ne peux pas directement les appliquer au custom_fields, il faut spécifier « custom_fields: » avant le nom de celui-ci :

custom_fields:
  graph:
    card:
      type: custom:mini-graph-card
      entities:
        - sensor.temp_hum_1_temperature
      show:
        fill: false
        graph: line
        icon: false
        name: false
        state: true
        labels: true
        extrema: true
        average: false
styles:
  card:
    - aspect_ratio: 1/1
    - box-shadow: 4px 4px 8px
  icon:
    - width: 10%
  grid:
    - grid-template-areas: "\"i\" \"n\" \"graph\""
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  custom_fields:
    graph:
      - align-self: bottom
      - justify-content: center
      - "--ha-card-border-width": 0
      - "--ha-card-background": transparent

et si tu ajoutes les deux dernières lignes à ton code, la bordure autour du « graph » disparaitra et la couleur du fond sera transparente.

début mode auto-pub

Si tu veux en apprendre un peu plus sur cette carte, tu peux lire ceci : Aller plus loin avec la carte custom:button-card

fin mode auto-pub

Greg.o · Décembre 15, 2025, 12:44

Merci @btncrd pour le tuyau !

Il se trouve que je me suis beaucoup servi de ton tuto pour monter en compétences ! Du coup, j’en profite pour te remercier de partager tes connaissances avec la communauté !

Greg.o · Décembre 15, 2025, 5:22

Pour vous tenir informé : voici le résultat auquel je suis arrivé :

type: custom:button-card
entity: sensor.temp_hum_1_temperature
name: |
  [[[ return states['sensor.nom_piece_temp_1']?.state ?? 'Nom Inconnu'; ]]]
show_icon: true
show_name: true
custom_fields:
  graph:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.temp_hum_1_temperature
          name: Température
        - entity: sensor.temp_hum_1_humidity
          name: Humidité
          y_axis: secondary
      group: false
      name: |
        [[[
          const temp = states['sensor.temp_hum_1_temperature']?.state ?? '_';
          const hum = states['sensor.temp_hum_1_humidity']?.state ?? '_';
          return `Température: ${temp}°C \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0 Humidité: ${hum}%`;
        ]]]
      show:
        fill: false
        graph: line
        icon: false
        name: true
        state: false
        labels: true
        labels_secondary: true
        extrema: false
        average: false
      card_mod:
        style: |
          ha-card .header {
          font-size: 1.2em !important;
          }
styles:
  card:
    - aspect_ratio: 1/1
    - box-shadow: 4px 4px 8px
  icon:
    - justify-self: start
    - width: 1.8em
    - color: |
        [[[
          const t = parseFloat(states['sensor.temp_hum_1_temperature']?.state);
          if (t < 19) return '#4A90E2';
          if (t > 21) return '#F5A623';
          return '#9B9B9B';
        ]]]
  name:
    - justify-self: start
    - font-size: 1.8em
    - font-weight: bold
    - overflow: hidden
    - text-overflow: ellipsis
    - white-space: nowrap
    - color: |
        [[[
          const t = parseFloat(states['sensor.temp_hum_1_temperature']?.state);
          if (t < 19) return '#4A90E2';
          if (t > 21) return '#F5A623';
          return '#9B9B9B';
        ]]]
  grid:
    - grid-template-areas: "\"i n\" \"graph graph\""
    - grid-template-columns: auto 1fr
    - grid-template-rows: min-content 1fr
    - column-gap: 8px
    - align-items: center
    - padding: 10px
  custom_fields:
    graph:
      - align-self: bottom
      - justify-content: center
      - "--ha-card-border-width": 0
      - "--ha-card-background": transparent

Et le visuel :

Prochaines étapes :

popup du thermostat de la pièce lorsque je tap sur le nom de la pièce.
intégrer tout ça à mon dashboard pour la tablette de la cuisine. Pas évident car l’écran fait 8"