End Of Life

As you can see in issues, I don't take too much time to answer to every needs, because lack of time / skill ! There won't be any updates from now. I will remove the card from HACS default, you will still be able to use it with HACS custom repository.

Lovelace tempometer-gauge-card

A Home Assistant lovelace custom gauge card for barometer, thermometer, humidity meter or anything you want with custom icons.

Usage

Add this card via HACS (recommended)

Or manually : Add this custom card to your home assistant instance. Reference it into your lovelace configuration.

  - type: js
    url: /local/lovelace/tempometer-gauge-card.js

Finally : Add it as a custom card to your lovelace : 'custom:tempometer-gauge-card'.

Note : This card is made for a full row, don't try to put it in a grid or horizontal stack, it will look bad. I won't fix this.

Options

Card options

Option	Type	Description
entity (required)	string	The entity to track. Can be followed by an attribute to track entity.attribute)
min (required)	number	The gauge's minimum value
max (required)	number	The gauge's maximum value
entity_min	string	The entity that define the minimum reached. Can be followed by an attribute to track entity.attribute) (you have to create this entity, the card will not compute it !)
entity_max	string	The entity that define the maximum reached. Can be followed by an attribute to track entity.attribute) (you have to create this entity, the card will not compute it !)
title	string	Card title to show.
card_style	string	Set this to thermometer, humidity or custom to change icons. (Default will be barometer theme, custom will need icon1, icon2, icon3 !)
measurement	string	Custom unit of measurement
icon1	string	Icon on left side in custom style.
icon2	string	Icon on center in custom style.
icon3	string	Icon on right side in custom style.
icon_color	string	Icon Color (Default var(--paper-item-icon-color))
severity	severity object	Severity map to change the gauge color.
decimals	number	Decimal precision of entity value.

Severity object

Option	Type	Description
green (required)	number	Value for the color green.
yellow (required)	number	Value for the color yellow.
red (required)	number	Value for the color red.
max	number	Maximum value of the last step, normal color will be rendered above

Example:

severity:
  green: 1020
  yellow: 1000
  red: 900
  max: 1100

Tip

The maximum and minimum bounds have a hover tooltip with their own values.

Full examples

type: 'custom:tempometer-gauge-card'
entity: sensor.barometer
min: 980
max: 1050
entity_min: sensor.barometer_min_this_week
entity_max: sensor.barometer_max_this_week
title: Barometer
decimals: 0
severity:
  green: 1020
  yellow: 1000
  red: 900

type: 'custom:tempometer-gauge-card'
entity: sensor.temperature
min: 15
max: 30
entity_min: sensor.temperature_min_this_week
entity_max: sensor.temperature_max_this_week
title: Thermometer
card_style: thermometer
severity:
  green: 22
  yellow: 24
  red: 27

type: 'custom:tempometer-gauge-card'
entity: sensor.power
min: 0
max: 4000
entity_min: sensor.power_min_this_week
entity_max: sensor.power_max_this_week
title: Power Meter
card_style: custom
icon1: mdi:flash-off
icon2: mdi:flash-outline
icon3: mdi:flash
severity:
  green: 1000
  yellow: 2000
  red: 3000
  max: 5000

Maybe more to come ! PR are welcome and i can have a look to features requests.