payb.tc (OP)
|
|
November 06, 2011, 12:58:09 AM |
|
any chance in spinning up a litecoin clock ? especially since the diff changes so much faster.
i'm not interested myself, but anyone's welcome to copy what i did... it's pretty simple, and should be easy to modify for litecoin. index.php: <?php $blockcount=preg_replace('/[^0-9]/','',file_get_contents('http://blockexplorer.com/q/getblockcount')); ?> <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="refresh" content="60; url=http://bitcoinclock.com/"> <title>Bitcoin Clock</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script src="coolclock.php?b=<?php echo $blockcount; ?>" type="text/javascript"></script>
</head> <body onload="CoolClock.findAndCreateClocks()"> <div align="center"> <h1>Bitcoin Clock</h1>
<p> </p> <canvas id="c1" class="CoolClock:classic:250" width="500" height="500" style="width: 500px; height: 500px; "></canvas>
<br><br>
Block count: <?php echo $blockcount; ?><br> Blocks since last difficulty change: <?php echo $blockcount%2016; ?><br><br>
Hour hand goes around once every 210,000 blocks<br> (Block reward drops by half every time hour hand reaches 12)<br> (This should occur approximately once every 4 years)<br><br> Minute hand goes around once every 2016 blocks<br> (Difficulty change occurs every time minute hand reaches 12)<br> (This should occur approximately once every 2 weeks)<br><br> Second hand goes around once every 144 blocks<br> (This should occur approximately once every 24 hours)
</div> </body></html> coolclock.php: <?php
$blockcount=preg_replace('/[^0-9]/','',$_GET['b']);
?>
/** * 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: 10000, longTickDelay: 15000, defaultRadius: 85, renderRadius: 100, defaultSkin: "classic", // Should be in skin probably... // (TODO: allow skinning of digital display) showSecs: true, showAmPm: false,
skins: { // There are more skins in moreskins.js // Try making your own skin by copy/pasting one of these and tweaking it classic/*was gIG*/: { outerBorder: { lineWidth: 185, radius: 1, color: "#E5ECF9", alpha: 1 }, smallIndicator: { lineWidth: 2, startAt: 89, endAt: 94, color: "#3366CC", alpha: 1 }, largeIndicator: { lineWidth: 4, startAt: 83, endAt: 94, color: "#3366CC", alpha: 1 }, hourHand: { lineWidth: 5, startAt: 0, endAt: 60, color: "black", alpha: 1 }, minuteHand: { lineWidth: 4, startAt: 0, endAt: 80, color: "black", alpha: 1 }, secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: .85 }, secondDecoration: { lineWidth: 3, startAt: 0, radius: 2, fillColor: "black", color: "black", alpha: 1 } }, 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(<?php echo $blockcount; ?>/210000,skin.hourHand);
if (skin.minuteHand) this.radialLineAtAngle(<?php echo $blockcount; ?>%2016/2016,skin.minuteHand);
if (this.showSecondHand && skin.secondHand) this.radialLineAtAngle(<?php echo $blockcount; ?>%144/144,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.render(0,0,0); 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);
i'd like to request that if anyone does make a litecoin version that they use a completely different colour scheme so that it can instantly be distinguished from the bitcoin one at a glance.
|