12 Hour Clock for Dashing

README.md

Dashing - 12 Hour Clock

This widget displays the current time as a 12-hour clock.

Installation:

Open a shell and run this command from the root of your dashing project:

dashing install 6e2f80b4812c5b9474f3

Usage:

Place the code below in one of your dashboard files.

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-view="TwelveHourClock"></div>
</li>

screenshot.png

twelve_hour_clock.coffee

class Dashing.TwelveHourClock extends Dashing.Widget

  ready: ->
    setInterval(@startTime, 1000)

  startTime: =>
    today    = new Date()
    hours    = @getHours(today.getHours())
    minutes  = @formatTime(today.getMinutes())
    meridiem = @getMeridiem(today.getHours())
    @set('time', hours + ":" + minutes + " " + meridiem)
    @set('date', today.toDateString())

  getHours: (i) ->
    ((i + 11) %% 12) + 1

  getMeridiem: (i) ->
    if i < 12 then "AM" else "PM"

  formatTime: (i) ->
    if i < 10 then "0" + i else i

twelve_hour_clock.html

<h1 data-bind="date"></h1>
<h2 data-bind="time"></h2>

twelve_hour_clock.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #dc5945;

// ----------------------------------------------------------------------------
// Widget-clock styles
// ----------------------------------------------------------------------------
.widget-twelve-hour-clock {
  background-color: $background-color;
}

@nigelhorne I think the message you received was a general one output by the dashing command. If you look more closely, it says to edit the Gemfile and run bundle install "if needed." Admittedly, the wording is confusing, but changing those files isn't necessary for this widget. If you check the widgets folder, you should see a "twelve_hour_clock" directory with 3 files in it. If those are present, the command ran successfully.

I'd like to add a second line to this with UTC Time. Can anyone help me with that?

@mmiller458,
to add a new line just add the following line in the twelve_hour_clock.html
<h1 class="title" data-bind="title"></h1>
above the line
<h1 data-bind="date"></h1>
and add pass the data-title param in your dashboard .erb file
example:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-view="TwelveHourClock" data-title="Sophia Antipolis"></div>
</li>

Edited:
Sorry I misread your question. For UTC time, you might look into using:

today    = new Date()
utc_today = today.getUTCDate()

then get the hours, minutes, meridien, ... as it is done for "today"

Virus