Please read ISSUE.md for the change i made to the code
A simple gauge implemented in CSS based on https://github.com/JohnrBell/Gauge_CSS.
Options
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | Required | custom:gauge-card |
| title | string | optional | Name to display on card |
| measurement | string | optional | If not set, uses the unit_of_measurement on the entity |
| entity | string | Required | sensor.my_temperature |
| attribute | string | optional | If set, this attribute of the entity is used, instead of its state |
| min | number | 0 | Minimum value for graph |
| max | number | 100 | Maximum value for graph |
| scale | string | '50px' | Base value for graph visual size |
| severity | object | optional | Severity object. See below |
Severity object
| Name | Type | Default | Description |
|---|---|---|---|
| red | number | Required | Value from which to start red color |
| green | number | Required | Value from which to start green color |
| amber | number | Required | Value from which to start amber color |
Example
Using two with stack
- 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: 40Simple one
- type: custom:gauge-card
entity: sensor.my_oil_sensor
scale: 100pxUsing an attribute
- type: custom:gauge-card
entity: climate.living_room
attribute: current_temperatureUsing an attribute with dot notation
- type: custom:gauge-card
entity: climate.living_room.current_temperature