Simple Dashing widget to countdown until a certain moment. Flashes the widget when finished.
##Usage
To use this widget, copy countdown.html, countdown.coffee, and countdown.scss into the /widgets/countdown directory.
To include the widget in a dashboard, add the following snippet to the dashboard layout file:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-view="Countdown" data-title="GOAL_DISPLAY_NAME" data-end="26-Apr-2013 18:00:00"></div>
</li>
##Preview
| class Dashing.Countdown extends Dashing.Widget | |
| ready: -> | |
| setInterval(@startCountdown, 500) | |
| startCountdown: => | |
| current_timestamp = Math.round(new Date().getTime()/1000) | |
| end_timestamp = Math.round( Date.parse($(@node).find(".more-info").html())/1000 ) | |
| seconds_until_end = end_timestamp - current_timestamp | |
| if seconds_until_end < 3600 | |
| $(@node).parent().remove() | |
| else if seconds_until_end < 0 | |
| @set('timeleft', "TIME UP!") | |
| for i in [0..100] by 1 | |
| $(@node).fadeTo('fast', 0).fadeTo('fast', 1.0) | |
| else | |
| d = Math.floor(seconds_until_end/86400) | |
| h = Math.floor((seconds_until_end-(d*86400))/3600) | |
| m = Math.floor((seconds_until_end-(d*86400)-(h*3600))/60) | |
| s = seconds_until_end-(d*86400)-(h*3600)-(m*60) | |
| if d >0 | |
| dayname = 'day' | |
| if d > 1 | |
| dayname = 'days' | |
| @set('timeleft', d + " "+dayname+" " + @formatTime(h) + ":" + @formatTime(m) + ":" + @formatTime(s)) | |
| else | |
| @set('timeleft', @formatTime(h) + ":" + @formatTime(m) + ":" + @formatTime(s)) | |
| formatTime: (i) -> | |
| if i < 10 then "0" + i else i |
| <h2 data-bind="title"></h2> | |
| <h1 data-bind="timeleft" class="countdown-time"></h1> | |
| <p class="before-more-info">ends on:</p> | |
| <p class="more-info" data-bind="end"></p> |
| // ---------------------------------------------------------------------------- | |
| // Sass declarations | |
| // ---------------------------------------------------------------------------- | |
| $background-color: #dc5945; | |
| // ---------------------------------------------------------------------------- | |
| // Widget-clock styles | |
| // ---------------------------------------------------------------------------- | |
| .widget-countdown { | |
| background-color: $background-color; | |
| h2 { font-size: 2em;} | |
| h1 { font-size: 2em;} | |
| .countdown-time { | |
| margin-top: 10px; | |
| color: gold; | |
| } | |
| .before-more-info { | |
| font-size: 15px; | |
| position: absolute; | |
| bottom: 52px; | |
| left: 0; | |
| right: 0; | |
| } | |
| } |
I think something is off with the following conditionals:
if seconds_until_end < 3600
$(@node).parent().remove()
else if seconds_until_end < 0
@set('timeleft', "TIME UP!")
for i in [0..100] by 1
$(@node).fadeTo('fast', 0).fadeTo('fast', 1.0)as it stands now the second one is unreachable.
date.parse doesn't work in safari is there an alternative
is there a way to stop the fadeto when a new date is send
I for one was pretty surprised to see the countdown widget disappear on the last hour. This is due to the conditional on line 10 of countdown.coffee. What is the point of it?
Yep I had the same issue of the widget being removed at time of writing this the line 10 above in the coffee script should be a minus.
To stop it being removed an hour before to an hour after change it as follows:
so from
if seconds_until_end < 3600
to
if seconds_until_end < -3600
Personally though I'd probably change it to 5 or 10 mins after -360 or -720
Flashing is good to see on dash to show the time is up but can be annoying after a while.
Anyone able to update the code above to reflect the change?
Apart from that awesome widget. Would love to know how to make it full screen on 1080 telly though. I'm having a few issues with Layout.
can the date on this widget be send dynamically so that it can be change with a request instead of going into the code and manually changing it
FYI: I needed to change the date format in the dashboard inclusion to this:
instead of the
16-May-2013as specified in the default GIST