Skip to content

Instantly share code, notes, and snippets.

@roelentless
Last active January 10, 2019 18:46
Show Gist options
  • Save roelentless/5353056 to your computer and use it in GitHub Desktop.
Save roelentless/5353056 to your computer and use it in GitHub Desktop.
Countdown widget for Dashing

Description

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;
}
}
@MrZaph
Copy link

MrZaph commented Sep 27, 2014

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.

@E-Kelly2018
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment