New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
author: mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> 2008-11-13 09:49:11 +0000
committer: mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> 2008-11-13 09:49:11 +0000
commit: e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree: 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/gfx/demos/clock.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
1 files changed, 253 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/demos/clock.html b/includes/js/dojox/gfx/demos/clock.html
new file mode 100644
index 0000000..8d4d8c1
--- /dev/null
+++ b/includes/js/dojox/gfx/demos/clock.html
@@ -0,0 +1,253 @@
+<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>
author	mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>	2008-11-13 09:49:11 +0000
committer	mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>	2008-11-13 09:49:11 +0000
commit	e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree	95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/gfx/demos/clock.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2