Modern Circular Gauge

Modern gauge inspired and based on ha-control-circular-slider

Install

HACS

Add this repository via HACS custom repositories for easy update

https://github.com/selvalt7/modern-circular-gauge

(How to add Custom Repositories)

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 can be configured through visual editor or by yaml.

Card options

Name	Type	Default	Description
type	string	'custom:modern-circular-gauge'
entity	string	Required	Entity
name	string	Optional	Custom title
min	number	0	Minimum gauge value
max	number	100	Maximum gauge value
unit	string	Optional	Custom unit
header_position	string	top	Header position (top, bottom)
needle	boolean	false
segments	list		Color segments list, see color segments object
secondary_entity	object	Optional	Secondary entity to display under the state, see secondary entity object

Color segment object

Name	Type	Default	Description
from	number	Required	Starting value of color segment
color	string	Required	Color value of color segment
label	string	Optional	Color segment label

Secondary entity object

Name	Type	Default	Description
entity	string	Required	Secondary entity
unit	string	Optional	Custom unit

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