3 <title>dojox.gfx: interactive analog clock</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <style type="text/css">
6 @import "../../../dojo/resources/dojo.css";
7 @import "../../../dijit/themes/dijit.css";
8 @import "../../../dijit/tests/css/dijitTests.css";
11 The next line should include Microsoft's Silverlight.js, if you plan to use the silverlight backend
12 <script type="text/javascript" src="Silverlight.js"></script>
14 <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true"></script>
15 <script type="text/javascript">
16 dojo.require("dijit._Widget");
17 dojo.require("dijit._Templated");
18 dojo.require("dojox.gfx");
19 dojo.require("dojo.date.locale");
20 dojo.declare("demo.Clock",dijit._Widget,{
24 img:"images/clock_face_black.jpg",
26 postCreate:function(){
27 this.inherited(arguments);
28 if(!this.time){ this.current_time = new Date(); }else{
29 this.current_time = this.time;
33 diff_time: new Date(),
37 hour_shadow_shift:{dx: 2, dy: 2},
41 minute_shadow_shift:{dx: 3, dy: 3},
45 second_shadow_shift:{dx: 4, dy: 4},
47 container_position: null
58 this.container_position = dojo.coords(this.domNode, true);
59 this.mb = dojo.marginBox(this.domNode);
69 this.surface = dojox.gfx.createSurface(this.domNode, this.mb.w, this.mb.h);
70 this.group = this.surface.createGroup();
71 this.group.createImage({
72 width: this.center.x * 2,
73 height:this.center.y * 2,
79 var mar = ((this.mb.w / 2) - _off) * -1;
80 var _c = mar * 0.7; // -105;
81 var _a = mar * 0.5; //-60;
82 var _b = mar * 0.75; // -100;
83 var _d = mar * 0.8; // -116;
84 var _e = mar * 0.0523; // -7ish
86 var _g = mar * 0.01234;
88 var hour_hand_points = [{x: _e, y: _off }, {x: _e * -1, y: _off }, {x: 0, y: _a }, {x: _e, y: _off }];
89 var minute_hand_points = [{x: _f, y: _off }, {x: _f * -1, y: _off }, {x: 0, y: _b }, {x: _f, y: _off }];
90 var second_hand_points = [
91 {x: _g, y: _off }, {x: _g * -1, y: _off }, {x: _g * -1, y: _c },
92 {x: _e * -1, y: _c }, {x: 0, y: _d }, {x: _e, y: _c },
93 {x: _g, y: _c }, {x: _g, y: _off }
97 this.hour_shadow = this.group.createPolyline(hour_hand_points)
98 .setFill([0, 0, 0, 0.1])
100 this.hour_hand = this.group.createPolyline(hour_hand_points)
101 .setStroke({color: "black", width: 2})
104 this.minute_shadow = this.group.createPolyline(minute_hand_points)
105 .setFill([0, 0, 0, 0.1])
107 this.minute_hand = this.group.createPolyline(minute_hand_points)
108 .setStroke({color: "black", width: 2})
111 this.second_shadow = this.group.createPolyline(second_hand_points)
112 .setFill([0, 0, 0, 0.1])
114 this.second_hand = this.group.createPolyline(second_hand_points)
115 .setStroke({color: "#800", width: 1})
119 this.group.createCircle({r: 1}).setFill("black").setTransform({dx: this.center.x, dy: this.center.y });
124 window.setInterval(dojo.hitch(this,"advanceTime"), 1000);
127 placeHand: function(shape, angle, shift){
128 var move = {dx: this.center.x + (shift ? shift.dx : 0), dy: this.center.y + (shift ? shift.dy : 0)};
129 return shape.setTransform([move, dojox.gfx.matrix.rotateg(angle)]);
132 placeHourHand: function(h, m, s){
133 var angle = 30 * (h % 12 + m / 60 + s / 3600);
134 this.placeHand(this.hour_hand, angle);
135 this.placeHand(this.hour_shadow, angle, this.hour_shadow_shift);
138 placeMinuteHand: function(m, s){
139 var angle = 6 * (m + s / 60);
140 this.placeHand(this.minute_hand, angle);
141 this.placeHand(this.minute_shadow, angle, this.minute_shadow_shift);
144 placeSecondHand:function(s){
146 this.placeHand(this.second_hand, angle);
147 this.placeHand(this.second_shadow, angle, this.second_shadow_shift);
150 reflectTime: function(time, hold_second_hand, hold_minute_hand, hold_hour_hand){
151 if(!time){ time = this.current_time; }
152 var h = time.getHours();
153 var m = time.getMinutes();
154 var s = time.getSeconds();
156 if(!hold_hour_hand) this.placeHourHand(h, m, s);
157 if(!hold_minute_hand) this.placeMinuteHand(m, s);
158 if(!hold_second_hand) this.placeSecondHand(s);
160 this.text_time = dojo.date.locale.format(
161 time, {selector: "time", timePattern: "h:mm:ss a"}
165 resetTime: function(){
166 this.current_time = new Date();
171 this.current_time.setSeconds(this.current_time.getSeconds()+1);
175 advanceTime: function(){
176 if(!this.selected_hand){
181 normalizeAngle: function(angle){
182 if(angle > Math.PI) {
183 angle -= 2 * Math.PI;
184 } else if(angle < -Math.PI) {
185 angle += 2 * Math.PI;
190 calculateAngle: function(x, y, handAngle){
192 return this.normalizeAngle(Math.atan2(y - this.center.y, x - this.center.x) - handAngle);
193 }catch(e){ /* supress */ }
197 getSecondAngle: function(time){
198 if(!time) time = this.current_time;
199 return (6 * time.getSeconds() - 90) / 180 * Math.PI;
202 getMinuteAngle: function(time){
203 if(!time) time = this.current_time;
204 return (6 * (time.getMinutes() + time.getSeconds() / 60) - 90) / 180 * Math.PI;
207 getHourAngle: function(time){
208 if(!time) time = this.current_time;
209 return (30 * (time.getHours() + (time.getMinutes() + time.getSeconds() / 60) / 60) - 90) / 180 * Math.PI;
212 resize: function(size){
213 this.surface.setDimensions(size.w, size.h);
214 this.group.setTransform(dojox.gfx.matrix.scale(size.w/this.mb.w, size.h/this.mb.h));
220 dojo.declare("demo.InteractiveClock",demo.Clock,{
223 this.inherited(arguments);
225 this.diff_time = new Date();
226 this.hour_hand .connect("onmousedown", this,"onMouseDown");
227 this.minute_hand.connect("onmousedown", this,"onMouseDown");
228 this.second_hand.connect("onmousedown", this,"onMouseDown");
229 this.connect(this.domNode, "onmousemove", "onMouseMove");
230 this.connect(this.domNode, "onmouseup", "onMouseUp");
234 onMouseDown: function(evt){
235 this.selected_hand = evt.target;
236 this.diff_time.setTime(this.current_time.getTime());
240 onMouseMove: function(evt){
241 if(!this.selected_hand) return;
242 if(evt.target == this.second_hand.getEventSource() ||
243 evt.target == this.minute_hand.getEventSource() ||
244 evt.target == this.hour_hand.getEventSource()){
248 if(dojox.gfx.equalSources(this.selected_hand, this.second_hand.getEventSource())){
249 var angle = this.calculateAngle(
250 evt.clientX - this.container_position.x,
251 evt.clientY - this.container_position.y,
252 this.normalizeAngle(this.getSecondAngle())
254 var diff = Math.round(angle / Math.PI * 180 / 6); // in whole seconds
255 this.current_time.setSeconds(this.current_time.getSeconds() + Math.round(diff));
257 }else if(dojox.gfx.equalSources(this.selected_hand, this.minute_hand.getEventSource())){
258 var angle = this.calculateAngle(
259 evt.clientX - this.container_position.x,
260 evt.clientY - this.container_position.y,
261 this.normalizeAngle(this.getMinuteAngle(this.diff_time))
263 var diff = Math.round(angle / Math.PI * 180 / 6 * 60); // in whole seconds
264 this.diff_time.setTime(this.diff_time.getTime() + 1000 * diff);
265 this.reflectTime(this.diff_time, true);
267 }else if(dojox.gfx.equalSources(this.selected_hand, this.hour_hand.getEventSource())){
268 var angle = this.calculateAngle(
269 evt.clientX - this.container_position.x,
270 evt.clientY - this.container_position.y,
271 this.normalizeAngle(this.getHourAngle(this.diff_time))
273 var diff = Math.round(angle / Math.PI * 180 / 30 * 60 * 60); // in whole seconds
274 this.diff_time.setTime(this.diff_time.getTime() + 1000 * diff);
275 this.reflectTime(this.diff_time, true, true);
282 onMouseUp:function(evt){
283 if(this.selected_hand && !dojox.gfx.equalSources(this.selected_hand, this.second_hand.getEventSource())){
284 this.current_time.setTime(this.diff_time.getTime());
287 this.selected_hand = null;
291 dojo.require("dijit.form.Button");
292 dojo.addOnLoad(function(){
293 var n = dojo.doc.createElement('div');
294 dojo.body().appendChild(n);
296 height:"200px", width:"200px",
297 border:"5px solid #ededed"
299 new demo.Clock({},n);
303 <style type="text/css">
304 .movable { cursor: hand; }
308 <h1>dojox.gfx: interactive analog clock</h1>
309 <p>Grab hands and set your own time.</p>
310 <p>Warning: Canvas renderer doesn't implement event handling.</p>
312 <button dojoType="dijit.form.Button">
314 <script type="dojo/method" event="onClick">
315 dijit.byId("one").resize({ w:250, h:250 });
319 <hr noshade size="0" />
321 <div class="dijitInline" dojoType="demo.Clock" id="gfx_holder" style="width: 300px; height: 300px;"></div>
322 <div class="dijitInline" img="images/clock_face.jpg" dojoType="demo.InteractiveClock" style="width: 225px; height: 225px;"></div>
323 <div class="dijitInline" id="one" dojoType="demo.Clock" style="width: 150px; height: 150px;"></div>
324 <div class="dijitInline" dojoType="demo.Clock" style="width: 75px; height: 75px;"></div>
326 <hr noshade size="0" />