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
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
The instructions are also found on the above repo.
- Download gauge-card.js
- Place the file in your
- Include the card code in your
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
- 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.