Advanced clock widget for Dashing

Clock-screenshot.png

clock.coffee

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

clock.html

<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>

Clock.md

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.

clock.scss

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

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>