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; | |
| } | |
| } |
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
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.