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/tests/css/dijitTests.css";
10 The next line should include Microsoft's Silverlight.js, if you plan to use the silverlight backend
11 <script type="text/javascript" src="Silverlight.js"></script>
13 <script type="text/javascript" src="../../../dojo/dojo.js"></script>
14 <script type="text/javascript">
16 dojo.require("dojox.gfx");
17 dojo.require("dojo.date.locale");
19 var current_time = new Date();
22 var minute_hand = null;
23 var second_hand = null;
25 var hour_shadow = null;
26 var minute_shadow = null;
27 var second_shadow = null;
29 var center = {x: 385 / 2, y: 385 / 2};
31 var hour_shadow_shift = {dx: 2, dy: 2};
32 var minute_shadow_shift = {dx: 3, dy: 3};
33 var second_shadow_shift = {dx: 4, dy: 4};
35 var selected_hand = null;
37 var container_position = null;
39 var diff_time = new Date();
41 placeHand = function(shape, angle, shift){
42 var move = {dx: center.x + (shift ? shift.dx : 0), dy: center.y + (shift ? shift.dy : 0)};
43 return shape.setTransform([move, dojox.gfx.matrix.rotateg(angle)]);
46 placeHourHand = function(h, m, s){
47 var angle = 30 * (h % 12 + m / 60 + s / 3600);
48 placeHand(hour_hand, angle);
49 placeHand(hour_shadow, angle, hour_shadow_shift);
52 placeMinuteHand = function(m, s){
53 var angle = 6 * (m + s / 60);
54 placeHand(minute_hand, angle);
55 placeHand(minute_shadow, angle, minute_shadow_shift);
58 placeSecondHand = function(s){
60 placeHand(second_hand, angle);
61 placeHand(second_shadow, angle, second_shadow_shift);
64 reflectTime = function(time, hold_second_hand, hold_minute_hand, hold_hour_hand){
65 if(!time) time = current_time;
66 var h = time.getHours();
67 var m = time.getMinutes();
68 var s = time.getSeconds();
69 if(!hold_hour_hand) placeHourHand(h, m, s);
70 if(!hold_minute_hand) placeMinuteHand(m, s);
71 if(!hold_second_hand) placeSecondHand(s);
72 text_time.innerHTML = dojo.date.locale.format(
73 time, {selector: "time", timePattern: "h:mm:ss a"});
76 resetTime = function(){
77 current_time = new Date();
82 current_time.setSeconds(current_time.getSeconds() + 1);
86 advanceTime = function(){
92 normalizeAngle = function(angle){
95 } else if(angle < -Math.PI) {
101 calculateAngle = function(x, y, handAngle){
103 return normalizeAngle(Math.atan2(y - center.y, x - center.x) - handAngle);
110 getSecondAngle = function(time){
111 if(!time) time = current_time;
112 return (6 * time.getSeconds() - 90) / 180 * Math.PI;
115 getMinuteAngle = function(time){
116 if(!time) time = current_time;
117 return (6 * (time.getMinutes() + time.getSeconds() / 60) - 90) / 180 * Math.PI;
120 getHourAngle = function(time){
121 if(!time) time = current_time;
122 return (30 * (time.getHours() + (time.getMinutes() + time.getSeconds() / 60) / 60) - 90) / 180 * Math.PI;
125 onMouseDown = function(evt){
126 selected_hand = evt.target;
127 diff_time.setTime(current_time.getTime());
131 onMouseMove = function(evt){
132 if(!selected_hand) return;
133 if(evt.target == second_hand.getEventSource() ||
134 evt.target == minute_hand.getEventSource() ||
135 evt.target == hour_hand.getEventSource()){
139 if(dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())){
140 var angle = calculateAngle(
141 evt.clientX - container_position.x,
142 evt.clientY - container_position.y,
143 normalizeAngle(getSecondAngle())
145 var diff = Math.round(angle / Math.PI * 180 / 6); // in whole seconds
146 current_time.setSeconds(current_time.getSeconds() + Math.round(diff));
148 }else if(dojox.gfx.equalSources(selected_hand, minute_hand.getEventSource())){
149 var angle = calculateAngle(
150 evt.clientX - container_position.x,
151 evt.clientY - container_position.y,
152 normalizeAngle(getMinuteAngle(diff_time))
154 var diff = Math.round(angle / Math.PI * 180 / 6 * 60); // in whole seconds
155 diff_time.setTime(diff_time.getTime() + 1000 * diff);
156 reflectTime(diff_time, true);
158 }else if(dojox.gfx.equalSources(selected_hand, hour_hand.getEventSource())){
159 var angle = calculateAngle(
160 evt.clientX - container_position.x,
161 evt.clientY - container_position.y,
162 normalizeAngle(getHourAngle(diff_time))
164 var diff = Math.round(angle / Math.PI * 180 / 30 * 60 * 60); // in whole seconds
165 diff_time.setTime(diff_time.getTime() + 1000 * diff);
166 reflectTime(diff_time, true, true);
173 onMouseUp = function(evt){
174 if(selected_hand && !dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())){
175 current_time.setTime(diff_time.getTime());
178 selected_hand = null;
182 makeShapes = function(){
184 container = dojo.byId("gfx_holder");
185 container_position = dojo.coords(container, true);
186 text_time = dojo.byId("time");
187 var surface = dojox.gfx.createSurface(container, 385, 385);
188 surface.createImage({width: 385, height: 385, src: "images/clock_face.jpg"});
191 var hour_hand_points = [{x: -7, y: 15}, {x: 7, y: 15}, {x: 0, y: -60}, {x: -7, y: 15}];
192 var minute_hand_points = [{x: -5, y: 15}, {x: 5, y: 15}, {x: 0, y: -100}, {x: -5, y: 15}];
193 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}];
196 hour_shadow = surface.createPolyline(hour_hand_points)
197 .setFill([0, 0, 0, 0.1])
199 hour_hand = surface.createPolyline(hour_hand_points)
200 .setStroke({color: "black", width: 2})
203 minute_shadow = surface.createPolyline(minute_hand_points)
204 .setFill([0, 0, 0, 0.1])
206 minute_hand = surface.createPolyline(minute_hand_points)
207 .setStroke({color: "black", width: 2})
210 second_shadow = surface.createPolyline(second_hand_points)
211 .setFill([0, 0, 0, 0.1])
213 second_hand = surface.createPolyline(second_hand_points)
214 .setStroke({color: "#800", width: 1})
218 // next 3 lines kill Silverlight because its nodes do not support CSS
219 //dojox.gfx._addClass(hour_hand .getEventSource(), "movable");
220 //dojox.gfx._addClass(minute_hand.getEventSource(), "movable");
221 //dojox.gfx._addClass(second_hand.getEventSource(), "movable");
223 surface.createCircle({r: 1}).setFill("black").setTransform({dx: 192.5, dy: 192.5});
226 hour_hand .connect("onmousedown", onMouseDown);
227 minute_hand.connect("onmousedown", onMouseDown);
228 second_hand.connect("onmousedown", onMouseDown);
229 dojo.connect(container, "onmousemove", onMouseMove);
230 dojo.connect(container, "onmouseup", onMouseUp);
231 dojo.connect(dojo.byId("reset"), "onclick", resetTime);
235 window.setInterval(advanceTime, 1000);
238 dojo.addOnLoad(makeShapes);
241 <style type="text/css">
242 .movable { cursor: hand; }
246 <h1>dojox.gfx: interactive analog clock</h1>
247 <p>Grab hands and set your own time.</p>
248 <p>Warning: Canvas renderer doesn't implement event handling.</p>
249 <div id="gfx_holder" style="width: 385px; height: 385px;"></div>
250 <p>Current time: <span id="time"></span>.</p>
251 <p><button id="reset">Reset</button></p>