Skip to content

Instantly share code, notes, and snippets.

@ryanbriones

ryanbriones/pomodoro.html

Created December 1, 2011 02:07
Show Gist options
  • Save ryanbriones/1412799 to your computer and use it in GitHub Desktop.
Save ryanbriones/1412799 to your computer and use it in GitHub Desktop.
Download ZIP
Prototype pomodoro timer
Raw
pomodoro.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
</head>
<body style="text-align: center">
<canvas id="foo" width="500px" height="500px" style="margin: 0 auto"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("foo");
if(canvas.getContext) {
var circumference = 2 * Math.PI * 250;
var quarter = circumference/8;
var timers = [25,5,25,5,25,5,25,20]
var total = 135;
var colors = ["#CCCCCC", "#999999", "#CCCCCC", "#999999", "#CCCCCC", "#999999", "#CCCCCC", "#999999"];
var ctx = canvas.getContext('2d');
var lastend = circumference - quarter;
for(var i = 0; i < timers.length; i++) {
console.log("%d, %f, %s",i,lastend, colors[i]);
ctx.beginPath();
ctx.moveTo(250, 250);
ctx.fillStyle = colors[i];
ctx.arc(250,250,250,lastend,lastend+((Math.PI*2) * (timers[i]/total)),false);
ctx.lineTo(250,250);
ctx.fill();
lastend += ((Math.PI*2) * (timers[i]/total));
}
var startPoint = circumference - quarter;
for(var j = 0; j < total*60; j++) {
setTimeout(function() {
console.log("doing thing");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(250, 250);
ctx.fillStyle = "#000";
ctx.arc(250, 250, 250, startPoint, startPoint+((Math.PI*2) * (1/(total*60))),false);
ctx.lineTo(250, 250);
ctx.fill();
startPoint += ((Math.PI*2) * (1/(total*60)));
}, j*1000);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment