Count Down Timer Custom Tile, Simple

[kampto]

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

kampto/SharpTools

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.

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

[Terri]

Any way to use this with SmartThings?

[kampto]

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.

[josh]

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

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.

[Terri]

@kampto This is fantastic! Thank you!

[kampto]

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

[T_Shoaf]

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

[Terri]

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

[kampto]

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.

[Terri]

That worked! Thank you