Caution

Template Gauge Card is now Gauge Card Pro

Template Gauge Card has been renamed to Gauge Card Pro as the card is no longer just about templates and to leave room for future development that are not template related.

This release will be the last release under this repository/name. Please use https://github.com/benjamin-dcs/gauge-card-pro from now on. This release is already available under the new name. Changing to Gauge Card Pro requires a change in your card config from type: custom:template-gauge-card to type: custom:gauge-card-pro

Sorry for the inconvenience! Thanks for using this card ❤️

Template Gauge Card

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

Description

This card is based on the default Gauge card, 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 and a beautiful 🌈 gradient can be applied!

Configuration variables

Name	Type	Default	Description	Templatable
type	string	none	custom:gauge-card-pro
entity	string	Optional	Entity for template and actions (e.g.: {{ states(entity) }})
value	string	Optional	Value for graph	✔️ (number)
valueText	string	Optional	Text for graph	✔️
name	string	Optional	Name of gauge entity, displayed beneath graph	✔️
min	number or string	Optional	Minimum value for graph	✔️ (number)
max	number or 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
severity	map1	Optional	Allows setting of colors for different numbers
severityTemplate	string2	false	Allows setting of colors for different numbers. SeverityTemplate will override the severity settings	✔️ (severity map)
segments	list3	false	List of colors and their corresponding start values. Segments will override the severity and severityTemplate settings. Needle required to be true
segmentsTemplate	string4	false	List of colors and their corresponding start values. SegmentsTemplate will override the severity, severityTemplate and segments settings. Needle required to be true	✔️ (segments array)
gradient	boolean	false	Shows severity(Template) or segments(Template) as a beautiful gradient
gradientResolution	Optional	false	Level of detail for the gradient. Must be low, medium or high (default medium)
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 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

¹ severity example

severity:
  green: 30
  yellow: 20
  red: 0

² severityTemplate example

severityTemplate: |-
  {{
    { 
      "red": 0, 
      "yellow": 20, 
      "green": 30
    }
  }}

³ segments

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"

⁴ segmentsTemplate example

segmentsTemplate: |-
  {{
    [
      { "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"  }
    ]
  }}

Examples

• Energy Grid Neutrality Card

Installation

HACS

Gauge Card Pro 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.

Use https://github.com/benjamin-dcs/gauge-card-pro as Repository and Dashboard as Type

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.

     resources:
       - url: /local/gauge-card-pro.js
         type: module

Translations

If you want to help translating Template Gauge Card, feel free to create an issue or fork this repo and create an pull-request.

Support

Credits

This card uses some of the core functionality from Mushroom