source: Dev/trunk/src/client/dojox/gfx/demos/clock.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 7.3 KB
RevLine 
[483]1<html>
2<head>
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";
8</style>
9<script type="text/javascript" src="../../../dojo/dojo.js"></script>
10<script type="text/javascript">
11
12dojo.require("dojox.gfx");
13dojo.require("dojo.date.locale");
14
15var current_time = new Date();
16
17var hour_hand   = null;
18var minute_hand = null;
19var second_hand = null;
20
21var hour_shadow   = null;
22var minute_shadow = null;
23var second_shadow = null;
24
25var center = {x: 385 / 2, y: 385 / 2};
26
27var hour_shadow_shift   = {dx: 2, dy: 2};
28var minute_shadow_shift = {dx: 3, dy: 3};
29var second_shadow_shift = {dx: 4, dy: 4};
30
31var selected_hand = null;
32var container = null;
33var container_position = null;
34var text_time = null;
35var diff_time = new Date();
36
37placeHand = function(shape, angle, shift){
38        var move = {dx: center.x + (shift ? shift.dx : 0), dy: center.y + (shift ? shift.dy : 0)};
39        return shape.setTransform([move, dojox.gfx.matrix.rotateg(angle)]);
40};
41
42placeHourHand = function(h, m, s){
43        var angle = 30 * (h % 12 + m / 60 + s / 3600);
44        placeHand(hour_hand, angle);
45        placeHand(hour_shadow, angle, hour_shadow_shift);
46};
47
48placeMinuteHand = function(m, s){
49        var angle = 6 * (m + s / 60);
50        placeHand(minute_hand, angle);
51        placeHand(minute_shadow, angle, minute_shadow_shift);
52};
53
54placeSecondHand = function(s){
55        var angle = 6 * s;
56        placeHand(second_hand, angle);
57        placeHand(second_shadow, angle, second_shadow_shift);
58};
59
60reflectTime = function(time, hold_second_hand, hold_minute_hand, hold_hour_hand){
61        if(!time) time = current_time;
62        var h = time.getHours();
63        var m = time.getMinutes();
64        var s = time.getSeconds();
65        if(!hold_hour_hand) placeHourHand(h, m, s);
66        if(!hold_minute_hand) placeMinuteHand(m, s);
67        if(!hold_second_hand) placeSecondHand(s);
68        text_time.innerHTML = dojo.date.locale.format(
69                time, {selector: "time", timePattern: "h:mm:ss a"});
70};
71
72resetTime = function(){
73        current_time = new Date();
74        reflectTime();
75};
76
77tick = function(){
78        current_time.setSeconds(current_time.getSeconds() + 1);
79        reflectTime();
80};
81
82advanceTime = function(){
83        if(!selected_hand) {
84                tick();
85        }
86};
87
88normalizeAngle = function(angle){
89        if(angle > Math.PI) {
90                angle -= 2 * Math.PI;
91        } else if(angle < -Math.PI) {
92                angle += 2 * Math.PI;
93        }
94        return angle;
95};
96
97calculateAngle = function(x, y, handAngle){
98        try {
99                return normalizeAngle(Math.atan2(y - center.y, x - center.x) - handAngle);
100        } catch(e) {
101                // supress
102        }
103        return 0;
104};
105
106getSecondAngle = function(time){
107        if(!time) time = current_time;
108        return (6 * time.getSeconds() - 90) / 180 * Math.PI;
109};
110
111getMinuteAngle = function(time){
112        if(!time) time = current_time;
113        return (6 * (time.getMinutes() + time.getSeconds() / 60) - 90) / 180 * Math.PI;
114};
115
116getHourAngle = function(time){
117        if(!time) time = current_time;
118        return (30 * (time.getHours() + (time.getMinutes() + time.getSeconds() / 60) / 60) - 90) / 180 * Math.PI;
119};
120
121onMouseDown = function(evt){
122        selected_hand = evt.target;
123        diff_time.setTime(current_time.getTime());
124        dojo.stopEvent(evt);
125};
126
127onMouseMove = function(evt){
128        if(!selected_hand) return;
129        if(evt.target == second_hand.getEventSource() ||
130                        evt.target == minute_hand.getEventSource() ||
131                        evt.target == hour_hand.getEventSource()){
132                dojo.stopEvent(evt);
133                return;
134        }
135        if(dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())){
136                var angle = calculateAngle(
137                        evt.clientX - container_position.x,
138                        evt.clientY - container_position.y,
139                        normalizeAngle(getSecondAngle())
140                );
141                var diff = Math.round(angle / Math.PI * 180 / 6); // in whole seconds
142                current_time.setSeconds(current_time.getSeconds() + Math.round(diff));
143                reflectTime();
144        }else if(dojox.gfx.equalSources(selected_hand, minute_hand.getEventSource())){
145                var angle = calculateAngle(
146                        evt.clientX - container_position.x,
147                        evt.clientY - container_position.y,
148                        normalizeAngle(getMinuteAngle(diff_time))
149                );
150                var diff = Math.round(angle / Math.PI * 180 / 6 * 60); // in whole seconds
151                diff_time.setTime(diff_time.getTime() + 1000 * diff);
152                reflectTime(diff_time, true);
153               
154        }else if(dojox.gfx.equalSources(selected_hand, hour_hand.getEventSource())){
155                var angle = calculateAngle(
156                        evt.clientX - container_position.x,
157                        evt.clientY - container_position.y,
158                        normalizeAngle(getHourAngle(diff_time))
159                );
160                var diff = Math.round(angle / Math.PI * 180 / 30 * 60 * 60); // in whole seconds
161                diff_time.setTime(diff_time.getTime() + 1000 * diff);
162                reflectTime(diff_time, true, true);
163        }else{
164                return;
165        }
166        dojo.stopEvent(evt);
167};
168
169onMouseUp = function(evt){
170        if(selected_hand && !dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())){
171                current_time.setTime(diff_time.getTime());
172                reflectTime();
173        }
174        selected_hand = null;
175        dojo.stopEvent(evt);
176};
177
178makeShapes = function(){
179        // prerequisites
180        container = dojo.byId("gfx_holder");
181        container_position = dojo.coords(container, true);
182        text_time = dojo.byId("time");
183        var surface = dojox.gfx.createSurface(container, 385, 385);
184    surface.createImage({width: 385, height: 385, src: "images/clock_face.jpg"});
185   
186    // hand shapes
187    var hour_hand_points = [{x: -7, y: 15}, {x: 7, y: 15}, {x: 0, y: -60}, {x: -7, y: 15}];
188    var minute_hand_points = [{x: -5, y: 15}, {x: 5, y: 15}, {x: 0, y: -100}, {x: -5, y: 15}];
189    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}];
190   
191    // create shapes
192    hour_shadow = surface.createPolyline(hour_hand_points)
193                .setFill([0, 0, 0, 0.1])
194                ;
195    hour_hand = surface.createPolyline(hour_hand_points)
196                .setStroke({color: "black", width: 2})
197                .setFill("#889")
198                ;
199    minute_shadow = surface.createPolyline(minute_hand_points)
200                .setFill([0, 0, 0, 0.1])
201                ;
202    minute_hand = surface.createPolyline(minute_hand_points)
203                .setStroke({color: "black", width: 2})
204                .setFill("#ccd")
205                ;
206    second_shadow = surface.createPolyline(second_hand_points)
207                .setFill([0, 0, 0, 0.1])
208                ;
209    second_hand = surface.createPolyline(second_hand_points)
210                .setStroke({color: "#800", width: 1})
211                .setFill("#d00")
212                ;
213
214        // next 3 lines kill Silverlight because its nodes do not support CSS           
215        //dojox.gfx._addClass(hour_hand  .getEventSource(), "movable");
216        //dojox.gfx._addClass(minute_hand.getEventSource(), "movable");
217        //dojox.gfx._addClass(second_hand.getEventSource(), "movable");
218               
219        surface.createCircle({r: 1}).setFill("black").setTransform({dx: 192.5, dy: 192.5});
220       
221        // attach events
222        hour_hand  .connect("onmousedown", onMouseDown);
223        minute_hand.connect("onmousedown", onMouseDown);
224        second_hand.connect("onmousedown", onMouseDown);
225        dojo.connect(container, "onmousemove", onMouseMove);
226        dojo.connect(container, "onmouseup",   onMouseUp);
227        dojo.connect(dojo.byId("reset"), "onclick", resetTime);
228
229        // start the clock             
230        resetTime();
231        window.setInterval(advanceTime, 1000);
232};
233
234dojo.addOnLoad(makeShapes);
235
236</script>
237<style type="text/css">
238.movable { cursor: hand; }
239</style>
240</head>
241<body>
242<h1>dojox.gfx: interactive analog clock</h1>
243<p>Grab hands and set your own time.</p>
244<p>Warning: Canvas renderer doesn't implement event handling.</p>
245<div id="gfx_holder" style="width: 385px; height: 385px;"></div>
246<p>Current time: <span id="time"></span>.</p>
247<p><button id="reset">Reset</button></p>
248</body>
249</html>
Note: See TracBrowser for help on using the repository browser.