Count Down Timer Custom Tile, Simple

Community Projects
#1

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

image
image383×622 31.8 KB

5 Likes
Countdown Timer Tile
#2

Any way to use this with SmartThings?

#3

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
#4

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
#5

@kampto This is fantastic! Thank you!

#6

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

3 Likes
#7

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

#8

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

#9

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

#10

That worked! Thank you

1 Like
#11

Thanks my friend …you rock !

image