Threequarks - Station Clock

This gem allows you to use the Canvas Station Clock http://www.3quarks.com/en/StationClock/

Installation

Add this line to your application's Gemfile:

gem 'threequarks'

And then execute:

$ bundle

Or install it yourself as:

$ gem install threequarks

Usage

Add the following line to your application.js file

//= require threequarks

Display the UTC time

<div 
  class='clock'
  offset='0'
  body='<%= Threequarks::RoundBody %>'
  dial='<%= Threequarks::SwissStrokeDial %>'
  hourHand='<%= Threequarks::SwissHourHand %>'
  minuteHand='<%= Threequarks::SwissMinuteHand %>'
  secondHand='<%= Threequarks::SwissSecondHand %>'
  boss='<%= Threequarks::NoBoss %>'
  minuteHandBehavior='<%= Threequarks::BouncingMinuteHand %>'
  secondHandBehavior='<%= Threequarks::OverhastySecondHand %>'
  redrawInterval='1000'>
  <canvas id='clockUTC' width='100' height='100'></canvas>
  <p>UTC Time</p>
</div>

Display the local time

<div 
  class='clock'
  body='<%= Threequarks::RoundBody %>'
  dial='<%= Threequarks::SwissStrokeDial %>'
  hourHand='<%= Threequarks::SwissHourHand %>'
  minuteHand='<%= Threequarks::SwissMinuteHand %>'
  secondHand='<%= Threequarks::SwissSecondHand %>'
  boss='<%= Threequarks::NoBoss %>'
  minuteHandBehavior='<%= Threequarks::BouncingMinuteHand %>'
  secondHandBehavior='<%= Threequarks::OverhastySecondHand %>'
  redrawInterval='1000'>
  <canvas id='clockLocal' width='100' height='100'></canvas>
  <p>Local Time (without offset attribute)</p>
</div>

List of different options

# clock body
NoBody         = 0
SmallWhiteBody = 1
RoundBody      = 2
RoundGreenBody = 3
SquareBody     = 4

# stroke dial
NoDial               = 0
GermanHourStrokeDial = 1
GermanStrokeDial     = 2
AustriaStrokeDial    = 3
SwissStrokeDial      = 4

#clock hour hand
PointedHourHand = 1
BarHourHand     = 2
SwissHourHand   = 3

#clock minute hand
PointedMinuteHand = 1
BarMinuteHand     = 2
SwissMinuteHand   = 3

#clock second hand
NoSecondHand            = 0
BarSecondHand           = 1
HoleShapedSecondHand    = 2
NewHoleShapedSecondHand = 3
SwissSecondHand         = 4

# clock boss
NoBoss    = 0
BlackBoss = 1
RedBoss   = 2

# minute hand behavior
CreepingMinuteHand        = 0
BouncingMinuteHand        = 1
ElasticBouncingMinuteHand = 2

# second hand behavior
CreepingSecondHand        = 0
BouncingSecondHand        = 1
ElasticBouncingSecondHand = 2
OverhastySecondHand       = 3

Contributing

1. Fork it ( https://github.com/[my-github-username]/threequarks/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

src: http://www.sitepoint.com/create-ruby-gem-jquery-plugin-basics/