Count Down Timer Custom Tile, Simple

I’ve created this simple countdown timer tile. Here’s the link to the HTML for you to paste into custom tile editor.

Enter the Target date in this format:
Jan 1, 2022 15:00:00
or just
Jan 1, 2022

You can configure it in the tile editor like these examples.
image

Tile dimensions and styles can be applied normally from the tile editor

5 Likes

Any way to use this with SmartThings?

Yep, it doesn’t use any hub connection. Just runs in the sharptools browser. Give it a shot and comment back if I need to tweak anything.

2 Likes

Nice work! Don’t forget that you can use the special import URL format to make it easier to import your custom code! :sunglasses:

In your case, it would be :

https://sharptools.io/developer/custom-tiles/import/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fkampto%2FSharpTools%2Fmain%2FCustomTiles%2FCountDownTimer.html

Here’s a quick import button for you. :smiley:

image

1 Like

@kampto This is fantastic! Thank you!

Updated HTML
Changed “Show Days only” to switch to Hours if <1day remaining

3 Likes

Thanks @kampto! This is just what I was looking for.

Is there css to move the countdown text lower on the tile? I can’t seem figure it out.

For a quick fix, If you click this link and get the count up/down tile:
Count Up or Down Timer, advanced

Then add new tile to replace your old one.
Then go to the HTML code and add these 2 circled lines in this spot (line 92?), then play with the top: xx% till it where you want it. Hit update at the bottom after every change. Cant guarantee it will scale properly. Will need some time to mess with it.

image

image

That worked! Thank you

1 Like