Circle Sensor Card

Custom component for lovelace which can be used as a card or an element on a picture-elements card.

Note: When including this file in your ui-lovelace.yaml you must use type: module

Config

Name	Type	Description	Default
type	string	`custom:circle-sensor-card`	Required
entity	string	`sensor.temperature`	Required
show_card	boolean	Render as a card	`false`
name	string	Name to display above sensor value	none
min	number	Minimum value	`0`
max	number	Maximum value	`100`
font_style	list	CSS style properities to apply to font	none
fill	string	Background color of circle	`rgba(255, 255, 255, .75)`
stroke_width	number	Width of circle value indication ring	`6`
stroke_color	hex code	Default stroke color	`#03a9f4`
stroke_bg_width	number	Width of background stroke	none
stroke_bg_color	hex code	Default stroke bg color	`#999999`
color_stops	object	Sensor value to color mapping (see below)	none
gradient	boolean	Whether to smoothly transition between color stops	`false`
units	string	Custom units of measurement	none
attribute	string	Attribute element of entity to use instead of its state	none
attribute_max	string	Use attribute element of entity as max	none
show_max	boolean	Display the max value	`false`

Color stops

A mapping from value to color. If gradient is set to true, mid-stop colors will be calculated on a linear gradient from one stop to the next.

color_stops:
  50: '#84B821'
  100: '#D43214'

Installation

Step 1

Install circle-sensor-card by copying circle-sensor-card.jsfrom this repo to <config directory>/www/ on your Home Assistant instance.

Example:

wget https://raw.githubusercontent.com/custom-cards/circle-sensor-card/master/circle-sensor-card.js
mv circle-sensor-card.js /config/www/

Step 2

Link circle-sensor-card inside you ui-lovelace.yaml.

resources:
  - url: /local/circle-sensor-card.js?v=0
    type: module

Step 3

Add a custom card or custom element in your ui-lovelace.yaml using type: custom:circle-sensor-card

Example

- type: custom:circle-sensor-card
  entity: sensor.outside_temperature
  max: 120
  min: 30
  stroke_width: 10
  gradient: true
  units: ' '
  attribute: 'ambient'
  attribute_max: 'feels_like'
  show_max: true
  font_style:
    color: red
    font-size: 1.5em
    text-shadow: '2px 2px black'
    font-family: 'Trebuchet MS'
  color_stops:
    50: '#55FF55'
    75: '#5555FF'
    100: '#FF5555'
  style:
    top: 50%
    left: 50%
    width: 75px
    height: 75px

custom-cards / circle-sensor-card