Gauge Card Pro

Build beautiful Gauge cards using 🌈 gradients and 🛠️ templates!

[!NOTE]

Need help with your configuration? Checkout my official 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, 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:

Configuration variables

- Min/Max Indicator Configuration variables - Inner Gauge Configuration variables - Setpoint Configuration variables - Titles Configuration variables - Title Configuration variables - Value-Texts Configuration variables - Value-Text Configuration variables - Icon Configuration variables - Icon Template object - Features Configuration variables - Shapes Configuration variables - Custom styling options

YAML structure - Showing is as possible and/or typical usage
¹ Color examples

- Fixed single value - Single template value - Light/Dark Mode fixed values - Light/Dark Mode template values

² segments examples

- Fixed list with from - Fixed list with pos - Template list

Difference between from and pos segments
Installation

- Install via HACS (recommended) - Manual - Translations

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 | header | entity | entity2 | layout | needle_style | inner | attribute | min | max | needle | needle_color | segments | severity_centered | severity_color_mode | | | | | | | gradient | gradient_background | gradient_resolution | min_indicator | max_indicator | setpoint | round | titles | value_texts | icons | hide_background | shapes | value | animation_speed | entity_id | ACTIONS | tap_action | hold_action | double_tap_action | FEATURES | feature_entity | features | Type | Default | Description | Templatable | | :-------------------------------------------------------------------- | :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------- | | string | | custom:gauge-card-pro | | | string | | Header of the card | | | string | Optional | Entity for main-gauge value, templates, actions and features (e.g.: {{ states(entity) }}) | | | string | Optional | Entity for inner-gauge value, and templates (e.g.: {{ states(entity2) }}) | | | string | default | Layout of the gauge. Valid values are default and equal. | | | string | default | Needle style to use. Valid values are default and ha. | | | inner object | | Configuration for the inner gauge. Use inner: {} to use all defaults for the inner gauge | | | string | Optional | Attribute of entity to use for main-gauge value | | | number | 0 | Minimum value for graph | ✔️ (only templatable in code-editor/yaml) | | number | 100 | Maximum value for graph | ✔️ (only templatable in code-editor/yaml) | | boolean | false | Show the gauge as a needle gauge | | | string or map¹ | var(--primary-text-color) | Color of the needle | ✔️ | | list² | Optional | List of colors and their corresponding start values | ✔️ | | boolean | Optional | Severity gauge (requires disabled needle) start at the center | | | 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 | | | boolean | false | Shows segments as a gradient (requires needle) | | | boolean | false | Shows the background as a gradient for severity gauge (requires disabled needle) | | | string or number | auto | Level of detail for the gradient. Must be auto or a number indicating the amount of segments to create | | | min/max indicator object | | Configuration of the min indicator | | | min/max indicator object | | Configuration of the max indicator | | | setpoint object | | Configuration for the setpoint needle | | | string | off | Rounds the ends of the gauge. Valid values are off, full, medium and small | | | titles object | | Configuration for the titles beneath the gauge | | | value_texts object | | Configuration for the value texts inside the gauge | | | icons object | | Configuration for the icons | | | boolean | false | Hides the background and border of the card | | | shapes object | | Configuration of the shapes several elements | | | template | state of entity | Value for graph | ✔️ (only available in code-editor/yaml) | | string | normal | Animation speed of value elements. Valid values are normal, fast and off | | | 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 | | | | | | | | action | more-info | Home assistant action to perform on tap. See official documentation for more info | | | action | none | Home assistant action to perform on hold. See official documentation for more info | | | action | none | Home assistant action to perform on double_tap. See official documentation for more info | | | | | | | | string | | Entity used for features and (optional) HVAC icons. If not set entity will be used | | | features object | | Configuration of the additional features | |

Inner Gauge Configuration variables

Min/Max Indicator Configuration variables

Setpoint Configuration variables

Titles Configuration variables

Title Configuration variables

Value-Texts Configuration variables

Value-Text Configuration variables

[!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

Icon Configuration variables

Icon Template object

##### Example

icons:
  left | right:
    type: template
    value: |
      {{
        { 
          "icon": "mdi:battery",
          "color": "blue",
          "label": (states('sensor.my_sensor') | int * 100) | string + "%"
        }
      }}

Features Configuration variables

Overview Feature

Temperature Control Feature

Climate Fan Mode Feature

Climate HVAC Mode Feature

Climate Preset Mode Feature

Climate Swing Mode Feature

Custom Feature

Renders one row of your own buttons. Only one custom feature per card is used. Unlike the climate features it doesn't need a (climate) feature_entity, so it also works on non-climate cards.

##### Control object

... (README truncated for length)

benjamin-dcs/gauge-card-pro: Build beautiful Gauge cards using 🌈 gradients and 🛠️ templates