Gauge Card Pro 🌈

Miura · April 23, 2025, 11:18am

Inspired by the idea to be able to recreate the Home Assistant native Energy Gauge Cards I created Gauge Card Pro. Built on top of the Home Assistant Gauge card, but with many more features and beautiful look-and-feel!

Native gradient support for segments and severity
Two gauges in one
Use templates for the majority of the fields
Every element in the card can have its colour defined. This can be a single colour or two colours for light- or darkmode. Of course, allows templating!
Set value and value_text independently
Two labels underneath the gauge
Native ability to hide the background

Basic customization examples

Advanced customization examples

Install

HACS: Add as custom repository → Use https://github.com/benjamin-dcs/gauge-card-pro as Repository and Dashboard as Type

Miura · April 24, 2025, 7:45pm

v0.7.0 - More color magic!

This release introduces the color_interpolation option for both the main and inner gauge. This setting will take over all the color magic you had to do by hand by interpolating a color between your segment steps!

These gauges are created with the following code. The color magic is done using color interpolation!

type: custom:gauge-card-pro
color_interpolation: true
segments:
  - from: 0
    color: var(--success-color)
  - from: 100
    color: var(--error-color)

type: custom:gauge-card-pro
inner:
  color_interpolation: true
  segments:
    - from: 0
      color: var(--success-color)
    - from: 100
      color: var(--error-color)

boredmthfkr · April 25, 2025, 12:40pm

Very nice! I would love to see the code for the 3rd gauge in the advanced customization examples, for temp&humidity, please.

Miura · April 25, 2025, 12:59pm

Should be something like this:

github.com/benjamin-dcs/gauge-card-pro

examples/temperature-humidity.md

f7c775e8f

<img width="305" alt="Screenshot 2025-04-25 at 14 53 57" src="https://github.com/user-attachments/assets/4a336051-e1d3-4400-a073-0840a2854ca2" />

```yaml
type: custom:gauge-card-pro
entity: sensor.temperature
entity2: sensor.humidity
needle: true
min: "18"
max: "21"
value_text: "{{ states(entity) | float | round(1) }}°C"
segments:
  - from: 18
    color: var(--red-color)
  - from: 18.5
    color: var(--orange-color)
  - from: 19
    color: var(--light-green-color)
  - from: 19.5
    color: var(--light-green-color)
  - from: 20

This file has been truncated. show original

Protoncek · April 30, 2025, 10:02am

Yeah! Thanks for that! I’ve been looking for a decent gauge card for ages… all existing cards (canvas, horseshoe…) are old and not maintained anymore, so it’s only a matter of time when they will “die”. What i miss most on HA’s built-in card is templates, and lack of them makes it pretty much useless (for me).

A couple of suggestions, if they are doable:

is it possible to change text size?
some sort of scale implementation would be good perhaps ?

Miura · April 30, 2025, 10:22am

Thanks for your feedback!

Would you mind making an issue at GitHub · Where software is built for the text size? The texts inside the gauges already have auto-scaling, so I guess it’s the texts below the gauges you are after right?

Also for “some sort of scale implementation would be good perhaps”, could you also make an issue explaining your wish? Right now I don’t really understand what you are after

Protoncek · April 30, 2025, 10:28am

~~will do…~~
EDIT: now i came to the fact that text is auto-scaled… it’s ok for me, i don’t need more.

Ah, it’s just a thought… something similar like “canvas gauge card” has:

or this one, just with numbers instead of icons:

(on the other hand, i’m not sure what’s better looking - with or withoug scale…)

Miura · April 30, 2025, 12:16pm

I kinda see where you wanna go with that. However, I don’t feel that fits in my vision of my card, I don’t want a 1000-in-1 gauges card.

What I do see as an option is for that value_texts to be icons. Maybe that’s something worth investigating.

Edit:

My current Work-In-Progress already adds some extra content to the card. I feel it’s quite packed now and shouldn’t >add< too much information more to it. That’s why I’m thinking about using the value_text (the 19°C and maybe the 55%) field for icons, not adding them somewhere else. Unless you/somehow finds a way to convince me

Protoncek · April 30, 2025, 12:36pm

I agree with you on this - keep it simple, and what’s available have a lot of options.

Just a side question: is it an error on your github page: you have written:

value_texts → value_text ?
titles → title ? (when does this title appears at all? I can’t make it show…)

Miura · April 30, 2025, 12:41pm

That’s some changed/new config for v0.8.0 which I hope to release somewhere soon. I’m merging some attributes into groups for better clarity of the config. I ended up with something like:

primary
primary_color
secondary
secondary_color
value_text
value_text_color
inner:

value_text
value_text_color

which will become:

titles:

primary
primary_color
secondary
secondary_color

value_texts:

primary
primary_color
secondary
secondary_color

nicnicol · May 6, 2025, 12:01am

Just downloaded and had my first play around and am very impressed! It’s available in the HACS store now BTW - no need to copy the custom URL

I’m trying to understand the colours:
In your examples you use colour names, eg

I’ve tried replacing them with other colour names, but many don’t seem to be recognised, is there a list to choose from?

Or even better, is it possible to use an rgb colour value?

Loving your work! This is what I’ve made myself so far & love how it looks

Miura · May 6, 2025, 8:10am

Just downloaded and had my first play around and am very impressed! It’s available in the HACS store now BTW - no need to copy the custom URL

Unfortunately my card hasn’t been added yet → This is my PR. It currently takes about 6 months. I think you added my repo as custom repo to HACS. Once that’s done, you’ll receive updates as if it was a normal repo.

I’m trying to understand the colours:
In your examples you use colour names, eg

It’s just a personal preference to use ‘HA’-colors. RGB should definitely work, formatted as hex and probably quoted: "#ff0000".

Loving your work! This is what I’ve made myself so far & love how it looks

Thanks a lot for your lovely feedback, goes a long way! Love to see what people built using my card, thanks for sharing

Miura · May 6, 2025, 6:58pm

Digging through the HA frontend source code I found this file. I think it includes the majority, if not all, color variables used by HA

github.com/home-assistant/frontend

src/resources/theme/color.globals.ts

92bf9b497

import { css } from "lit";
import {
  extractDerivedVars,
  extractVar,
  extractVars,
} from "../../common/style/derived-css-vars";

export const colorStyles = css`
  html {
    /* text */
    --primary-text-color: #212121;
    --secondary-text-color: #727272;
    --text-primary-color: #ffffff;
    --text-light-primary-color: #212121;
    --disabled-text-color: #bdbdbd;

    /* main interface colors */
    --primary-color: #03a9f4;
    --dark-primary-color: #0288d1;
    --light-primary-color: #b3e5fc;

This file has been truncated. show original

Protoncek · May 7, 2025, 7:41am

I’m just wondering… is it possible to adjust/limit gradient width? Say, to make yellow and red part narrower? Right now it’s pretty wide when i set green, yellow and red severity, which is perfect for majority of uses, but perhaos it could be the case when narrower gradient would be nice (just a thought)

Miura · May 7, 2025, 12:44pm

Currently no option is available to adjust the width.

I am wondering if you are looking to reduce the width of the entire main-gauge and/or inner-gauge or just a part of one ?

Protoncek · May 7, 2025, 2:27pm

I’d just limit transition width from green to yellow, for example (and from yellow to red…). Now it’s pretty wide, even if i set limits near max. green starts to transition to yellow at appr. middle of the gauge.

Miura · May 7, 2025, 3:01pm

I might understand what you are talking about. You are specifically talking about the severity option right? With the green, yellow andred parameters right?

In v0.8.0 I dropped support for severity in favour of generic segments use. If everything works as I expect, once you update to the current release your severity-config will be converted to segments in your editor.

segments also give you the power to control the way the gradient is created. For example, let’s say you had the following severity-config:

severity:
  green: 0
  yellow: 50
  red: 100

This is converted to the following segments-config

segments:
  - from: 0
    color: green
  - from: 50
    color: yellow
  - from: 100
    color: red

which looks like:

Now, looking at your question, with segments you can control the “distance” where to gradient is applied, for example:

segments:
  - from: 0
    color: green
  - from: 30
    color: green
  - from: 50
    color: yellow
  - from: 70
    color: red
  - from: 100
    color: red

which looks like:

Protoncek · May 7, 2025, 3:22pm

Ok, repeating same commands does the job i want…
what i mean is to change this:

to this:

I managed to achieve this by doubling same color commands, as you suggested above:

old way:

segments:
  - from: 0
    color: green
  - from: 80
    color: yellow
  - from: 90
    color: red

new way:

segments:
  - from: 0
    color: green
  - from: 80
    color: green
  - from: 90
    color: yellow
  - from: 95
    color: red

(however, i see that this “shortcut” lowers gradient resolution…)

Miura · May 7, 2025, 3:37pm

That is indeed correct. My current issue is that in your green part, the gradient-engine of my card still creates green parts (it’s not 1 element, although it’s all the same colour). I could increase the resolution for high or add and extra ultra option. This however impacts performance I think. Will give it a thought …

Protoncek · May 7, 2025, 4:13pm

Well, i don’t mind resolution… anything is better than built-in gauge card without it.
As i said in my first post, it was more or less just a thought. After all i use it for monitoring my HA and proxmox (ram, data, space, temperature…), and it’s way more beautiful as built-in gauge card.
Thanks!