Couple more small tweaks to the tails of planes.
Added "CoolClock" both local and GMT to the info pane, http://randomibis.com/coolclock/
This commit is contained in:
Brian Davenport
parent
b5424884ca
commit
d2a15659e7
5 changed files with 1341 additions and 7 deletions
public_html/coolclock
318
public_html/coolclock/coolclock.js
Normal file
318
public_html/coolclock/coolclock.js
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
/**
|
||||
* CoolClock 2.1.4
|
||||
* Copyright 2010, Simon Baird
|
||||
* Released under the BSD License.
|
||||
*
|
||||
* Display an analog clock using canvas.
|
||||
* http://randomibis.com/coolclock/
|
||||
*
|
||||
*/
|
||||
|
||||
// Constructor for CoolClock objects
|
||||
window.CoolClock = function(options) {
|
||||
return this.init(options);
|
||||
}
|
||||
|
||||
// Config contains some defaults, and clock skins
|
||||
CoolClock.config = {
|
||||
tickDelay: 1000,
|
||||
longTickDelay: 15000,
|
||||
defaultRadius: 85,
|
||||
renderRadius: 100,
|
||||
defaultSkin: "chunkySwiss",
|
||||
// Should be in skin probably...
|
||||
// (TODO: allow skinning of digital display)
|
||||
showSecs: true,
|
||||
showAmPm: true,
|
||||
|
||||
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 }
|
||||
},
|
||||
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 }
|
||||
},
|
||||
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 }
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Test for IE so we can nurse excanvas in a couple of places
|
||||
isIE: !!document.all,
|
||||
|
||||
// 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
|
||||
};
|
||||
|
||||
// Define the CoolClock object's methods
|
||||
CoolClock.prototype = {
|
||||
|
||||
// Initialise using the parameters parsed from the colon delimited class
|
||||
init: function(options) {
|
||||
// Parse and store the options
|
||||
this.canvasId = options.canvasId;
|
||||
this.skinId = options.skinId || CoolClock.config.defaultSkin;
|
||||
this.displayRadius = options.displayRadius || CoolClock.config.defaultRadius;
|
||||
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.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" ];
|
||||
|
||||
// Get the canvas element
|
||||
this.canvas = document.getElementById(this.canvasId);
|
||||
|
||||
// Make the canvas the requested size. It's always square.
|
||||
this.canvas.setAttribute("width",this.displayRadius*2);
|
||||
this.canvas.setAttribute("height",this.displayRadius*2);
|
||||
this.canvas.style.width = this.displayRadius*2 + "px";
|
||||
this.canvas.style.height = this.displayRadius*2 + "px";
|
||||
|
||||
// Explain me please...?
|
||||
this.renderRadius = CoolClock.config.renderRadius;
|
||||
this.scale = this.displayRadius / this.renderRadius;
|
||||
|
||||
// Initialise canvas context
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.ctx.scale(this.scale,this.scale);
|
||||
|
||||
// Keep track of this object
|
||||
CoolClock.config.clockTracker[this.canvasId] = this;
|
||||
|
||||
// Start the clock going
|
||||
this.tick();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Draw a circle at point x,y with params as defined in skin
|
||||
fullCircleAt: function(x,y,skin) {
|
||||
this.ctx.save();
|
||||
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.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();
|
||||
}
|
||||
else {
|
||||
// XXX why not stroke and fill
|
||||
this.ctx.strokeStyle = skin.color;
|
||||
this.ctx.stroke();
|
||||
}
|
||||
this.ctx.restore();
|
||||
},
|
||||
|
||||
// Draw some text centered vertically and horizontally
|
||||
drawTextAt: function(theText,x,y) {
|
||||
this.ctx.save();
|
||||
this.ctx.font = '15px sans-serif';
|
||||
var tSize = this.ctx.measureText(theText);
|
||||
if (!tSize.height) tSize.height = 15; // no height in firefox.. :(
|
||||
this.ctx.fillText(theText,x - tSize.width/2,y - tSize.height/2);
|
||||
this.ctx.restore();
|
||||
},
|
||||
|
||||
lpad2: function(num) {
|
||||
return (num < 10 ? '0' : '') + num;
|
||||
},
|
||||
|
||||
tickAngle: function(second) {
|
||||
// Log algorithm by David Bradshaw
|
||||
var tweak = 3; // If it's lower the one second mark looks wrong (?)
|
||||
if (this.logClock) {
|
||||
return second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak));
|
||||
}
|
||||
else if (this.logClockRev) {
|
||||
// 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)));
|
||||
}
|
||||
else {
|
||||
return second/60.0;
|
||||
}
|
||||
},
|
||||
|
||||
timeText: function(hour,min,sec) {
|
||||
var c = CoolClock.config;
|
||||
return '' +
|
||||
(c.showAmPm ? ((hour%12)==0 ? 12 : (hour%12)) : hour) + ':' +
|
||||
this.lpad2(min) +
|
||||
(c.showSecs ? ':' + this.lpad2(sec) : '') +
|
||||
(c.showAmPm ? (hour < 12 ? ' am' : ' pm') : '')
|
||||
;
|
||||
},
|
||||
|
||||
// Draw a radial line by rotating then drawing a straight line
|
||||
// Ha ha, I think I've accidentally used Taus, (see http://tauday.com/)
|
||||
radialLineAtAngle: function(angleFraction,skin) {
|
||||
this.ctx.save();
|
||||
this.ctx.translate(this.renderRadius,this.renderRadius);
|
||||
this.ctx.rotate(Math.PI * (2.0 * angleFraction - 0.5));
|
||||
this.ctx.globalAlpha = skin.alpha;
|
||||
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.lineTo(skin.endAt,0);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
this.ctx.restore();
|
||||
},
|
||||
|
||||
render: function(hour,min,sec) {
|
||||
// Get the skin
|
||||
var skin = CoolClock.config.skins[this.skinId];
|
||||
if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin];
|
||||
|
||||
// Clear
|
||||
this.ctx.clearRect(0,0,this.renderRadius*2,this.renderRadius*2);
|
||||
|
||||
// Draw the outer edge of the clock
|
||||
if (skin.outerBorder)
|
||||
this.fullCircleAt(this.renderRadius,this.renderRadius,skin.outerBorder);
|
||||
|
||||
// Draw the tick marks. Every 5th one is a big one
|
||||
for (var i=0;i<60;i++) {
|
||||
(i%5) && skin.smallIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.smallIndicator);
|
||||
!(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
|
||||
);
|
||||
}
|
||||
|
||||
// Draw the hands
|
||||
if (skin.hourHand)
|
||||
this.radialLineAtAngle(this.tickAngle(((hour%12)*5 + min/12.0)),skin.hourHand);
|
||||
|
||||
if (skin.minuteHand)
|
||||
this.radialLineAtAngle(this.tickAngle((min + sec/60.0)),skin.minuteHand);
|
||||
|
||||
if (this.showSecondHand && skin.secondHand)
|
||||
this.radialLineAtAngle(this.tickAngle(sec),skin.secondHand);
|
||||
|
||||
// Second hand decoration doesn't render right in IE so lets turn it off
|
||||
if (!CoolClock.config.isIE && this.showSecondHand && skin.secondDecoration)
|
||||
this.radialLineAtAngle(this.tickAngle(sec),skin.secondDecoration);
|
||||
},
|
||||
|
||||
// Check the time and display the clock
|
||||
refreshDisplay: function() {
|
||||
var now = new Date();
|
||||
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());
|
||||
}
|
||||
else {
|
||||
// Use local time
|
||||
this.render(now.getHours(),now.getMinutes(),now.getSeconds());
|
||||
}
|
||||
},
|
||||
|
||||
// Set timeout to trigger a tick in the future
|
||||
nextTick: function() {
|
||||
setTimeout("CoolClock.config.clockTracker['"+this.canvasId+"'].tick()",this.tickDelay);
|
||||
},
|
||||
|
||||
// Check the canvas element hasn't been removed
|
||||
stillHere: function() {
|
||||
return document.getElementById(this.canvasId) != null;
|
||||
},
|
||||
|
||||
// Main tick handler. Refresh the clock then setup the next tick
|
||||
tick: function() {
|
||||
if (this.stillHere()) {
|
||||
this.refreshDisplay()
|
||||
this.nextTick();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Find all canvas elements that have the CoolClock class and turns them into clocks
|
||||
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;i<canvases.length;i++) {
|
||||
// Pull out the fields from the class. Example "CoolClock:chunkySwissOnBlack:1000"
|
||||
var fields = canvases[i].className.split(" ")[0].split(":");
|
||||
if (fields[0] == "CoolClock") {
|
||||
if (!canvases[i].id) {
|
||||
// If there's no id on this canvas element then give it one
|
||||
canvases[i].id = '_coolclock_auto_id_' + CoolClock.config.noIdCount++;
|
||||
}
|
||||
// Create a clock object for this element
|
||||
new CoolClock({
|
||||
canvasId: canvases[i].id,
|
||||
skinId: fields[1],
|
||||
displayRadius: fields[2],
|
||||
showSecondHand: fields[3]!='noSeconds',
|
||||
gmtOffset: fields[4],
|
||||
showDigital: fields[5]=='showDigital',
|
||||
logClock: fields[6]=='logClock',
|
||||
logClockRev: fields[6]=='logClockRev'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// If you don't have jQuery then you need a body onload like this: <body onload="CoolClock.findAndCreateClocks()">
|
||||
// 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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue