This card aims to offer a customizable gauge visualization for Home Assistant that displays various types of information, such as "autarky" or "self-consumption". If you have a new idea on a new gauge type
feel free to submit a Feature Request, explaining the new type, or even better, a Pull Request, implementing this type.
What's the difference from this card to the official Gauge Card?
Compared to the original Gauge Card, the main advantages of this card are its customizability and the ability to sync with the energy date selection, ensuring dynamic information updates over different periods of time. Most important of all, this card shows different types of information, that are otherwise simply not accessible from the official cards.
If you would like to customize the Energy period selector and its dates, I recommend using this card: Energy Period Selector Plus
This card is not direclty available in HACS (Home Assistant Community Store), but can be added using "Custom Repositories". HACS is a third party community store and is not included in Home Assistant out of the box. To install this:
- Go to HACS
- Click on
Frontend
- Click on the overflow Menu (three vertical dots)
- Click on
Custom Repositories
- Type this URL https://github.com/flixlix/energy-gauge-bundle-card
- In "Category", select
lovelace
- Install via UI
Manual Install
-
Download and copy
energy-gauge-bundle-card.js
from the latest release into yourconfig/www
directory. -
Add the resource reference as decribed below.
If you configure Dashboards via YAML, add a reference to energy-gauge-bundle-card.js
inside your configuration.yaml
:
resources:
- url: /local/energy-gauge-bundle-card.js
type: module
Else, if you prefer the graphical editor, use the menu to add the resource:
- Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
- Navigate to Settings -> Dashboards
- Click three dot icon
- Select Resources
- Hit (+ ADD RESOURCE) icon
- Enter URL
/local/energy-gauge-bundle-card.js
and select type "JavaScript Module". (Use/hacsfiles/energy-gauge-bundle-card/energy-gauge-bundle-card.js
and select "JavaScript Module" for HACS install if HACS didn't do it already)
To configure this card, only the type is required, making it very easy to get started.
🥳 This card also features a built-in ui editor, making it even easier to configure the card. 🥳
Name | Type | Default | Description |
---|---|---|---|
type | string |
required | custom:energy-gauge-bundle-card . |
title | string |
undefined | The title of the card. |
entity | string |
undefined | Any entity in your HA. Note that this will only be used for to open the more info dialog on a tap. |
clickable | boolean |
false | If set to true , the card will be clickable and open the more info dialog on a tap. |
min | number |
0 | The minimum value of the gauge. |
max | number |
100 | The maximum value of the gauge. |
unit_of_measurement | string |
undefined | The unit of measurement of the gauge. |
needle | boolean |
false | If set to true , a needle will be displayed. |
severity | object |
undefined | An object containing the severity levels of the gauge. Check Severity Configuration for more info. |
decimals | number |
1 | The number of decimals to display. |
name | string |
undefined | The name of the gauge. Will be displayed below the value. |
tooltip | string |
auto | The text for thetooltip of the gauge. Will be displayed on hover. |
show | object |
undefined | An object containing the configuration for the gauge. Check Show Configuration for more info. |
Name | Type | Default | Description |
---|---|---|---|
red | number |
undefined | The value at which the gauge will be red. |
yellow | number |
undefined | The value at which the gauge will be yellow. |
green | number |
undefined | The value at which the gauge will be green. |
normal | number |
undefined | The value at which the gauge will be normal. |
Name | Type | Default | Description |
---|---|---|---|
name | boolean |
true | If set to true , the name will be displayed. |
tooltip | boolean |
true | If set to true , the tooltip and the icon for the tooltip will be displayed. |
type: custom:energy-gauge-bundle-card
type: custom:energy-gauge-bundle-card
gauge_type: self_consumption
needle: true
min: 0
max: 100
decimals: 1
show:
name: true
tooltip: false
severity:
green: 100
yellow: 100
red: 100