Gauge card

Due to popular request, I’ve created a sample card to better display sensor information visually on an interface. This is not the first of it’s kind as I’ve seen after that other people already done similar things in the past: Gauge Chart

Most important thing of this card is that this it’s standalone using mostly CSS without extra javascript libraries. One other important thing is that it allows custom scaling with parameters to allow using it together with stack cards.

It’s based on code from https://github.com/JohnrBell/Gauge_CSS.

@cogneato showed me a very cool Resource Monitor (similar to my Systems Tab) using this and I was impressed, so I decided I’d share here as well.





You can find the code here

Instructions

The instructions are also found on the above repo.

Download gauge-card.js Place the file in your config/www folder Include the card code in your ui-lovelace.yaml

resources: - url: /local/gauge-card.js?v=1 type: js

Note: You can change v=1 to a higher number whenever updating code to avoid having to clear cache in all browsers

Write configuration for the card in your ui-lovelace.yaml

- type: horizontal-stack cards: - type: custom:gauge-card title: Temperature entity: sensor.random_temperature min: -20 max: 35 - type: custom:gauge-card title: Oil entity: sensor.my_oil_sensor severity: red: 50 green: 0 amber: 40

Reload your Lovelace tab (no need to restart Home Assistant or other things) and you should see the card.

FAQ: https://github.com/ciotlosm/custom-lovelace#faq

if you like the cards so much that wish to express your gratitude.