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:

Table of contents

• 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

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

Climate Overview Feature

Temperature Control Feature

Climate Fan Mode Feature

Climate HVAC Mode Feature

Climate Preset Mode Feature

Climate Swing Mode Feature

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!

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 | uix:
  style: |
    * {
      --main-needle-stroke-width: 1px;
      --main-needle-stroke-color: white;
    }

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: 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:
    value: Primary Title | template
    color: "#aaa" | template
    font_size: 15px | template
  secondary:
    value: Secondary Title | template
    color: "#aaa" | template
    font_size: 14px | template
value_texts:
  primary:
    value: "{{ states(entity) }}"
    color: "#aaa"
    unit_of_measurement: mm
    unit_before_value: true | false
    font_size_reduction: 15
    tap_action:
      action: more-info
      entity: sensor.sensor
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info
  secondary:
    value: "{{ states(entity2) }}"
    color: "#aaa"
    unit_of_measurement: mm
    unit_before_value: true | false
    tap_action:
      action: more-info
      entity: sensor.sensor
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info
icons:
  left:
    type: battery | hvac-mode | swing-mode | template
    value: sensor.battery
    tap_action:
      action: more-info
      entity: sensor.sensor
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info
  right:
    type: battery | hvac-mode | swing-mode | template
    value: climate.thermostat
    tap_action:
      action: more-info
      entity: sensor.sensor
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info
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
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 | uix:
  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"  }
    ]
  }}

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)

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