| 2150 |
mathias |
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 |
<!--
|
|
|
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>
|
|
|
12 |
-->
|
|
|
13 |
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
|
|
|
14 |
<script type="text/javascript">
|
|
|
15 |
|
|
|
16 |
dojo.require("dojox.gfx");
|
|
|
17 |
dojo.require("dojo.date.locale");
|
|
|
18 |
|
|
|
19 |
var current_time = new Date();
|
|
|
20 |
|
|
|
21 |
var hour_hand = null;
|
|
|
22 |
var minute_hand = null;
|
|
|
23 |
var second_hand = null;
|
|
|
24 |
|
|
|
25 |
var hour_shadow = null;
|
|
|
26 |
var minute_shadow = null;
|
|
|
27 |
var second_shadow = null;
|
|
|
28 |
|
|
|
29 |
var center = {x: 385 / 2, y: 385 / 2};
|
|
|
30 |
|
|
|
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};
|
|
|
34 |
|
|
|
35 |
var selected_hand = null;
|
|
|
36 |
var container = null;
|
|
|
37 |
var container_position = null;
|
|
|
38 |
var text_time = null;
|
|
|
39 |
var diff_time = new Date();
|
|
|
40 |
|
|
|
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)]);
|
|
|
44 |
};
|
|
|
45 |
|
|
|
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);
|
|
|
50 |
};
|
|
|
51 |
|
|
|
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);
|
|
|
56 |
};
|
|
|
57 |
|
|
|
58 |
placeSecondHand = function(s){
|
|
|
59 |
var angle = 6 * s;
|
|
|
60 |
placeHand(second_hand, angle);
|
|
|
61 |
placeHand(second_shadow, angle, second_shadow_shift);
|
|
|
62 |
};
|
|
|
63 |
|
|
|
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"});
|
|
|
74 |
};
|
|
|
75 |
|
|
|
76 |
resetTime = function(){
|
|
|
77 |
current_time = new Date();
|
|
|
78 |
reflectTime();
|
|
|
79 |
};
|
|
|
80 |
|
|
|
81 |
tick = function(){
|
|
|
82 |
current_time.setSeconds(current_time.getSeconds() + 1);
|
|
|
83 |
reflectTime();
|
|
|
84 |
};
|
|
|
85 |
|
|
|
86 |
advanceTime = function(){
|
|
|
87 |
if(!selected_hand) {
|
|
|
88 |
tick();
|
|
|
89 |
}
|
|
|
90 |
};
|
|
|
91 |
|
|
|
92 |
normalizeAngle = function(angle){
|
|
|
93 |
if(angle > Math.PI) {
|
|
|
94 |
angle -= 2 * Math.PI;
|
|
|
95 |
} else if(angle < -Math.PI) {
|
|
|
96 |
angle += 2 * Math.PI;
|
|
|
97 |
}
|
|
|
98 |
return angle;
|
|
|
99 |
};
|
|
|
100 |
|
|
|
101 |
calculateAngle = function(x, y, handAngle){
|
|
|
102 |
try {
|
|
|
103 |
return normalizeAngle(Math.atan2(y - center.y, x - center.x) - handAngle);
|
|
|
104 |
} catch(e) {
|
|
|
105 |
// supress
|
|
|
106 |
}
|
|
|
107 |
return 0;
|
|
|
108 |
};
|
|
|
109 |
|
|
|
110 |
getSecondAngle = function(time){
|
|
|
111 |
if(!time) time = current_time;
|
|
|
112 |
return (6 * time.getSeconds() - 90) / 180 * Math.PI;
|
|
|
113 |
};
|
|
|
114 |
|
|
|
115 |
getMinuteAngle = function(time){
|
|
|
116 |
if(!time) time = current_time;
|
|
|
117 |
return (6 * (time.getMinutes() + time.getSeconds() / 60) - 90) / 180 * Math.PI;
|
|
|
118 |
};
|
|
|
119 |
|
|
|
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;
|
|
|
123 |
};
|
|
|
124 |
|
|
|
125 |
onMouseDown = function(evt){
|
|
|
126 |
selected_hand = evt.target;
|
|
|
127 |
diff_time.setTime(current_time.getTime());
|
|
|
128 |
dojo.stopEvent(evt);
|
|
|
129 |
};
|
|
|
130 |
|
|
|
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()){
|
|
|
136 |
dojo.stopEvent(evt);
|
|
|
137 |
return;
|
|
|
138 |
}
|
|
|
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())
|
|
|
144 |
);
|
|
|
145 |
var diff = Math.round(angle / Math.PI * 180 / 6); // in whole seconds
|
|
|
146 |
current_time.setSeconds(current_time.getSeconds() + Math.round(diff));
|
|
|
147 |
reflectTime();
|
|
|
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))
|
|
|
153 |
);
|
|
|
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);
|
|
|
157 |
|
|
|
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))
|
|
|
163 |
);
|
|
|
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);
|
|
|
167 |
}else{
|
|
|
168 |
return;
|
|
|
169 |
}
|
|
|
170 |
dojo.stopEvent(evt);
|
|
|
171 |
};
|
|
|
172 |
|
|
|
173 |
onMouseUp = function(evt){
|
|
|
174 |
if(selected_hand && !dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())){
|
|
|
175 |
current_time.setTime(diff_time.getTime());
|
|
|
176 |
reflectTime();
|
|
|
177 |
}
|
|
|
178 |
selected_hand = null;
|
|
|
179 |
dojo.stopEvent(evt);
|
|
|
180 |
};
|
|
|
181 |
|
|
|
182 |
makeShapes = function(){
|
|
|
183 |
// prerequisites
|
|
|
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"});
|
|
|
189 |
|
|
|
190 |
// hand shapes
|
|
|
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}];
|
|
|
194 |
|
|
|
195 |
// create shapes
|
|
|
196 |
hour_shadow = surface.createPolyline(hour_hand_points)
|
|
|
197 |
.setFill([0, 0, 0, 0.1])
|
|
|
198 |
;
|
|
|
199 |
hour_hand = surface.createPolyline(hour_hand_points)
|
|
|
200 |
.setStroke({color: "black", width: 2})
|
|
|
201 |
.setFill("#889")
|
|
|
202 |
;
|
|
|
203 |
minute_shadow = surface.createPolyline(minute_hand_points)
|
|
|
204 |
.setFill([0, 0, 0, 0.1])
|
|
|
205 |
;
|
|
|
206 |
minute_hand = surface.createPolyline(minute_hand_points)
|
|
|
207 |
.setStroke({color: "black", width: 2})
|
|
|
208 |
.setFill("#ccd")
|
|
|
209 |
;
|
|
|
210 |
second_shadow = surface.createPolyline(second_hand_points)
|
|
|
211 |
.setFill([0, 0, 0, 0.1])
|
|
|
212 |
;
|
|
|
213 |
second_hand = surface.createPolyline(second_hand_points)
|
|
|
214 |
.setStroke({color: "#800", width: 1})
|
|
|
215 |
.setFill("#d00")
|
|
|
216 |
;
|
|
|
217 |
|
|
|
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");
|
|
|
222 |
|
|
|
223 |
surface.createCircle({r: 1}).setFill("black").setTransform({dx: 192.5, dy: 192.5});
|
|
|
224 |
|
|
|
225 |
// attach events
|
|
|
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);
|
|
|
232 |
|
|
|
233 |
// start the clock
|
|
|
234 |
resetTime();
|
|
|
235 |
window.setInterval(advanceTime, 1000);
|
|
|
236 |
};
|
|
|
237 |
|
|
|
238 |
dojo.addOnLoad(makeShapes);
|
|
|
239 |
|
|
|
240 |
</script>
|
|
|
241 |
<style type="text/css">
|
|
|
242 |
.movable { cursor: hand; }
|
|
|
243 |
</style>
|
|
|
244 |
</head>
|
|
|
245 |
<body>
|
|
|
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>
|
|
|
252 |
</body>
|
|
|
253 |
</html>
|