Snippets

Coel May ZPiTime

Created by Coel May
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<!-- Based on "Stylish Portfolio" http://startbootstrap.com/template-overviews/stylish-portfolio/ -->
		<title>ZPiTime</title>

		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<style type="text/css">.header,body,html{width:100%;height:100%}.centered,.mayan,.text-vertical-center{text-align:center}@font-face{font-family:'ZPi Mayan Numerals';src:url(../fonts/zpi_mayan_numerals.eot);src:local('ZPi Mayan Numerals'),url(../fonts/zpi_mayan_numerals.woff) format('woff')}body,html{margin:0;padding:0}body{font-family:"Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif}p{font-size:10pt}code{background-color:#EEE}.text-vertical-center{display:table-cell;vertical-align:middle;color:#F0F}.text-vertical-center h1,.text-vertical-center h2{margin:0;font-weight:700;padding:0;color:rgba(68,157,68,1)}.text-vertical-center h1{font-size:8em}.text-vertical-center h2{font-size:6em}@media only screen and (max-width:1000px){.text-vertical-center h1{font-size:5em}.text-vertical-center h2{font-size:4em}}.header{display:table;position:relative;background-color:rgba(26,26,26,1);-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover}.bin_off,.bin_on{width:10px;height:10px}.header i{font-size:35px;color:rgba(68,157,68,.5)}.info{background-color:rgba(255,255,255,1)}.bin_on{display:inline-block;background-color:rgba(68,157,68,1)}.bin_off{display:inline-block;background-color:rgba(26,26,26,1)}.bin_off_big,.bin_on_big{display:inline-block;width:50px;height:50px}.bin_on_big{background-color:rgba(68,157,68,1)}.bin_off_big,footer{background-color:rgba(26,26,26,1)}#tis{font-size:8.5pt}.mayan{font-family:serif;font-size:50px;line-height:16px;font-weight:700;color:#fff;width:1.5em;margin:0;border-radius:.4em;-moz-border-radius:.4em;-webkit-border-radius:.4em}footer,footer a{color:rgba(68,157,68,1)}.mayan_o{margin:0;padding:15px}#mayan1a,#mayan1b,#mayan1c,#mayan1d{text-align:center;font-family:'ZPi Mayan Numerals',monospace;font-weight:400;font-size:80px;line-height:.8em;border-radius:.3em;-moz-border-radius:.3em;-webkit-border-radius:.3em;color:rgba(68,157,68,1)}footer{padding:100px 0}hr.small{border-color:rgba(68,157,68,1);width:25%}nav ul{list-style:none}.nav{position:fixed;width:30px;height:84px;z-index:100;right:0;top:40%;margin-top:-42px}.nav a{text-indent:-9999px;display:block;width:14px;height:14px;background:rgba(68,157,68,.5);-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;margin-bottom:20px;-webkit-transition:background .5s;-moz-transition:background .5s;-ms-transition:background .5s;-o-transition:background .5s;transition:background .5s}.nav a:hover{background:rgba(68,157,68,1);-webkit-transition:background 1s;-moz-transition:background 1s;-ms-transition:background 1s;-o-transition:background 1s;transition:background 1s}.mb-7{margin-bottom:70px}.bigpad{padding:0 0 50px}</style>

		<!-- font-awesome -->
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" href="highlight/styles/default.min.css">
	</head>
	<body>
	<div class="nav">
		<a href="#top" class="scroll">Top</a>
		<a href="#bintime" class="scroll">Binary Time</a>
		<a href="#lmtime" class="scroll">LM Time</a>
		<a href="#umtime" class="scroll">UM Time</a>
		<a href="#hexatime" class="scroll">Hexadecimal Time</a>
		<a href="#octaltime" class="scroll">Octal Time</a>
	</div>
		<!-- Title/Header -->
		<header id="top" class="header">
			<div class="text-vertical-center">
				<h1>ZPiTime</h1>
				<br>
			</div>
		</header>
		<!-- Binary Time -->
		<section class="header" id="bintime">
			<div id="binbox" class="text-vertical-center">
				<div id="b32768" class="bin_off"></div
				><div id="b16384" class="bin_off"></div
				><div id="b8192" class="bin_off"></div
				><div id="b4096" class="bin_off"></div
				><div id="b2048" class="bin_off"></div
				><div id="b1024" class="bin_off"></div
				><div id="b512" class="bin_off"></div
				><div id="b256" class="bin_off"></div
				><div id="b128" class="bin_off"></div
				><div id="b64" class="bin_off"></div
				><div id="b32" class="bin_off"></div
				><div id="b16" class="bin_off"></div
				><div id="b8" class="bin_off"></div
				><div id="b4" class="bin_off"></div
				><div id="b2" class="bin_off"></div
				><div id="b1" class="bin_off"></div>
				<br>
			</div>
		</section>
		<!-- Local Metrict Time -->
		<section class="header" id="lmtime">
			<div class="text-vertical-center">
			<div id="lmt"></div>
			<br>
			</div>
		</section>
		<!-- Universal Metric Time -->
		<section class="header" id="umtime">
			<div class="text-vertical-center">
			<div id="umt"></div>
			<br>
			</div>
		</section>
		<!-- Hexadecimal Time -->
		<section class="header" id="hexatime">
			<div class="text-vertical-center">
			<div id="hex"></div>
			<br>
			</div>
		</section>
		<!-- Octal Time -->
		<section class="header" id="octaltime">
			<div class="text-vertical-center">
			<div id="octal"></div>
			<br>
			</div>
		</section>
	</body>
</html>
<!-- Load ZPiTime -->
<script src="zpitime.js"></script>
<script>
	/*
	 * Example display of binary time
	 */
	(function () {
		var dt = 0, dtd = 0,
			main = function () {
				bintime = new ZPiTime().binaryTime();
				/*
				 * Explanation of setTimeout() drifting
				 * http://stackoverflow.com/questions/8173580/ \
				 * setinterval-timing-slowly-drifts-away-from-staying-accurate */
				gt = new Date().getTime();
				if( dt === 0 && dtd !== 0) { dt = gt%1000; }
				dtd = gt%1000;
				b1.className = (bintime[0] === 1) ? 'bin_on' : 'bin_off';
				b2.className = (bintime[1] === 1) ? 'bin_on' : 'bin_off';
				b4.className = (bintime[2] === 1) ? 'bin_on' : 'bin_off';
				b8.className = (bintime[3] === 1) ? 'bin_on' : 'bin_off';
				b16.className = (bintime[4] === 1) ? 'bin_on' : 'bin_off';
				b32.className = (bintime[5] === 1) ? 'bin_on' : 'bin_off';
				b64.className = (bintime[6] === 1) ? 'bin_on' : 'bin_off';
				b128.className = (bintime[7] === 1) ? 'bin_on' : 'bin_off';
				b256.className = (bintime[8] === 1) ? 'bin_on' : 'bin_off';
				b512.className = (bintime[9] === 1) ? 'bin_on' : 'bin_off';
				b1024.className = (bintime[10] === 1) ? 'bin_on' : 'bin_off';
				b2048.className = (bintime[11] === 1) ? 'bin_on' : 'bin_off';
				b4096.className = (bintime[12] === 1) ? 'bin_on' : 'bin_off';
				b8192.className = (bintime[13] === 1) ? 'bin_on' : 'bin_off';
				b16384.className = (bintime[14] === 1) ? 'bin_on' : 'bin_off';
				b32768.className = (bintime[15] === 1) ? 'bin_on' : 'bin_off';
				//tis.innerHTML = bintime.join(' ');
				/*
				 * Re-run */
				setTimeout( main, 86 - dtd );
			};
		/*
		 * Initiate time */
		main();
	})( window.document );

	/*
	 *	Example display of LMT
	 */
	(function() {
		var	dt = 0, dtd = 0,
			main = function () {
				zpi = new ZPiTime();
						/*
				 * Explanation of setTimeout() drifting
				 * http://stackoverflow.com/questions/8173580/ \
				 * setinterval-timing-slowly-drifts-away-from-staying-accurate */
				gt = new Date().getTime();
				if( dt === 0 && dtd !== 0) { dt = gt%1000; }
				dtd = gt%1000;
				lmt.innerHTML = '<h2>' + ( zpi.lmTime() ) + '</h2>';
				setTimeout( main, 864 - dtd);
			};
		/*
		 * Initiate time */
		main();
	})( window.document );
	/*
	 *	Example display of UMT
	 */
	(function() {
		var	dt = 0, dtd = 0,
			main = function () {
				zpi = new ZPiTime();
				/*
				 * Explanation of setTimeout() drifting
				 * http://stackoverflow.com/questions/8173580/ \
				 * setinterval-timing-slowly-drifts-away-from-staying-accurate */
				gt = new Date().getTime();
				if( dt === 0 && dtd !== 0) { dt = gt%1000; }
				dtd = gt%1000;
				umt.innerHTML = '<h2>' + ( zpi.umTime() ) + '</h2>';
				setTimeout( main, 864 - dtd);
			};
		/*
		 * Initiate time */
		main();
	})( window.document );

	/*
	 *	Example display of hexdecimal time
	 */
	(function() {
		var	dt = 0, dtd = 0,
			main = function () {
				/*
				 * Explanation of setTimeout() drifting
				 * http://stackoverflow.com/questions/8173580/ \
				 * setinterval-timing-slowly-drifts-away-from-staying-accurate */
				gt = new Date().getTime();
				if( dt === 0 && dtd !== 0) { dt = gt%1000; }
				dtd = gt%1000;
				hex.innerHTML = '<h2>' + ( new ZPiTime().hexaTime() ) + '</h2>';
				setTimeout( main, 864 - dtd );
			};
		main();
	})( window.document );

	/*
	 *	Example display of octal time
	 */
	(function() {
		var	dt = 0, dtd = 0,
			main = function () {
				/*
				 * Explanation of setTimeout() drifting
				 * http://stackoverflow.com/questions/8173580/ \
				 * setinterval-timing-slowly-drifts-away-from-staying-accurate */
				gt = new Date().getTime();
				if( dt === 0 && dtd !== 0) { dt = gt%1000; }
				dtd = gt%1000;
				octal.innerHTML = '<h2>' + ( new ZPiTime().octalTime() ) + '</h2>';
				setTimeout( main, 864 - dtd );
			};
		main();
	})( window.document );
</script>

		<!-- Bootstrap core JavaScript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

		<!-- Latest compiled and minified JavaScript -->
		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!-- Custom Theme JavaScript -->
<script>
// Scrolls to the selected menu item on the page
$(function() {
	$('a[href*=#]:not([href=#])').click(function() {
		if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
			if (target.length) {
				$('html,body').animate({
					scrollTop: target.offset().top
				}, 1000);
				return false;
			}
		}
	});
});
</script>

<!-- Code highlighting -->
<script src="highlight/highlight.pack.js"></script>
<script>$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});</script>
/*
 * Name:	ZPiTime
 * Author:	Coel May (the@coelmay.net)
 * Desc:	Original clock functions by Lyle Zapato as found at
 *			http://zapatopi.net/zapatoware/clocks.html, circa 2001.
 *			Reworking into ZPiTime by Coel May September 2015.
 *
 * Examples at bottom
 *
 */

/*
 * ZPiTime - Superclass
 */
function ZPiTime(dateObj) {
	"use strict";
	/*
	 * This captures any use of `ZPiTime` without `new`. */
	if (this instanceof ZPiTime) {
		/*
		 * Date Object checking courteous of "Borgar"
		 * http://stackoverflow.com/questions/1353684/ \
		 * detecting-an-invalid-date-date-instance-in-javascript */
		this.now = (dateObj &&
					Object.prototype.toString.call(dateObj) === "[object Date]")
					? dateObj
					: new Date(),
		this.time = this.now.getTime(),
		this.tz = this.now.getTimezoneOffset(),
		this.hours = this.now.getHours(),
		this.minutes = this.now.getMinutes(),
		this.seconds = this.now.getSeconds(),
		this.totsecs = this.hours * 3600,
		this.totsecs += this.minutes * 60,
		this.totsecs += this.seconds,
		this.totsecs += (this.time % 1000) / 1000;
	} else {
		/*
		 * Returning null. Should it be something else? */
		return null;
	}
}

/*
 * `hexaTime`: Standard time to Hexadecimal time conversion
 */
ZPiTime.prototype.hexaTime = function () {
	"use strict";
	var hextime = null,
		hex1 = null,
		hex2 = null,
		hex3 = null,
		hex4 = null;
	/*
	 * Calculate hexdecimal value. */
	hextime = Math.floor(this.totsecs / (86400 / 65536)); // 65536 = 16^4
	/*
	 * If we a not working on a number, no point going any further. */
	if (isNaN(hextime)) {
		return undefined;
	}
	/*
	 * */
	hex1 = Math.floor(hextime / 4096);
	hextime -= 4096 * hex1;
	hex2 = Math.floor(hextime / 256);
	hextime -= 256 * hex2;
	hex3 = Math.floor(hextime / 16);
	hextime -= 16 * hex3;
	hex4 = hextime.toString(16).toUpperCase();
	/*
	 * Return values as base 16 uppercase string. */
	return String("0x"
				  + hex1.toString(16).toUpperCase()
				  + hex2.toString(16).toUpperCase()
				  + hex3.toString(16).toUpperCase()
				  + hex4.toString(16).toUpperCase()
				 );
};

/*
 * `octalTime`: Standard time to Octal time conversion
 */
ZPiTime.prototype.octalTime = function () {
	"use strict";
	var octsuffix = "<sub>8</sub>",
		octtime = null,
		oct1 = null,
		oct2 = null,
		oct3 = null,
		oct4 = null,
		oct5 = null;
	/*
	 * Calculate octal time values. */
	octtime = Math.floor(this.totsecs / (86400 / 32768)); // 32768 = 8^5
	/*
	 * If we a not working on a number, no point going any further. */
	if (isNaN(octtime)) {
		return undefined;
	}
	/*
	 * */
	oct1 = Math.floor(octtime / 4096);
	octtime -= 4096 * oct1;
	oct2 = Math.floor(octtime / 512);
	octtime -= 512 * oct2;
	oct3 = Math.floor(octtime / 64);
	octtime -= 64 * oct3;
	oct4 = Math.floor(octtime / 8);
	octtime -= 8 * oct4;
	oct5 = octtime;
	/*
	 * Return octal time value as string. */
	return String(oct1.toString(8)
				  + oct2.toString(8)
				  + oct3.toString(8)
				  + oct4.toString(8)
				  + oct5.toString(8)
				  + octsuffix
				 );
};

/*
 * `base64Time`: Standard time to Base 64 time conversion
 */
ZPiTime.prototype.base64Time = function () {
	"use strict";
	var b64 = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
			   "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X",
			   "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
			   "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
			   "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7",
			   "8", "9", "+", "/"],
		b64time = null,
		b64a = null,
		b64b = null,
		b64c = null;
	/*
	 * */
	b64time = Math.floor(this.totsecs / (86400 / 262144)); // 262144 = 64^3
	/*
	 * If we a not working on a number, no point going any further. */
	if (isNaN(b64time)) {
		return undefined;
	}
	/*
	 * */
	b64a = Math.floor(b64time / 4096);
	b64time -= 4096 * b64a;
	b64b = Math.floor(b64time / 64);
	b64time -= 64 * b64b;
	b64c = b64time;
	/*
	 * Return time value as base 64 string.
	 * Ideally one would use `btoa()` this works in a different way, and
	 * uses a slightly different character set. */
	return b64[b64a] + b64[b64b] + b64[b64c];
};

/*
 * `mayanTime`: Standard time to Mayan time conversion
 * (using both special character font, or standard characters)
 */
ZPiTime.prototype.mayanTime = function (font) {
	"use strict";
	var mayan = ["0", "0", "0", "0"],
		/*
		 * The base 64 is accessed here too. Not sure why (yet). */
		b64 = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
			   "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
			   "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
			   "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
			   "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "+", "/"],
		mayan_ones = ["&nbsp;",
					  "&middot;",
					  "&middot;&middot;",
					  "&middot;&middot;&middot;",
					  "&middot;&middot;&middot;&middot;"],
		mayan_fives = ["&nbsp;","&mdash;","&mdash;","&mdash;"],
		mid = [[],[],[],[]],
		mayantime = null,
		mayanValue = null,
		m_fives,
		m_ones,
		i, ii, wf = font || 'std';
	/*
	 * */
	mayantime = Math.floor(this.totsecs / (86400 / 160000)); // 160000 = 20^4
	/*
	 * If we a not working on a number, no point going any further. */
	if (isNaN(mayantime)) {
		return undefined;
	}
	/*
	 * */
	mayan[0] = Math.floor(mayantime / 8000);
	mayantime -= 8000 * mayan[0];
	mayan[1] = Math.floor(mayantime / 400);
	mayantime -= 400 * mayan[1];
	mayan[2] = Math.floor(mayantime / 20);
	mayantime -= 20 * mayan[2];
	mayan[3] = mayantime;
	/*
	 * Assemble Mayan string for special-font-based version */
	if (font == 'spe') {
		return [b64[mayan[0]],
				b64[mayan[1]],
				b64[mayan[2]],
				b64[mayan[3]]
			   ];
	} else {
		/*
		 * Mayan using normal font elements */
		for (i = 0; i < 4; i++) {
			if (mayan[i] == 0) { // "0" instead of a shell
				mid[i][0] = "&nbsp;";
				mid[i][1] = "0";
				mid[i][2] = "&nbsp;";
				mid[i][3] = "&nbsp;";
			} else {
				m_fives = Math.floor(mayan[i] / 5),
				m_ones = mayan[i] - (m_fives * 5);
				mayan_ones[m_ones];
				mid[i][0] = mayan_ones[m_ones];
				for (ii = 1; ii < 4; ii++) {
					mid[i][ii] = mayan_fives[m_fives];
					m_fives--;
					if (m_fives < 0) m_fives = 0;
				}
			}
		}
		/*
		 * Return an array of values to describe time. */
		return mid;
	}
};

/*
 * `binaryTime`: Standard time to binary time conversion
 */
ZPiTime.prototype.binaryTime = function () {
	"use strict";
	var bintime = null,
		bin_squares = [],
		n = 65536,
		i = 15,
		k = 1, // bit on
		w = 0; // bit off
	/*
	 * */
	bintime = Math.floor(this.totsecs / (86400 / 65536)); // 65536 = 2^16
	/*
	 * */
	if (isNaN(bintime)) {
		return undefined;
	}
	/*
	 * This needs to be changed to return a value, not access document
	 * elements directly. */
	while (i >= 0) {
		n = n / 2;
		if (Math.floor(bintime / n) == 1) {
			bin_squares[i] = k;
		} else {
			bin_squares[i] = w;
		}
		bintime = bintime % n;
		i--;
	}	
	/*
	 * Returns an array of bit positions, either 0 or 1. */
	return bin_squares;
};

/*
 * `decimalTime`: Standard time to decimal time conversion
 */
ZPiTime.prototype.decimalTime = function() {
	"use strict";
	var dectime = null,
		cd = null,
		qd = null;
	/*
	 * */
	dectime = this.totsecs / .864; // total of 86400 seconds in a day
	/*
	 * If we a not working on a number, no point going any further. */
	if (isNaN(dectime)) {
		return undefined;
		}
	/*
	 * */
	cd = ((dectime - (dectime % 1000)) / 1000);
	qd = (dectime - (dectime % 1) - (cd * 1000));
	/*
	 * Return decimal time string. */
	return String(cd + "." + qd);
};

/*
 * `lmTime`: Standard time to Local Metric Time conversion
 */
ZPiTime.prototype.lmTime = function () {
//	var hours = this.hours,
//		minutes = this.minutes,
//		seconds = this.seconds,
//		ts = this.hours * 3600,
//		ts = ts + (this.minutes * 60),
//		ts = ts + this.seconds,
//		ts = ts + ((this.time % 1000) / 1000),
//		dectime = ts / .864,
	var dectime = this.totsecs / 0.864;
		cd = ((dectime - (dectime % 1000)) / 1000),
		qd = (dectime - (dectime % 1) - (cd * 1000)),
		timedateStamp = "";
	/*
	 * */
	if (isNaN(cd) || isNaN(qd)) {
		return undefined;
	}
	/*
	 * */
	timedateStamp = ((cd < 10) ? "0" : "") + cd + ".";
	timedateStamp += ((qd < 10) ? "0" : "") + ((qd < 100) ? "0" : "") + qd + " LMT";
	/*
	 * Return LMT string */
	return timedateStamp;
};

/*
 * `umTime`: Standard time to Universal Metric Time conversion.
 * UMT is the Metric equivalent of UTC. See http://zapatopi.net/metrictime/
 * for more information.
 */
ZPiTime.prototype.umTime = function () {
	var def = this.tz,
		idl = ((60 * this.hours) + (def - 720)),
		idl = (idl < 0) ? 1440 + idl:idl,
		idl = idl / 60,
		/*
		 * In this instance, we don't use `this.totsecs` as time is
		 * based on UMT and not LMT which `this` represents.
		 */
		ts = idl * 3600,
		ts = ts + (this.minutes * 60),
		ts = ts + this.seconds,
		ts = ts + ((this.time % 1000) / 1000),
		mtime = ts / .864,
		umtcd = ((mtime - (mtime % 1000)) / 1000),
		umtqd = (mtime - (mtime % 1) - (umtcd * 1000)),
		decimalValue = "";
	/*
	 * */
	if (isNaN(umtcd) || isNaN(umtqd)) {
		return undefined;
	}
	/*
	 * */
	decimalValue = ((umtcd < 10) ? "0" : "") + umtcd + ".";
	decimalValue  += ((umtqd < 10) ? "0" : "") + ((umtqd < 100) ? "0" : "") + umtqd + " UMT";
	/*
	 * Return UMT string */
	return decimalValue;
};

Comments (0)