diff options
author | 2008-11-13 09:49:11 +0000 | |
---|---|---|
committer | 2008-11-13 09:49:11 +0000 | |
commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/gfx/demos/clockWidget.html | |
parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
download | scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip |
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
Diffstat (limited to 'includes/js/dojox/gfx/demos/clockWidget.html')
-rw-r--r-- | includes/js/dojox/gfx/demos/clockWidget.html | 332 |
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> |