Skip to content

Instantly share code, notes, and snippets.

@jpo
Last active January 10, 2019 05:10
Show Gist options
  • Save jpo/6e2f80b4812c5b9474f3 to your computer and use it in GitHub Desktop.
Save jpo/6e2f80b4812c5b9474f3 to your computer and use it in GitHub Desktop.
12 Hour Clock for Dashing

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>
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
<h1 data-bind="date"></h1>
<h2 data-bind="time"></h2>
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #dc5945;
// ----------------------------------------------------------------------------
// Widget-clock styles
// ----------------------------------------------------------------------------
.widget-twelve-hour-clock {
background-color: $background-color;
}
@jpo
Copy link
Author

jpo commented Dec 2, 2015

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

@mmiller458
Copy link

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

@issamy
Copy link

issamy commented Mar 21, 2017

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

@Etharon
Copy link

Etharon commented Apr 19, 2018

Virus

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