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

The pre-generated file that axlroden provided really helped me get this working. Unfortunately, moment.js's code has changed since the instructions were created for this tool. I played for a while and found the new moment.js and associated code works just fine and is maybe a bit simpler. These instructions tell you how to use the new code.

To start, make sure you don't have any of the moment.js, moment-timezone.js, or moment-timezone-data.js in the assets/javascripts directory. If one or more of those old files is present, they may load automatically and interfere with the new code. I tried renaming them instead of removing them and wound up with problems - so remove them.

If you go to the momentjs.com website, there are two major tabs - "Moment" and "Moment Timezone". You will need to load a file from each of those tabs.

• From the "Moment" tab, download either "Moment.js" or "Moment.min.js". You don't need the locales version, but I suspect it would work.

• From the "Moment Timezone" tab, download one of the two versions that includes years, the moment-timezone.js doesn't contain much of a timezone database. I downloaded "Moment-timezone-all-years.js" (you could probably load the min version to get better performance, or the 2010-2020 versions). The neat thing is that that file contains the code AND the database. So, you now only need two files.

• Put those files in the assets/javascripts directory and edit application.coffee to include the two files you downloaded. The actual filename is different than the link name for the database. I added a "#= require moment" and "#= require moment-timezone-with-data". You don't need a third require for the database since the database is in the 2nd file.

Everything worked perfectly for me without changing the above coffee, html, or scss files. I now have a much more robust timezone database and I know it is current with regard to timezone rules.

Hopefully you'll find this helpful. I love this widget that weilu created and hope that others continue to use it.

Thanks to BillLortz I've just got an instance set up and working, Awesome for distributed teams to keep an eye on the time in different offices.

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