Skip to content

Instantly share code, notes, and snippets.

@Brunas
Last active March 8, 2018 19:58
Show Gist options
  • Save Brunas/7037866 to your computer and use it in GitHub Desktop.
Save Brunas/7037866 to your computer and use it in GitHub Desktop.
Advanced clock widget for Dashing
class Dashing.Clock extends Dashing.Widget
ready: ->
setInterval(@startTime, 500)
startTime: =>
today = new Date()
@set('date', today.toDateString())
@set('time', @formatTime(today.getHours()) + ":" + @formatTime(today.getMinutes()) + ":" + @formatTime(today.getSeconds()))
offset2 = $(@node).data('second-time-offset')
if offset2
time2 = new Date()
time2.setTime(today.getTime()+offset2*60*60*1000)
@set('time2', @formatTime(time2.getHours()) + ":" + @formatTime(time2.getMinutes()) + ":" + @formatTime(time2.getSeconds()))
offset3 = $(@node).data('third-time-offset')
if offset3
time3 = new Date()
time3.setTime(today.getTime()+offset3*60*60*1000)
@set('time3', @formatTime(time3.getHours()) + ":" + @formatTime(time3.getMinutes()) + ":" + @formatTime(time3.getSeconds()))
formatTime: (i) ->
if i < 10 then "0" + i else i
<h1 data-bind="date"></h1>
<h2 data-bind="time"></h2>
<h2 class="second-time" data-bind="time2"></h2>
<h2 class="third-time" data-bind="time3"></h2>

Description

This is simple Dashing widget to show clock supporting 3 time zones. It is based on standard clock widget in Dashing package.

##Usage

To use this widget, copy clock.html, clock.coffee, and clock.scss into the /widgets/clock 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-id="clock" data-view="Clock" data-second-time-offset="-2" data-third-time-offset="3"></div>
  <i class="icon-time icon-background"></i>
</li>

##Settings

Time offsets are configured by adding data-second-time-offset or data-third-time-offset attributes. As you see above, offsets can be numbers - negative with minus or positive without any sign. If attributes are not specified time is not shown.

You can change styles .second-time and .third-time in clock.scss file to suite your dashboard.

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #dc5945;
// ----------------------------------------------------------------------------
// Widget-clock styles
// ----------------------------------------------------------------------------
.widget-clock {
background-color: $background-color;
h1 {
font-size:+3em;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
h2 {
font-size:+4em;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
.second-time {
font-size:+3em;
}
.third-time {
font-size:+2em;
}
}
@motherboard1999
Copy link

motherboard1999 commented Jan 29, 2018

The new HTML-Tag must look like this:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="clock" data-view="Clock">
  <i class="fa fa-clock-o icon-background" style="font-size:10em;"></div>
</li></i>

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