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

ghost commented Apr 27, 2013

FYI: I needed to change the date format in the dashboard inclusion to this:

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-view="Countdown" data-title="Product Launch" data-end="May 16, 2013 12:00:00"></div>
    </li>

instead of the 16-May-2013 as specified in the default GIST

@soldiermoth
Copy link

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.

@Sennevds
Copy link

date.parse doesn't work in safari is there an alternative

@Sennevds
Copy link

is there a way to stop the fadeto when a new date is send

@maakuth
Copy link

maakuth commented Jun 11, 2014

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?

@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