Lovelace: Gauge card

Share your Projects! Dashboards & Frontend
1

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 GitHub - johnrbell/Gauge_CSS: Pure CSS Gauge. It's pretty..

@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.

gauge-severity
gauge-stack

You can find the code here

Instructions

The instructions are also found on the above repo.

  1. Download gauge-card.js
  2. Place the file in your config/www folder
  3. 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

  1. 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
  1. Reload your Lovelace tab (no need to restart Home Assistant or other things) and you should see the card.

FAQ: GitHub - ciotlosm/lovelace-thermostat-dark-card: 🌡 Thermostat card with a round and black feel to it

Buy Me A Coffee if you like the cards so much that wish to express your gratitude.

50 Likes
2

I had simply used @ciotlosm’s gauge card with the sensors provided by the system monitor component. Super easy.
https://www.home-assistant.io/components/sensor.systemmonitor/

image

5 Likes
3

thanks for sharing this

4

Great share!

Do you get a history trend over time if you click on the gauge image (like if you click on the value in the old frontend)?

5

Just implemented this for my HP Ink Levels and looks really awesome. Also tried to click the card but nothing happens, so looks like there is no history.

6

Not configured to work like that, but could be added. You can raise a feature request here: https://github.com/ciotlosm/custom-lovelace/issues

@Bramus ^^

7

thank you for sharing this card. it’s very nice.
Is there a way to prevent it from “propagating” outside it’s box?
I checked in both Chrome and Safari and the arch sometimes expands outside its box

8

Just use “scale:” parameter to scale it

9

@ciotlosm
first apologies. should have read the docs.
thank you for the help.

10

@Bramus @phileep You can update your Gauge card to see if now it shows what you expected on click.

11

Great addon thanks!

Possible to make it show details like history or attributes when clicked?

12

@g0g0 update it and try again

1 Like
13

Not sure if it is in the card / js file but found this:
Running Home Assistant behind NGINX proxy. Now remote from other location as home i’m getting the following error on the card:

https://domain.name.com/local/gauge-card.js:7:1 Uncaught SyntaxError: Unexpected token <

The card is showing that it can not find the Custom Element gauge-card. It is working from https://domain.name.com internally but when i’m outside my home network I get the error about the token.

In my configuration.yaml i have setup the base_url as domain.name.com.

14

Make sure you clear cache, and maybe update in resources the URL to have v=2 at the end

/local/gauge-card.js?v=2

Also make sure you used “raw” version for download: https://raw.githubusercontent.com/ciotlosm/custom-lovelace/master/gauge-card/gauge-card.js

1 Like
15

?v=2 did the trick :slight_smile:

On my iPhone i do see another error:

https://domain.name.com/local/gauge-card.js?v=2:2:14 TypeError: Cannot call a class constructor without |new|
16

Make sure you have javascript_version: latest in your frontend: block inside configuration.yaml

Added more info in the new FAQ section: https://github.com/ciotlosm/custom-lovelace#faq

1 Like
17

I liked these cards already, but… wow… I love them now. Nice work!

1 Like
18

getting “Custom element doesn’t exist: gauge-card.” error. I made sure I used the raw format and also have javascript_version: latest in my configuration.yaml. I also appended v=2. Here is my config.

  • type: horizontal-stack
    cards:
    • type: custom:gauge-card
      title: office temp
      entity: sensor.office_multisensor_temperature
19

Do you have any JS errors in your console? What browser are you using?

20

I have tried both firefox and chrome.