https://github.com/benjamin-dcs/template-gauge-card
Template Gauge Card
https://github.com/benjamin-dcs/template-gauge-card
Last synced: about 1 year ago
JSON representation
Template Gauge Card
- Host: GitHub
- URL: https://github.com/benjamin-dcs/template-gauge-card
- Owner: benjamin-dcs
- License: apache-2.0
- Created: 2025-03-28T07:58:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-04T10:11:58.000Z (about 1 year ago)
- Last Synced: 2025-04-04T10:30:37.163Z (about 1 year ago)
- Language: TypeScript
- Size: 145 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# {{ Template Gauge Card }}
## Description
This card has the same look and feel as the default [Gauge card](https://www.home-assistant.io/dashboards/gauge/), but the majority of the fields can, independently, be set with a (templatable) value. Additionally, it is possible to have a different `value` and `valueText`, to (for example) create your own version of the [Grid neutrality gauge](https://www.home-assistant.io/dashboards/energy/#grid-neutrality-gauge). Click [here](examples/energy-grid-neutrality-gauge.md) for an example YAML-code.
## Configuration variables
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :-------------------- | :-------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------|:--------------|
| `entity` | string | Optional | Entity for template and actions | |
| `value` | string | Optional | Value for graph | ✔️ (`number`) |
| `valueText` | string | Optional | Text for graph | ✔️ |
| `name` | string | Optional | Name of gauge entity, displayed beneath graph | ✔️ |
| `min` | string | Optional | Minimum value for graph | ✔️ (`number`) |
| `max` | string | Optional | Maximum value for graph | ✔️ (`number`) |
| `needle` | boolean | `false` | Show the gauge as a needle gauge. Required to be set to true, if using segments | |
| `tap_action` | action | `none` | Home assistant action to perform on tap | |
| `hold_action` | action | `none` | Home assistant action to perform on hold | |
| `double_tap_action` | action | `none` | Home assistant action to perform on double_tap | |
| `entity_id` | `string` `list` | Optional | Only reacts to the state changes of these entities. This can be used if the automatic analysis fails to find all relevant entities | |
## Installation
### HACS
Template Gauge Card is not yet available in HACS. Soon a request to be accepted will be created. In the meantime, this repo can be added as [`custom repository`](https://www.hacs.xyz/docs/faq/custom_repositories/).
Use `https://github.com/benjamin-dcs/template-gauge-card` as **Repository** and `Dashboard` as **Type**
### Manual
1. Download `template-gauge-card.js` file from the [latest release][release-url].
2. Put `template-gauge-card.js` file into your `config/www` folder.
3. Add reference to `template-gauge-card.js` in Dashboard. There's two way to do that:
- **Using UI:** _Settings_ → _Dashboards_ → _More Options icon_ → _Resources_ → _Add Resource_ → Set _Url_ as `/local/template-gauge-card.js.js` → Set _Resource type_ as `JavaScript Module`.
**Note:** If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_
- **Using YAML:** Add following code to `lovelace` section.
```yaml
resources:
- url: /local/template-gauge-card.js.js
type: module
```
### Translations
If you want to help translating Template Gauge Card, feel free to create an [issue](https://github.com/benjamin-dcs/template-gauge-card/issues) or fork this repo and create an pull-request.
## Support
## Credits
This card uses some of the core functionality from [Mushroom](https://github.com/piitaya/lovelace-mushroom/)