https://github.com/benjamin-dcs/gauge-card-pro
Build beautiful Gauge cards using π gradients and π οΈ templates
https://github.com/benjamin-dcs/gauge-card-pro
card gauge gradient home-assistant lovelace lovelace-custom-card templates
Last synced: 3 months ago
JSON representation
Build beautiful Gauge cards using π gradients and π οΈ templates
- Host: GitHub
- URL: https://github.com/benjamin-dcs/gauge-card-pro
- Owner: benjamin-dcs
- License: apache-2.0
- Created: 2025-04-10T06:42:55.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-05T11:25:57.000Z (4 months ago)
- Last Synced: 2026-02-05T22:18:15.455Z (4 months ago)
- Topics: card, gauge, gradient, home-assistant, lovelace, lovelace-custom-card, templates
- Language: TypeScript
- Homepage:
- Size: 1.28 MB
- Stars: 229
- Watchers: 1
- Forks: 8
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Gauge Card Pro
### Build beautiful Gauge cards using π gradients and π οΈ templates!
Ν
> [!NOTE]
> Need help with your configuration? Checkout my official [Gauge Card Pro Assistant](https://chatgpt.com/g/g-698c7177f22481919cb8260f05134f25-gauge-card-pro-assistant)!
## Description
Inspired by the idea to be able to recreate the Home Assistant native Energy Gauge Cards I created `Gauge Card Pro`. Built on top of the Home Assistant [Gauge card](https://www.home-assistant.io/dashboards/gauge/), but with many more features and beautiful look-and-feel!
- π Native gradient support for `segments`
- βοΈ Two gauges in one
- π οΈ Use templates for the majority of the fields
- β Ability to start `severity` gauges from the center
- β¨ Additional icon indicators next to the gauge
- πͺ Several styling options
- π¨ Every element in the card can have its colour defined. This can be a single colour or two colours for light- or darkmode. Of course, allows templating!
- π¬ Set `value` and `value_text` independently
- π Two labels underneath the gauge
- π¨ Automatic color interpolation for `severity` gauges
- πΆβπ«οΈ Native ability to hide the background
## Support This Project
If you find **Gauge Card Pro** useful, consider supporting its development:
[](https://www.buymeacoffee.com/benjamindcs)
[](https://github.com/sponsors/benjamin-dcs)
## Table of contents
- [Configuration variables](#configuration-variables)
- [Min/Max Indicator Configuration variables](#minmax-indicator-configuration-variables)
- [Inner Gauge Configuration variables](#inner-gauge-configuration-variables)
- [Setpoint Configuration variables](#setpoint-configuration-variables)
- [Titles Configuration variables](#titles-configuration-variables)
- [Value-Texts Configuration variables](#value-texts-configuration-variables)
- [Icon Configuration variables](#icon-configuration-variables)
- [Icon Template object](#icon-template-object)
- [Shapes Configuration variables](#shapes-configuration-variables)
- [Features Configuration variables](#features-configuration-variables)
- [Custom styling options](#custom-styling-options)
- [YAML structure - Showing is as possible and/or typical usage](#yaml-structure---showing-is-as-possible-andor-typical-usage)
- [ΒΉ Color examples](#1-color-examples)
- [Fixed single value](#fixed-single-value)
- [Single template value](#single-template-value)
- [Light/Dark Mode fixed values](#lightdark-mode-fixed-values)
- [Light/Dark Mode template values](#lightdark-mode-template-values)
- [Β² `segments` examples](#2-segments-examples)
- [Fixed list with from](#fixed-list-with-from)
- [Fixed list with pos](#fixed-list-with-pos)
- [Template list](#template-list)
- [Difference between `from` and `pos` segments](#difference-between-from-and-pos-segments)
- [Installation](#installation)
- [Install via HACS (recommended)](#install-via-hacs-recommended)
- [Manual](#manual)
- [Translations](#translations)
- [Credits](#credits)
## Configuration variables
> [!IMPORTANT]
> When using the Visual Editor to clear/empty one of the following fields, there is some yaml-code left which prevents the default values from working:
>
> - `primary`
> - `primary_unit`
> - `secondary`
> - `secondary_unit`
>
> Delete the line entirely from your yaml-code to restore the default functionality for these fields
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :--------------------------------------- | :-------------------------------------------------------------------- | :-------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------- |
| `type` | string | | `custom:gauge-card-pro` | |
| `header` | string | | Header of the card | |
| `entity` | string | Optional | Entity for main-gauge value, templates, actions and features (e.g.: `{{ states(entity) }}`) | |
| `entity2` | string | Optional | Entity for inner-gauge value, and templates (e.g.: `{{ states(entity2) }}`) | |
| `inner` | [inner object](#inner-gauge-configuration-variables) | | Configuration for the inner gauge. Use `inner: {}` to use all defaults for the inner gauge | |
| `attribute` | string | Optional | Attribute of `entity` to use for main-gauge value | |
| `min` | number | 0 | Minimum value for graph | βοΈ (only templatable in code-editor/yaml) |
| `max` | number | 100 | Maximum value for graph | βοΈ (only templatable in code-editor/yaml) |
| `needle` | boolean | `false` | Show the gauge as a needle gauge | |
| `needle_color` | [string or map5](#1-color-examples) | `var(--primary-text-color)` | Color of the needle | βοΈ |
| `segments` | [list6](#2-segments-examples) | Optional | List of colors and their corresponding start values | βοΈ |
| `severity_centered` | boolean | Optional | Severity gauge (requires disabled needle) start at the center | |
| `severity_color_mode` | string | `basic` | Sets the mode to determine/render the color of the value of a severity gauge. | |
| | | | β’ `basic`: Color determined based on `segments` | |
| | | | β’ `interpolation`: Color determined based on `segments`, interpolated between segment positions | |
| | | | β’ `gradient`: Show part of the gradient-arc as value | |
| `gradient` | boolean | `false` | Shows segments as a gradient (requires needle) | |
| `gradient_background` | boolean | `false` | Shows the background as a gradient for severity gauge (requires disabled needle) | |
| `gradient_resolution` | string or number | `auto` | Level of detail for the gradient. Must be `auto` or a number indicating the amount of segments to create | |
| `min_indicator` | [min/max indicator object](#minmax-indicator-configuration-variables) | | Configuration of the min indicator | |
| `max_indicator` | [min/max indicator object](#minmax-indicator-configuration-variables) | | Configuration of the max indicator | |
| `setpoint` | [setpoint object](#setpoint-configuration-variables) | | Configuration for the setpoint needle | |
| `round` | string | `off` | Rounds the ends of the gauge. Valid values are `off`, `full`, `medium` and `small` |
| `titles` | [titles object](#titles-configuration-variables) | | Configuration for the titles beneath the gauge | |
| `value_texts` | [value_texts object](#value-texts-configuration-variables) | | Configuration for the value texts inside the gauge | |
| `icons` | [icons object](#icons-configuration-variables) | | Configuration for the icons | |
| `hide_background` | boolean | `false` | Hides the background and border of the card | |
| `shapes` | [shapes object](#shapes-configuration-variables) | | Configuration of the shapes several elements | |
| `value` | template | state of `entity` | Value for graph | βοΈ (only available in code-editor/yaml) |
| `entity_id` | string or 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 | |
| **ACTIONS** | | | | |
| `tap_action` | action | `more-info` | Home assistant action to perform on tap. See [official documentation](https://www.home-assistant.io/dashboards/actions/#tap-action) for more info | |
| `hold_action` | action | `none` | Home assistant action to perform on hold. See [official documentation](https://www.home-assistant.io/dashboards/actions/#hold-action) for more info | |
| `double_tap_action` | action | `none` | Home assistant action to perform on double_tap. See [official documentation](https://www.home-assistant.io/dashboards/actions/#double-tap-action) for more info | |
| `primary_value_text_tap_action` | action | `more-info` | Home assistant action to perform on tap on the primary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#tap-action) for more info | |
| `primary_value_text_hold_action` | action | `none` | Home assistant action to perform on hold on the primary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#hold-action) for more info | |
| `primary_value_text_double_tap_action` | action | `none` | Home assistant action to perform on double_tap on the primary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#double-tap-action) for more info | |
| `secondary_value_text_tap_action` | action | `more-info` | Home assistant action to perform on tap on the secondary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#tap-action) for more info | |
| `secondary_value_text_hold_action` | action | `none` | Home assistant action to perform on hold on the secondary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#hold-action) for more info | |
| `secondary_value_text_double_tap_action` | action | `none` | Home assistant action to perform on double_tap on the secondary value-text. See [official documentation](https://www.home-assistant.io/dashboards/actions/#double-tap-action) for more info | |
| `icon_tap_action` | action | `more-info` | Home assistant action to perform on tap on the icon. See [official documentation](https://www.home-assistant.io/dashboards/actions/#tap-action) for more info | |
| `icon_hold_action` | action | `none` | Home assistant action to perform on hold on the icon. See [official documentation](https://www.home-assistant.io/dashboards/actions/#hold-action) for more info | |
| `icon_double_tap_action` | action | `none` | Home assistant action to perform on double_tap on the icon. See [official documentation](https://www.home-assistant.io/dashboards/actions/#double-tap-action) for more info | |
| **FEATURES** | | | | |
| `feature_entity` | string | | Entity used for features and (optional) HVAC icons. If not set `entity` will be used | |
| `features` | [features object](#features-configuration-variables) | | Configuration of the additional features | |
### Inner Gauge Configuration variables
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :-------------------- | :-------------------------------------------------------------------- | :-------------------------- | :--------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |
| `attribute` | string | Optional | Attribute of `entity2` to use for inner-gauge value | |
| `min` | number | `min` of main gauge | Minimum value for graph | βοΈ (only templatable in code-editor/yaml) |
| `max` | number | `max` of main gauge | Maximum value for graph | βοΈ (only templatable in code-editor/yaml) |
| `mode` | string | `severity` | Sets the mode of the inner gauge | |
| | | | β’ `severity`: Shows the inner gauge as a rotating single color | |
| | | | β’ `static`: Shows all the segments without any further indications | |
| | | | β’ `needle`: Shows all the segments with a needle | |
| | | | β’ `on_main`: Shows a needle on the **main**-gauge. `min` and/or `max` of the inner-gauge can still be used | |
| `needle_color` | [string or map5](#1-color-examples) | `var(--primary-text-color)` | Color of the needle | βοΈ |
| `segments` | [list6](#2-segments-examples) | Optional | List of colors and their corresponding start values | βοΈ |
| `severity_centered` | boolean | Optional | Severity gauge (requires disabled needle) start at the center | |
| `severity_color_mode` | string | `basic` | Sets the mode to determine/render the color of the value of a severity gauge. | |
| | | | β’ `basic`: Color determined based on `segments` | |
| | | | β’ `interpolation`: Color determined based on `segments`, interpolated between segment positions | |
| | | | β’ `gradient`: Show part of the gradient-arc as value | |
| `gradient` | boolean | `false` | Shows segments as a gradient | |
| `gradient_background` | boolean | `false` | Shows the background as a gradient for severity gauge (requires disabled needle) | |
| `gradient_resolution` | string or number | `auto` | Level of detail for the gradient. Must be `auto` or a number indicating the amount of segments to create | |
| `min_indicator` | [min/max indicator object](#minmax-indicator-configuration-variables) | | Configuration of the min indicator | |
| `max_indicator` | [min/max indicator object](#minmax-indicator-configuration-variables) | | Configuration of the max indicator | |
| `setpoint` | [setpoint object](#setpoint-configuration-variables) | | Configuration for the setpoint needle | |
| `value` | template | state of `entity2` | Value for graph | βοΈ (only available in code-editor/yaml) |
| `round` | string | `off` | Rounds the ends of the gauge. Valid values are `off`, `full` and `small` |
### Min/Max Indicator Configuration variables
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :------------ | :--------------------------------------------- | :------------------- | :--------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |
| `type` | string | Required | `attribute`, `entity`, `number` or `template` | |
| `value` | value corresponding to the type | Required | Value of the min or max indicator | |
| | | | β’ `attribute`: attribute of `entity` (main-gauge) or `entity2` (inner-gauge) | |
| | | | β’ `entity`: Entity_id | |
| | | | β’ `number`: Fixed number | |
| | | | β’ `template`: Template that returns a number | βοΈ |
| `color` | [string or map5](#1-color-examples) | `rgb(255, 255, 255)` | Color of the min or max indicator | |
| `opacity` | number | 0.8 | Opacity of the min or max indicator | |
| `label` | boolean | false | Enables a label indicating the value (main gauge only) | |
| `label_color` | string | `#111111` | Color of the label | |
| `precision` | number | Optional | Amount of decimals to round the label to | |
### Setpoint Configuration variables
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :---------- | :--------------------------------------------- | :------------------- | :--------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |
| `type` | string | Required | `attribute`, `entity`, `number` or `template` | |
| `value` | value corresponding to the type | Required | Value of the needle | |
| | | | β’ `attribute`: attribute of `entity` (main-gauge) or `entity2` (inner-gauge) | |
| | | | β’ `entity`: Entity_id | |
| | | | β’ `number`: Fixed number | |
| | | | β’ `template`: Template that returns a number | βοΈ |
| `color` | [string or map5](#1-color-examples) | `var(--error-color)` | Color of the needle | βοΈ |
| `label` | boolean | false | Enables a label indicating the value (main gauge only) | |
| `precision` | number | Optional | Amount of decimals to round the label to | |
### Titles Configuration variables
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :-------------------- | :--------------------------------------------- | :-------------------------- | :------------------------ | :-------------------------------------------------------------------------- |
| `primary` | string | Optional | Primary title | βοΈ |
| `primary_color` | [string or map5](#1-color-examples) | `var(--primary-text-color)` | Primary title color | βοΈ |
| `primary_font_size` | string | `15px` | Primary title font-size | βοΈ |
| `secondary` | string | Optional | Secondary title | βοΈ |
| `secondary_color` | [string or map5](#1-color-examples) | `var(--primary-text-color)` | Secondary title color | βοΈ |
| `secondary_font_size` | string | `14px` | Secondary title font-size | βοΈ |
### Value-Texts Configuration variables
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :---------------------------- | :--------------------------------------------- | :---------------------------------- | :-------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |
| `primary` | string | `value` or state of `entity` | Primary value-text. Use `""` to overwrite the default | βοΈ |
| `primary_color` | [string or map5](#1-color-examples) | `var(--primary-text-color)` | Primary value-text color | βοΈ |
| `primary_unit` | string | `unit of measurement` of `entity` | Primary value-text unit of measurement. Use `""` to overwrite the default | βοΈ |
| `primary_unit_before_value` | boolean | false | Place unit of measurement in front of value | |
| `primary_font_size_reduction` | number [0-15] | `0` | Value by which the primary value-text is reduced | βοΈ (only templatable in code-editor/yaml) |
| `secondary` | string | `inner.value` or state of `entity2` | Secondary value-text. Use `""` to overwrite the default | βοΈ |
| `secondary_color` | [string or map5](#1-color-examples) | `var(--primary-text-color)` | Secondary value-text color | βοΈ |
| `secondary_unit` | string | `unit of measurement` of `entity` | Secondary value-text unit of measurement. Use `""` to overwrite the default | βοΈ |
| `secondary_unit_before_value` | boolean | false | Place unit of measurement in front of value | |
> [!NOTE]
>
> - Both `primary` and `secondary` value-texts can be an icon. Icons are activated for texts formatted as: `icon(...)`. For example: `icon(mdi:gauge)`. Icons cannot be combined with text.
> - Use `primary: ""` and/or `secondary: ""` to overwrite/disable the entire value_text (including unit)
> - Use `primary_unit: ""` and/or `secondary_unit: ""` to overwrite/disable the entity unit
> - No unit is added for non-numeric value_texts.
### Icons Configuration variables
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :------ | :-------------------------------------------- | :------- | :---------- | :-------------------------------------------------------------------------- |
| `left` | [icon object](#icons-configuration-variables) | Optional | | |
| `right` | [icon object](#icons-configuration-variables) | Optional | | |
#### Icon Configuration variables
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :----------- | :------ | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------- |
| `type` | string | Required | `battery`, `hvac-mode`, `swing-mode`, or `template` | |
| `value` | string | Optional/Required | value corresponding to the type | |
| | | | β’ `battery`: Battery entity_id (required) | βοΈ |
| | | | β’ `hvac-mode`: Climate entity_id (optional, otherwise `feature_entity` is used) | |
| | | | β’ `swing-mode`: Climate entity_id (optional, otherwise `feature_entity` is used) | |
| | | | β’ `template`: Template that returns an [`Icon Template object`](#icon-template-object) (required | βοΈ |
| `state` | string | Optional | Only available for `battery`: sensor indicating the charging state of the battery (valid states for charging are `charging` and `on`) | |
| `threshold` | number | Optional | Only available for `battery`: threshold above which the icon is not displayed | |
| `hide_label` | boolean | Optional | Only available for `battery`: hides the label | |
#### Icon Template object
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :------ | :----- | :------- | :------------------------------- | :-------------------------------------------------------------------------- |
| `icon` | string | Required | Icon | |
| `color` | string | Optional | Color of the icon | |
| `label` | string | Optional | Label displayed beneath the icon | |
##### Example
```yaml
icon:
type: template
value: |
{{
{
"icon": "mdi:battery",
"color": "blue",
"label": (states('sensor.my_sensor') | int * 100) | string + "%"
}
}}
```
### Shapes Configuration variables
> [!NOTE]
>
> The value needs to be a valid svg path. You can use an online tool like [svg-path-editor](https://yqnn.github.io/svg-path-editor/) to design your own custom needles!
| Name | Type | Default | Description | [Templatable](https://www.home-assistant.io/docs/configuration/templating/) |
| :---------------------- | :----- | :------------------------------------------------------------------------ | :-------------------------------------------------------- | :-------------------------------------------------------------------------- |
| `main_needle` | string | `M -28 0 L -27.5 -2 L -47.5 0 L -27.5 2.25 z` | Shape of the main gauge needle **without** inner gauge | βοΈ |
| | string | `M -49 -2 L -40 0 L -49 2 z` | Shape of the main gauge needle **with** inner gauge | βοΈ |
| `main_min_indicator` | string | `M-32.5 0A32.5 32.5 0 0 0 32.5 0L47.5 0A-47.5-47.5 0 01-47.5 0L-47.5 0 z` | Shape of the main min-indicator **without** inner gauge | βοΈ |
| | string | `M-32.5 0A32.5 32.5 0 0 0 32.5 0L47.5 0A-47.5-47.5 0 01-47.5 0L-47.5 0 z` | Shape of the main min-indicator **with** inner gauge | βοΈ |
| `main_max_indicator` | string | `M-32.5 0A32.5 32.5 0 0 0 32.5 0L47.5 0A-47.5-47.5 0 01-47.5 0L-47.5 0 z` | Shape of the main max-indicator **without** inner gauge | βοΈ |
| | string | `M-32.5 0A32.5 32.5 0 0 0 32.5 0L47.5 0A-47.5-47.5 0 01-47.5 0L-47.5 0 z` | Shape of the main max-indicator **with** inner gauge | βοΈ |
| `main_setpoint_needle` | string | `M -49 -2 L -40 0 L -49 0 z` | Shape of the setpoint needle of the main gauge | βοΈ |
| `inner_needle` | string | `M -27.5 -1.5 L -32 0 L -27.5 1.5 z` | Shape of the inner gauge needle | βοΈ |
| | string | `M -30 -1.5 L -34.5 0 L -30 1.5 z` | Shape of the `on_main` inner gauge needle | βοΈ |
| `inner_min_indicator` | string | `M-29.5 0A29.5 29.5 0 0 0 29.5 0L34.5 0A-34.5-34.5 0 01-34.5 0L-34.5 0 z` | Shape of the inner min-indicator | βοΈ |
| `inner_max_indicator` | string | `M-29.5 0A29.5 29.5 0 0 0 29.5 0L34.5 0A-34.5-34.5 0 01-34.5 0L-34.5 0 z` | Shape of the inner max-indicator | βοΈ |
| `inner_setpoint_needle` | string | `M -27.5 -1.5 L -32 0 L -27.5 0 z` | Shape of the setpoint needle of the inner gauge | βοΈ |
| | string | `M -30 -1.5 L -34.5 0 L -30 0 z` | Shape of the `on_main` setpoint needle of the inner gauge | βοΈ |
### Features Configuration variables
#### Climate Overview Feature
| Name | Type | Default | Description |
| :--------- | :------ | :------ | :----------------------------------------------------------- |
| `type` | string | | `climate-overview` |
| `separate` | boolean | false | Shows the overview page on a separate dedicated controls-row |
#### Temperature Control Feature
| Name | Type | Default | Description |
| :----- | :----- | :------ | :------------------- |
| `type` | string | | `adjust-temperature` |
#### Climate Fan Mode Feature
| Name | Type | Default | Description |
| :---------- | :----- | :------- | :-------------------------------------- |
| `type` | string | | `climate-fan-modes` |
| `fan_modes` | list | Optional | List of Fan Modes available in the card |
#### Climate HVAC Mode Feature
| Name | Type | Default | Description |
| :----------- | :----- | :------- | :--------------------------------------- |
| `type` | string | | `climate-hvac-modes` |
| `hvac_modes` | list | Optional | List of HVAC Modes available in the card |
#### Climate Preset Mode Feature
| Name | Type | Default | Description |
| :------------- | :----- | :------- | :----------------------------------------- |
| `type` | string | | `climate-preset-modes` |
| `preset_modes` | list | Optional | List of Preset Modes available in the card |
#### Climate Swing Mode Feature
| Name | Type | Default | Description |
| :------------ | :----- | :------- | :---------------------------------------- |
| `type` | string | | `climate-swing-modes` |
| `swing_modes` | list | Optional | List of Swing Modes available in the card |
### Custom styling options
Several CSS variables are available for advanced customization of some of the card elements. There is no native support to apply these variables, however [`card-mod`](https://github.com/thomasloven/lovelace-card-mod) can be used like so:
```yaml
card_mod:
style: |
* {
--main-needle-stroke-width: 1px;
--main-needle-stroke-color: white;
}
```
| CSS variable | Description |
| :------------------------------------- | :------------------------------------------ |
| `--main-severity-marker` | Color of the main severity gauge marker |
| `--main-needle-stroke-color` | Stroke color of the main needle |
| `--main-needle-stroke-width` | Stroke width of the main needle |
| `--main-min-indicator-stroke-color` | Stroke color of the main min indicator |
| `--main-min-indicator-stroke-width` | Stroke width of the main min indicator |
| `--main-max-indicator-stroke-color` | Stroke color of the main max indicator |
| `--main-max-indicator-stroke-width` | Stroke width of the main max indicator |
| `--main-setpoint-text-color` | Text color of the main setpoint label |
| `--main-setpoint-bg-color` | Background color of the main setpoint label |
| `--main-setpoint-needle-stroke-color` | Stroke color of the main setpoint needle |
| `--main-setpoint-needle-stroke-width` | Stroke width of the main setpoint needle |
| `--inner-needle-stroke-color` | Stroke color of the inner needle |
| `--inner-needle-stroke-width` | Stroke width of the inner needle |
| `--inner-min-indicator-stroke-color` | Stroke color of the inner min indicator |
| `--inner-min-indicator-stroke-width` | Stroke width of the inner min indicator |
| `--inner-max-indicator-stroke-color` | Stroke color of the inner max indicator |
| `--inner-max-indicator-stroke-width` | Stroke width of the inner max indicator |
| `--inner-setpoint-needle-stroke-color` | Stroke color of the inner setpoint needle |
| `--inner-setpoint-needle-stroke-width` | Stroke width of the inner setpoint needle |
### YAML structure - Showing is as possible and/or typical usage
```yaml
type: custom:gauge-card-pro
entity: sensor.sensor
entity2: sensor.sensor
min: 0 | template
max: 100 | template
needle: true | false
needle_color: "#aaa" | template | light-dark-mode object
segments:
- from: 0
color: red
- from: 25
color: "#FFA500"
- from: 50
color: rgb(255, 255, 0)
- from: 100
color: var(--green-color)
gradient: true | false
gradient_background: true | false
gradient_resolution: auto | very_low | low | medium
value: "{{ value_template }}"
inner:
min: 0 | template
max: 100 | template
mode: severity | static | needle | on_main
needle_color: "#aaa" | template | light-dark-mode object
segments:
- from: 0
color: red
- from: 25
color: "#FFA500"
- from: 50
color: rgb(255, 255, 0)
- from: 100
color: var(--green-color)
gradient: true | false
gradient_background: true | false
gradient_resolution: auto | very_low | low | medium
value: "{{ value_template }}"
round: "off" | "full" | "small"
min_indicator:
type: entity | number | template
value: sensor.min_today
color: "#aaa" | template | light-dark-mode object
max_indicator:
type: entity | number | template
value: sensor.max_today
color: "#aaa" | template | light-dark-mode object
marker: true | false
min_indicator:
type: entity | number | template
value: sensor.min_today
color: "#aaa" | template | light-dark-mode object
label: true | false
label_color: "#aaa" | template | light-dark-mode object
precision: 1;
max_indicator:
type: entity | number | template
value: sensor.max_today
color: "#aaa" | template | light-dark-mode object
label: true | false
label_color: "#aaa" | template | light-dark-mode object
precision: 1;
setpoint:
type: entity | number | template
value: sensor.main_setpoint
color: "#aaa" | template | light-dark-mode object
label: true | false
label_color: "#aaa" | template | light-dark-mode object
precision: 1;
round: "off" | "full" | "medium" | "small"
titles:
primary: Primary Title | template
secondary: Secondary Title | template
primary_color: "#aaa" | template
secondary_color: "#aaa" | template
primary_font_size: 15px | template
secondary_font_size: 14px | template
value_texts:
primary: "{{ states(entity) }}"
secondary: "{{ states(entity2) }}"
primary_color: "#aaa"
secondary_color: "#aaa"
primary_unit: mm
secondary_unit: mm
primary_font_size_reduction: 15
icons:
left:
type: battery | hvac-mode | swing-mode | template
value: sensor.battery
right:
type: battery | hvac-mode | swing-mode | template
value: climate.thermostat
hide_background: true | false
shapes:
main_min_indicator: M -40 0 m 3.75 0 a 3.75 3.75 90 1 0 -7.5 0 a 3.75 3.75 90 1 0 7.5 0
main_max_indicator: M 40 0 m 3.75 0 a 3.75 3.75 90 1 0 -7.5 0 a 3.75 3.75 90 1 0 7.5 0
tap_action:
action: more-info
entity: sensor.sensor
hold_action:
action: more-info
double_tap_action:
action: more-info
primary_value_text_tap_action:
action: more-info
entity: sensor.sensor
primary_value_text_hold_action:
action: more-info
primary_value_text_double_tap_action:
action: more-info
secondary_value_text_tap_action:
action: more-info
entity: sensor.sensor
secondary_value_text_hold_action:
action: more-info
secondary_value_text_double_tap_action:
action: more-info
icon_left_tap_action:
action: more-info
entity: sensor.sensor
icon_left_hold_action:
action: more-info
icon_left_double_tap_action:
action: more-info
icon_right_tap_action:
action: more-info
entity: sensor.sensor
icon_right_hold_action:
action: more-info
icon_right_double_tap_action:
action: more-info
feature_entity: climate.ac
features:
- type: climate-overview
- type: adjust-temperature
- type: climate-hvac-modes
hvac_modes:
- cool
- dry
- fan_only
- "off"
- heat_cool
- heat
- type: climate-fan-modes
fan_modes:
- auto
- low
- medium
- high
- type: climate-swing-modes
swing_modes:
- "off"
- H
- V
- C
- H+V
card_mod:
style: |
* {
--main-needle-stroke-width: 1px;
--main-needle-stroke-color: white;
}
```
### 1 Color examples
#### Fixed single value
```yaml
primary_color: var(--info-color)
```
#### Single template value
```yaml
primary_color: "{{ 'var(--info-color)' }}"
```
#### Light/Dark Mode fixed values
```yaml
primary_color:
light_mode: "#FF00FF"
dark_mode: "#00FF00"
```
#### Light/Dark Mode template values
```yaml
primary_color: |-
{{
{
"light_mode": "#FF00FF",
"dark_mode": "#00FF00"
}
}}
```
### 2 `segments` examples
Segments can be defined in two ways. Either using `from:` or `pos:`. For gradient gauges, the two behave differently. For more information checkout [this wiki](https://github.com/benjamin-dcs/gauge-card-pro/wiki/from%E2%80%90segments-vs-pos%E2%80%90segments).
`from` and `pos` can be a `number` or a `percentage` (e.g. `"50%"`)
#### Fixed list with from
```yaml
segments:
- from: 0
color: "#4caf50"
- from: 25
color: "#8bc34a"
- from: 50
color: "#ffeb3b"
- from: 75
color: "#ff9800"
- from: 100
color: "#f44336"
- from: 125
color: "#926bc7"
- from: 150
color: "#795548"
```
#### Fixed list with pos
```yaml
segments:
- pos: -1
color: var(--error-color)
- pos: -0.25
color: var(--warning-color)
- pos: 0.5
color: var(--success-color)
```
#### Template list
```yaml
segments: |-
{% set max = states('sensor.max_sensor') | float %}
{{
[
{ "from": 0, "color": "#4caf50" },
{ "from": 25, "color": "#8bc34a" },
{ "from": 50, "color": "#ffeb3b" },
{ "from": 75, "color": "#ff9800" },
{ "from": 100, "color": "#f44336" },
{ "from": 125, "color": "#926bc7" },
{ "from": max, "color":"#795548" }
]
}}
```
## Difference between `from` and `pos` segments
For from-segments, the colour that you configure is rendered/calculated at the midpoint with the next segment (or max). Checkout the image below that illustrates this change (segment values are the same for all images)
## Installation
### Install via HACS (recommended)
[](https://my.home-assistant.io/redirect/hacs_repository/?owner=benjamin-dcs&repository=gauge-card-pro&category=dashboard)
### Manual
1. Download `gauge-card-pro.js` file from the [latest release][release-url].
2. Put `gauge-card-pro.js` file into your `config/www` folder.
3. Add reference to `gauge-card-pro.js` in Dashboard. There's two way to do that:
- **Using UI:** _Settings_ β _Dashboards_ β _More Options icon_ β _Resources_ β _Add Resource_ β Set _Url_ as `/local/gauge-card-pro.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/gauge-card-pro.js
type: module
```
### Translations
If you want to help translating Gauge Card Pro, feel free to create an [issue](https://github.com/benjamin-dcs/gauge-card-pro/issues) or fork this repo and create an pull-request.
## Credits
This card uses some functionality from [Mushroom](https://github.com/piitaya/lovelace-mushroom/)
This card uses some functionality from [Calendar Card Pro](https://github.com/alexpfau/calendar-card-pro)
Gradient are generated using my [up-to-date version](https://github.com/benjamin-dcs/gradient-path-updated) of [Gradient Path](https://github.com/cereallarceny/gradient-path).