Lovelace: Gauge card


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

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: https://github.com/ciotlosm/custom-lovelace#faq

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


Gauge Chart
Lovelace: dual gauge card
#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


#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


#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


#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


#17

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


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