Analog (World) Clock

README.md

Description

This widget displays the current time in a different location at a given time offset as an analog clock. To display time at your location use data-offset="0" to diplay time in a country with +1 hour offset use data-offset="+1", ... You can use several widget to show time in different country.

Usage:

In erb file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
 <div id="clockid1" data-view="Myclock" data-city="Paris" data-offset="0"></div>
</li>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
 <div id="clockid2" data-view="Myclock" data-city="Los Angeles" data-offset="-9"></div>
</li>     

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
 <div id="clockid3" data-view="Myclock" data-city="Seoul" data-offset="+7"></div>
</li>    

Move html, scss and coffee files to widgets/myclock

Preview

https://cloud.githubusercontent.com/assets/12684965/24568665/21d46d3a-1663-11e7-94ea-0b9b346fa126.png

myclock.coffee

class Dashing.Myclock extends Dashing.Widget
#= require_directory
  #CONSTANTS
  size = 286
  pi = Math.PI
  radius = size/2
  hourL = 0.5*radius
  minuteL = 0.75*radius
  secondL = 0.9*radius
  
  
  
  ready: ->
    setInterval(@drawTime,1000)

  drawTime: =>
    #CLEAN
    $(@node).children("canvas").remove()

    #CURRENT TIME
    today = new Date()
    console.log 'hour in local zone: ' + today.getTime()
    offsetHour = @get('offset')
    offsetMilis = offsetHour*3600000   
    remoteTime = today.getTime() +  offsetMilis
    remoteDate = new Date(remoteTime)
    h = remoteDate.getHours()
    m = remoteDate.getMinutes()
    s = remoteDate.getSeconds()

        
    #CREATE CANVAS
    canvas = document.createElement('canvas')
    canvas.setAttribute('height',size)
    canvas.setAttribute('width',size)
    $(@node).append(canvas)
    content = canvas.getContext '2d'
    content.translate(radius,radius)

    #DRAW BACKGROUND
    content.beginPath()
    content.arc(0, 0, radius, 0, 2*pi, false)
    content.closePath()
    content.fillStyle = '#cccccc'
    content.fill()
    
    #draw numbers
    content.font = '12px Arial'
    content.fillStyle = '#000'
    content.textAlign = 'center'
    content.textBaseline = 'middle'
    n = 1
    while n <= 12
      theta = (n - 3) * pi * 2 / 12
      x = radius * 0.9 * Math.cos(theta)
      y = radius * 0.9 * Math.sin(theta)
      content.fillText n, x, y
      n++

    #draw second
    content.lineWidth='4'
    content.strokeStyle='rgb(255,0,0)'
    content.lineCap='round'
    content.beginPath()
    content.moveTo(0,0)
    alpha = (s-15)*pi*2/60
    content.lineTo(secondL*Math.cos(alpha),secondL*Math.sin(alpha))
    content.stroke()

    #draw minute
    content.strokeStyle='rgb(0,0,0)'
    content.lineWidth='6'
    content.lineCap='round'
    content.beginPath()
    content.moveTo(0,0)
    beta = (m-15)*pi*2/60
    content.lineTo(minuteL*Math.cos(beta),minuteL*Math.sin(beta))
    content.stroke()

    #draw hour
    content.lineWidth='8'
    content.lineCap='round'
    content.beginPath()
    content.moveTo(0,0)
    #Jumping Hours:
    #gamma = (h-3)*pi*2/12
    #Smooth Hours:
    #gamma = ((h-3)+(m/60))*pi*2/12
    gamma = ((h-3)+(m/60))*pi*2/12
    content.lineTo(hourL*Math.cos(gamma),hourL*Math.sin(gamma))
    content.stroke()

myclock.html

<canvas id="clock"></canvas>
<h1 class="title" data-bind="city"></h1>

myclock.scss

// ----------------------------------------------------------------------------
// Widget-myclock styles
// ----------------------------------------------------------------------------
.widget-myclock {
  background-color: rgba(0,0,0,0);
}