# Ajout entité clicable sur carte gauge

**URL:** <https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508>\
**Category:** Entraide Home Assistant\
**Tags:** card-mod\
**Created:** [Juillet 30, 2025, 6:15 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508 "2025-07-30T18:15:01Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juillet 30, 2025, 6:15 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/1 "2025-07-30T18:15:01Z")

</div>

bonsoir je vient encore vous embeter avec la carte gauge , en fouinant sur le forum j ai reussi a faire ce que je voulais en ajoutant des compteurs au dessus de mes gauges et donc supprimer des cartes pour alleger un peu mon dashboard .

grace a @WarC0zes j ai reussi a faire changer la couleur du text suivant l etat de plusieurs switch et sa marche parfaitement , les compteurs rajouter sur les cartes fonctionnent aussi tres bien , je me pose quand meme une question auquel je n est pas trouver d element de reponse sur le forum est il possible de rendre "clicable" les compteurs ajouter sur la carte pour avoir acces a la "pop-up" du detail ?

 ![Screenshot_2025-07-30-20-04-23-921_io.homeassistant.companion.android](https://forum.hacf.fr/uploads/default/original/3X/d/0/d0b0ca5835ad22cb4f48d8e445cce582ea2fa6a3.jpeg)

```auto
type: horizontal-stack
cards:
  - type: gauge
    entity: sensor.msunpv_outbal
    name: routage cumulus
    needle: true
    min: 0
    max: 400
    segments:
      - from: 0
        color: "#808080"
      - from: 110
        color: "#fa8072"
      - from: 290
        color: "#808080"
    card_mod:
      style:
        ha-gauge:
          $: |
            .needle {
              fill: lightskyblue !important;
            }
            svg.text>text {
              fill: salmon;
            }
          .: |
            div.name {
              color: lightskyblue;
            }    
            ha-card.type-gauge::before {
              content: "{{states('sensor.cumulus_journalier')}}kwh";
              padding: 2px 2px 0px 2px;
              border-radius: 4px;
              font-size: 18px;
              color: lightskyblue;
            }
  - type: gauge
    needle: true
    name: Temperature cumulus
    entity: sensor.msunpv_t_bal1
    min: 0
    max: 73
    segments:
      - from: 0
        color: "#fa8072"
      - from: 20
        color: "#808080"
      - from: 53
        color: "#fa8072"
    card_mod:
      style:
        ha-gauge:
          $: |
            .needle {
              fill: lightskyblue !important;
            }
            svg.text>text {
              fill: salmon;
            }
          .: |
            div.name {
              color:
                {% if states('input_boolean.cumulus_hot') == 'on' %}
                goldenrod;
                {% else %}
                lightskyblue;
                {% endif %}
            } 
            ha-card.type-gauge::before {
              content: "{{states('sensor.msunpv_voltres')}}v";
              padding: 2px 2px 0px 2px;
              border-radius: 4px;
              font-size: 18px;
              color: lightskyblue;
            }
  - type: gauge
    entity: sensor.msunpv_outrad
    name: Routage radiateur
    needle: true
    min: 0
    max: 400
    segments:
      - from: 0
        color: "#808080"
      - from: 110
        color: "#fa8072"
      - from: 290
        color: "#808080"
    card_mod:
      style:
        ha-gauge:
          $: |
            .needle {
              fill: lightskyblue !important;
            }
            svg.text>text {
              fill: salmon;
            }
          .: |
            div.name {
              color:
                {% if states('switch.sonoff_1000bedd89') == 'on' %}
                goldenrod;
                {% else %}
                lightskyblue;
                {% endif %}
            }   
            ha-card.type-gauge::before {
              content: "{{states('sensor.injection_test')}}kwh";
              padding: 2px 2px 0px 2px;
              border-radius: 4px;
              font-size: 18px;
              color: lightskyblue;
            }

```

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juillet 30, 2025, 6:26 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/2 "2025-07-30T18:26:16Z")

</div>

Salut,  
pourquoi tu n’utilise pas le tap\_action, double\_tap\_action ou hold\_action.

```auto
    hold_action:
      action: more-info
      entity: sensor.cumulus_journalier

```

exemple, quand tu clic sur la carte, tu as le more-info de `sensor.msunpv_outbal` et avec un clic long tu as le more-info de `sensor.cumulus_journalier` :

```yaml
type: horizontal-stack
cards:
  - type: gauge
    entity: sensor.msunpv_outbal
    name: routage cumulus
    needle: true
    min: 0
    max: 400
    segments:
      - from: 0
        color: "#808080"
      - from: 110
        color: "#fa8072"
      - from: 290
        color: "#808080"
    hold_action:
      action: more-info
      entity: sensor.cumulus_journalier
    card_mod:
      style:
        ha-gauge:
          $: |
            .needle {
              fill: lightskyblue !important;
            }
            svg.text>text {
              fill: salmon;
            }
          .: |
            div.name {
              color: lightskyblue;
            }    
            ha-card.type-gauge::before {
              content: "{{states('sensor.cumulus_journalier')}}kwh";
              padding: 2px 2px 0px 2px;
              border-radius: 4px;
              font-size: 18px;
              color: lightskyblue;
            }

```

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juillet 30, 2025, 6:49 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/3 "2025-07-30T18:49:09Z")

</div>

> [@WarC0zes](#):
>
> Salut,  
> pourquoi tu n’utilise pas le tap\_action, double\_tap\_action ou hold\_action.

et bien tout simplement car je ne connait pas 😅je ne doit pas regarder les bon articles a chaque fois pour recuperer les infos .

j ai regarder dans interaction dans l editeur visuel mais il n y avais pas la proposition pour les sensors rajouté .

desolé si mes questions paraissent des fois trop simple pour la communauté 🫣

---

<div class="post-metadata">

**Author:** ![MichelJ](https://forum.hacf.fr/user_avatar/forum.hacf.fr/michelj/32/21887_2.png) [@MichelJ](https://forum.hacf.fr/u/MichelJ)\
**Post date:** [Juillet 30, 2025, 9:13 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/4 "2025-07-30T21:13:44Z")

</div>

Bonjour,

Puis-je vous suggérer d’utiliser l’outil suivant pour faire des beaux dégradés pour vos gauges.

> **[HA Rainbow Generator](https://ha.labtool.pl/)**
>
> Generate a smooth color transition in Home Assistant lovelace cards.

Exemple:

 ![IMG_1300](https://forum.hacf.fr/uploads/default/original/3X/1/2/12f5cea3015deb41668e0e4020f09855b13112a8.jpeg)

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juillet 31, 2025, 12:01 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/5 "2025-07-31T00:01:24Z")

</div>

> [@lopesmaxime](#):
>
> et bien tout simplement car je ne connait pas 😅je ne doit pas regarder les bon articles a chaque fois pour recuperer les infos .

Dans la doc de home assistant :

> **[Gauge card](https://www.home-assistant.io/dashboards/gauge/)**
>
> The gauge card is a basic card that allows visually seeing sensor data.

qui te renvoie dans la doc des actions :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/3/5/3582aeba080de0531c3b70dd361dedc4d0bb4c5d.png)

![image](https://forum.hacf.fr/uploads/default/original/3X/2/1/21d7dc346dd48fb67598a94ea02b6a1c03934e0b.png)  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/9/b9c3458e5904ae02be972aa9161d7de6c78fcfe4.png)  
😉

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juillet 31, 2025, 9:42 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/6 "2025-07-31T09:42:05Z")

</div>

@MichelJ c est tres sympa le rendu mais je pense que vu la taille des mes gauge sa ne le fera pas mais je vais tester quand meme merci a toi .

@WarC0zes je pense que je vient de comprendre mon probleme je mis toujour des articles ici et la mais jamais les docs officiel 🤦

tu a un lien ou l ont trouve toute les docs car il vrai que sur le forum je vois souvent les liens specifiques de la doc officiel .

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juillet 31, 2025, 9:45 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/7 "2025-07-31T09:45:41Z")

</div>

Toute la documentation de HA :

> **[Documentation](https://www.home-assistant.io/docs/)**
>
> Documentation for Home Assistant

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juillet 31, 2025, 9:51 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/8 "2025-07-31T09:51:27Z")

</div>

top je te remercie je vais avoir de la lecture pour mes vacances

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Août 1, 2025, 11:25 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/9 "2025-08-01T11:25:53Z")

</div>

slt je te r embete encore un peu j ai voulu faire un test qui ne s est pas averer concluant et je ne c est pas pourquoi mais je suis sur que tu aura la reponse 😅

j ai du coup ajouter un compteur en dessous de la gauge et une puissance instantané au dessus .  
j ai voulu faire un test pour changer la couleur de la puissance quand elle augmente , mais au final une fois l editeur de code modifier je n est meme plus les valeurs sur la cartes et pas de message d erreur . du coup je ne c est pas si le code est mauvais ou si c est l emplacement du code qui n est pas bon ou les deux ?

 ![IMG_20250801_131819](https://forum.hacf.fr/uploads/default/original/3X/2/a/2ae41b9ef1e93e68ec13aae39ffad060522bd4ee.jpeg)  
 ![IMG_20250801_131934](https://forum.hacf.fr/uploads/default/original/3X/e/9/e98abc1cc28c2725dfbf00177528991789f35e64.jpeg)

```auto
type: horizontal-stack
cards:
  - type: gauge
    entity: sensor.msunpv_outbal
    needle: true
    name: cumulus
    min: 0
    max: 400
    segments:
      - from: 0
        color: "#808080"
      - from: 110
        color: "#fa8072"
      - from: 290
        color: "#808080"
    double_tap_action:
      action: more-info
      entity: sensor.cumulus_journalier
    card_mod:
      style:
        ha-gauge:
          $: |
            .needle {
              fill: lightskyblue !important;
            }
            svg.text>text {
              fill: salmon;
            }
          .: |
            div.name {
              color: lightskyblue;
            }    
            ha-card.type-gauge::after {
              content: "{{states('sensor.cumulus_journalier')}}kwh";
              padding: 2px 2px 0px 2px;
              border-radius: 4px;
              font-size: 18px;
              color: lightskyblue;
            }
            ha-card.type-gauge::before {
              content: "{{states('sensor.0xa4c1387e6536bf5a_power_a')}}w";
              font-size: 18px;
              color: 
                {% if states('sensor.0xa4c1387e6536bf5a_power_a') >= 0 %}
                goldenrod;
                {% else %}
                lightskyblue;
                {% endif %}
            }
  - type: gauge
    needle: true
    name: Temperature cumulus
    entity: sensor.msunpv_t_bal1
    min: 0
    max: 73
    segments:
      - from: 0
        color: "#fa8072"
      - from: 20
        color: "#808080"
      - from: 53
        color: "#fa8072"
    double_tap_action:
      action: more-info
      entity: input_boolean.cumulus_hot
    card_mod:
      style:
        ha-gauge:
          $: |
            .needle {
              fill: lightskyblue !important;
            }
            svg.text>text {
              fill: salmon;
            }
          .: |
            div.name {
              color:
                {% if states('input_boolean.cumulus_hot') == 'on' %}
                goldenrod;
                {% else %}
                lightskyblue;
                {% endif %}
            } 
            ha-card.type-gauge::before {
              content: "{{states('sensor.msunpv_voltres')}}v";
              padding: 2px 2px 0px 2px;
              border-radius: 4px;
              font-size: 18px;
              color: lightskyblue;
            }
  - type: gauge
    entity: sensor.msunpv_outrad
    name: radiateur
    needle: true
    min: 0
    max: 400
    segments:
      - from: 0
        color: "#808080"
      - from: 110
        color: "#fa8072"
      - from: 290
        color: "#808080"
    tap_action:
      action: more-info
      entity: sensor.injection_test
    double_tap_action:
      action: more-info
      entity: switch.sonoff_1000bedd89
    card_mod:
      style:
        ha-gauge:
          $: |
            .needle {
              fill: lightskyblue !important;
            }
            svg.text>text {
              fill: salmon;
            }
          .: |
            div.name {
              color:
                {% if states('switch.sonoff_1000bedd89') == 'on' %}
                goldenrod;
                {% else %}
                lightskyblue;
                {% endif %}
            }   
            ha-card.type-gauge::after {
              content: "{{states('sensor.injection_test')}}kwh";
              padding: 2px 2px 0px 2px;
              border-radius: 4px;
              font-size: 18px;
              color: lightskyblue;
            }
            ha-card.type-gauge::before {
              content: "{{states('sensor.0xa4c1387e6536bf5a_power_b')}}w";
              color: lightskyblue;
              font-size: 18px;
            }

```

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Août 1, 2025, 1:08 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/10 "2025-08-01T13:08:29Z")

</div>

Je regarde ça et te dit.

edit:

> [@lopesmaxime](#):
>
> ```auto
> color: 
> {% if states('sensor.0xa4c1387e6536bf5a_power_a') >= 0 %}
> goldenrod;
> {% else %}
> lightskyblue;
> {% endif %}
> 
> ```

met des apostrophes au chiffre dans le template.  
`{% if states('sensor.0xa4c1387e6536bf5a_power_a') >= '0' %}`

 ![image](https://forum.hacf.fr/uploads/default/original/3X/1/b/1be15420239a2176bcec4470345aa97940b746fc.png)

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Août 1, 2025, 1:39 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/11 "2025-08-01T13:39:04Z")

</div>

Salut

Ça ne serait pas plus simple de passer par un stack in card ou vertical stack in card ?

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Août 1, 2025, 1:43 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/12 "2025-08-01T13:43:29Z")

</div>

> [@Tochy](#):
>
> Ça ne serait pas plus simple

Tout dépend s’il ne veut plus d’espace entre les cartes 😉

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Août 1, 2025, 2:24 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/13 "2025-08-01T14:24:14Z")

</div>

je n avait pas prevu de modifier autan la carte gauge en fait .  
c est en parcourant le forum que je suis tomber sur l ajout de donné et le fait de tout regroupé sur la carte gauge m a fait degagé 4 carte sur mon dasboard , tout en etant quand meme relativement lisible .

les apostrophes ont regler le probleme , encore une fois je n etait pas loin de la solution mais pas encore dans le mile .

merci encore pour l aide bonne soiree et bon week end

---

<div class="post-metadata">

**Author:** ![system](https://forum.hacf.fr/uploads/default/original/1X/f21bfb78c8ffe5e68d8964c0a162197808faff17.png) [@system](https://forum.hacf.fr/u/system)\
**Post date:** [Août 3, 2025, 2:24 UTC](https://forum.hacf.fr/t/ajout-entite-clicable-sur-carte-gauge/65508/14 "2025-08-03T14:24:44Z")

</div>

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