Gauge Card Pro 🌈

[Protoncek]

As i already mentioned above, something like “canvas gauge card” replacement would be definitely a very good idea, since card is getting old and i have the feeling that it’s not maintained anymore…

[Diegocampy]

Sorry for the OT, what do you use to monitor this data? I use a Garmin 24/7, but I haven’t found a reliable integration to recover the data.

[Chykan (Hunter)]

I use Whoop with a Whoop 4.0. You can try use your home assistant companion app and see what health sensors your Garmin is transmitting to Google Fit through Health Connect. Turn the sensors on in the HA companion App.

Whoop! heart rate monitoring - integration

Will update dashboard with new Whoop data. [Screenshot_20250622-210931] If anyone is interested in a Whoop Gauge. [image] If Anyone is interested in any of the cards to display your whoop data hit me up. [image]

[Chykan (Hunter)]

For those looking for “canvas gauge card” replacements. This could be your answer.

Ring Tile Card: visualise your sensor data

Hi there, I thought it was time to share a project I’ve been working on for a while. I love Home Assistant’s tile card - they have made it easy to quickly build great looking dashboards. But I’ve always felt that sensor tiles needed something more. So I built ring-tile card, based on Home Assistant’s tile card. You can use ring-tile to bring your sensor tile cards to life. [image] You can make the ring the star of the show for new, bigger tiles. Here’s a cluster of weather sensors. [image…

Sorry @Miura for cross posting this but it does look good for those after that style.

[Chykan (Hunter)]

Miura I am not sure how hard it would be to achieve but when showing either the main or secondary gauge as ‘severity’.

It would be nice if the track could be coloured in a darkened gradient that is set, not just black or white.

Serverity

Needle

Very bad render of what I mean

This sort of effect

[Miura]

Looks like a good feature, will look into it

[Miura]

Hi everyone,

I am working on fixing this bug which is about the (inter-)actions that are not working on mobile/touch devices. I have created a ‘development-release’ (pre-release) with a fix, however, the changes I had to do are very large. So I’d like to be sure it’s working for you ‘all’ before I commit to this change, as reverting will be a pain in the ***.

You can download the version - v1.5.0-dev1 - in HACS by manually ‘Redownloading’ the card and than select v1.5.0-dev1 (pre-release). Please test the extra interactions for Primary value-text, Secondary value-text and Icon - using the tap, hold and double-click actions. Also make sure the regular card-actions still works - Please test on both desktop and mobile devices.

Your effort is greatly appreciated, thanks in advance!

Edit: little ‘btw’, you should be able to safely revert back to 1.4.0 by Redownloading again

- Benjamin

[Chykan (Hunter)]

@Miura

Fun fact, the gradient-engine I use actually uses the term position which feels better suited for the gradients. Again, I’ve had to make a choice as I also have to support the from style for regular segments. Perhaps I could support both from and pos terminology …

@Miura just looking at the from and pos and the possibility of automatically calculating the shift of colours between, to match expected behaviour;

If gradient: false the color stop is at the start of the segment from:

gradient: false
segments:
  - from: 0
    color: gray
  - from: 12
    colour: dodgerblue

If gradient: true the color stop is at the middle of the segment pos:

gradient: true
segments:
  - pos: 0
    color: gray
  - pos: 12
    colour: dodgerblue

CURRENT BEHAVIOUR

• If gradient: false the segment color stop is from:

• Color stop is in blue where I expect it
  

  

• If gradient: true the segment color stop is from:

• Color stop shifts to the mid point and not where I expect it
  

  

• If gradient: false the segment color stop is pos:

• Color stop is in blue where I expect it
  

  

• If gradient: true the segment color stop is pos:

• Color stop shifts to the mid point and not where I expect it
  

  

POSSIBLE SOLUTION

• from: and pos: are useful to differentiate your colour stops within the yaml code but they don’t actually change the behaviour of colour stops.

• Personally my brain works with from: where I want the colour to start changing.

• If I set gradient: true and segment color pos: needs to calculate the midpoint between my from: setpoints

• Maybe making gradient: true or gradient: false is what changes how the from: is calculated (calculate mid points between the froms:) and get rid of pos:

• or

• Making pos: in segments specific to gradient: true which performs a calculation on the midpoints.

• Just understanding the behaviour gives the results I need but just thinking of a way to make the card do it automatically?

[Chykan (Hunter)]

Release v1.5.0 · benjamin-dcs/gauge-card-pro

Need to update docs to show *.yaml examples of how to nest the new functions.

• min/max indicators
• Improve setpoint options - Implement inner setpoint
• Customizable shapes
• Add gradient backgrounds for severity gauges

[willis.db]

is there a way to customize this into a straight bar gauge? been on the hunt for this feature
https://www.reddit.com/r/homeassistant/comments/1lwe3b8/thermostat_card_iso/

[Chykan (Hunter)]

Try this

Horizontal Temperature Gauge - Outside and Inside

I “created” two horizontal temperature gauges for my dashboard. I honestly tried to find a solution out of the box, but I never found anything. Forgive me if this already exists somewhere else or if there is an easier way to do this. I could not find it. I say “created” as I relied heavily on chatgpt. I first created an image (using powerpoint) of what I wanted and then shared it with chatgpt and then took it step by step. [Screenshot 2025-05-18 at 9.57.53 AM] This gauge above shows a back…

[guardian1691]

Would it be possible for the inner gauge to display the current range that the sensor is in? For example, I have a card displaying the current UV index. I’d like to know how close we are to breaking into the next group (0-3, 3-6, 6-8, 8-11, 11+). The gradient effect is great, but I’d also like to add an inner bar similar to the third image in the advanced customization configurations. So that if the current value is 5, there is a bar that displays yellow and the same size as the 3-6 range in the main gauge.

type: custom:gauge-card-pro
entity: sensor.pirateweather_uv_index
visibility:
  - condition: state
    entity: input_boolean.show_uv_card
    state: "on"
  - condition: numeric_state
    entity: sensor.pirateweather_uv_index
    above: 0
segments:
  - from: 0
    color: green
  - from: 3
    color: yellow
  - from: 6
    color: orange
  - from: 8
    color: red
  - from: 11
    color: purple
needle: true
gradient: true
titles:
  primary: UV Index
gradient_resolution: medium
max: 15
value_texts:
  primary_unit: " "

[Chykan (Hunter)]

Just put a inner gauge in with gradient: false

Gauge Card Pro

Comparison of two water temperature sensors in my aquarium. Original Cards Original Gauge Card Code [image] [image] Gauge Card Pro Gauge Card Pro Code [image] Gradient Colours not lining up with Solid Colours When changing this to a gradient with the same segments, what should be a green colour is shown as a yellow. The gradient seems like it is calculated on the mid point between the two values you want. [image] Value Adjustment Value adjustment to make Solid Colours match Gradi…

For further refinement you can make the seconday text state your ranges, instead of the secondary value i.e. (0-3, 3-6, 6-8, 8-11, 11+)

You would use the same sensor data for both secondary and primary gauges.

Gauge Card Pro

Resting Heart Rate segments: Non Gradient color segments value_texts: secondary_value: Template to produce a word rating value_texts: secondary_color: Template to change secondary text color inline with segments Card Code [image] [image]

You may also be able to modify some of my templates located in this post

Health and Fitness Data Into Home Assistant - HA Companion App and Health Connect

There is a lot of Health Connect sensors available for the Android Platform. These can be used to create Health/Fitness dashboard. Depending on what devices you have will dictate what sensors will be available. [image] There is a bit of work to get these into Home Assistant. The below examples are getting Whoop data from a Whoop 4.0 into Health Connect. Which then can be viewed in Google Fit or HA Companion App. Within the Whoop App there is integrations that Whoop can connect to. [image] …

[Miura]

(Sorry for the late response ) - I’m not sure if really following your ‘problem’ correctly. I definitely understand that gradient: true in combination with from: segments can be somewhat confusing to understand. Inspired by your post earlier I introduced pos. Configuring with gradient: true, pos tells you exactly where your color will be, so there’s no need to calculate a mid-point between the two segment.

I could indeed change the logic for gradient: true with from to work with mid-point, but I feel that’s too much complexity while pos pretty much solves the problem (imho )

[Chykan (Hunter)]

@miura - As shown in Gauge Card Pro 🌈 - #128 by Chykan using either from: or pos: colour stops show exactly the same behaviour.

• Essentially just a different name to achieve the same thing, there is no behaviour difference between from: or pos:

• When editing a card I know what my colour stop ranges are to be e.g. 0, 5, 10, 15, 20

• If I am editing a dashboard and trying to decide if gradients or segments will look better with that particular gauge when switching between gradient: true or gradient: false, I need to now manually calculate my colour stops.

• I have to manually change the colour stops between the two no matter if it is from: or pos:

  • gradient: false = 0, 5, 10, 15, 20 (where I want the colour to start from)
  • gradient: true = 2.5, 7.5, 12.5, 17.5 (mid point position, manual calculation)

OPTION 1
This option still involves the user to manually change the colour stops

• Delete gradient: true or false as an option in the card
• Instead, from: or pos: is what turns on the gradient feature.
  • ‘from:’ = gradient: false
    • (where a user expects the colour to start)
  • ‘pos:’ = gradient: true
    • (which is the manually calculated mid point of where the user wants the colour)

OPTION 2
This option the card calculates the colour stops for pos:

• Keep the gradient: true/false toggle in the card.
• Introduce a distinction between from: and pos::
• from: (default) uses your defined stops directly (0, 5, 10, 15, 20).
• pos: triggers automatic midpoint calculation for gradients:

segments:
  - from: 0 color: red
  - from: 5 color: green
  - from: 10 color: blue

becomes—when using pos:—

segments:
  - pos: 0   # card calculates midpoint at 2.5
    color: red
  - pos: 5   # card calculates midpoint at 7.5
    color: green
  - pos: 10  # card calculates midpoint at 12.5
    color: blue

No need for users to manually compute midpoints—it’s done for them.

[Miura]

@Chykan

OPTION 2
This option the card calculates the colour stops for pos:

• Keep the gradient: true/false toggle in the card.
• Introduce a distinction between from: and pos::
• from: (default) uses your defined stops directly (0, 5, 10, 15, 20).
• pos: triggers automatic midpoint calculation for gradients:

What I feel like something I could add is actually the other way around. from will calculate midpoints, as ‘from’ indicates a range. pos will always be the exact position where that color will be shown.

Currently I’m testing adding a from_segments_as_midpoint variable, with the idea that in the future this will be the default behaviour for from-segments (which will than also remove this from_segments_as_midpoint variable)

[Diegocampy]

Hi, I’m definitely doing something wrong. I don’t have complex requests, it would seem simple, but I can’t get a title.

This is the code, where am I wrong? Thanks

type: conditional
conditions:
  - condition: numeric_state
    entity: sensor.import_power
    above: -1
card:
  type: custom:gauge-card-pro
  entity: sensor.import_power
  title: Assorbimento
  unit: ""
  needle: true
  min: 0
  max: 3300
  gradient: true
  gradient_resolution: medium
  segments:
    - from: 0
      color: green
    - from: 300
      color: yellow
    - from: 1000
      color: orange
    - from: 3300
      color: red

[Miura]

Use:

titles:
  primary: Assorbimento

Also available within the visual editor under Titles

[Chykan (Hunter)]

Ok. Yes from a card standpoint I can see how ‘pos’ indicating the exact position of the colour makes sense. but from a real world perspective, people know the ranges that they want being ‘from’ and ‘to’. Pos in this case becomes something the user has to calculate between their known ranges.

[Miura]

That’s what I feel pos has to be. You have to set the exact position you want the colour to be.

Having from to automatically calculate midpoint makes more sense for me. See the image below. from clearly indicates the range from 50 to 75 to be yellow. That’s how the regular HA gauge works and my card without gradient also works. People who than switch to gradient: true will see that the gradient better resembles the ‘regular’ gauge, but just applied with a gradient.