Modifier couleur aiguille carte gauge

Mon problème

Bonjour,

Je voudrais changer la couleur de l’aiguille dans une carte gauge.
J’ai fouilé des dizaines de sujets sans trouver, ne serait-ce qu’une approche à mon problème, surement que c’est tellement simple que je passe à côté !

Le fait est que j’utilise le dark d’un thème, donc par défaut l’aiguille est claire.
Or le gradient de ma gauge est claire sur la moitié de l’échelle et forcément, l’aiguille ne ressort pas comme il faut.
J’ai essayé de passer par style, color…rien n’y fait.

Donc ma question : est-il possible de changer manuellement la couleur de l’aiguille d’une gauge, en passant par dessus le thème ?
Question subsidiaire : peut-on changer sa couleur suivant sa position ? (un peu comme la sévérité de la gauge)

Merci d’avance pour vos bons conseils

Ma configuration


version core-2024.2.1
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.1
os_name Linux
os_version 6.1.63-haos-raspi
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 5000
Installed Version 1.34.0
Stage running
Available Repositories 1393
Downloaded Repositories 43
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 11.5
update_channel stable
supervisor_version supervisor-2024.01.1
agent_version 1.6.0
docker_version 24.0.7
disk_total 468.7 GB
disk_used 15.8 GB
healthy true
supported true
board rpi4-64
supervisor_api ok
version_api ok
installed_addons File editor (5.8.0), Mosquitto broker (6.4.0), Terminal & SSH (9.9.0), CEC Scanner (3.0), AppDaemon (0.16.4), Node-RED (17.0.7), Zigbee2MQTT (1.35.3-1), eWeLink Smart Home (1.4.3), Samba share (12.3.0)
Dashboards
dashboards 4
resources 29
views 17
mode storage
Recorder
oldest_recorder_run 10 février 2024 à 19:45
current_recorder_run 16 février 2024 à 07:59
estimated_db_size 447.35 MiB
database_engine sqlite
database_version 3.44.2

bonjour,

il semble qu’il ne soit en effet pas possible de changer la couleur de l’aiguille avec la carte standard.
soit tu joues sur les couleurs en utilisant la "sévérité " soit il faut passer a une autre carte.

Merci de cette réponse qui explique en partie l’absence de sujet.

J’ai réussi à trouver un début de solution en appliquant un autre thème individuel à la gauge (l’aiguille est grise) mais c’est trop léger, et d’autres thèmes changent l’aspect complet de la gauge (couleur de fond et police) et ce n’est plus esthétique par rapport au reste; est-il possible de ne modifier que la partie d’un thème qui gère la couleur de l’aiguille ?

il existe des gauge-card dans HACS. je ne sais pas ce que tu essayes de faire donc jette un coup d’œil dans HACS. je ne tenterais pas de modifier une carte à la main sous peine de voir ton travail effacé si une mise a jour de la carte devait subvenir :wink:

Salut @JoHa

Avec card-mod ça peut se faire, même avec la carte « gauge » de « base » :

image

type: gauge
entity: input_number.ink_blu
needle: true
card_mod:
  style:
    ha-gauge:
      $: |
        svg > .needle {
          fill: yellow !important;
        }
2 « J'aime »

Super, c’est ce que je cherchais, merci beaucoup @Herbs.
J’avais essayé avec « fill », mais je n’avais pas la bonne syntaxe (je n’avais surtout pas utilisé card mod)
Merci aussi à @Vincha pour ses conseils.

J’ai enfin une gauge lisible et du coup j’ai mis rouge car avant qu’il fasse 40°, j’aurai trop chaud pour regarder l’écran !
image

2 « J'aime »

Si tu ajoutes une template tu peux faire varier la couleur de l’aiguille dès que ça passe dans le rouge :wink:

Exemple rapide :

peek

type: gauge
entity: input_number.ink_blu
needle: true
severity:
  green: 80
  yellow: 60
  red: 0
card_mod:
  style:
    ha-gauge:
      $: |
        svg > .needle {
          {% if states('input_number.ink_blu') <= '60' %}
          fill: yellow !important;
          {% else %}
          fill: black !important;
          {% endif %}
        }
1 « J'aime »

Houla ! Je vais déjà essayer de me familiariser avec le « simple », je commence juste avec HA. J’ai déjà mis 1 semaine pour faire cette gauge colorée !
Je pense déjà avoir pris le bon pli, je ne passe qu’en éditeur de code que je trouve bien plus simple et complet que le visuel

Quoique… en fait, avec l’exemple, ca a l’air simple !
Merci bien, je vais l’intégrer à ma gauge

Pour jouer avec les templates, hésites pas à passer par les outils de devs :wink:

Puis pour card_mod pleins d’exemples en suivant ce lien :

Sans oublier de prendre en compte :

Merci, il faut que je regarde tout ça, car juste en ajoutant la template, l’aiguille reste blanche (ni en baissant la valeur de if states)
Et vu que je ne me suis pas encore mis à mqtt, je ne peux pas modifier la valeur de mon sensor.

cool je note aussi Merci @Herbs

1 « J'aime »

Tu peux le faire quand même depuis les outils de dev :

peek

Et oui, bien sûr !..
C’est ce qui arrive lorsque l’on veut aller trop vite ! On en oublie les bases. Merci.

Sinon, j’ai cherché où pouvait être l’erreur, je ne vois pas. Ta première solution fonctionne parfaitement, j’ai bien l’aiguille rouge, mais avec la template, elle reste blanche quoiqu’il arrive.
Je vais fouiller encore.

Il faut faire gaffe au sens des > < , aussi penser à ce que tu compares

Si c’est des « str » ou des « int » ou des « float » …

Mouais… Je me remettrai dessus demain, ca ne fonctionne toujours pas et encore mieux, ma gauge fonctionne très bien et lorsque je la modifie avec les outils dev, ca me dit qu’elle n’écoute rien !
Là, c’est moi qui n’y comprends plus rien ! :joy:
En attendant, merci de ton temps et de ta patience.

Partages ton code, on pourra check ce qui cloche :wink:

Bonjour,

Bon, à force de chercher sans trop savoir quoi, j’ai tout retapé et ça fonctionne nickel, je devais surement avoir une mauvaise syntaxe qui ne créait pas d’erreur.
Je laisse le code au cas où ca puisse servir à quelqu’un.

 - type: gauge
    entity: sensor.outdoor_temperature
    name: Temp Ext
    needle: true
    card_mod:
      style:
        ha-gauge:
          $: |
            svg > .needle {
            {% if states('sensor.outdoor_temperature') <= '30' %}
            fill: white !important;
            {% else %}
            fill: red !important;
            {% endif %}
            }
    max: 40
    unit: °
    min: -20
    segments:
      - from: -20
        color: '#0000FF'
      - from: -19
        color: '#0A60FE'
      - from: -18
        color: '#1568FE'
      - from: -17
        color: '#2070FE'
      - from: -16
        color: '#2B78FE'
      - from: -15
        color: '#367FFD'
      - from: -14
        color: '#4187FD'
      - from: -13
        color: '#4C8FFD'
      - from: -12
        color: '#5797FD'
      - from: -11
        color: '#629EFC'
      - from: -10
        color: '#6DA6FC'
      - from: -9
        color: '#78AEFC'
      - from: -8
        color: '#83B6FC'
      - from: -7
        color: '#8EBDFB'
      - from: -6
        color: '#99C5FB'
      - from: -5
        color: '#A4CDFB'
      - from: -4
        color: '#AFD5FB'
      - from: -3
        color: '#BADCFA'
      - from: -2
        color: '#C5E4FA'
      - from: -1
        color: '#D0ECFA'
      - from: 0
        color: '#DBF4FA'
      - from: 1
        color: '#F2F2FF'
      - from: 2
        color: '#FFFDF2'
      - from: 3
        color: '#FFFCE6'
      - from: 4
        color: '#FFFBD9'
      - from: 5
        color: '#FFFACD'
      - from: 6
        color: '#FFF9C0'
      - from: 7
        color: '#FFF8B4'
      - from: 8
        color: '#FFF7A7'
      - from: 9
        color: '#FFF69B'
      - from: 10
        color: '#FFF58F'
      - from: 11
        color: '#FFF482'
      - from: 12
        color: '#FFF376'
      - from: 13
        color: '#FFF269'
      - from: 14
        color: '#FFF15D'
      - from: 15
        color: '#FFF050'
      - from: 16
        color: '#FFEF44'
      - from: 17
        color: '#FFEE37'
      - from: 18
        color: '#FFED2B'
      - from: 19
        color: '#FFEC1F'
      - from: 20
        color: '#FFEB12'
      - from: 21
        color: '#FFEA00'
      - from: 22
        color: '#FFDE00'
      - from: 23
        color: '#FFD200'
      - from: 24
        color: '#FFC600'
      - from: 25
        color: '#FFBA00'
      - from: 26
        color: '#FFAE00'
      - from: 27
        color: '#FFA200'
      - from: 28
        color: '#FF9000'
      - from: 29
        color: '#FF8400'
      - from: 30
        color: '#FF7800'
      - from: 31
        color: '#FF6C00'
      - from: 32
        color: '#FF6000'
      - from: 33
        color: '#FF5400'
      - from: 34
        color: '#FF4800'
      - from: 35
        color: '#FF4200'
      - from: 36
        color: '#FF3600'
      - from: 37
        color: '#FF2A00'
      - from: 38
        color: '#FF1E00'
      - from: 39
        color: '#FF1200'
      - from: 40
        color: '#FF0600'

Merci pour tout.

1 « J'aime »

Salut,
j’avais essayer de m’exercer pour pouvoir modifier c’est aiguille avec le tuto de clemalex.

j’ai fais une erreur sur le sélecteur:
ha-card > ha-gauge

je pensais que c’était:

card_mod:
  style:
    ha-card:
      ha-gauge:
        $: |

avec ton exemple, je me rends compte de mon erreur:
image

Je viens enfin de comprendre, les subtilités de card_mod. :+1:

1 « J'aime »

Salut @WarC0zes

J’avoue que j’ai toujours des hésitations avec card_mod, je suis rarement en mode « automatique » :wink:

Là, tu vois ce matin, en relisant le topic, j’ai capté que ça pouvait passer sans le svg >

Avec seulement :

card_mod:
  style:
    ha-gauge:
      $: |
        .needle {
          fill: yellow !important;
        }
1 « J'aime »