Pages:
Author

Topic: Bitcoin clock - page 2. (Read 7685 times)

hero member
Activity: 812
Merit: 1000
August 07, 2012, 08:02:24 PM
#30
i've just now printed a "Reward-Drop ETA" on the site.

it uses a fairly simple formula:

time() + ( (210000 - current_block_count) * 600 )

edit: just for the sake of documenting it here, it is currently estimating 2012-12-05 11:30:22
hero member
Activity: 533
Merit: 501
February 20, 2012, 10:20:03 AM
#29
Have a hand tick around that would cycle at that average rate of the last 20 blocks. On a long enough timeline this is basically correct. When the block is solved, jump it back to the beginning and restart the round about. Maybe have it change colors from blue to red when it passes 360 degrees without a block solve (to signify being overdue).
hero member
Activity: 812
Merit: 1000
February 19, 2012, 07:11:39 PM
#28
Just found it (from that other thread).
The page says the "seconds" hand does 144 blocks per revolution. why is that? Why 144, and why isnt it 60 blocks, like 1 block = 1 second?
I am unsure what I would use that clock for. mostly I watch the blockcount to wait for the 6 block verification count, and that I do right in bitcoin gui. but then, with an easily understandable and readable bitcoinclock, I would use it whenever I dont send/receive with my local bitcoin instance.
Maybe have a "stopwatch" function? I press "Start!", and can easily see when 6, or 100 blocks were added. Maybe with an alarm (popup, sound, flashing tab, changing tab icon)? Now that would make me use the bitcoinclock exclusively!

Nevertheless, thank you for that, sometimes its the small, easy things that help a lot!

Ente

144 blocks is approximately how many are found per 24 hours.

i think 60 blocks would have less meaning.

i currently have no plans to spend extra time on more functions, but feel free to take the idea and/or code and improve upon it for your own projects.

someone also did a litecoin spinoff that may be of interest to you. err, it's down.

legendary
Activity: 2126
Merit: 1001
February 19, 2012, 06:12:35 PM
#27
Just found it (from that other thread).
The page says the "seconds" hand does 144 blocks per revolution. why is that? Why 144, and why isnt it 60 blocks, like 1 block = 1 second?
I am unsure what I would use that clock for. mostly I watch the blockcount to wait for the 6 block verification count, and that I do right in bitcoin gui. but then, with an easily understandable and readable bitcoinclock, I would use it whenever I dont send/receive with my local bitcoin instance.
Maybe have a "stopwatch" function? I press "Start!", and can easily see when 6, or 100 blocks were added. Maybe with an alarm (popup, sound, flashing tab, changing tab icon)? Now that would make me use the bitcoinclock exclusively!

Nevertheless, thank you for that, sometimes its the small, easy things that help a lot!

Ente
hero member
Activity: 812
Merit: 1000
December 06, 2011, 05:19:44 AM
#26
My humble advice is to make better use of one screen so nobody needs to scroll. Make the info text and clock smaller and/or move the clock to the left side of a 2 column table. This will give you room to add other metrics should you choose to pursue more of that 80%. Smiley

Even a broken bitcoin clock is right every 210000 blocks.

thanks, i bunched it up a bit... best i can do with limited time to play with it.
legendary
Activity: 1102
Merit: 1014
December 05, 2011, 06:22:11 PM
#25
My humble advice is to make better use of one screen so nobody needs to scroll. Make the info text and clock smaller and/or move the clock to the left side of a 2 column table. This will give you room to add other metrics should you choose to pursue more of that 80%. Smiley

Even a broken bitcoin clock is right every 210000 blocks.
legendary
Activity: 1050
Merit: 1000
You are WRONG!
December 05, 2011, 03:56:48 PM
#24
clock stading still, is it broken?

*jokeing*
donator
Activity: 532
Merit: 501
We have cookies
December 05, 2011, 02:23:49 PM
#23
Clicking on this thread I was expecting to see something like doomsday clock, showing minutes left to worldwide bitcoin adoption :)
hero member
Activity: 812
Merit: 1000
December 05, 2011, 05:40:13 AM
#22
I like the idea, but it's not fun to watch because it doesn't really move much. At the very least, the second hand should move once a block.

Personally, I would add something even faster than a block to make movement smooth. For example the integrated probability that a block would have come since the last one, indicating whether it's coming late. Doesn't have to be on the clock disc, just add a bar or anything neat.

That would be the kind of thing to stare at when waiting for a transaction to confirm. Cool There are lots of other cool things one could add, like color-filling the clock's background with the amount of BTC minted over the total amount ever.

The litecoin version will automatically be faster...  4 times faster Smiley  last night the minute hand was at a quarter after..  not it is almost 20 to 12 Smiley

http://litecoinclock.com/


i noticed today that the litecoin version is no longer displaying anything... what's up?
hero member
Activity: 812
Merit: 1000
November 06, 2011, 07:39:31 PM
#21
I like the idea, but it's not fun to watch because it doesn't really move much. At the very least, the second hand should move once a block.

the second hand does move once per block.

anyway i think it becomes more interesting the longer you have known about the site. for example when it started, the hour hand was on 42 minutes past, now it's clearly more than 43... it'll be neat seeing when it finally gets to 45.

good job with the litecoin version, jim.
legendary
Activity: 1876
Merit: 1000
November 06, 2011, 02:45:30 PM
#20
I like the idea, but it's not fun to watch because it doesn't really move much. At the very least, the second hand should move once a block.

Personally, I would add something even faster than a block to make movement smooth. For example the integrated probability that a block would have come since the last one, indicating whether it's coming late. Doesn't have to be on the clock disc, just add a bar or anything neat.

That would be the kind of thing to stare at when waiting for a transaction to confirm. Cool There are lots of other cool things one could add, like color-filling the clock's background with the amount of BTC minted over the total amount ever.

The litecoin version will automatically be faster...  4 times faster Smiley  last night the minute hand was at a quarter after..  not it is almost 20 to 12 Smiley

http://litecoinclock.com/
legendary
Activity: 1036
Merit: 1002
November 06, 2011, 12:07:25 PM
#19
I like the idea, but it's not fun to watch because it doesn't really move much. At the very least, the second hand should move once a block.

Personally, I would add something even faster than a block to make movement smooth. For example the integrated probability that a block would have come since the last one, indicating whether it's coming late. Doesn't have to be on the clock disc, just add a bar or anything neat.

That would be the kind of thing to stare at when waiting for a transaction to confirm. Cool There are lots of other cool things one could add, like color-filling the clock's background with the amount of BTC minted over the total amount ever.
legendary
Activity: 1876
Merit: 1000
November 05, 2011, 09:48:51 PM
#18
thanks:)
hero member
Activity: 812
Merit: 1000
November 05, 2011, 08:58:09 PM
#17
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:

Code:
	$blockcount=preg_replace('/[^0-9]/','',file_get_contents('http://blockexplorer.com/q/getblockcount'));
?>




Bitcoin Clock











Bitcoin Clock












Block count: echo $blockcount?>

Blocks since last difficulty change: echo $blockcount%2016?>



Hour hand goes around once every 210,000 blocks

(Block reward drops by half every time hour hand reaches 12)

(This should occur approximately once every 4 years)


Minute hand goes around once every 2016 blocks

(Difficulty change occurs every time minute hand reaches 12)

(This should occur approximately once every 2 weeks)


Second hand goes around once every 144 blocks

(This should occur approximately once every 24 hours)




coolclock.php:

Code:

$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(echo $blockcount?>/210000,skin.hourHand);

if (skin.minuteHand)
this.radialLineAtAngle(echo $blockcount?>%2016/2016,skin.minuteHand);

if (this.showSecondHand && skin.secondHand)
this.radialLineAtAngle(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 // 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:
// 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.
legendary
Activity: 1876
Merit: 1000
November 05, 2011, 08:51:35 PM
#16
any chance in spinning up a litecoin clock ?    especially since the diff changes so much faster.
hero member
Activity: 812
Merit: 1000
September 22, 2011, 02:04:05 AM
#15
usually 80% of the value gets done in the first 20% of the time spent.

refining the remaining 20% of the project then takes up the remaining 80% of the total time.

so the most efficient thing to do, is just work until something is 80% good enough (20% of total time to complete a 'perfect' project) and then move on to the next one...

Lol, so true.  Also, after that first 20% of the time is put in, it starts to get pretty boring.  Unfortunately, if you're trying to develop something professionally, you have to put in that other 80% of the effort.  This is where delegation comes in handy.  Cheesy

yes and via delegation the remaining 20% of the project gets redefined as someone else's '100%' and they probably work the same way.

so they spend 20% of their time doing 80% of their part.

therefore 96% (0.8 + 0.2*0.8 ) of the total project gets done in the first 36% (0.2 + 0.8*0.2) of the total time.

everyone just needs to keep delegating when they hit that 20% mark Smiley
hero member
Activity: 726
Merit: 500
September 22, 2011, 01:56:44 AM
#14
usually 80% of the value gets done in the first 20% of the time spent.

refining the remaining 20% of the project then takes up the remaining 80% of the total time.

so the most efficient thing to do, is just work until something is 80% good enough (20% of total time to complete a 'perfect' project) and then move on to the next one...

Lol, so true.  Also, after that first 20% of the time is put in, it starts to get pretty boring.  Unfortunately, if you're trying to develop something professionally, you have to put in that other 80% of the effort.  This is where delegation comes in handy.  Cheesy
hero member
Activity: 812
Merit: 1000
September 22, 2011, 01:52:25 AM
#13
usually 80% of the value gets done in the first 20% of the time spent.

refining the remaining 20% of the project then takes up the remaining 80% of the total time.

so the most efficient thing to do, is just work until something is 80% good enough (20% of total time to complete a 'perfect' project) and then move on to the next one...

i don't know if that's always true, but i think it's a good rule to keep in mind for anyone trying to break the perfectionists dilemma.

anyway perhaps the whole idea will inspire someone to do a much better clock, and if that happens, i'll probably have no trouble getting your version 2.0 uploaded onto bitcoinclock.com

hero member
Activity: 812
Merit: 1000
September 22, 2011, 12:22:51 AM
#12
yeah even i wouldn't rate it A-

i'm no javascript guru, i just found a clock and tried to modify it to create the right angles.

no idea what to use the second hand for either, so that's why i disabled it Smiley

The division in 60 spaces is not suited for Bitcoin so one improvement would be a custom clock image. But this creates other problems because 210,000 is not divisible by 2016.

yeah i only just realised that today... i think previously i assumed difficulty changed every 2100 blocks.

anyway a custom image could be good... especially one with a 'bitcoin' as the background Smiley
hero member
Activity: 602
Merit: 501
September 22, 2011, 12:20:25 AM
#11
yeah even i wouldn't rate it A-

i'm no javascript guru, i just found a clock and tried to modify it to create the right angles.

no idea what to use the second hand for either, so that's why i disabled it Smiley

The division in 60 spaces is not suited for Bitcoin so one improvement would be a custom clock image. But this creates other problems because 210,000 is not divisible by 2016.
Pages:
Jump to: