Awesome
Description
This custom lovelace card is ment to display timers and their countdowns in a circular arc plot using D3.js. Unfortunately, the required D3.js and Lit modules are all imported via CDN, which is not optimal from performance point of view.
Installation
Manually
- Download
circular-timer-card.jsas save to your desired destination - Add
circular-timer-card.jsto your Lovelace resources as a Javascript module
HACS
This custom card has been submitted to be added to HACS repository, as soon at is will be available, this section will be updated!
Actions
Tap
Tap action will toggle the timer
Hold
Hold (>1 sec) action will open more-info dialog for the timer
Double-tap
Double tap will cancel (reset) timer
Screenshots
Available options
All following options which support colors can also be used with hexadecimal color identifier with opacity!
| Option | Type | Requirement | Default | Description |
|---|---|---|---|---|
| entity | string | required | - | Timer entity ID |
| bins | int | optional | 36 | Number of bins (arcs). |
| pad_angle | float | optional | 1 | Seperating angle between each individual arc in degrees. |
| corner_radius | float | optional | 4 | Radius for rounded arc corners. |
| color | array of strings | optional | Color array used for filling remaining timer arc units. If array contains only single value, that color will be used to fill the whole timer, otherwise linear gradient will be created. | |
| color_state | boolean | optional | If set to true it will color remaining time in the middle of card with current state color from gradient. | |
| empty_bar_color | string | optional | Color for timer arcs which are inactive, by default they gave opacity of 0, therefore they are not visible. | |
| secondary_info_size | string or int | optional | 50% for cicle or 80% for minimal | CSS size for secondary info (Friendly name of timer). |
| layout | string | optional | circle | Layout mode for the card. Available options are "circle" or "minimal". Minimal layout is supposed to create bar timer similar in style to Mushroom cards. |
| name | string | optional | Entity friendly name | Name to be displayed. Can be a string or "none". |
| icon | string | optional | Etity Icon | Icon to be displayed in minimal layout. Can be a standard icon (e.g. "mdi:motion-sensor") or "none". |
| direction | string | optional | countdown | Direction of the timer. Can be "countdown" or "countup". |
| primary_info | string | optional | name | Primary information to be displayed. Can be a "none", "name" or "timer". |
| secondary_info | string | optional | timer | Secondary information to be displayed. Can be a "none", "name" or "timer". |
| tap_action | string | optional | toggle | Action triggered on a single tap. Can be a "none", "toggle", "more_info" or "cancel". |
| hold_action | string | optional | more_info | Action triggered on holding. Can be a "none", "toggle", "more_info" or "cancel". |
| double_tap_action | string | optional | cancel | Action triggered on a double tap. Can be a "none", "toggle", "more_info" or "cancel". |
Example
type: custom:circular-timer-card
entity: timer.single
bins: 60
color:
- '#1e7883'
- '#a9bdbb'
- '#ee7256'
With minimal layout instead of circle:
type: custom:circular-timer-card
entity: timer.minute
bins: 30
color:
- '#1e7883'
- '#a9bdbb'
- '#ee7256'
layout: minimal
color_state: true