Modern Circular Gauge

Modern look at the default Home Assistant gauge card

Features

• Card and badge gauge
• Attribute support
• Secondary info under the state with two size options
• Tertiary info above the state
• Half gauge style
• Full gauge style
• Combined primary and tertiary entity as pie chart
• Timer and timestamp support
• Sections support
• Needle
• Jinja and JavaScript Template support for min, max, entity, name, label, icon, secondary, tertiary and state_text
• Color segments with gradient
• Dual gauge or triple gauge
• Dual value representing as a dot on the same gauge
• Small history graph
• Visual editor with template support

Install

HACS

Modern circular gauge is available in HACS.

Simply click on the button to open the repository in HACS or just search for "Modern Circular Gauge" and download it through the UI.

Manual

1. Download modern-circular-gauge.js from latest release

2. Put modern-circular-gauge.js file into your config/www folder.

3. Add a reference to modern-circular-gauge.js via two ways:

   • Via UI: Settings → Dashboards → More Options icon → Resources → Add Resource → Set Url as /local/modern-circular-gauge.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

   

   • Via YAML: Add following code to lovelace section in your configuration.yaml file

       resources:
           - url: /local/modern-circular-gauge.js
             type: module

Options

Card and badge can be configured through visual editor or by yaml. Both Jinja and JavaScript templates are supported on selected options, configurable via yaml or visual editor.

Card options

Badge options

Color segment object

Secondary entity object

Tertiary entity object

Gauge element style object

Templates

Templates are supported on couple essential config options. Both Jinja and JavaScript templates are supported. The two main differences between them is syntax and the fact that JavaScript templates are processed client side so theoretically JavaScript templates should be faster.

JavaScript templates

JavaScript templates does not use the Home Assistant implementation. In short it's a JavaScript code block performed client side. To use JavaScript templates, encase the code between three square brackets [[[ code ]]].

Under the hood JavaScript templates uses Home Assistant Javascript Templates. While writing templates please consult the proper section about the available variables and methods.

JavaScript template example

type: custom:modern-circular-gauge
entity: sensor.room_temp
unit: °C
name: Temperature
max: "[[[ states('input_number.max_number') ]]]"

Jinja templates

Jinja templates uses the Home Assistant implementation. Templates are processed on the server.

Jinja template example

type: custom:modern-circular-gauge
entity: sensor.room_temp
unit: °C
name: Temperature
max: "{{ states('input_number.max_number') }}"

Examples

Simple gauge

type: custom:modern-circular-gauge
entity: sensor.power_consumption
max: 1000

Gauge with additional info

type: custom:modern-circular-gauge
entity: sensor.power_consumption
secondary:
  entity: sensor.voltage
max: 1000

Gauge with templated additional info and segments

type: custom:modern-circular-gauge
entity: sensor.room_temp
unit: °C
name: Temperature
secondary: >-
  {% if is_state("binary_sensor.room_temp_rising", "on") %} Rising {% elif
  is_state("binary_sensor.room_temp_falling", "on") %} Falling {% endif %}
max: "{{states('input_number.max_number')}}"
min: 10
header_position: bottom
needle: true
segments:
  - from: 13
    color:
      - 11
      - 182
      - 239
  - from: 19
    color:
      - 43
      - 255
      - 0
  - from: 24
    color:
      - 252
      - 161
      - 3

Gauge with bigger secondary and labels

type: custom:modern-circular-gauge
entity: sensor.power_consumption
label: Power
max: 1000
tap_action:
  action: none
secondary:
  entity: sensor.voltage
  state_size: big
  label: Voltage
header_position: bottom
name: Power plug

Dual gauge

type: custom:modern-circular-gauge
name: Dual gauge
min: 10
needle: false
secondary:
  entity: sensor.target_room_temp
  unit: °C
  show_gauge: inner
  min: 10
  max: 30
max: 30
entity: sensor.room_temp
unit: °C

Templated icon

type: custom:modern-circular-gauge
entity: sensor.room_temp
unit: °C
name: Temperature
icon: >-
  {% if is_state("binary_sensor.room_temp_rising", "on")
  %}mdi:thermometer-chevron-up{% elif is_state("binary_sensor.room_temp_falling",
  "on") %}mdi:thermometer-chevron-down{% endif %}
max: 30
min: 10
needle: true
smooth_segments: true
adaptive_icon_color: true
segments:
  - from: 13
    color:
      - 11
      - 182
      - 239
  - from: 19
    color:
      - 43
      - 255
      - 0
  - from: 24
    color:
      - 252
      - 161
      - 3

Gradient background and foreground

type: custom:modern-circular-gauge
entity: sensor.room_temp
unit: °C
name: Temperature
gauge_foreground_style:
  color: adaptive
gauge_background_style:
  width: 2
  color: adaptive
max: 30
min: 10
smooth_segments: true
adaptive_icon_color: true
segments:
  - from: 13
    color:
      - 11
      - 182
      - 239
  - from: 19
    color:
      - 43
      - 255
      - 0
  - from: 24
    color:
      - 252
      - 161
      - 3
  - color:
      - 255
      - 0
      - 0
    from: 30

Remaining timer

type: custom:modern-circular-gauge
entity: timer.example_timer
needle: true
name: Timer
gauge_background_style:
  color: aqua
  opacity: 0.2
icon: mdi:clock

Development

1. Clone this repository into your config/www folder using git:

   $ git clone https://github.com/selvalt7/modern-circular-gauge.git

2. Add a reference to the card as shown here

Instructions

Requires nodejs & npm.

1. Move into the modern-circular-gauge repo, checkout the dev branch & install dependencies:

   $ cd modern-circular-gauge && git checkout dev && npm install

2. Make changes to the source code.

3. Build the source by running:

   $ npm run build

   The new modern-circular-gauge.js will be build in dist folder

4. Refresh your browser to see changes

   Note: Make sure to disable browser cache