Create a gist now

Instantly share code, notes, and snippets.

@ruleb /README.md
Last active Dec 13, 2016

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;
}
}
@ghost
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

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

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

@Sennevds

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

@maakuth
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
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.

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