From b06588fbe2f0a011639dabc833d17246cf0c937b Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Wed, 11 Dec 2013 22:34:15 +0200 Subject: [PATCH 01/12] Initial fork (ver. 0.1) --- Jakefile | 95 --------------- README.md | 253 +++++++++++++------------------------- VERSION | 2 +- coolclock.js | 290 +++++++++++++++++++++++++++++--------------- demo.html | 20 +++ demos/demo.html | 24 ---- demos/demo2.html | 39 ------ demos/logclock.html | 19 --- moreskins.js | 53 ++++---- 9 files changed, 333 insertions(+), 462 deletions(-) delete mode 100644 Jakefile create mode 100644 demo.html delete mode 100644 demos/demo.html delete mode 100644 demos/demo2.html delete mode 100644 demos/logclock.html diff --git a/Jakefile b/Jakefile deleted file mode 100644 index 4233cc4..0000000 --- a/Jakefile +++ /dev/null @@ -1,95 +0,0 @@ -// -// Jakefile -// -// Mainly for building minified coolclock.js. -// Also adds a version number and license info -// to minified and non-minified source files for -// distribution. -// -// Requirements: -// sudo npm install -g jake -// sudo npm install -g uglify-js -// -// Usage: -// jake # default task is buildAll -// jake -T # see other tasks -// - -var fs = require('fs'); - -// (Is this kind of thing okay?) -String.prototype.chomp = function() { return this.replace(/\n$/, ''); } -String.prototype.escapeDoubleQuotes = function() { return this.replace(/"/g, '\\"'); } -String.prototype.stripTrailingSpaces = function() { return this.replace(/\s+$/mg, ''); } - -var projName = 'CoolClock' -var sourceUrl = 'https://github.com/simonbaird/CoolClock'; -var homeUrl = 'http://randomibis.com/coolclock/'; -var licenseUrl = 'https://github.com/simonbaird/CoolClock/blob/master/LICENSE' - -var licenseText = fs.readFileSync('LICENSE', 'utf-8').chomp(); -var version = fs.readFileSync('VERSION', 'utf-8').chomp(); -var versionFile = version.replace(/\.|\-/g,'_') - -var mainSource = 'coolclock.js'; -var outputDir = 'build'; -var miniTargetVer = outputDir+'/coolclock.'+versionFile+'.minified.js'; -var plainTargetVer = outputDir+'/coolclock.'+versionFile+'.js'; -var miniTarget = outputDir+'/coolclock.minified.js'; -var plainTarget = outputDir+'/coolclock.js'; - -var uglifyCommand = 'uglifyjs '+mainSource+' --compress'; - -var longComment = [ - '/*', - ' * '+projName+' '+version, - ' * '+homeUrl, - ' * '+sourceUrl, - ' *', - licenseText.replace(/^/mg,' * ').stripTrailingSpaces().escapeDoubleQuotes(), - ' */' -].join("\n"); - -var shortComment = [ - '/*', - projName, - version, - licenseUrl, - '*/' -].join(' '); - -//----------------------------------------------------------------------- -task('default', ['buildAll']); - -desc('Build all targets'); -task('buildAll', [plainTargetVer, miniTargetVer, plainTarget, miniTarget]); - -directory(outputDir); - -file(miniTargetVer, [outputDir, mainSource, 'Jakefile'], function(){ - jake.exec('(echo "'+shortComment+'"; '+uglifyCommand+') > '+miniTargetVer, function(){ - console.log(miniTargetVer); - complete(); - }); -}, true); - -file(plainTargetVer, [outputDir, mainSource, 'Jakefile'], function(){ - jake.exec('(echo "'+longComment+'"; cat '+mainSource+';) > '+plainTargetVer, function(){ - console.log(plainTargetVer); - complete(); - }); -}, true); - -// Just copying these seems a but strange, but what else..? -file(miniTarget, [miniTargetVer], function() { - jake.cpR(miniTargetVer, miniTarget); -}); - -file(plainTarget, [plainTargetVer], function() { - jake.cpR(plainTargetVer, plainTarget) -}); - -desc('Remove generated files'); -task('clean', [], function(){ - jake.rmRf(outputDir); -}, true); diff --git a/README.md b/README.md index 078a975..28d80fb 100644 --- a/README.md +++ b/README.md @@ -5,37 +5,42 @@ CoolClock - The Javascript Analog Clock About CoolClock --------------- -CoolClock is a customisable javascript analog clock. +This is my fork of CoolClock, a customisable javascript analog clock. -What's New ----------- - -_(NB: Needs update)_ +New Features +------------ -- **(19-Aug-2010)** - Release version 2.1, new features include digital (text) - display and two logClock modes. See logClock demo and demo2. -- **(26-Apr-2010)** - Released new version 2.0 and added source to github. Added note - about new onload requirements. -- **26-Apr-2010)** - Someone has created a CoolClock plugin for SongBird. Go check - it out. +- **(11-Dec-2013)** - Removed all cruft relating to Internet Explorer and + ExplorerCanvas. The clock works fine in IE 9.0 or later without them. +- **(11-Dec-2013)** - The clock can now synchronize itself with the web + server's time. (Note that this is experimental. Testers are much + appreciated.) +- **(11-Dec-2013)** - Clocks can now have a title, for instance "Local Time", + or "London, UK". +- **(11-Dec-2013)** - Proper skinning for titles and digital clocks. +- **(11-Dec-2013)** - Numerous cosmetic changes. Requirements ------------ CoolClock requires canvas suport therefore it works best in Firefox, Safari or -Chrome. It can work in IE via the use of ExplorerCanvas however in IE it -refreshes slowly, doesn't render as nicely and the second hand decoration is -disabled due to a rendering glitch. CoolClock does not use Flash. +Chrome. It also works with Internet Explorer versions 9 and later. CoolClock +does not use Flash. Using CoolClock --------------- -Download `coolclock.js`, `moreskins.js` and `excanvas.js` and put them in the +Download `coolclock.js` and `moreskins.js` and put them in the same folder as your html file. In the head section of your html file add the following: ````Html - + +```` + +Or, if you want more skins: + +````Html ```` @@ -53,14 +58,14 @@ like this: ```` - Somewhere in the body of your html file add the following: ````Html - + ```` -The colon delimited fields after CoolClock in the class control the appearance of the clock. The fields are as follows: +The colon delimited fields after CoolClock in the class control the appearance +of the clock. The fields are as follows: @@ -69,32 +74,57 @@ The colon delimited fields after CoolClock in the class control the appearance o - + + + + + - + - + + + + + + + + + - + - + + + + + + + + +
`CoolClock`Required
`Skin`Optional. Default is "swissRail"Specifies which skin to use. CoolClock currently includes seven skins, -"swissRail", "chunkySwiss", "fancy", "machine", "classic", "modern" and -"simple". (The last three were created by Bonstio for use with his Google -Gadget). It's easy to create your own additional skins
Specifies which skin to use for rendering the clock face. Four skins are +defined in coolclock.js: swissRail, chunkySwiss, chunkySwissOnBlack and +miliUbuntu. A lot more can be found in moreskins.js.
`textSkin`Optional. Default is "std"Specifies which skin to use for rendering the title and the digital clock. +Three such skins are defined for you: std, stdOnBlack and +miliUbuntu.
`Radius`Optional. Default is 85Specifies the radius in pixels of the clock
Specifies the radius in pixels of the clock.
`noSeconds`OptionalIf you include "noSeconds" as the last field then the clock will have no -second hand. Use if your CPU usage is too high
If you include "noSeconds" here then the clock will have no second hand. +Use if your CPU usage is too high.
`gmtOffset`OptionalIf you don't specify anything you get local time (or server time, if your +clocks are sync'ed with the web server). If you specify a value here (in hours) +it will be used as an offset from GMT (UTC). Eg, put -5 to indicate 5 hours +behind GMT. You can specify fractions of hours, eg +2.5
`showDigital`OptionalIf you put "showDigital" here then a digital clock will be rendered on top +of the clock face
`GMTOffset`Optional
`clockTitle`OptionalIf you don't specify anything you get local time. If you specify a value -here (in hours) it will be used as an offset from GMT (UTC). Eg, put -5 to -indicate 5 hours behind GMT. You can specify fractions of hours, eg -+2.5
Add some text here and it will be rendered on top of the clock face, as a +title to the clock. Leave it empty if you don't want a title. Due to the nature +of the class property, if you need spaces in titles, you must substitute them +with underscores. For example: "New_York".
`logClock`OptionalPut "logClock" here, and you'll get a logarithmic clock.
`logClockRev`OptionalSimilarly, put "logClockRev" to get a reverse logarithmic clock.
You should be able to omit fields to indicate you want the default values, eg -`CoolClock:::noSeconds` means default skin and default size with no second -hand. +`CoolClock::::noSeconds` means default face skin, default text skin and default +size with no second hand. If you want to add a real css class to your clock canvases you can do so by adding a space then the class. For example: @@ -111,74 +141,35 @@ And of course you can add styles directly if you need to, eg: The id can be anything but it should be unique of course. -Creating Your Own Skin ----------------------- - -You can design your own clock by creating a CoolClock "skin". Take a look at -the CoolClock.config section the javascript file. Copy and paste an existing -skin, for example copy these nine lines: - -````JavaScript -swissRail: { - outerBorder: { lineWidth: 1, radius:95, color: "black", alpha: 1 }, - smallIndicator: { lineWidth: 2, startAt: 89, endAt: 93, color: "black", alpha: 1 }, - largeIndicator: { lineWidth: 4, startAt: 80, endAt: 93, color: "black", alpha: 1 }, - hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 }, - minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 }, - secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 }, - secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 } -}, -```` - -Name your skin, eg change "swissRail" to "mySkin". Your skin is now available -for use. Change the settings in your skin to change the look of your clock. The -numbers refer to a percentage of the radius, so `startAt: 0, endAt: 50` means a -line from the center to 50% of the way to the edge. Alpha means the -transparency of the element where `alpha: 1` means solid. For example `alpha: 0.5` -means 50% transparent. Use the other skins for examples. - -At present you can only use certain predefined elements. In a possible future -version of CoolClock skins may support any number of clock elements. - -If you make a nice skin and would like to share it then send it to me at -. - -SongBird Add-on ---------------- - -You can get CoolClock as a [SongBird Add-on][songbird]. (Created by another Simon, not me...) - -[songbird]: http://addons.songbirdnest.com/addon/1640 - -Google Gadget -------------- - -There is a [Google Gadget][gadget] created by [Bonstio][] that you can use on your Google -home page. (Bonstio also created some lovely new skins in Google blue which I -have now incorporated here). Note that currently you can't use the gadget on -any page. It can only be used on GooglePages or your iGoogle Personalized Home -Page. +Creating Your Own Skins +----------------------- -[gadget]: http://www.google.com/ig/directory?url=http://bonstio.googlepages.com/cool_clock_mod.xml&synd=ig -[Bonstio]: http://bonstio.net/index.php?option=content&task=view&id=60 +You can design your own clocks by adding entries to CoolClock.config.skins and +CoolClock.config.textSkins. The skin objects' properties are self-explanatory, +so just copy an existing skin and hack away. -TiddlyWiki Plugin Version -------------------------- +Synchronize with Server time +---------------------------- -You can get CoolClock as an old and currently unmaintained TiddlyWiki plugin -called [CoolClockPlugin][]. +To have your clocks synchronized with the web server's time, set +CoolClock.config.useServerTime to true. This will cause all clocks in your page +to use the server's clock (and not the user's computer clock) as their +reference time. -There is also a version of the Plugin with [some documentation in Catalan][paco] created by Paco Rivière. +(Note that this will only change the reference time. You can still use gmtOffset +to have your clocks display different times to that of the server. Also, you +need jQuery for this to work; this is because the code uses Ajax to retrieve +the server time, and we need a framework to provide an Ajax implementation that +is compatible with all browsers.) +Authors +------- -[CoolClockPlugin]: http://mptw2.tiddlyspot.com/#Clock2 -[paco]: http://pacoriviere.googlepages.com/TiddlyWikica.html#Rellotge - -Author ------- +CoolClock was originally created by Simon Baird . -CoolClock was created by Simon Baird. Send feedback and suggestions to - or add a comment to the blog post mentioned below. +As for this fork's maintainer: I'm Pantelis Panayiotou +and I need to have this code functioning properly. So, please feel free to send +me bug reports and suggestions. License ------- @@ -191,76 +182,6 @@ top of coolclock.js). Changelog --------- -**27-Apr-2010 (version 2.0)** - -- No new features but code cleanup and jQuery 'awareness'. Removed - addLoadEvent stuff since it was flakey, so now it's up to you to add an - onload if you need it. Added code to github. - -**02-Nov-2007 (version 1.0.6)** - -- Added some more fantastic skins created by securephp. -- Moved extra skins to moreskins.js. - -**26-Oct-2007 (version 1.0.5)** - -- Added two new skins created by securephp. -- Updated excanvas to latest version. (It helped a little, the circles are - much smoother than they were). - -**9-Nov-2006 (version 1.0.4)** - -- Added three new skins created by Bonstio. - -**21-Aug-2006 (version 1.0.3)** - -- Added option for specifying timezone as suggested in [blog comments][comments]. - -[comments]: http://glosoli.blogspot.com/2006/08/coolclock.html#comments - -**16-Aug-2006 (version 1.0.2)** - -- Added two little workarounds for IE rendering glitches, scale the - lineWidth and fill in the little gap in full circles. - -**16-Aug-2006 (version 1.0.1)** - -- Hide the second hand decoration in IE since it doesn't draw it correctly. -- Noticed there is a bug with my use of addLoadEvent that means your clock - won't work if you have a body onload. Haven't fixed yet but added a - comment about it. - -**6-Aug-2006** - -- Added IE support via ExporerCanvas. - -**5-Aug-2006 (version 1.0.0)** - -- First release. Adapted from my TiddlyWiki plugin. - -TODO ----- - -_(NB: Needs update)_ - -- There is no way to tell between am and pm -- Be able to specify a solid background -- Be able to add numbers to the clock and images -- The TiddlyWiki plugin is not properly maintained and using old code -- Test with Opera -- Test with newest version of excanvas - -Comments --------- - -You can leave comments on this [blog post][blog]. - -[blog]: http://glosoli.blogspot.com/2006/08/coolclock.html - -Note On Spelling ----------------- +**11-Dec-2013** -Since I'm an Australian it probably should be an "analogue" clock but -personally I prefer to omit the "ue" in analogue. (And also the extra "me" in -"programme"). But I will stick with other "proper" spellings such as "customise -favourite colour". +- Initial fork (ver. 0.1) diff --git a/VERSION b/VERSION index 370e076..49d5957 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -3.0.0-pre +0.1 diff --git a/coolclock.js b/coolclock.js index f38feed..89f3384 100644 --- a/coolclock.js +++ b/coolclock.js @@ -1,63 +1,99 @@ - // Constructor for CoolClock objects window.CoolClock = function(options) { return this.init(options); } -// Config contains some defaults, and clock skins +// Config contains some defaults, some skins, and some options CoolClock.config = { + // General options and defaults; see README.md tickDelay: 1000, longTickDelay: 15000, defaultRadius: 85, renderRadius: 100, - defaultSkin: "chunkySwiss", - defaultFont: "15px sans-serif", - // Should be in skin probably... - // (TODO: allow skinning of digital display) - showSecs: true, - showAmPm: true, + defaultSkin: "swissRail", + defaultTextSkin: "std", + defaultClockTitle: "", + useServerTime : true, + // Clock face skins skins: { // There are more skins in moreskins.js // Try making your own skin by copy/pasting one of these and tweaking it swissRail: { - outerBorder: { lineWidth: 2, radius:95, color: "black", alpha: 1 }, - smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 }, - largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 }, - hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 }, - minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 }, - secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 }, - secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 } + outerBorder: { lineWidth: 2, radius:95, color: "#555555", alpha: 1 }, + smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "#555555", alpha: 1 }, + largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "#555555", alpha: 1 }, + hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "#555555", alpha: 1 }, + minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "#555555", alpha: 1 }, + secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "#ff5555", alpha: 1 }, + secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "#ff5555", color: "#ff5555", alpha: 1 } }, chunkySwiss: { - outerBorder: { lineWidth: 4, radius:97, color: "black", alpha: 1 }, - smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 }, - largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 }, - hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 }, - minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 }, - secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 }, - secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 } + outerBorder: { lineWidth: 4, radius:97, color: "#555555", alpha: 1 }, + smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "#555555", alpha: 1 }, + largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "#555555", alpha: 1 }, + hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "#555555", alpha: 1 }, + minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "#555555", alpha: 1 }, + secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "#ff5555", alpha: 1 }, + secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "#ff5555", color: "#ff5555", alpha: 1 } }, chunkySwissOnBlack: { - outerBorder: { lineWidth: 4, radius:97, color: "white", alpha: 1 }, - smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 }, - largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 }, - hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 }, - minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 }, - secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 }, - secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 } - } + outerBorder: { lineWidth: 4, radius:97, color: "#cccccc", alpha: 1 }, + smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "#cccccc", alpha: 1 }, + largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "#cccccc", alpha: 1 }, + hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "#cccccc", alpha: 1 }, + minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "#cccccc", alpha: 1 }, + secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "#ff5555", alpha: 1 }, + secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "#ff5555", color: "#ff5555", alpha: 1 } + }, + miliUbuntu: { + outerBorder: { lineWidth: 2, radius:95, color: "#555555", alpha: 1 }, + smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "#555555", alpha: 1 }, + largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "#555555", alpha: 1 }, + hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "#555555", alpha: 1 }, + minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "#555555", alpha: 1 }, + secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "#f58535", alpha: 1 }, + secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "#f58535", color: "#f58535", alpha: 1 } + }, }, - // Test for IE so we can nurse excanvas in a couple of places - isIE: !!document.all, + // Digital clock and title skins + textSkins: { + std: { + font: "10px sans-serif", + color: "#222222", + titleOffset: -0.6, + digitalOffset: 0.6, + showSecs: true, + showAmPm: true + }, + stdOnBlack: { + font: "10px sans-serif", + color: "#eeeeee", + titleOffset: -0.6, + digitalOffset: 0.6, + showSecs: true, + showAmPm: true + }, + miliUbuntu: { + font: "11px miliUbuntu", // font class must be defined in a .css file + color: "#222222", + titleOffset: -0.6, + digitalOffset: 0.6, + showSecs: true, + showAmPm: true + } + }, // Will store (a reference to) each clock here, indexed by the id of the canvas element clockTracker: {}, - // For giving a unique id to coolclock canvases with no id - noIdCount: 0 + // For giving a unique id to CoolClock canvases with no id + noIdCount: 0, + + // Placeholder for web server time offset + serverTimeOffset : 0 }; // Define the CoolClock object's methods @@ -68,12 +104,13 @@ CoolClock.prototype = { // Parse and store the options this.canvasId = options.canvasId; this.skinId = options.skinId || CoolClock.config.defaultSkin; - this.font = options.font || CoolClock.config.defaultFont; + this.textSkinId = options.textSkinId || CoolClock.config.defaultTextSkin; this.displayRadius = options.displayRadius || CoolClock.config.defaultRadius; this.renderRadius = options.renderRadius || CoolClock.config.renderRadius; this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true; this.gmtOffset = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null; this.showDigital = typeof options.showDigital == "boolean" ? options.showDigital : false; + this.clockTitle = (options.clockTitle != null && options.clockTitle != '') ? options.clockTitle.toString().replace('_',' ') : CoolClock.config.defaultClockTitle; this.logClock = typeof options.logClock == "boolean" ? options.logClock : false; this.logClockRev = typeof options.logClock == "boolean" ? options.logClockRev : false; @@ -109,7 +146,7 @@ CoolClock.prototype = { this.tickTimeout = null; // Start the clock going - this.tick(); + //this.tick(); return this; }, @@ -120,25 +157,13 @@ CoolClock.prototype = { this.ctx.globalAlpha = skin.alpha; this.ctx.lineWidth = skin.lineWidth; - if (!CoolClock.config.isIE) { - this.ctx.beginPath(); - } - - if (CoolClock.config.isIE) { - // excanvas doesn't scale line width so we will do it here - this.ctx.lineWidth = this.ctx.lineWidth * this.scale; - } + this.ctx.beginPath(); this.ctx.arc(x, y, skin.radius, 0, 2*Math.PI, false); - if (CoolClock.config.isIE) { - // excanvas doesn't close the circle so let's fill in the tiny gap - this.ctx.arc(x, y, skin.radius, -0.1, 0.1, false); - } - if (skin.fillColor) { this.ctx.fillStyle = skin.fillColor - this.ctx.fill(); + this.ctx.fill(); } if (skin.color) { this.ctx.strokeStyle = skin.color; @@ -148,10 +173,11 @@ CoolClock.prototype = { }, // Draw some text centered vertically and horizontally - drawTextAt: function(theText,x,y,skin) { - if (!skin) skin = this.getSkin(); + drawTextAt: function(theText,x,y,textSkin) { + if (!textSkin) textSkin = this.getTextSkin(); this.ctx.save(); - this.ctx.font = skin.font || this.font; + this.ctx.font = textSkin.font; + this.ctx.fillStyle = textSkin.color; var tSize = this.ctx.measureText(theText); // TextMetrics rarely returns a height property: use baseline instead. if (!tSize.height) { @@ -162,10 +188,12 @@ CoolClock.prototype = { this.ctx.restore(); }, + // Helper of timeText lpad2: function(num) { return (num < 10 ? '0' : '') + num; }, + // Return the angle a hand must be rotated with at every tick tickAngle: function(second) { // Log algorithm by David Bradshaw var tweak = 3; // If it's lower the one second mark looks wrong (?) @@ -182,14 +210,15 @@ CoolClock.prototype = { } }, + // Take time as an (hour, minute, second) tuple and return it as a readable string timeText: function(hour,min,sec) { - var c = CoolClock.config; + var s = CoolClock.config.textSkins[this.textSkinId]; return '' + - (c.showAmPm ? ((hour%12)==0 ? 12 : (hour%12)) : hour) + ':' + + (s.showAmPm ? ((hour%12)==0 ? 12 : (hour%12)) : hour) + ':' + this.lpad2(min) + - (c.showSecs ? ':' + this.lpad2(sec) : '') + - (c.showAmPm ? (hour < 12 ? ' am' : ' pm') : '') - ; + (s.showSecs ? ':' + this.lpad2(sec) : '') + + (s.showAmPm ? (hour < 12 ? ' am' : ' pm') : '') + ; }, // Draw a radial line by rotating then drawing a straight line @@ -202,25 +231,23 @@ CoolClock.prototype = { this.ctx.strokeStyle = skin.color; this.ctx.lineWidth = skin.lineWidth; - if (CoolClock.config.isIE) - // excanvas doesn't scale line width so we will do it here - this.ctx.lineWidth = this.ctx.lineWidth * this.scale; - if (skin.radius) { this.fullCircleAt(skin.startAt,0,skin) } else { this.ctx.beginPath(); - this.ctx.moveTo(skin.startAt,0) + this.ctx.moveTo(skin.startAt,0); this.ctx.lineTo(skin.endAt,0); this.ctx.stroke(); } this.ctx.restore(); }, + // Draw the clock render: function(hour,min,sec) { - // Get the skin + // Get the skins var skin = this.getSkin(); + var textSkin = this.getTextSkin(); // Clear this.ctx.clearRect(0,0,this.renderRadius*2,this.renderRadius*2); @@ -235,15 +262,6 @@ CoolClock.prototype = { !(i%5) && skin.largeIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.largeIndicator); } - // Write the time - if (this.showDigital) { - this.drawTextAt( - this.timeText(hour,min,sec), - this.renderRadius, - this.renderRadius+this.renderRadius/2 - ); - } - var hourA = (hour%12)*5 + min/12.0, minA = min + sec/60.0, secA = sec; @@ -258,16 +276,28 @@ CoolClock.prototype = { if (this.showSecondHand && skin.secondHand) this.radialLineAtAngle(this.tickAngle(secA),skin.secondHand); - // Hands decoration - not in IE - if (!CoolClock.config.isIE) { - if (skin.hourDecoration) - this.radialLineAtAngle(this.tickAngle(hourA), skin.hourDecoration); + // Hands decoration + if (skin.hourDecoration) + this.radialLineAtAngle(this.tickAngle(hourA), skin.hourDecoration); - if (skin.minDecoration) - this.radialLineAtAngle(this.tickAngle(minA), skin.minDecoration); + if (skin.minDecoration) + this.radialLineAtAngle(this.tickAngle(minA), skin.minDecoration); - if (this.showSecondHand && skin.secondDecoration) - this.radialLineAtAngle(this.tickAngle(secA),skin.secondDecoration); + if (this.showSecondHand && skin.secondDecoration) + this.radialLineAtAngle(this.tickAngle(secA),skin.secondDecoration); + + // Write the time + if (this.showDigital) { + this.drawTextAt( + this.clockTitle, + this.renderRadius, + this.renderRadius + this.renderRadius * textSkin.titleOffset + ); + this.drawTextAt( + this.timeText(hour,min,sec), + this.renderRadius, + this.renderRadius + this.renderRadius * textSkin.digitalOffset + ); } if (this.extraRender) { @@ -275,9 +305,11 @@ CoolClock.prototype = { } }, - // Check the time and display the clock + // Correct the time and call render() refreshDisplay: function() { - var now = new Date(); + var now = Date.now(); + now += CoolClock.config.serverTimeOffset; + now = new Date(now); if (this.gmtOffset != null) { // Use GMT + gmtOffset var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60)); @@ -316,20 +348,75 @@ CoolClock.prototype = { // Main tick handler. Refresh the clock then setup the next tick tick: function() { if (this.stillHere() && this.active) { - this.refreshDisplay() + this.refreshDisplay(); this.nextTick(); } }, + // Return the clock's face skin getSkin: function() { var skin = CoolClock.config.skins[this.skinId]; if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin]; return skin; - } + }, + + // Return the clock's digital clock and title skin + getTextSkin: function() { + var skin = CoolClock.config.textSkins[this.textSkinId]; + if (!skin) skin = CoolClock.config.textSkins[CoolClock.config.defaultTextSkin]; + return skin; + }, + }; +// Return true if canvas is supported by the browser +CoolClock.isCanvasSupported = function(){ + var elem = document.createElement('canvas'); + return !!(elem.getContext && elem.getContext('2d')); +} + +// If we are using server time, calcluate server time offset (note: this will only work if jQuery is present) +CoolClock.calcServerTimeOffset = function() { + if (window.jQuery && CoolClock.config.useServerTime) + { + // Retrieve web server time and give it to CoolClock, then start all clocks + try { + var ltb = Date.now(); + jQuery.post("/", null, function (data, status, header) { + var st = new Date(header.getResponseHeader("Date")); + st = st.getTime(); + var lta = Date.now(); + var lt = 1000*Math.floor((lta+ltb)/2000); + CoolClock.config.serverTimeOffset = st-lt; + // testing: alert("ltb=" + ltb.toString() + " lta=" + lta.toString() + " lt=" + lt.toString() + " st=" + st.toString() + " offset=" + (st-lt).toString()); + + CoolClock.startAllClocks(); + }); + } + finally { + // do nothing + } + } + else { + // Just start all clocks + CoolClock.startAllClocks(); + } +} + +// Start all clocks +CoolClock.startAllClocks = function() { + for (var id in CoolClock.config.clockTracker) + { + var clock = CoolClock.config.clockTracker[id]; + clock.tick(); + } +} + // Find all canvas elements that have the CoolClock class and turns them into clocks CoolClock.findAndCreateClocks = function() { + // If canvas is not supported, do nothing + if (! CoolClock.isCanvasSupported()) return; + // (Let's not use a jQuery selector here so it's easier to use frameworks other than jQuery) var canvases = document.getElementsByTagName("canvas"); for (var i=0;i -// If you do have jQuery and it's loaded already then we can do it right now -if (window.jQuery) jQuery(document).ready(CoolClock.findAndCreateClocks); +// If jQuery is present, load all clocks present in the document. +// Note: If you don't have jQuery, you'll have to do these things manually, by putting some Javascript in +if (window.jQuery) +{ + jQuery(document).ready(function() { + // Load all clocks + CoolClock.findAndCreateClocks(); + }); +} diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..d8c1972 --- /dev/null +++ b/demo.html @@ -0,0 +1,20 @@ + + + + +CoolClock Demo + + + + + +

CoolClock Demo + +

+

+

+ + + + + diff --git a/demos/demo.html b/demos/demo.html deleted file mode 100644 index 1642a12..0000000 --- a/demos/demo.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - CoolClock Demo - - - - - - - - - -

Demo

- - - - - - - diff --git a/demos/demo2.html b/demos/demo2.html deleted file mode 100644 index 80e7396..0000000 --- a/demos/demo2.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - CoolClock Demo 2 - - - - - - - - - - -
- - diff --git a/demos/logclock.html b/demos/logclock.html deleted file mode 100644 index 2f9f895..0000000 --- a/demos/logclock.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - CoolClock Demo - - - - - - - - - - - - diff --git a/moreskins.js b/moreskins.js index e316181..791cb5b 100644 --- a/moreskins.js +++ b/moreskins.js @@ -1,33 +1,42 @@ CoolClock.config.skins = { - swissRail: { - outerBorder: { lineWidth: 2, radius: 95, color: "black", alpha: 1 }, - smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 }, - largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 }, - hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 }, - minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 }, - secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 }, - secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 } + outerBorder: { lineWidth: 2, radius:95, color: "#555555", alpha: 1 }, + smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "#555555", alpha: 1 }, + largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "#555555", alpha: 1 }, + hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "#555555", alpha: 1 }, + minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "#555555", alpha: 1 }, + secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "#ff5555", alpha: 1 }, + secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "#ff5555", color: "#ff5555", alpha: 1 } }, chunkySwiss: { - outerBorder: { lineWidth: 4, radius: 97, color: "black", alpha: 1 }, - smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 }, - largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 }, - hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 }, - minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 }, - secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 }, - secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 } + outerBorder: { lineWidth: 4, radius:97, color: "#555555", alpha: 1 }, + smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "#555555", alpha: 1 }, + largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "#555555", alpha: 1 }, + hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "#555555", alpha: 1 }, + minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "#555555", alpha: 1 }, + secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "#ff5555", alpha: 1 }, + secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "#ff5555", color: "#ff5555", alpha: 1 } }, chunkySwissOnBlack: { - outerBorder: { lineWidth: 4, radius: 97, color: "white", alpha: 1 }, - smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 }, - largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 }, - hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 }, - minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 }, - secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 }, - secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 } + outerBorder: { lineWidth: 4, radius:97, color: "#cccccc", alpha: 1 }, + smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "#cccccc", alpha: 1 }, + largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "#cccccc", alpha: 1 }, + hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "#cccccc", alpha: 1 }, + minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "#cccccc", alpha: 1 }, + secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "#ff5555", alpha: 1 }, + secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "#ff5555", color: "#ff5555", alpha: 1 } + }, + + miliUbuntu: { + outerBorder: { lineWidth: 2, radius:95, color: "#555555", alpha: 1 }, + smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "#555555", alpha: 1 }, + largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "#555555", alpha: 1 }, + hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "#555555", alpha: 1 }, + minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "#555555", alpha: 1 }, + secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "#f58535", alpha: 1 }, + secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "#f58535", color: "#f58535", alpha: 1 } }, fancy: { From 1907f8ccc852bf4fc1cd073e42342c5ff0c8fceb Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Fri, 13 Dec 2013 20:07:41 +0200 Subject: [PATCH 02/12] Bug fix: The clock breaks down in browsers not supporting Date.now() Bug fix: When showDigital is not set, clock titles also disappear, even if set Small improvements in prototype.refreshDisplay() demo.html now uses jQuery --- .gitignore | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .gitignore diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 0ca96c9..0000000 --- a/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -build/* -.*.swp -.*.swo From e498de89be7db1f3327e0741eed172edb32fd04b Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Fri, 13 Dec 2013 20:17:55 +0200 Subject: [PATCH 03/12] Update README.md --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 28d80fb..cab94b8 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ - CoolClock - The Javascript Analog Clock ======================================= About CoolClock --------------- -This is my fork of CoolClock, a customisable javascript analog clock. +This is my fork of CoolClock, a customisable JavaScript analog clock. New Features ------------ From 8e344be44ef6448a853a17787b5bacd7618b7e0e Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Fri, 13 Dec 2013 20:22:55 +0200 Subject: [PATCH 04/12] Redoing commit, as git is uncooperative today (grr...) --- coolclock.js | 27 ++++++++++++++++++++++----- demo.html | 3 ++- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/coolclock.js b/coolclock.js index 89f3384..7b232e7 100644 --- a/coolclock.js +++ b/coolclock.js @@ -3,6 +3,13 @@ window.CoolClock = function(options) { return this.init(options); } +// Fix for browsers that don't support Date.now() +if (!Date.now) { + Date.now = function now() { + return new Date().getTime(); + }; +} + // Config contains some defaults, some skins, and some options CoolClock.config = { // General options and defaults; see README.md @@ -286,13 +293,18 @@ CoolClock.prototype = { if (this.showSecondHand && skin.secondDecoration) this.radialLineAtAngle(this.tickAngle(secA),skin.secondDecoration); - // Write the time - if (this.showDigital) { + // Draw the clock title + if ((this.clockTitle != null) && (this.clockTitle != '')) + { this.drawTextAt( this.clockTitle, this.renderRadius, this.renderRadius + this.renderRadius * textSkin.titleOffset ); + } + + // Draw the digital clock + if (this.showDigital) { this.drawTextAt( this.timeText(hour,min,sec), this.renderRadius, @@ -308,8 +320,13 @@ CoolClock.prototype = { // Correct the time and call render() refreshDisplay: function() { var now = Date.now(); - now += CoolClock.config.serverTimeOffset; - now = new Date(now); + if(CoolClock.config.serverTimeOffset != 0) + { + // If necessary, synchronize with web server time + now += CoolClock.config.serverTimeOffset; + now = new Date(now); + } + if (this.gmtOffset != null) { // Use GMT + gmtOffset var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60)); @@ -389,7 +406,7 @@ CoolClock.calcServerTimeOffset = function() { var lt = 1000*Math.floor((lta+ltb)/2000); CoolClock.config.serverTimeOffset = st-lt; // testing: alert("ltb=" + ltb.toString() + " lta=" + lta.toString() + " lt=" + lt.toString() + " st=" + st.toString() + " offset=" + (st-lt).toString()); - + CoolClock.startAllClocks(); }); } diff --git a/demo.html b/demo.html index d8c1972..6ceea70 100644 --- a/demo.html +++ b/demo.html @@ -6,7 +6,7 @@ - +

CoolClock Demo @@ -14,6 +14,7 @@

CoolClock Demo

+ From f344d36e1967096143dd5c23a3ba92a0fa70f997 Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Fri, 13 Dec 2013 20:25:47 +0200 Subject: [PATCH 05/12] Cosmetic changes to coolclock.js --- coolclock.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/coolclock.js b/coolclock.js index 7b232e7..8f4dcda 100644 --- a/coolclock.js +++ b/coolclock.js @@ -152,9 +152,6 @@ CoolClock.prototype = { this.active = true; this.tickTimeout = null; - // Start the clock going - //this.tick(); - return this; }, From d6cd4df65958dcba0e77680ab501493fa3ce3c63 Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Sat, 14 Dec 2013 23:06:20 +0200 Subject: [PATCH 06/12] Clock hands motion can now be fluid. Just set CoolClock.config.tickDealy to a low value (ie 50). Note that this may tax your CPU. --- coolclock.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/coolclock.js b/coolclock.js index 8f4dcda..79b8d2e 100644 --- a/coolclock.js +++ b/coolclock.js @@ -248,7 +248,7 @@ CoolClock.prototype = { }, // Draw the clock - render: function(hour,min,sec) { + render: function(hour,min,sec,msec) { // Get the skins var skin = this.getSkin(); var textSkin = this.getTextSkin(); @@ -268,7 +268,7 @@ CoolClock.prototype = { var hourA = (hour%12)*5 + min/12.0, minA = min + sec/60.0, - secA = sec; + secA = sec+msec/1000; // Draw the hands if (skin.hourHand) @@ -327,11 +327,11 @@ CoolClock.prototype = { if (this.gmtOffset != null) { // Use GMT + gmtOffset var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60)); - this.render(offsetNow.getUTCHours(),offsetNow.getUTCMinutes(),offsetNow.getUTCSeconds()); + this.render(offsetNow.getUTCHours(),offsetNow.getUTCMinutes(),offsetNow.getUTCSeconds(),offsetNow.getUTCMilliseconds()); } else { // Use local time - this.render(now.getHours(),now.getMinutes(),now.getSeconds()); + this.render(now.getHours(),now.getMinutes(),now.getSeconds(),now.getMilliseconds()); } }, From 9e6b7a638bf8c74c12f6265fe05d483af940bf39 Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Wed, 18 Dec 2013 20:08:36 +0200 Subject: [PATCH 07/12] Bug fix: Second hand not aligned with tick marks when tickDelay <= 1000 ms --- coolclock.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/coolclock.js b/coolclock.js index 79b8d2e..f367539 100644 --- a/coolclock.js +++ b/coolclock.js @@ -327,11 +327,19 @@ CoolClock.prototype = { if (this.gmtOffset != null) { // Use GMT + gmtOffset var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60)); - this.render(offsetNow.getUTCHours(),offsetNow.getUTCMinutes(),offsetNow.getUTCSeconds(),offsetNow.getUTCMilliseconds()); + this.render(offsetNow.getUTCHours(), + offsetNow.getUTCMinutes(), + offsetNow.getUTCSeconds(), + this.tickDelay < 1000 ? offsetNow.getUTCMilliseconds() : 0 + ); } else { // Use local time - this.render(now.getHours(),now.getMinutes(),now.getSeconds(),now.getMilliseconds()); + this.render(now.getHours(), + now.getMinutes(), + now.getSeconds(), + this.tickDelay < 1000 ? now.getMilliseconds() : 0 + ); } }, @@ -393,7 +401,9 @@ CoolClock.isCanvasSupported = function(){ CoolClock.calcServerTimeOffset = function() { if (window.jQuery && CoolClock.config.useServerTime) { - // Retrieve web server time and give it to CoolClock, then start all clocks + // If synchronizing with web server time: + // Retrieve web server time and give it to CoolClock, then start all clocks + // Note that server time offset will be rounded to the nearest second try { var ltb = Date.now(); jQuery.post("/", null, function (data, status, header) { @@ -412,7 +422,8 @@ CoolClock.calcServerTimeOffset = function() { } } else { - // Just start all clocks + // Otherwise: + // Just start all clocks CoolClock.startAllClocks(); } } From 91f1877f835be1f9cfca826dd1529a5b71e9373d Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Wed, 18 Dec 2013 22:08:40 +0200 Subject: [PATCH 08/12] Clock parameters are now passed via canvas class attributes. Updates in README.md --- README.md | 71 ++++++++++++++++++---------------- coolclock.js | 107 ++++++++++++++++++++++++++++++++------------------- demo.html | 7 ++-- 3 files changed, 108 insertions(+), 77 deletions(-) diff --git a/README.md b/README.md index cab94b8..1c5670c 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,9 @@ This is my fork of CoolClock, a customisable JavaScript analog clock. New Features ------------ +- **(18-Dec-2013)** - Clock parameters are now passed via canvas class + attributes. +- **(18-Dec-2013)** - Seconds hand can now have a "smooth" motion". - **(11-Dec-2013)** - Removed all cruft relating to Internet Explorer and ExplorerCanvas. The clock works fine in IE 9.0 or later without them. - **(11-Dec-2013)** - The clock can now synchronize itself with the web @@ -60,82 +63,82 @@ like this: Somewhere in the body of your html file add the following: ````Html - + ```` -The colon delimited fields after CoolClock in the class control the appearance -of the clock. The fields are as follows: +Extra attributes of the canvas tags will control the appearance of the clock. +The fields are as follows: - + - + - + - + - + - + - + - + + + + + - + - + - + +title to the clock. - - - - - +
`CoolClock`Required
classRequiredWithout that your canvas will be left alone
Must be set to CoolClock. Otherwise, your canvas will be left alone.
`Skin`Optional. Default is "swissRail"
`_skinId`Optional. Default is "swissRail" Specifies which skin to use for rendering the clock face. Four skins are defined in coolclock.js: swissRail, chunkySwiss, chunkySwissOnBlack and miliUbuntu. A lot more can be found in moreskins.js.
`textSkin`Optional. Default is "std"
`_textSkinId`Optional. Default is "std" Specifies which skin to use for rendering the title and the digital clock. Three such skins are defined for you: std, stdOnBlack and miliUbuntu.
`Radius`Optional. Default is 85
`_displayRadius`Optional. Default is 85 Specifies the radius in pixels of the clock.
`noSeconds`Optional
`_renderRadius`Optional. Default is 100If you include "noSeconds" here then the clock will have no second hand. -Use if your CPU usage is too high.
Specifies canvas size in pixels.
`gmtOffset`Optional
`_secondHand`Optional. Default is "tick"Set this to "none" if you want a clock with no second hand. Set it to +"tick" to have a second hand that ticks every second. Or to "smooth" for a one +that rotates continuously. It should be noted that "smooth" consumes a lot of +CPU time.
`_gmtOffset`Optional If you don't specify anything you get local time (or server time, if your -clocks are sync'ed with the web server). If you specify a value here (in hours) +clocks are sync'ed with the web server). If you specify a value (in hours) it will be used as an offset from GMT (UTC). Eg, put -5 to indicate 5 hours behind GMT. You can specify fractions of hours, eg +2.5
`showDigital`Optional
`_showDigital`OptionalIf you put "showDigital" here then a digital clock will be rendered on top -of the clock face
If you define this tag then a digital clock will be rendered on top of the +clock face
`clockTitle`Optional
`_clockTitle`Optional Add some text here and it will be rendered on top of the clock face, as a -title to the clock. Leave it empty if you don't want a title. Due to the nature -of the class property, if you need spaces in titles, you must substitute them -with underscores. For example: "New_York".
`logClock`OptionalPut "logClock" here, and you'll get a logarithmic clock.
`logClockRev`OptionalSimilarly, put "logClockRev" to get a reverse logarithmic clock.
Set this to "normal" to get a logarithmic clock, or to "reverse" to get a +reverse logarithmic clock. (By default, of course, the clock is +linear.)
-You should be able to omit fields to indicate you want the default values, eg -`CoolClock::::noSeconds` means default face skin, default text skin and default -size with no second hand. +Skipping a field indicates that you want the default value. If you want to add a real css class to your clock canvases you can do so by adding a space then the class. For example: ````Html - + ```` And of course you can add styles directly if you need to, eg: ````Html - + ````` The id can be anything but it should be unique of course. @@ -151,11 +154,11 @@ Synchronize with Server time ---------------------------- To have your clocks synchronized with the web server's time, set -CoolClock.config.useServerTime to true. This will cause all clocks in your page -to use the server's clock (and not the user's computer clock) as their -reference time. +CoolClock.config.useServerTime to true before calling +CoolClock.findAndCreateClocks(). This will cause all clocks in your page to use +the server's clock (and not the user's computer clock) as their reference time. -(Note that this will only change the reference time. You can still use gmtOffset +(Note that this will only change the reference time. You can still use _gmtOffset to have your clocks display different times to that of the server. Also, you need jQuery for this to work; this is because the code uses Ajax to retrieve the server time, and we need a framework to provide an Ajax implementation that diff --git a/coolclock.js b/coolclock.js index f367539..2e0b7bf 100644 --- a/coolclock.js +++ b/coolclock.js @@ -12,14 +12,19 @@ if (!Date.now) { // Config contains some defaults, some skins, and some options CoolClock.config = { - // General options and defaults; see README.md + // General options and defaults tickDelay: 1000, longTickDelay: 15000, - defaultRadius: 85, - renderRadius: 100, - defaultSkin: "swissRail", - defaultTextSkin: "std", + shortTickDelay: 50, + defaultSkinId: "swissRail", + defaultTextSkinId: "std", + defaultDisplayRadius: 85, + defaultRenderRadius: 100, + defaultSecondHand: "tick", defaultClockTitle: "", + defaultLogClock: null, + + // Set this to true to synchronize the clocks with the web server useServerTime : true, // Clock face skins @@ -110,18 +115,29 @@ CoolClock.prototype = { init: function(options) { // Parse and store the options this.canvasId = options.canvasId; - this.skinId = options.skinId || CoolClock.config.defaultSkin; - this.textSkinId = options.textSkinId || CoolClock.config.defaultTextSkin; - this.displayRadius = options.displayRadius || CoolClock.config.defaultRadius; - this.renderRadius = options.renderRadius || CoolClock.config.renderRadius; - this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true; - this.gmtOffset = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null; - this.showDigital = typeof options.showDigital == "boolean" ? options.showDigital : false; - this.clockTitle = (options.clockTitle != null && options.clockTitle != '') ? options.clockTitle.toString().replace('_',' ') : CoolClock.config.defaultClockTitle; - this.logClock = typeof options.logClock == "boolean" ? options.logClock : false; - this.logClockRev = typeof options.logClock == "boolean" ? options.logClockRev : false; - - this.tickDelay = CoolClock.config[ this.showSecondHand ? "tickDelay" : "longTickDelay" ]; + this.skinId = options.skinId || CoolClock.config.defaultSkinId; + this.textSkinId = options.textSkinId || CoolClock.config.defaultTextSkinId; + this.displayRadius = options.displayRadius ? parseInt(options.displayRadius) : CoolClock.config.defaultDisplayRadius; + this.renderRadius = options.renderRadius ? parseInt(options.renderRadius) : CoolClock.config.defaultRenderRadius; + this.secondHand = options.secondHand || CoolClock.config.defaultSecondHand; + this.gmtOffset = options.gmtOffset ? parseInt(options.gmtOffset) : null; + this.showDigital = (options.showDigital != null) || false; + this.clockTitle = options.clockTitle || CoolClock.config.defaultClockTitle; + this.logClock = options.logClock || CoolClock.config.defaultLogClock; + + // Set a long or short tick delay, depending on the type of the second hand + if (this.secondHand == "smooth") + { + this.tickDelay = CoolClock.config.shortTickDelay; + } + else if (this.secondHand == "none") + { + this.tickDelay = CoolClock.config.longTickDelay; + } + else + { + this.tickDelay = CoolClock.config.tickDelay; + } // Get the canvas element this.canvas = document.getElementById(this.canvasId); @@ -201,10 +217,10 @@ CoolClock.prototype = { tickAngle: function(second) { // Log algorithm by David Bradshaw var tweak = 3; // If it's lower the one second mark looks wrong (?) - if (this.logClock) { + if (this.logClock == "normal") { return second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak)); } - else if (this.logClockRev) { + else if (this.logClock == "reverse") { // Flip the seconds then flip the angle (trickiness) second = (60 - second) % 60; return 1.0 - (second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak))); @@ -216,7 +232,7 @@ CoolClock.prototype = { // Take time as an (hour, minute, second) tuple and return it as a readable string timeText: function(hour,min,sec) { - var s = CoolClock.config.textSkins[this.textSkinId]; + var s =this.getTextSkin(this.textSkinId); return '' + (s.showAmPm ? ((hour%12)==0 ? 12 : (hour%12)) : hour) + ':' + this.lpad2(min) + @@ -277,7 +293,7 @@ CoolClock.prototype = { if (skin.minuteHand) this.radialLineAtAngle(this.tickAngle(minA),skin.minuteHand); - if (this.showSecondHand && skin.secondHand) + if ((this.secondHand != "none") && skin.secondHand) this.radialLineAtAngle(this.tickAngle(secA),skin.secondHand); // Hands decoration @@ -287,7 +303,7 @@ CoolClock.prototype = { if (skin.minDecoration) this.radialLineAtAngle(this.tickAngle(minA), skin.minDecoration); - if (this.showSecondHand && skin.secondDecoration) + if ((this.secondHand != "none") && skin.secondDecoration) this.radialLineAtAngle(this.tickAngle(secA),skin.secondDecoration); // Draw the clock title @@ -321,8 +337,8 @@ CoolClock.prototype = { { // If necessary, synchronize with web server time now += CoolClock.config.serverTimeOffset; - now = new Date(now); } + now = new Date(now); if (this.gmtOffset != null) { // Use GMT + gmtOffset @@ -378,14 +394,14 @@ CoolClock.prototype = { // Return the clock's face skin getSkin: function() { var skin = CoolClock.config.skins[this.skinId]; - if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin]; + if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkinId]; return skin; }, // Return the clock's digital clock and title skin getTextSkin: function() { var skin = CoolClock.config.textSkins[this.textSkinId]; - if (!skin) skin = CoolClock.config.textSkins[CoolClock.config.defaultTextSkin]; + if (!skin) skin = CoolClock.config.textSkins[CoolClock.config.defaultTextSkinId]; return skin; }, @@ -437,6 +453,18 @@ CoolClock.startAllClocks = function() { } } +// Return the value of an HTML element's attribute +CoolClock.elAttr = function(element, attrName) { + for (var i = 0; i < element.attributes.length; i++) + { + var a = element.attributes[i]; + if (a.nodeName == attrName) + return a.nodeValue; + } + + return null; +} + // Find all canvas elements that have the CoolClock class and turns them into clocks CoolClock.findAndCreateClocks = function() { // If canvas is not supported, do nothing @@ -445,25 +473,24 @@ CoolClock.findAndCreateClocks = function() { // (Let's not use a jQuery selector here so it's easier to use frameworks other than jQuery) var canvases = document.getElementsByTagName("canvas"); for (var i=0;iCoolClock Demo -

-

-

+

+

+

+

From fb268b9a71c6be41afcb3fd44baf2f66800939b9 Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Wed, 18 Dec 2013 22:15:28 +0200 Subject: [PATCH 09/12] Cosmetic changes --- README.md | 11 ++++++----- coolclock.js | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1c5670c..f3a8b85 100644 --- a/README.md +++ b/README.md @@ -66,13 +66,14 @@ Somewhere in the body of your html file add the following: ```` -Extra attributes of the canvas tags will control the appearance of the clock. +Extra attributes of the canvas tag will control the appearance of the clock. The fields are as follows: - + @@ -97,7 +98,7 @@ miliUbuntu. @@ -106,12 +107,12 @@ CPU time. +behind GMT. You can specify fractions of hours, eg +2.5. +clock face. diff --git a/coolclock.js b/coolclock.js index 2e0b7bf..eb908b4 100644 --- a/coolclock.js +++ b/coolclock.js @@ -120,7 +120,7 @@ CoolClock.prototype = { this.displayRadius = options.displayRadius ? parseInt(options.displayRadius) : CoolClock.config.defaultDisplayRadius; this.renderRadius = options.renderRadius ? parseInt(options.renderRadius) : CoolClock.config.defaultRenderRadius; this.secondHand = options.secondHand || CoolClock.config.defaultSecondHand; - this.gmtOffset = options.gmtOffset ? parseInt(options.gmtOffset) : null; + this.gmtOffset = options.gmtOffset ? parseFloat(options.gmtOffset) : null; this.showDigital = (options.showDigital != null) || false; this.clockTitle = options.clockTitle || CoolClock.config.defaultClockTitle; this.logClock = options.logClock || CoolClock.config.defaultLogClock; From b7df4b2dbcfe64b4d48777effd1db67404584ac7 Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Tue, 12 May 2015 11:21:47 +0300 Subject: [PATCH 10/12] See changelog --- README.md | 6 +++ coolclock.js | 10 +++- demo.html | 148 ++++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 150 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index f3a8b85..bed08f9 100644 --- a/README.md +++ b/README.md @@ -188,3 +188,9 @@ Changelog **11-Dec-2013** - Initial fork (ver. 0.1) + +**12-May-2015** + +- Text skins now have shadows +- Minor bug fixes +- More clocks in demo.html diff --git a/coolclock.js b/coolclock.js index eb908b4..3d46fe7 100644 --- a/coolclock.js +++ b/coolclock.js @@ -75,6 +75,7 @@ CoolClock.config = { std: { font: "10px sans-serif", color: "#222222", + shadowColor: "#eeeeee", titleOffset: -0.6, digitalOffset: 0.6, showSecs: true, @@ -83,6 +84,7 @@ CoolClock.config = { stdOnBlack: { font: "10px sans-serif", color: "#eeeeee", + shadowColor: "#222222", titleOffset: -0.6, digitalOffset: 0.6, showSecs: true, @@ -91,6 +93,7 @@ CoolClock.config = { miliUbuntu: { font: "11px miliUbuntu", // font class must be defined in a .css file color: "#222222", + shadowColor: "#eeeeee", titleOffset: -0.6, digitalOffset: 0.6, showSecs: true, @@ -198,6 +201,11 @@ CoolClock.prototype = { this.ctx.save(); this.ctx.font = textSkin.font; this.ctx.fillStyle = textSkin.color; + if (textSkin.shadowColor) + { + this.ctx.shadowColor = textSkin.shadowColor; + this.ctx.shadowBlur = 1; + } var tSize = this.ctx.measureText(theText); // TextMetrics rarely returns a height property: use baseline instead. if (!tSize.height) { @@ -422,7 +430,7 @@ CoolClock.calcServerTimeOffset = function() { // Note that server time offset will be rounded to the nearest second try { var ltb = Date.now(); - jQuery.post("/", null, function (data, status, header) { + jQuery.post("", null, function (data, status, header) { var st = new Date(header.getResponseHeader("Date")); st = st.getTime(); var lta = Date.now(); diff --git a/demo.html b/demo.html index c00ed05..efbdb59 100644 --- a/demo.html +++ b/demo.html @@ -1,22 +1,144 @@ - -CoolClock Demo - - + + CoolClock Demo + + - + -

CoolClock Demo +

CoolClock Demo -

-

-

-

+

+ + + + +

- - - +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + + + +

+ + + + + From 6326d8af4c47d4d584ebb621c23734fe00fdb626 Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Tue, 12 May 2015 12:28:37 +0300 Subject: [PATCH 11/12] Updates in README.md --- README.md | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index bed08f9..922ecc6 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,9 @@ This is my fork of CoolClock, a customisable JavaScript analog clock. New Features ------------ +- **(12-May-2015)** - Shadows can now be applied to digital clock text. +- **(12-May-2015)** - New demo.html. Now renders clocks for all available skins. +- **(12-May-2015)** - A few bug fixes. - **(18-Dec-2013)** - Clock parameters are now passed via canvas class attributes. - **(18-Dec-2013)** - Seconds hand can now have a "smooth" motion". @@ -182,15 +185,3 @@ to use it pretty much however you want, including for commercial purposes, as long as you keep my copyright notice. (You can see the full license text at the top of coolclock.js). -Changelog ---------- - -**11-Dec-2013** - -- Initial fork (ver. 0.1) - -**12-May-2015** - -- Text skins now have shadows -- Minor bug fixes -- More clocks in demo.html From 9357601e3ea0ed79e404acd14a00aa0179ae67ac Mon Sep 17 00:00:00 2001 From: Pantelis Panayiotou Date: Thu, 21 May 2015 13:28:28 +0300 Subject: [PATCH 12/12] Small changes to README.md --- README.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 922ecc6..d702641 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,7 @@ -CoolClock - The Javascript Analog Clock -======================================= +CoolClock - An analogue clock for your website +============================================== -About CoolClock ---------------- - -This is my fork of CoolClock, a customisable JavaScript analog clock. +This is my fork of CoolClock, a customisable JavaScript analogue clock. New Features ------------ @@ -143,7 +140,7 @@ And of course you can add styles directly if you need to, eg: ````Html -````` +```` The id can be anything but it should be unique of course.

classRequiredMust be set to CoolClock. Otherwise, your canvas will be left alone.
Must be set to "CoolClock". Otherwise, your canvas will be left +alone.
`_skinId`Optional. Default is "swissRail"
`_secondHand`Optional. Default is "tick" Set this to "none" if you want a clock with no second hand. Set it to -"tick" to have a second hand that ticks every second. Or to "smooth" for a one +"tick" to have a second hand that ticks every second. Or to "smooth" for one that rotates continuously. It should be noted that "smooth" consumes a lot of CPU time.
If you don't specify anything you get local time (or server time, if your clocks are sync'ed with the web server). If you specify a value (in hours) it will be used as an offset from GMT (UTC). Eg, put -5 to indicate 5 hours -behind GMT. You can specify fractions of hours, eg +2.5
`_showDigital`Optional If you define this tag then a digital clock will be rendered on top of the -clock face
`_clockTitle`Optional