wangdaping
/
wp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
							<html>
<head>
<title>dojox.gfx: interactive analog clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	@import "../../../dojo/resources/dojo.css";
	@import "../../../dijit/tests/css/dijitTests.css";
</style>
<!--
The next line should include Microsoft's Silverlight.js, if you plan to use the silverlight backend
<script type="text/javascript" src="Silverlight.js"></script>
-->
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">

dojo.require("dojox.gfx");
dojo.require("dojo.date.locale");

var current_time = new Date();

var hour_hand   = null;
var minute_hand = null;
var second_hand = null;

var hour_shadow   = null;
var minute_shadow = null;
var second_shadow = null;

var center = {x: 385 / 2, y: 385 / 2};

var hour_shadow_shift   = {dx: 2, dy: 2};
var minute_shadow_shift = {dx: 3, dy: 3};
var second_shadow_shift = {dx: 4, dy: 4};

var selected_hand = null;
var container = null;
var container_position = null;
var text_time = null;
var diff_time = new Date();

placeHand = function(shape, angle, shift){
	var move = {dx: center.x + (shift ? shift.dx : 0), dy: center.y + (shift ? shift.dy : 0)};
	return shape.setTransform([move, dojox.gfx.matrix.rotateg(angle)]);
};

placeHourHand = function(h, m, s){
	var angle = 30 * (h % 12 + m / 60 + s / 3600);
	placeHand(hour_hand, angle);
	placeHand(hour_shadow, angle, hour_shadow_shift);
};

placeMinuteHand = function(m, s){
	var angle = 6 * (m + s / 60);
	placeHand(minute_hand, angle);
	placeHand(minute_shadow, angle, minute_shadow_shift);
};

placeSecondHand = function(s){
	var angle = 6 * s;
	placeHand(second_hand, angle);
	placeHand(second_shadow, angle, second_shadow_shift);
};

reflectTime = function(time, hold_second_hand, hold_minute_hand, hold_hour_hand){
	if(!time) time = current_time;
	var h = time.getHours();
	var m = time.getMinutes();
	var s = time.getSeconds();
	if(!hold_hour_hand) placeHourHand(h, m, s);
	if(!hold_minute_hand) placeMinuteHand(m, s);
	if(!hold_second_hand) placeSecondHand(s);
	text_time.innerHTML = dojo.date.locale.format(
		time, {selector: "time", timePattern: "h:mm:ss a"});
};

resetTime = function(){
	current_time = new Date();
	reflectTime();
};

tick = function(){
	current_time.setSeconds(current_time.getSeconds() + 1);
	reflectTime();
};

advanceTime = function(){
	if(!selected_hand) {
		tick();
	}
};

normalizeAngle = function(angle){
	if(angle > Math.PI) {
		angle -= 2 * Math.PI;
	} else if(angle < -Math.PI) {
		angle += 2 * Math.PI;
	}
	return angle;
};

calculateAngle = function(x, y, handAngle){
	try {
		return normalizeAngle(Math.atan2(y - center.y, x - center.x) - handAngle);
	} catch(e) {
		// supress
	}
	return 0;
};

getSecondAngle = function(time){
	if(!time) time = current_time;
	return (6 * time.getSeconds() - 90) / 180 * Math.PI;
};

getMinuteAngle = function(time){
	if(!time) time = current_time;
	return (6 * (time.getMinutes() + time.getSeconds() / 60) - 90) / 180 * Math.PI;
};

getHourAngle = function(time){
	if(!time) time = current_time;
	return (30 * (time.getHours() + (time.getMinutes() + time.getSeconds() / 60) / 60) - 90) / 180 * Math.PI;
};

onMouseDown = function(evt){
	selected_hand = evt.target;
	diff_time.setTime(current_time.getTime());
	dojo.stopEvent(evt);
};

onMouseMove = function(evt){
	if(!selected_hand) return;
	if(evt.target == second_hand.getEventSource() || 
			evt.target == minute_hand.getEventSource() || 
			evt.target == hour_hand.getEventSource()){
		dojo.stopEvent(evt);
		return;
	}
	if(dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())){
		var angle = calculateAngle(
			evt.clientX - container_position.x, 
			evt.clientY - container_position.y, 
			normalizeAngle(getSecondAngle())
		);
		var diff = Math.round(angle / Math.PI * 180 / 6); // in whole seconds
		current_time.setSeconds(current_time.getSeconds() + Math.round(diff));
		reflectTime();
	}else if(dojox.gfx.equalSources(selected_hand, minute_hand.getEventSource())){
		var angle = calculateAngle(
			evt.clientX - container_position.x, 
			evt.clientY - container_position.y, 
			normalizeAngle(getMinuteAngle(diff_time))
		);
		var diff = Math.round(angle / Math.PI * 180 / 6 * 60); // in whole seconds
		diff_time.setTime(diff_time.getTime() + 1000 * diff);
		reflectTime(diff_time, true);
		
	}else if(dojox.gfx.equalSources(selected_hand, hour_hand.getEventSource())){
		var angle = calculateAngle(
			evt.clientX - container_position.x, 
			evt.clientY - container_position.y, 
			normalizeAngle(getHourAngle(diff_time))
		);
		var diff = Math.round(angle / Math.PI * 180 / 30 * 60 * 60); // in whole seconds
		diff_time.setTime(diff_time.getTime() + 1000 * diff);
		reflectTime(diff_time, true, true);
	}else{
		return;
	}
	dojo.stopEvent(evt);
};

onMouseUp = function(evt){
	if(selected_hand && !dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())){
		current_time.setTime(diff_time.getTime());
		reflectTime();
	}
	selected_hand = null;
	dojo.stopEvent(evt);
};

makeShapes = function(){
	// prerequisites
	container = dojo.byId("gfx_holder");
	container_position = dojo.coords(container, true);
	text_time = dojo.byId("time");
	var surface = dojox.gfx.createSurface(container, 385, 385);
    surface.createImage({width: 385, height: 385, src: "images/clock_face.jpg"});
    
    // hand shapes
    var hour_hand_points = [{x: -7, y: 15}, {x: 7, y: 15}, {x: 0, y: -60}, {x: -7, y: 15}];
    var minute_hand_points = [{x: -5, y: 15}, {x: 5, y: 15}, {x: 0, y: -100}, {x: -5, y: 15}];
    var second_hand_points = [{x: -2, y: 15}, {x: 2, y: 15}, {x: 2, y: -105}, {x: 6, y: -105}, {x: 0, y: -116}, {x: -6, y: -105}, {x: -2, y: -105}, {x: -2, y: 15}];
    
    // create shapes
    hour_shadow = surface.createPolyline(hour_hand_points)
		.setFill([0, 0, 0, 0.1])
		;
    hour_hand = surface.createPolyline(hour_hand_points)
		.setStroke({color: "black", width: 2})
		.setFill("#889")
		;
    minute_shadow = surface.createPolyline(minute_hand_points)
		.setFill([0, 0, 0, 0.1])
		;
    minute_hand = surface.createPolyline(minute_hand_points)
		.setStroke({color: "black", width: 2})
		.setFill("#ccd")
		;
    second_shadow = surface.createPolyline(second_hand_points)
		.setFill([0, 0, 0, 0.1])
		;
    second_hand = surface.createPolyline(second_hand_points)
		.setStroke({color: "#800", width: 1})
		.setFill("#d00")
		;

	// next 3 lines kill Silverlight because its nodes do not support CSS		
	//dojox.gfx._addClass(hour_hand  .getEventSource(), "movable");
	//dojox.gfx._addClass(minute_hand.getEventSource(), "movable");
	//dojox.gfx._addClass(second_hand.getEventSource(), "movable");
		
	surface.createCircle({r: 1}).setFill("black").setTransform({dx: 192.5, dy: 192.5});
	
	// attach events
	hour_hand  .connect("onmousedown", onMouseDown);
	minute_hand.connect("onmousedown", onMouseDown);
	second_hand.connect("onmousedown", onMouseDown);
	dojo.connect(container, "onmousemove", onMouseMove);
	dojo.connect(container, "onmouseup",   onMouseUp);
	dojo.connect(dojo.byId("reset"), "onclick", resetTime);

	// start the clock		
	resetTime();
	window.setInterval(advanceTime, 1000);
};

dojo.addOnLoad(makeShapes);

</script>
<style type="text/css">
.movable { cursor: hand; }
</style>
</head>
<body>
<h1>dojox.gfx: interactive analog clock</h1>
<p>Grab hands and set your own time.</p>
<p>Warning: Canvas renderer doesn't implement event handling.</p>
<div id="gfx_holder" style="width: 385px; height: 385px;"></div>
<p>Current time: <span id="time"></span>.</p>
<p><button id="reset">Reset</button></p>
</body>
</html>