Modifier couleur aiguille carte gauge

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 »

Avec le svg > , pas besoin du !important .

Sans svg > , on a besoin du !important

Bizarre :sweat_smile:

1 « J'aime »

Il faut une poupée Vaudu pour jouer avec card_mod :grin: