Custom card: barometer gauge


I adapted the standard gauge card a bit to make it look more like a barometer because I wanted that look for my air pressure sensor. It comes in two styles:



Download and full usage information is provided via this Github repo.

… It’s also still a bit work in progress and any help is welcome. Especially with the blue and red markers you can see on the gauge. The idea is that these would indicate the 24hr/48hr/weekly low and high that has been recorded, so you can see a bit of a weather trend. Still have to figure out where to get that state info + I’m not that good with css transforms that are needed to move those markers. For the moment they just have that fixed position. …

Initial post edited on 2019-08-18


Loving it ! Will look into updates :slight_smile:
Do you think it would be possible not to have the gauge and measurment overlap ? I mean, i always found that the gauge is too much thick/bold.

About the lower/higher values markers, there’s no other way than create new sensors. I achieved this on temperatures with some influxdb sensors on my setup.

Just uploaded an update on Github. There are no visual changes, but the html and css code is improved so the min/max pointers will eventually work when I’ve figured out how to get to the data. Thanks for that influxdb idea SNoof85, I’ll look into that.

I’m going to look into adding options like being able to choose between the standard gauge look and a needle gauge. I could add an option for changing font-size too then.

For now, just download the .js file and change this css rule before you upload it to your installation:

.gauge-data #percent{
    font-size: calc(var(--base-unit) * 0.55);

Changing it to 0.35 seems to get the result you’re looking for.

I really like this improvement. It would be possible to achieve something similar to this
with several colors in each range of pressure values.


Thx for the update.

Tried the suggested change but this change the text size not the gauge size…
@El_Viejo show a perfect illustration of what i meant.

Thx @kdw2060 for the base !

This card needs 3 sensors, 1 for actual pressure, 1 for min and 1 for max (you have to create your own sensors for min and max, personnaly i do it with a influxdb request)

Wow, you’ve been busy. I like the thinner look of the gauge arc.

I have all the functions ready for getting the min/max values, works in my test setup. I chose to use the built-in \history api call (documentation), to not have to install another plugin like Influxdb.

Now I just still need to get a better look at how to set and read out extra config settings, then string it all together. Hope to find some time the following days.

Btw, whoever is reading this topic might also be interested in these two alternatives:

If you’re good with css canvasses you could work of those 2 too.

1 Like

Did some refresh again with min/max style + tooltip on the min/max bounds.

I have everything setup for influxdb, so i won’t dig more on history api call (and my hass history is limited to 3 days, not enough !)

For sure if you want to pick up the style it’s all yours on github :slight_smile:

I just updated the start post of the thread.
Development is finished and an updated version has been posted on Github, including a short manual. Make sure to read the prerequisites section.

I think the git link points to a picture instead?

Good job. The images look very nice.
The link to the github seems to be incorrect. In my tests only the picture appears.

oops, that got corrupted with the post edit. fixed now

Nice job ! Will give it a try with api calls instead of influx sensor.