git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/gfx/demos/clock_black.html

   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_black.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>