Gauge Card: how to get a gradually changing color?

thusassistint · November 10, 2022, 9:35am

I have some Gauge Cards in my front end, but don’t understand how to get a gradually changing color as shown in the Gauge example: the color is gradually changing from green to red:

afbeelding

This is the most basic Gauge Card example in Yaml:

type: gauge
name: CPU Usage
unit: '%'
entity: sensor.cpu_usage

From this example I would think that the most basic Gauge already would have this gradually changing color, but that is not the case for me, using this basic set-up: it is a fixed blue color:
afbeelding

There are severity and segment options, but these only give a stepped transition to different colors?
So is it possible at all, and if so, how is this done?

pedolsky · November 10, 2022, 9:51am

Use the documentation example


type: gauge
name: With Severity
unit: '%'
entity: sensor.cpu_usage
severity:
  green: 0
  yellow: 45
  red: 85

IT-Gipsy · November 10, 2022, 11:58am

The Gauge is not capable of (Gradually) changing color.
You can set “levels” (values) for 4 different colors.

Blue
Green
Yellow
Red

This is done by adding “sevirity” to your gauge:

type: gauge
entity: sensor.cv_warmtepomp_kwh_current
name: HeatPump-Current
unit: Ampere
min: 0
max: 6
needle: true
severity:

green: 0.5*
yellow: 4*
red: 5*

In the above sample… the gauge runs from 0 - 6
anything below the threshold of 0,5 is blue
anything above 0,5 but below 4 is green
anything above 4 but below 5 is yellow
anything above 5 (but below the max of 6) is red

you can use the VISUAL editor or the TXT editor to set the values.
That choice is yours. However. if you EDIT an existing gauge, the present (existing) Green / yellow / red values are Not shown in the Visual editor, only in the Code (TXT) editor

thusassistint · November 10, 2022, 12:00pm

Thanks!
I clearly misunderstood the documentation.
Firstly, I thought that the code above the example gauge card was used for the example, but apparently it is the code below the example.
And secondly I understood that it would be a true gradually changing of color, but that apparently is not the case: it still is a hard transition between the colors:
afbeelding

Anyhow, these Gauge Cards are still a nice option in Home Assistant.

thusassistint · November 10, 2022, 12:10pm

Thanks for your extensive explanation
I got all of this, but just misunderstood the example in the documentation as being a truly gradually changing color, but that appears to be not the case.

IT-Gipsy · November 10, 2022, 12:20pm

Indeed… just 4 colors…
nothing fancy with gradients

pedolsky · November 10, 2022, 1:27pm

Actually, you can set colors for every step.

thusassistint · November 10, 2022, 3:15pm

Well, I think I have to come back on this.
It seems that in fact gradually changing of the colors already is implemented in the current Gauge Card. When using the example from the documentation, and changing the input sensor value from let’s say 44% to 45%, the color indeed is changing from green to yellow, but this happens gradually within roughly half a second or so.
So implementing a gradually changing color over a large gauge sector probably isn’t as big of an impact on the coding as I initially thought.
So I hope that the Gauge Card code owners are reading this, because it would be nice when this will be implemented in the future.

But… in the mean time I also found another solution
It appears that it is possible to define many more segments.
This is an example of a gauge that will “gradually” change its color from yellow to red over the full scale:

type: gauge
name: Test
unit: '%'
entity: input_number.number
min: 0
max: 100
segments:
  - from: 0
    color: '#ffff00'
  - from: 5
    color: '#fff200'
  - from: 10
    color: '#ffe600'
  - from: 15
    color: '#ffd900'
  - from: 20
    color: '#ffcc00'
  - from: 25
    color: '#ffbf00'
  - from: 30
    color: '#ffb200'
  - from: 35
    color: '#ffa600'
  - from: 40
    color: '#ff9900'
  - from: 45
    color: '#ff8c00'
  - from: 50
    color: '#ff8000'
  - from: 55
    color: '#ff7300'
  - from: 60
    color: '#ff6600'
  - from: 65
    color: '#ff5900'
  - from: 70
    color: '#ff4c00'
  - from: 75
    color: '#ff4000'
  - from: 80
    color: '#ff3300'
  - from: 85
    color: '#ff2600'
  - from: 90
    color: '#ff1a00'
  - from: 95
    color: '#ff0d00'

For defining the color codes I did use the HTML Color Mixer web page.

thusassistint · November 11, 2022, 8:11am

I updated my gauge configuration one more time, making the color changing a little more gradual, and adding one more color.
With this gauge the color changes in 40 steps from red via yellow to green over a range from 0 % to 100 %:

type: gauge
entity: input_number.number
name: Test
unit: '%'
needle: false
min: 0
max: 100
segments:
  - from: 0
    color: '#ff0d00'
  - from: 2.5
    color: '#ff1a00'
  - from: 5
    color: '#ff2600'
  - from: 7.5
    color: '#ff3300'
  - from: 10
    color: '#ff4000'
  - from: 12.5
    color: '#ff4c00'
  - from: 15
    color: '#ff5900'
  - from: 17.5
    color: '#ff6600'
  - from: 20
    color: '#ff7300'
  - from: 22.5
    color: '#ff8000'
  - from: 25
    color: '#ff8c00'
  - from: 27.5
    color: '#ff9900'
  - from: 30
    color: '#ffa600'
  - from: 32.5
    color: '#ffb200'
  - from: 35
    color: '#ffbf00'
  - from: 37.5
    color: '#ffcc00'
  - from: 40
    color: '#ffd900'
  - from: 42.5
    color: '#ffe600'
  - from: 45
    color: '#fff200'
  - from: 47.5
    color: '#ffff00'
  - from: 50
    color: '#ffff00'
  - from: 52.5
    color: '#f2ff00'
  - from: 55
    color: '#e6ff00'
  - from: 57.5
    color: '#d9ff00'
  - from: 60
    color: '#ccff00'
  - from: 62.5
    color: '#bfff00'
  - from: 65
    color: '#b2ff00'
  - from: 67.5
    color: '#a6ff00'
  - from: 70
    color: '#99ff00'
  - from: 72.5
    color: '#8cff00'
  - from: 75
    color: '#80ff00'
  - from: 77.5
    color: '#73ff00'
  - from: 80
    color: '#66ff00'
  - from: 82.5
    color: '#59ff00'
  - from: 85
    color: '#4dff00'
  - from: 87.5
    color: '#40ff00'
  - from: 90
    color: '#33ff00'
  - from: 92.5
    color: '#26ff00'
  - from: 95
    color: '#19ff00'
  - from: 97.5
    color: '#0dff00'

And this is the result:

HA_GaugeTest_002_20221111_085127 HA_GaugeTest_003_20221111_085134 HA_GaugeTest_004_20221111_085140 HA_GaugeTest_005_20221111_085143 HA_GaugeTest_006_20221111_085147 HA_GaugeTest_007_20221111_085151 HA_GaugeTest_008_20221111_085156 HA_GaugeTest_009_20221111_085201

If you want to have a needle as pointer just set the option needle: true, with this result:

HA_GaugeTest_010_20221111_085236

I hope this is useful to others as well.
If you want to use this with another range you just have to modify the unit:, min: and max: values, and modify the from: values accordingly.

pragdogforshins · January 23, 2023, 5:59pm

@thusassistint BRILLIANT!! I also managed to reverse the order (using Excel, filtering, sorting and writing back to a text file) so the colour order is reversed for different usage …ie CPU temperature. Looks fantastic!

Now to import them into some little gauge cards in a horizontal or vertical stack so I can combine all the Glances info I want in one place.

SeanYem · February 11, 2023, 9:49pm

Awesome! Thanks for showing how this is done,

I’m using it for Colour Temperature,

It looks great now!

HA_Col_Temp_screnshot_1

thomasloven · April 4, 2023, 6:51pm

Well… someone linked this on facebook, and it had me intrigued…

The gauge is drawn in SVG, and the bar itself is just a single, wide, line with a set stroke color.

SVG actually allows for a stroke to have a gradient color, by linking the color to an svg element that has that gradient.
Now, the gauge card doesn’t allow you to inject random SVG. That’d be a bad thing. Instead it lets you pick a CSS color for each segment.

but… css can contain url encoded data… such as SVG images…

Here’s what you do.

Define your gradient in SVG:

<svg width="100" height="100">
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="yellow"/>
<stop offset="100%" stop-color="green"/>
</linearGradient>
</defs>
</svg>

Paste it into an SVG URL encoder such as this: URL-encoder for SVG
Copy the encoded part that says url("data:image/svg+xml, ...");
Tack on a reference to your gradient on the end: url("data:image/svg+xml, ...#linear");. That’s #linear as in id="linear" from the SVG code.
Use that as your color:

type: gauge
entity: sensor.0x00178801086c6fed_battery
min: 0
max: 100
segments:
  - from: 0
    color: >-
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
      width='100' height='100'%3E%3Cdefs%3E%3ClinearGradient id='linear'
      x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25'
      stop-color='red'/%3E%3Cstop offset='50%25' stop-color='yellow'/%3E%3Cstop
      offset='100%25'
      stop-color='green'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E#linear");

bild

If you want to use the needle gauge you need another step. For the needle gauge the stroke is not handled through CSS but as a property of the line. So you need to go through a CSS custom property:

type: gauge
entity: sensor.0x00178801086c6fed_battery
min: 0
max: 100
segments:
  - from: 0
    color: var(--gauge-gradient)
needle: true

And then define the --gauge-gradient variable either in your theme:

gauge-gradient: >-
    url("data:image/svg+xml,%3Csvg
    xmlns='http://www.w3.org/2000/svg' width='100'
    height='100'%3E%3Cdefs%3E%3ClinearGradient id='linear' x1='0%25' y1='0%25'
    x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='red'/%3E%3Cstop
    offset='50%25' stop-color='yellow'/%3E%3Cstop offset='100%25'
    stop-color='green'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E#linear");

Or directly on the card using card-mod.

type: gauge
entity: sensor.0x00178801086c6fed_battery
min: 0
max: 100
segments:
  - from: 0
    color: var(--gauge-gradient)
needle: true
card_mod:
  style: >
    :host {
    --gauge-gradient: url("data:image/svg+xml,%3Csvg
    xmlns='http://www.w3.org/2000/svg' width='100'
    height='100'%3E%3Cdefs%3E%3ClinearGradient id='linear' x1='0%25' y1='0%25'
    x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='red'/%3E%3Cstop
    offset='50%25' stop-color='yellow'/%3E%3Cstop offset='100%25'
    stop-color='green'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E#linear");
    }

bild

Mariusthvdb · April 5, 2023, 12:00pm

thomasloven:

card_mod:
  style: >
    :host {
    --gauge-gradient: url("data:image/svg+xml,%3Csvg
    xmlns='http://www.w3.org/2000/svg' width='100'
    height='100'%3E%3Cdefs%3E%3ClinearGradient id='linear' x1='0%25' y1='0%25'
    x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='red'/%3E%3Cstop
    offset='50%25' stop-color='yellow'/%3E%3Cstop offset='100%25'
    stop-color='green'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E#linear");
    }

very beautiful! However, I must be doing something wrong here, as I copied that gauge-gradient directly, and use the same gauge card config. And yet, there’s no colored gauge, only a needle

set it both in my themes, and directly on the card.

no gauge at all, only a needle.

cant we copy that gradient as is? should we actually ‘make’ it in that encoder? well, no that doesnt help, I did…

taking out the needle, I do get a gauge, but it has no color:

    - type: gauge
      entity: sensor.alarm_button_hall_battery
      min: 0
      max: 100
      segments:
        - from: 0
          color: var(--gauge-gradient)
#       needle: true

even tried it like:

    gauge-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3ClinearGradient id='linear' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='red'/%3E%3Cstop offset='50%25' stop-color='yellow'/%3E%3Cstop offset='100%25' stop-color='green'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E#linear")

perra74 · April 13, 2023, 8:05pm

Did you manage to figure it out?
I´ve tried a couple of different encoders but no luck

Mariusthvdb · April 13, 2023, 8:20pm

No sorry. Tbh I put it aside for a bit …

Schlichi83 · April 18, 2023, 9:50am

Is there a possibility to put an extra entity directly under the gauge? In my case it’s a target value, while the gauge shows the actual value. I don’t find a way that looks good.

THANK you in advance!

jseppeli · April 18, 2023, 8:40pm

I’m also experiencing the same issue

jayjay · April 22, 2023, 5:27pm

same here, white no gradient.

bleugh · June 2, 2023, 12:58am

thomasloven:

type: gauge
entity: sensor.0x00178801086c6fed_battery
min: 0
max: 100
segments:
  - from: 0
    color: >-
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
      width='100' height='100'%3E%3Cdefs%3E%3ClinearGradient id='linear'
      x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25'
      stop-color='red'/%3E%3Cstop offset='50%25' stop-color='yellow'/%3E%3Cstop
      offset='100%25'
      stop-color='green'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E#linear");

Try Firefox as your browser.
Googling a little on SVG’s, it seems that Chrome, Edge, Safari may not support this type of linear gradient in SVG’s

vingerha · June 2, 2023, 4:08am

That is not the solution of course…