Gauge Card Pro

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

Note

I'm looking for a (experienced) Home Assistant (front-end) developer to help me improve the overall performance of this card. You can help me out with just some tips and tricks or create a pull-request with improvements. Contact me via this repo of message me at the Home Assistant Community forums. Any help is highly appreciated!

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
🎨 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
✨ Additional icon indicator next to the gauge
🎨 Automatic color interpolation for severity gauges
😶‍🌫️ Native ability to hide the background

Basic customization examples

Advanced customization examples

Support This Project

If you find Gauge Card Pro useful, consider supporting its development:

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
`type`	string		`custom:gauge-card-pro`
`use_new_from_segments_style`	boolean	false	Temporary variable to indicate migrated card. See release 1.6.0 for more information
`header`	string		Header of the card
`entity`	string	Optional	Entity for template and actions (e.g.: `{{ states(entity) }}`)
`entity2`	string	Optional	Entity for template and actions (e.g.: `{{ states(entity2) }}`)
`inner`	inner object		Configuration for the inner gauge. Use `inner: {}` to use all defaults for the inner gauge
`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 map⁵	`var(--primary-text-color)`	Color of the needle	✔️
`segments`	list⁶	Optional	List of colors and their corresponding start values	✔️
`gradient`	boolean	`false`	Shows segments as a gradient (requires needle). Interpolates severity colors according to gradient for non-needle gauge
`gradient_background`	boolean	`false`	Shows the background as a gradient for severity gauge (requires disabled needle)
`gradient_resolution`	string or number	`medium`	Level of detail for the gradient. Must be `low`, `medium`, `high` or a number indicating the amount of segments to create
`min_indicator`	min/max indicator object		Configuration of the min indicator
`max_indicator`	min/max indicator object		Configuration of the max indicator
`setpoint`	setpoint object		Configuration for the setpoint needle
`titles`	titles object		Configuration for the titles beneath the gauge
`value_texts`	value_texts object		Configuration for the value texts inside the gauge
`icon`	icon object		Configuration of the icon (in the upper-right corner of the card)
`hide_background`	boolean	`false`	Hides the background and border of the card
`shapes`	shapes object.		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 for more info
`hold_action`	action	`none`	Home assistant action to perform on hold. See official documentation for more info
`double_tap_action`	action	`none`	Home assistant action to perform on double_tap. See official documentation 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 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 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 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 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 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 for more info
`icon_tap_action`	action	`more-info`	Home assistant action to perform on tap on the icon. See official documentation for more info
`icon_hold_action`	action	`none`	Home assistant action to perform on hold on the icon. See official documentation for more info
`icon_double_tap_action`	action	`none`	Home assistant action to perform on double_tap on the icon. See official documentation for more info

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 can be used like so:

card_mod:
  style: |
    * {
      --main-needle-stroke-width: 1px;
      --main-needle-stroke-color: white;
    }

CSS variable	Description
`--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-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

Min/Max Indicator Configuration variables

Name	Type	Default	Description	Templatable
`type`	string	Required	`entity`, `number` or `template`
`value`	value corresponding to the type	Required	Value of the min or max indicator
			• `entity`: Entity_id
			• `number`: Fixed number
			• `template`: Template that returns a number	✔️
`color`	string or map⁵	`rgb(255, 255, 255)`	Color of the min or max indicator
`opacity`	number	0.8	Opacity of the min or max indicator

Inner Gauge Configuration variables

Name	Type	Default	Description	Templatable
`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 map⁵	`var(--primary-text-color)`	Color of the needle	✔️
`segments`	list⁶	Optional	List of colors and their corresponding start values	✔️
`gradient`	boolean	`false`	Shows segments as a beautiful gradient (for mode `static` or `needle`). Interpolates severity colors according to gradient for mode `severity`
`gradient_background`	boolean	`false`	Shows the background as a gradient for severity gauge (requires disabled needle)
`gradient_resolution`	string or number	`medium`	Level of detail for the gradient. Must be `low`, `medium`, `high` or a number indicating the amount of segments to create
`min_indicator`	min/max indicator object		Configuration of the min indicator
`max_indicator`	min/max indicator object		Configuration of the max indicator
`setpoint`	setpoint object		Configuration for the setpoint needle
`value`	template	state of `entity2`	Value for graph	✔️ (only available in code-editor/yaml)

Setpoint Configuration variables

Name	Type	Default	Description	Templatable
`type`	string	Required	`entity`, `number` or `template`
`value`	value corresponding to the type	Required	Value of the needle
			• `entity`: Entity_id
			• `number`: Fixed number
			• `template`: Template that returns a number	✔️
`color`	string or map⁵	`var(--error-color)`	Color of the needle	✔️

Titles Configuration variables

Name	Type	Default	Description	Templatable
`primary`	string	Optional	Primary title	✔️
`primary_color`	string or map⁵	`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 map⁵	`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
`primary`	string	`value` or state of `entity`	Primary value-text. Use `""` to overwrite the default	✔️
`primary_color`	string or map⁵	`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 map⁵	`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.

Icon Configuration variables

Name	Type	Default	Description	Templatable
`type`	string	Required	`battery` or `template`
`value`	string	Required	value corresponding to the type
			• `battery`: Battery entity_id	✔️
			• `template`: Template that returns an `Icon Template object`	✔️
`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
`left`	boolean	false	Places the icon in the upper left corner

Icon Template object

Name	Type	Default	Description
`icon`	string	Required	Icon
`color`	string	Optional	Color of the icon
`label`	string	Optional	Label displayed beneath the icon

Example

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 to design your own custom needles!

Name	Type	Default	Description	Templatable
`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	✔️

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

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: very_low | low | medium | high
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: very_low | low | medium | high
  value: "{{ value_template }}"
  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
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
setpoint:
  type: entity | number | template
  value: sensor.main_setpoint
  color: "#aaa" | template | light-dark-mode object
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
icon:
  type: battery | template
  value: sensor.battery
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_tap_action:
  action: more-info
  entity: sensor.sensor
icon_hold_action:
  action: more-info
icon_double_tap_action:
  action: more-info
card_mod:
  style: |
    * {
      --main-needle-stroke-width: 1px;
      --main-needle-stroke-color: white;
    }

¹ Color examples

Fixed single value

primary_color: var(--info-color)

Single template value

primary_color: "{{ 'var(--info-color)' }}"

Light/Dark Mode fixed values

primary_color:
  light_mode: "#FF00FF"
  dark_mode: "#00FF00"

Light/Dark Mode template values

primary_color: |-
  {{ 
    {
      "light_mode": "#FF00FF",
      "dark_mode": "#00FF00"
    }
  }}

² `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.

from and pos can be a number or a percentage (e.g. "50%")

Fixed list with from

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

segments:
  - pos: -1
    color: var(--error-color)
  - pos: -0.25
    color: var(--warning-color)
  - pos: 0.5
    color: var(--success-color)

Template list

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"  }
    ]
  }}

Examples

Energy Grid Neutrality Card - Just like the official Energy Grid Neutrality Gauge, but live and custom!
Temperature and Humidity Gauge

Installation

Install via HACS (recommended)

Manual

Download gauge-card-pro.js file from the [latest release][release-url].
Put gauge-card-pro.js file into your config/www folder.
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.
```
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 or fork this repo and create an pull-request.

Credits

This card uses some functionality from Mushroom

This card uses some functionality from Calendar Card Pro

Gradient are generated using my up-to-date version of Gradient Path.

Name		Name	Last commit message	Last commit date
Latest commit History 330 Commits
.github		.github
examples		examples
src		src
.browserslistrc		.browserslistrc
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
FAQ.md		FAQ.md
LICENSE		LICENSE
README.md		README.md
SHAPES.md		SHAPES.md
hacs.json		hacs.json
package-lock.json		package-lock.json
package.json		package.json
preflight.sh		preflight.sh
renovate.json		renovate.json
rollup.config.mjs		rollup.config.mjs
tsconfig.json		tsconfig.json

Uh oh!

License

benjamin-dcs/gauge-card-pro

Folders and files

Latest commit

History

Repository files navigation

Gauge Card Pro

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

Description

Basic customization examples

Advanced customization examples

Support This Project

Configuration variables

Custom styling options

Min/Max Indicator Configuration variables

Inner Gauge Configuration variables

Setpoint Configuration variables

Titles Configuration variables

Value-Texts Configuration variables

Icon Configuration variables

Icon Template object

Example

Shapes Configuration variables

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

1 Color examples

Fixed single value

Single template value

Light/Dark Mode fixed values

Light/Dark Mode template values

2 segments examples

Fixed list with from

Fixed list with pos

Template list

Examples

Installation

Install via HACS (recommended)

Manual

Translations

Credits

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 39

Sponsor this project

Uh oh!

Packages 0

Uh oh!

Contributors 2

Languages

¹ Color examples

² `segments` examples

Packages