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/clockWidget.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
1 files changed, 332 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/demos/clockWidget.html b/includes/js/dojox/gfx/demos/clockWidget.html
new file mode 100644
index 0000000..409523c
--- /dev/null
+++ b/includes/js/dojox/gfx/demos/clockWidget.html
@@ -0,0 +1,332 @@
+<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/themes/dijit.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" djConfig="parseOnLoad:true"></script>
+<script type="text/javascript">
+	dojo.require("dijit._Widget");
+	dojo.require("dijit._Templated");
+	dojo.require("dojox.gfx");
+	dojo.require("dojo.date.locale");
+	dojo.declare("demo.Clock",dijit._Widget,{
+		
+		time:"",
+		
+		img:"images/clock_face_black.jpg",
+		
+		postCreate:function(){
+			this.inherited(arguments);
+			if(!this.time){ this.current_time = new Date(); }else{
+				this.current_time = this.time;
+			}
+			dojo.mixin(this,{
+				
+				diff_time: new Date(),
+				
+				hour_hand:null,
+				hour_shadow:null,
+				hour_shadow_shift:{dx: 2, dy: 2},
+
+				minute_hand:null,
+				minute_shadow:null,
+				minute_shadow_shift:{dx: 3, dy: 3},
+				
+				second_hand:null,
+				second_shadow:null,
+				second_shadow_shift:{dx: 4, dy: 4},
+				
+				container_position: null
+				
+			});
+
+			this._setSize();
+
+			this._init();
+		},
+		
+		_setSize:function(){
+
+			this.container_position = dojo.coords(this.domNode, true);
+			this.mb = dojo.marginBox(this.domNode);
+			this.center = {
+				x: (this.mb.w / 2),
+				y: (this.mb.h / 2)
+			};
+			
+		},
+		
+		_init:function(){
+			
+			this.surface = dojox.gfx.createSurface(this.domNode, this.mb.w, this.mb.h);
+			this.group = this.surface.createGroup();
+			this.group.createImage({
+				width: this.center.x * 2,
+				height:this.center.y * 2,
+				src: this.img
+			});
+			
+			// hand shapes
+			var _off = 15;
+			var mar = ((this.mb.w / 2) - _off) * -1;
+			var _c = mar * 0.7; // -105; 
+			var _a = mar * 0.5; //-60;
+			var _b = mar * 0.75; // -100;
+			var _d = mar * 0.8; // -116;
+			var _e = mar * 0.0523; // -7ish
+			var _f = mar * 0.042;
+			var _g = mar * 0.01234;
+			
+			var hour_hand_points = [{x: _e, y: _off }, {x: _e * -1, y: _off }, {x: 0, y: _a }, {x: _e, y: _off }];
+			var minute_hand_points = [{x: _f, y: _off }, {x: _f * -1, y: _off }, {x: 0, y: _b }, {x: _f, y: _off }];
+			var second_hand_points = [
+				{x: _g, y: _off }, {x: _g * -1, y: _off }, {x: _g * -1, y: _c },
+				{x: _e * -1, y: _c }, {x: 0, y: _d }, {x: _e, y: _c },
+				{x: _g, y: _c }, {x: _g, y: _off }
+			];
+			
+			// create shapes
+			this.hour_shadow = this.group.createPolyline(hour_hand_points)
+				.setFill([0, 0, 0, 0.1])
+				;
+			this.hour_hand = this.group.createPolyline(hour_hand_points)
+				.setStroke({color: "black", width: 2})
+				.setFill("#889")
+				;
+			this.minute_shadow = this.group.createPolyline(minute_hand_points)
+				.setFill([0, 0, 0, 0.1])
+				;
+			this.minute_hand = this.group.createPolyline(minute_hand_points)
+				.setStroke({color: "black", width: 2})
+				.setFill("#ccd")
+				;
+			this.second_shadow = this.group.createPolyline(second_hand_points)
+				.setFill([0, 0, 0, 0.1])
+				;
+			this.second_hand = this.group.createPolyline(second_hand_points)
+				.setStroke({color: "#800", width: 1})
+				.setFill("#d00")
+				;
+						
+			this.group.createCircle({r: 1}).setFill("black").setTransform({dx: this.center.x, dy: this.center.y });
+			
+			// start the clock		
+			this.resetTime();
+		
+			window.setInterval(dojo.hitch(this,"advanceTime"), 1000);
+		},
+		
+		placeHand: function(shape, angle, shift){
+			var move = {dx: this.center.x + (shift ? shift.dx : 0), dy: this.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);
+			this.placeHand(this.hour_hand, angle);
+			this.placeHand(this.hour_shadow, angle, this.hour_shadow_shift);
+		},
+		
+		placeMinuteHand: function(m, s){
+			var angle = 6 * (m + s / 60);
+			this.placeHand(this.minute_hand, angle);
+			this.placeHand(this.minute_shadow, angle, this.minute_shadow_shift);
+		},
+		
+		placeSecondHand:function(s){
+			var angle = 6 * s;
+			this.placeHand(this.second_hand, angle);
+			this.placeHand(this.second_shadow, angle, this.second_shadow_shift);
+		},
+		
+		reflectTime: function(time, hold_second_hand, hold_minute_hand, hold_hour_hand){
+			if(!time){ time = this.current_time; }
+			var h = time.getHours();
+			var m = time.getMinutes();
+			var s = time.getSeconds();
+
+			if(!hold_hour_hand) this.placeHourHand(h, m, s);
+			if(!hold_minute_hand) this.placeMinuteHand(m, s);
+			if(!hold_second_hand) this.placeSecondHand(s);
+
+			this.text_time = dojo.date.locale.format(
+				time, {selector: "time", timePattern: "h:mm:ss a"}
+			);
+		},
+		
+		resetTime: function(){
+			this.current_time = new Date();
+			this.reflectTime();
+		},
+		
+		tick: function(){
+			this.current_time.setSeconds(this.current_time.getSeconds()+1);
+			this.reflectTime();
+		},
+		
+		advanceTime: function(){
+			if(!this.selected_hand){
+				this.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 this.normalizeAngle(Math.atan2(y - this.center.y, x - this.center.x) - handAngle);
+			}catch(e){ /* supress */ }
+			return 0;
+		},
+	
+		getSecondAngle: function(time){
+			if(!time) time = this.current_time;
+			return (6 * time.getSeconds() - 90) / 180 * Math.PI;
+		},
+	
+		getMinuteAngle: function(time){
+			if(!time) time = this.current_time;
+			return (6 * (time.getMinutes() + time.getSeconds() / 60) - 90) / 180 * Math.PI;
+		},
+	
+		getHourAngle: function(time){
+			if(!time) time = this.current_time;
+			return (30 * (time.getHours() + (time.getMinutes() + time.getSeconds() / 60) / 60) - 90) / 180 * Math.PI;
+		},
+		
+		resize: function(size){
+			this.surface.setDimensions(size.w, size.h);
+			this.group.setTransform(dojox.gfx.matrix.scale(size.w/this.mb.w, size.h/this.mb.h));
+			this._setSize();
+		}
+	
+	});
+	
+	dojo.declare("demo.InteractiveClock",demo.Clock,{
+	 
+		_init: function(){
+			this.inherited(arguments);
+			// attach events
+			this.diff_time = new Date();
+			this.hour_hand  .connect("onmousedown", this,"onMouseDown");
+			this.minute_hand.connect("onmousedown", this,"onMouseDown");
+			this.second_hand.connect("onmousedown", this,"onMouseDown");
+			this.connect(this.domNode, "onmousemove", "onMouseMove");
+			this.connect(this.domNode, "onmouseup", "onMouseUp");
+			
+		},
+	
+		onMouseDown: function(evt){
+			this.selected_hand = evt.target;
+			this.diff_time.setTime(this.current_time.getTime());
+			dojo.stopEvent(evt);
+		},
+	
+		onMouseMove: function(evt){
+			if(!this.selected_hand) return;
+			if(evt.target == this.second_hand.getEventSource() || 
+					evt.target == this.minute_hand.getEventSource() || 
+					evt.target == this.hour_hand.getEventSource()){
+					dojo.stopEvent(evt);
+				return;
+			}
+			if(dojox.gfx.equalSources(this.selected_hand, this.second_hand.getEventSource())){
+				var angle = this.calculateAngle(
+					evt.clientX - this.container_position.x, 
+					evt.clientY - this.container_position.y, 
+					this.normalizeAngle(this.getSecondAngle())
+				);
+				var diff = Math.round(angle / Math.PI * 180 / 6); // in whole seconds
+				this.current_time.setSeconds(this.current_time.getSeconds() + Math.round(diff));
+				this.reflectTime();
+			}else if(dojox.gfx.equalSources(this.selected_hand, this.minute_hand.getEventSource())){
+				var angle = this.calculateAngle(
+					evt.clientX - this.container_position.x, 
+					evt.clientY - this.container_position.y, 
+					this.normalizeAngle(this.getMinuteAngle(this.diff_time))
+				);
+				var diff = Math.round(angle / Math.PI * 180 / 6 * 60); // in whole seconds
+				this.diff_time.setTime(this.diff_time.getTime() + 1000 * diff);
+				this.reflectTime(this.diff_time, true);
+				
+			}else if(dojox.gfx.equalSources(this.selected_hand, this.hour_hand.getEventSource())){
+				var angle = this.calculateAngle(
+					evt.clientX - this.container_position.x, 
+					evt.clientY - this.container_position.y, 
+					this.normalizeAngle(this.getHourAngle(this.diff_time))
+				);
+				var diff = Math.round(angle / Math.PI * 180 / 30 * 60 * 60); // in whole seconds
+				this.diff_time.setTime(this.diff_time.getTime() + 1000 * diff);
+				this.reflectTime(this.diff_time, true, true);
+			}else{
+				return;
+			}
+			dojo.stopEvent(evt);
+		},
+		
+		onMouseUp:function(evt){
+			if(this.selected_hand && !dojox.gfx.equalSources(this.selected_hand, this.second_hand.getEventSource())){
+				this.current_time.setTime(this.diff_time.getTime());
+				this.reflectTime();
+			}
+			this.selected_hand = null;
+			dojo.stopEvent(evt);
+		}
+	});
+	dojo.require("dijit.form.Button");
+	dojo.addOnLoad(function(){
+		var n = dojo.doc.createElement('div');
+		dojo.body().appendChild(n);
+		dojo.style(n,{
+			height:"200px", width:"200px",
+			border:"5px solid #ededed"
+		});
+		new demo.Clock({},n);
+	});
+
+</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>
+
+<button dojoType="dijit.form.Button">
+	Resize
+	<script type="dojo/method" event="onClick">
+		dijit.byId("one").resize({ w:250, h:250 });
+	</script>
+</button>
+
+<hr noshade size="0" />
+
+<div class="dijitInline" dojoType="demo.Clock" id="gfx_holder" style="width: 300px; height: 300px;"></div>
+<div class="dijitInline" img="images/clock_face.jpg" dojoType="demo.InteractiveClock" style="width: 225px; height: 225px;"></div>
+<div class="dijitInline" id="one" dojoType="demo.Clock" style="width: 150px; height: 150px;"></div>
+<div class="dijitInline" dojoType="demo.Clock" style="width: 75px; height: 75px;"></div>
+
+<hr noshade size="0" />
+
+
+
+
+</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/clockWidget.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2