World Clock widget for dashing

README.md

World Clock

Description

A simple widget that's capable of displaying time for multiple locations around the world. In our company(neo), we use it to display time in different offices.

Installation

1. Download moment.js 2.5.1 from MomentJS,

2. Download moment-timezone.js 0.0.3 from Moment Timezone.

3. Build the timezone data for locations you are interested in: http://momentjs.com/timezone/data/ and save the data file as moment-timezone-data.js. Note that for the default timezone configuration(shown below in world_clock.cofee) to work, you will need to include timezone data of Asia, America and Europe when building moment-timezone-data.js.

4. Put all the downloaded files in your /assets/javascripts directory.

5. Include them in application.coffee in the following order:

#= require moment.min
#= require moment-timezone.min
#= require moment-timezone-data

6. The files world_clock.coffee, world_clock.html and world_clock.scss go in the /widget/world_clock directory.

7. Last but not least, add the widget html to your dashboard:

<li data-row="1" data-col="1" data-sizex="4" data-sizey="1">
  <div data-view="WorldClock" class="widget widget-world-clock"></div>
</li>

world_clock.coffee

class Dashing.WorldClock extends Dashing.Widget
  # configuration
  locations: [
    { zone: "Asia/Singapore", display_location: "SG", primary: true },
    { zone: "Asia/Jakarta", display_location: "JK" },
    { zone: "America/Los_Angeles", display_location: "SF" },
    { zone: "America/New_York", display_location: "NYC" },
    { zone: "Europe/London", display_location: "EDH" }
  ]

  startClock: ->
    for location in @locations
      date = moment().tz(location.zone)
      location.time = [date.hours(), date.minutes(), date.seconds()].map (n)->
        ('0' + n).slice(-2)
      .join(':')
      minutes = 60 * date.hours() + date.minutes()
      totalWidth = document.querySelector('.hours').clientWidth - 1
      offset = (minutes / (24.0 * 60)) * totalWidth

      clock = document.querySelector("." + location.display_location)
      if(clock)
        ['-webkit-transform', '-moz-transform', '-o-transform', '-ms-transform', 'transform'].forEach (vendor) ->
          clock.style[vendor] = "translateX(" + offset + "px)"

          if(location.primary)
            @set('time', location.time)
        , @

    setTimeout @startClock.bind(@), 1000

  setupHours: ->
    hours = []
    for h in [0..23]
      do (h) ->
        hours[h] = {}
        hours[h].dark = h< 7 || h>= 19
        hours[h].name = if h == 12 then h else h%12
    @set('hours', hours)

  ready: ->
    @setupHours()
    @startClock()

world_clock.html

<ul class="hours">
  <li data-foreach-hour="hours" data-bind="hour.name" data-addclass-dark="hour.dark"></li>
</ul>
<ul class="locations">
  <li data-foreach-location="locations" data-addclass-primary="location.primary" data-bind-class="location.display_location">
    <div class="placeholder" data-hideif="location.primary"></div>
    <div class="label" >
      <div class="location" data-source="location.display_location" data-hideif="location.primary"></div>
      <div class="location local" data-source="time" data-showif="location.primary"></div>
    </div>
    <div class="placeholder" data-showif="location.primary"></div>
  </li>
</ul>

world_clock.scss

.widget.widget-world-clock {
  $dark-text: #333;
  $dark-background: grey;
  font-size: 2em;
  padding-top: 55px;

  > ul li {
    box-sizing: border-box;
    display: inline-block;
    color: $dark-text;

    &.primary {
      font-size: 2em;
      margin-top: -185px;

      .location {
        margin-bottom: -10px;
      }

      .placeholder {
        background: white;
      }
    }
  }

  .hours {
    li {
      background: white;
      width: 4.16%;

      &:not(:last-child) {
        border-right: 1px solid;
      }
    }

    .dark {
      background: $dark-background;
      color: white;
    }
  }

  .locations {
    text-align: left;

    li {
      position: absolute;
    }

    .placeholder {
      height: 30px;
      width: 2px;
      background: $dark-background;
    }

    .label {
      position: relative;
      color: $dark-background;

      .location {
        margin-left: -50%;
        &.local {
          color: white;
        }
      }

      .minute {
        position: absolute;
        top: 0;
      }
    }
  }
}

Thanks @weilu, this is really nice! A pretty unique display of time zones, I like it a lot!

Thanks @BillLortz for the post about the timezone files etc. This was what got everything finally working for me here.

@weilu, a suggestion perhaps: Can you consider having the Time zone tags be alternated high/low when they are very close? Currently they just overlap. For example, it would be cool when it can be detected that they overlap, to do something like this:

0  1  2  3  4  5  6
|  |              |
NY |             CEST
 Brazil

Nice work!

Bill