jDigiClock

Digital Clock (HTC Hero inspired)

Author: Radoslav Dimov
Changed to YQL: Andrew Mercer
Version: 2.1.3 (Changelog)
Download: jdigiclock.zip
Licence: Dual licensed under the MIT and GPL licenses.

Contents

  1. Introduction
  2. Examples
  3. Getting started
  4. Configuration
  5. Using Server Offset
  6. Compatibility

Introduction

jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.

Examples



Getting started

To use the jDigiClock plugin, include the jQuery library, the jDigiClock source file and jDigiClock core stylesheet file inside the <head> tag of your HTML document: 

<link rel="stylesheet" type="text/css" href="css/jquery.jdigiclock.css" />
<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.jdigiclock.js"></script>

To setup jDigiClock, add the following code inside the <head> tag of your HTML document: 

<script type="text/javascript">
    $(document).ready(function() {
        $('#digiclock').jdigiclock({
            // Configuration goes here
        });
    });
</script>

jDigiClock accepts a lot of configuration options, see chapter "Configuration" for further informations.

jDigiClock expects a very basic HTML markup structure inside your HTML document:

<div id="digiclock"></div>

Configuration

jDigiClock accepts a list of options to control the appearance and behaviour of the Digital Clock. Here is the list of options you may set:

Property Type Default Description
imagesPath string "images/" Base path to image files. Clock and Weather images are located in subdirectories below this.
am_pm boolean false Specifies the AM/PM option.
weatherLocationCode string "1100661" Weather location code (see lookup: woeid.rosselliot.co.nz).
weatherMetric string "c" Specifies the weather metric mode: c or f.
weatherUpdate integer 0 Weather update in minutes.
svrOffset integer 0 Server offset in milliseconds.

Using Server Offset

The server offset can be used to return a time in a specific timezone. This offset is the difference between the user's local timezone and the time in the target timezone as returned by the server. Since we don't know the user's timezone, this means the offset needs to be calculated using an additional function.

Time in the target timezone can be returned using a PERL script on the server, such as: 

use DateTime;
my $time = DateTime->now( time_zone => 'Australia/Brisbane' );
print "Content-type:text/html\r\n\r\n";
print "$time\n";

The server offset can be calculated using a JavaScript function. This function is then used to call the jdigiclock script so that the offset is available. 

<script type="text/javascript">

  function getServerTime () {
        $.get("/cgi-bin/showtime_brisbane.pl" , displayDigiClock);
  }

  function displayDigiClock(sText, sStatus) {
       if (sStatus == "success")  {
          var nOffset = calcServerOffset(sText);
          $('#digiclock').jdigiclock({
                                weatherLocationCode: '1100661',
                                svrOffset: nOffset
          });
       }  else  {
          $("div#ServerTime").html("An error occurred.");
          $('#digiclock').jdigiclock({
                                weatherLocationCode: '1100661',
                                svrOffset: 0
          });
       }
  }

  function calcServerOffset (sText) {
     var nCalcOffset = 0;
     var nYear     = parseInt(sText.substring(0,4));
     var nMonth    = parseInt(sText.substring(5,7))-1;
     var nDay      = parseInt(sText.substring(8,10));
     var nHour     = parseInt(sText.substring(11,13));
     var nMinutes  = parseInt(sText.substring(14,16));
     var nSeconds  = parseInt(sText.substring(17,19));
     
     var dServerDT = new Date (nYear, nMonth, nDay, nHour, nMinutes, nSeconds, 0);
     var dClientDT = new Date ();
     
     nCalcOffset = dClientDT - dServerDT ; // time offset between server and client in milliseconds
     return nCalcOffset;
  }

</script>

<script type="text/javascript">
    $(document).ready(function() {
       getServerTime();
    });
</script>

Compatibility

jDigiClock has been tested and works on the following browsers: