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: moduleStep 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