Skip to content

added clock_new.html #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ford16 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

added clock_new.html #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a8f05bf
added clock_new.html
ford16 Apr 16, 2014
3c9dd72
Seconds, Minutes, Hours and Days change outer ring
ford16 Apr 16, 2014
f66ea6c
Outer ring no longer immobile
ford16 Apr 16, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added awhile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
248 changes: 248 additions & 0 deletions clock_new.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<!--<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">-->
</head>
<body>
<img src="awhile.png" height = 80 width=1500>
<div id="output"></div>

<div id="container" ></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<!--<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>-->
<script defer="defer">
function drawSelector(sWidth,sHeight) {
//constants
var MAX_ANGULAR_VELOCITY = 360 * 5;
var NUM_WEDGES = 25;
var ANGULAR_FRICTION = 0.2;

// globals
var target, stage, layer, controlled = false;
var wheels=new Array(), startRotation=new Array(), startX=new Array(), startY=new Array();
var angularVelocity=new Array(), lastRotation=new Array();

function bind(wheelNum) {
wheels[wheelNum].on('mousedown', function(evt) {
var mousePos = stage.getPointerPosition();
target = this.id();
angularVelocity[target] = 0;
controlled = true;
startRotation[target] = this.rotation();
startX[target] = mousePos.x;
startY[target] = mousePos.y;

});

// add listeners to container
document.body.addEventListener('mouseup', function() {
controlled = false;
if(angularVelocity[target] > MAX_ANGULAR_VELOCITY) {
angularVelocity[target] = MAX_ANGULAR_VELOCITY;
}
else if(angularVelocity[target] < -1 * MAX_ANGULAR_VELOCITY) {
angularVelocity[target] = -1 * MAX_ANGULAR_VELOCITY;
}
angularVelocities = [];
}, false);

document.body.addEventListener('mousemove', function(evt) {
var mousePos = stage.getPointerPosition();
if(controlled && mousePos && target >= 0) {
var x1 = mousePos.x - wheels[target].x();
var y1 = mousePos.y - wheels[target].y();
var x2 = startX[target] - wheels[target].x();
var y2 = startY[target] - wheels[target].y();
var angle1 = Math.atan(y1 / x1) * 180 / Math.PI;
var angle2 = Math.atan(y2 / x2) * 180 / Math.PI;
var angleDiff = angle2 - angle1;

if ((x1 < 0 && x2 >=0) || (x2 < 0 && x1 >=0)) {
angleDiff += 180;
}

wheels[target].setRotation(startRotation[target] - angleDiff);

var rot = wheels[1].getRotation() % 360
if(rot<0) rot = 360+rot
document.getElementById("output").innerHTML = "angle="+rot



time = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]
hours = time.map(function(x) { return x * 24; });
minutes = time.map(function(x) { return x * 24*60; });
seconds = time.map(function(x) { return x * 24*60*60; });

if(rot>334 || rot<25) {time = seconds}
else if(rot>283) {time = minutes}
else if(rot>231) {time = hours}
rot = wheels[0].getRotation()
wheels[0] = createWheel(0,550,45,25,time,[204,204,204], stage, 600, 20)
wheels[0].setRotation(rot)
layer.add(wheels[0])


}
}, false);
}

function init() {
stage = new Kinetic.Stage({
container: 'container',
width: sWidth,
height: sHeight
});

// create layer
layer = new Kinetic.Layer();

// create wheels
wheels[0] = createWheel(0,550,45,25,[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],[204,204,204], stage, 600, 20);
wheels[1] = createWheel(1,500,45,7,["Seconds","Minutes","Hours","Days","Weeks","Months","Decades"],[178,178,178], stage, 600, 30);
wheels[2] = createWheel(2,450,45,1,["Old on"],[153,153,153], stage, 600, 30);
wheels[3] = createWheel(3,400,45,31,[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],[128,128,128], stage, 600, 20);
wheels[4] = createWheel(4,350,45,12,[1,2,3,4,5,6,7,8,9,10,11,12],[102,102,102], stage, 600, 20);
wheels[5] = createWheel(5,300,45,40,[2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019],[77,77,77], stage, 600, 12);
wheels[6] = createWheel(6,250,250,1,["\nShare"],[153,153,153], stage, 600, 80);

// add wheels to layer
layer.add(wheels[0]);
layer.add(wheels[1]);
layer.add(wheels[2]);
layer.add(wheels[3]);
layer.add(wheels[4]);
layer.add(wheels[5]);
layer.add(wheels[6]);
// add layer to stage
stage.add(layer);

// wheels cache
wheels[0].cache({x: -1* 550,y: -1* 550,width: 550 * 2,height: 550 * 2}).offset({x: 550,y: 550});
wheels[1].cache({x: -1* 500,y: -1* 500,width: 500 * 2,height: 500 * 2}).offset({x: 500,y: 500});
wheels[3].cache({x: -1* 400,y: -1* 400,width: 400 * 2,height: 400 * 2}).offset({x: 400,y: 400});
wheels[4].cache({x: -1* 350,y: -1* 350,width: 350 * 2,height: 350 * 2}).offset({x: 350,y: 350});
wheels[5].cache({x: -1* 300,y: -1* 300,width: 300 * 2,height: 300 * 2}).offset({x: 300,y: 300});

layer.draw();

// bind events
bind(0);bind(1);bind(3);bind(4);bind(5);
var anim0 = new Kinetic.Animation(function animate(frame) {
var angularVelocityChange = angularVelocity[0] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
angularVelocity[0] -= angularVelocityChange;
angularVelocity[0] = ((wheels[0].getRotation() - lastRotation[0]) * 1000 / frame.timeDiff);
lastRotation[0] = wheels[0].getRotation();
}, layer);
anim0.start();

var anim1 = new Kinetic.Animation(function animate(frame) {
var angularVelocityChange = angularVelocity[1] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
angularVelocity[1] -= angularVelocityChange;
angularVelocity[1] = ((wheels[1].getRotation() - lastRotation[1]) * 1000 / frame.timeDiff);
lastRotation[1] = wheels[1].getRotation();
}, layer);
anim1.start();
blerg();
var anim3 = new Kinetic.Animation(function animate(frame) {
var angularVelocityChange = angularVelocity[3] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
angularVelocity[3] -= angularVelocityChange;
angularVelocity[3] = ((wheels[3].getRotation() - lastRotation[3]) * 1000 / frame.timeDiff);
lastRotation[3] = wheels[3].getRotation();
}, layer);
anim3.start();

var anim4 = new Kinetic.Animation(function animate(frame) {
var angularVelocityChange = angularVelocity[4] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
angularVelocity[4] -= angularVelocityChange;
angularVelocity[4] = ((wheels[4].getRotation() - lastRotation[4]) * 1000 / frame.timeDiff);
lastRotation[4] = wheels[4].getRotation();
}, layer);
anim4.start();

var anim5 = new Kinetic.Animation(function animate(frame) {
var angularVelocityChange = angularVelocity[5] * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
angularVelocity[5] -= angularVelocityChange;
angularVelocity[5] = ((wheels[5].getRotation() - lastRotation[5]) * 1000 / frame.timeDiff);
lastRotation[5] = wheels[5].getRotation();
}, layer);
anim5.start();
}

function createWheel(wheelId, wheelRadius, wheelInnerRadius, numOfWedges, values, wheelColor, stage, wY, valueFont) {
var wheel, valueIndex=0;
wheel = new Kinetic.Group({
x: stage.getWidth() / 2,
y: wY,
id: wheelId
});
for(var n = 0; n < numOfWedges; n++) {
addWedge(n);
}

function getValue() {
return values[valueIndex++] + '';
}

function addWedge(n) {
var value = getValue();
var r = wheelColor[0];
var g = wheelColor[1];
var b = wheelColor[2];
var angle = 360 / numOfWedges;

var endColor = 'rgb(' + r + ',' + g + ',' + b + ')';
r += 100;g += 100;b += 100;
var startColor = 'rgb(' + r + ',' + g + ',' + b + ')';

var wedge = new Kinetic.Group({
rotation: n * 360 / numOfWedges,
});

var wedgeBackground = new Kinetic.Arc({
outerRadius: wheelRadius,
innerRadius: wheelRadius - wheelInnerRadius,
angle: angle,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndRadius: wheelRadius,
fillRadialGradientColorStops: [0, startColor, 1, endColor],
fill: '#64e9f8',
fillPriority: 'radial-gradient',
/*stroke: '#ccc',*/
strokeWidth: 0,
rotation: (90 + angle/2) * -1
});

wedge.add(wedgeBackground);

var text = new Kinetic.Text({
text: value,
fontFamily: 'Calibri',
fontSize: valueFont,
fill: 'dimgray',
align: 'center',
stroke: 'dimigray',
strokeWidth: 0,
listening: false
});

text.offsetX(text.width()/2);
text.offsetY(wheelRadius - 15);

wedge.add(text);
wheel.add(wedge);
}
return wheel;
}
init();
}
drawSelector(1400,600);
</script>
</body>
</html>