script.js

var DCC;

this.loaded = function(panel, config) {

	var DigitalCanvasClock = function() {
		var
			me				= this,
			useBackground	= true,
			usePulse		= true,
			clockContainer	= panel.find("canvas[data-clock]")[0],
			clockBackground = null,
			fgc				= clockContainer.getContext("2d"),
			bgc				= null,
			bgColor			= "#FFF",
			sdColor			= "#DDD",
			icColor			= "#000",
			date			= new Date(),
			monthNames		= ["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],
			dayNames		= ["su","mo","tu","we","th","fr","sa"],
			lastSecond		= -1,
			seperatorOn		= false,
			// sizes (16:9)
			canvasWidth		= 0,
			canvasHeight	= 0,
			clockWidth		= 0,
			clockHeight		= 0,
			clockX			= 0,
			clockY			= 0,
			// clock
			clockHourX		= 0,					// width * 4.375%
			clockSeperatorX	= 0,					// height * 60.185%
			clockMinuteX	= 0,					// width * 47.083%
			clockSecondX	= 0,					// height * 145.185%
			dateX			= 0,					// width * 1.875%
			clockTimeY		= 0,					// height * 58.148%
			clockSeperatorY	= 0,					// height * 47.037%
			dateY			= 0,					// width / 2
			// font
			fatFont			= "",					// width * 43.75%
			bigFont			= "",					// width * 43.75%
			smlFont			= "",					// width * 18.75%
			fatFontPost		= "time-fat",			// width * 43.75%
			bigFontPost		= "time-medium",		// width * 43.75%
			smlFontPost		= "time-medium";		// width * 18.75%
		
		init = function() {
			if (fontsReady) {
				clockBackground = document.createElement('canvas');
				me.calc();
				loop();
			} else {
				setTimeout(init,0);
			}
		}
			
		loop = function(delta) {
			me.render();
			window.requestAnimationFrame(loop);
		}
		
		this.container = function() {
			return clockContainer;
		}
		
		this.indicatorColor = function(color) {
			icColor = color || icColor;
		}
		
		this.shaddowColor = function(color) {
			sdColor = color || sdColor;
			renderBackground();
		}
		
		this.backgroundColor = function(color) {
			bgColor = color || bgColor;
			renderBackground();
		}
		
		this.enableBackground = function(value) {
			if (typeof value === 'boolean')
				useBackground = value;
		}
		
		this.enablePulse = function(value) {
			if (typeof value === 'boolean')
				usePulse = value;
		}
			
		this.calc = function() {
			// canvas size
			canvasWidth		= $(clockContainer).width();
			canvasHeight	= $(clockContainer).height();
			// clock size
			var ratio = canvasWidth * 9 / 16;
			if (ratio > canvasHeight) {
				clockWidth	= canvasHeight * 16 / 9;
				clockHeight	= canvasHeight;
			} else if (ratio < canvasHeight) {
				clockWidth	= canvasWidth;
				clockHeight	= canvasWidth * 9 / 16;
			} else {
				clockWidth	= canvasWidth;
				clockHeight	= canvasHeight;
			}
			clockX	= canvasWidth / 2 - clockWidth / 2;
			clockY	= canvasHeight / 2 - clockHeight / 2;
			// fonts
			var
				bigFontSize = clockWidth * 43.75 / 100,
				smlFontSize = clockWidth * 18.75 / 100;
			fatFont = bigFontSize + "px " + fatFontPost;
			bigFont = bigFontSize + "px " + bigFontPost;
			smlFont = smlFontSize + "px " + smlFontPost;
			// positions
			clockHourX		= clockX + clockWidth * 4.375 / 100;
			clockMinuteX	= clockX + clockWidth * 47.083 / 100;
			clockSecondX	= clockX + clockHeight * 145.185 / 100;
			clockTimeY		= clockY + clockHeight * 58.148 / 100;
			clockSeperatorX	= clockX + clockHeight * 60.185 / 100;
			clockSeperatorY	= clockY + clockHeight * 47.037 / 100;
			dateX			= clockX + clockWidth * 1.875 / 100;
			dateY			= clockY + clockWidth / 2;
			if (battery) {
				batteryX	= clockX + clockHeight * 157.25 / 100;
				batteryY	= clockY + clockHeight * 25 / 100;
				batteryR	= smlFontSize / 8;
				batteryL	= clockWidth / 100;
				batteryDX	= batteryX - smlFontSize / 6;
				batteryDY	= batteryY - smlFontSize / 6;
				batteryDW	= smlFontSize / 3;
				batteryDH	= smlFontSize / 3;
			}
			// background
			clockBackground.width = canvasWidth;
			clockBackground.height = canvasHeight;
			bgc = clockBackground.getContext("2d");
			renderBackground();
		}
			
		this.render = function() {
			date = new Date();
			var 
				s = date.getSeconds(),
				ms = date.getMilliseconds();
			if ((usePulse && ((ms > 500 && seperatorOn) || (ms < 500 && !seperatorOn))) || s != lastSecond) {
				lastSecond = s;
				var
					h = date.getHours(),
					i = date.getMinutes(),
					t = date.getDay(),
					d = date.getDate(),
					m = date.getMonth(),
					y = date.getFullYear();
				if (d.toString().length < 2)
					d = "0" + d;
				if (h.toString().length < 2)
					h = "0" + h;
				if (i.toString().length < 2)
					i = "0" + i;
				if (s.toString().length < 2)
					s = "0" + s;
				if (useBackground) {
					fgc.drawImage(clockBackground, 0, 0);
				} else {
					fgc.fillStyle = bgColor;
					fgc.fillRect(0, 0, canvasWidth, canvasHeight);
				}
				fgc.fillStyle = icColor;
				if (!usePulse || !seperatorOn) {
					fgc.font = fatFont;
					fgc.fillText(":", clockSeperatorX, clockSeperatorY);
					seperatorOn = true;
				} else {
					seperatorOn = false;
				}
				fgc.font = bigFont;
				fgc.fillText(h, clockHourX, clockTimeY);
				fgc.fillText(i, clockMinuteX, clockTimeY);
				fgc.font = smlFont;
				fgc.fillText(s, clockSecondX, clockTimeY);
				fgc.fillText(dayNames[t] + " " + d + " " + monthNames[m] + " " + y, dateX, dateY);
				fgc.fillStyle = "black";
			}
		}
		
		renderBackground = function() {
			bgc.fillStyle = bgColor;
			bgc.fillRect(0, 0, canvasWidth, canvasHeight);
			bgc.fillStyle = sdColor;
			bgc.font = fatFont;
			bgc.fillText(":", clockSeperatorX, clockSeperatorY);
			bgc.font = bigFont;
			bgc.fillText("88", clockHourX, clockTimeY);
			bgc.fillText("88", clockMinuteX, clockTimeY);
			bgc.font = smlFont;
			bgc.fillText("88", clockSecondX, clockTimeY);
			bgc.fillText("00 00 000 0000", dateX, dateY);
			bgc.fillText("** ** *** ****", dateX, dateY);
			bgc.fillStyle = "black";
		}
		
		init();
	}
	
	DCC = new DigitalCanvasClock();
	
	var r = function() {
		resize(panel);
	}
	
	$(window).resize(r);
}

var resize = function(panel) {
	$(DCC.container()).attr('width', $(panel).width()).attr('height', $(panel).height());
	DCC.calc();
}