Lovelace: circular timer card

Share your Projects! Dashboards & Frontend
1

Hi there!

I was a bit disappointed by the available options for timer countdown display, so I decided to create a custom one. Maybe someone is looking for a similar style countdown, so am posting it here.

circular-timer

Update
I know that it might be misleading from the name of the card, but I have also recently implemented a minimal layout version of the card inspired by the Mushroom cards, which looks like this:
circular-timer-minimal
screenshot3

Available at:

Installation:

  1. Add circular-timer-card.js to your lovelace resources
14 Likes
2

great looking card! but unfortunately Iā€™m getting custom element doesnā€™t exist error.

1 Like
3

ah yes, I get same error. followed documentation yaml example, set correct path in dashboard - resource

2 Likes
4

This card is beautiful and I definitely want to use it. Unfortunately, the custom card will not load.

5

I just installed this last week, and it was easy to get up and running, and works great. I see a lot of people here saying they ran into problems - maybe those are just configurations errors? Maybe you want to post your configs in more detail so we can compare.

1 Like
6

There was indeed an issue at the beginning that the card would not be loaded due to outdated CDN link. That was updated and should actually not be an issue anymore.

7

I have an issue with the card as well when using Firefox for the UI. It loads only in the companion app and Edge. So it may be browser dependent whether the card loads or not. In FF I just see ā€˜custom element does not existā€™ for this particular card, although I restarted the browser and system multiple times, so it cannot be a caching issue.
It is actually the only card where I see this type of issue in FF and I use a lot of various custom cards.

8

I use Firefox on windows and the card works fine.

9

I got it working but would like to know how to change the secondary state name and change its font color as well. Thank you

10

Great card.
I would know if it is possible to lock it ( no tap actions allowed ) and if it is possible to not display the entity name.
Many thanks !

1 Like
11

Most of the functionality in the previous replies have been added

12

You can include options for name, tap_action, hold_action, and double_tap_action, and set all of those to ā€˜noneā€™. See the documentation for more details, works just fine.

13

Very fine card, Karlis, I like it a lot! Would you be able to add to the various tap actions ā€˜Call serviceā€™, where service could be a script? I believe that would be a very useful addition to your card. Thanks!

14

Iā€™ve downloaded the JS and added it as a resource, but when I create a card using this YAML example from Github I get ā€œUnknown entity: timer.minuteā€. This is my first try at a custom card so it is probably a rookie mistake:

type: custom:circular-timer-card
entity: timer.minute
bins: 30
color:
  - '#1e7883'
  - '#a9bdbb'
  - '#ee7256'
layout: minimal
color_state: true
15

You need to create a timer entity first. Under Settings > Devices & Settings > Helpers. Then, set the card entity to the name of your newly created timer. I know it is confusing, but the minute in timer.minute is not a duration but a name for the timer entity.

16

Thank you so much, both for the guidance and more importantly for an awesome-looking card!

17

How can I start it without tapping, but start the timer just like Timer Bar Card