You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
9.6 KiB
328 lines
9.6 KiB
<html> |
|
<head> |
|
<title>dojox.gfx: interactive analog clock</title> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/themes/dijit.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
</style> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dijit._Widget"); |
|
dojo.require("dijit._Templated"); |
|
dojo.require("dojox.gfx"); |
|
dojo.require("dojo.date.locale"); |
|
dojo.declare("demo.Clock",dijit._Widget,{ |
|
|
|
time:"", |
|
|
|
img:"images/clock_face_black.jpg", |
|
|
|
postCreate:function(){ |
|
this.inherited(arguments); |
|
if(!this.time){ this.current_time = new Date(); }else{ |
|
this.current_time = this.time; |
|
} |
|
dojo.mixin(this,{ |
|
|
|
diff_time: new Date(), |
|
|
|
hour_hand:null, |
|
hour_shadow:null, |
|
hour_shadow_shift:{dx: 2, dy: 2}, |
|
|
|
minute_hand:null, |
|
minute_shadow:null, |
|
minute_shadow_shift:{dx: 3, dy: 3}, |
|
|
|
second_hand:null, |
|
second_shadow:null, |
|
second_shadow_shift:{dx: 4, dy: 4}, |
|
|
|
container_position: null |
|
|
|
}); |
|
|
|
this._setSize(); |
|
|
|
this._init(); |
|
}, |
|
|
|
_setSize:function(){ |
|
|
|
this.container_position = dojo.coords(this.domNode, true); |
|
this.mb = dojo.marginBox(this.domNode); |
|
this.center = { |
|
x: (this.mb.w / 2), |
|
y: (this.mb.h / 2) |
|
}; |
|
|
|
}, |
|
|
|
_init:function(){ |
|
|
|
this.surface = dojox.gfx.createSurface(this.domNode, this.mb.w, this.mb.h); |
|
this.group = this.surface.createGroup(); |
|
this.group.createImage({ |
|
width: this.center.x * 2, |
|
height:this.center.y * 2, |
|
src: this.img |
|
}); |
|
|
|
// hand shapes |
|
var _off = 15; |
|
var mar = ((this.mb.w / 2) - _off) * -1; |
|
var _c = mar * 0.7; // -105; |
|
var _a = mar * 0.5; //-60; |
|
var _b = mar * 0.75; // -100; |
|
var _d = mar * 0.8; // -116; |
|
var _e = mar * 0.0523; // -7ish |
|
var _f = mar * 0.042; |
|
var _g = mar * 0.01234; |
|
|
|
var hour_hand_points = [{x: _e, y: _off }, {x: _e * -1, y: _off }, {x: 0, y: _a }, {x: _e, y: _off }]; |
|
var minute_hand_points = [{x: _f, y: _off }, {x: _f * -1, y: _off }, {x: 0, y: _b }, {x: _f, y: _off }]; |
|
var second_hand_points = [ |
|
{x: _g, y: _off }, {x: _g * -1, y: _off }, {x: _g * -1, y: _c }, |
|
{x: _e * -1, y: _c }, {x: 0, y: _d }, {x: _e, y: _c }, |
|
{x: _g, y: _c }, {x: _g, y: _off } |
|
]; |
|
|
|
// create shapes |
|
this.hour_shadow = this.group.createPolyline(hour_hand_points) |
|
.setFill([0, 0, 0, 0.1]) |
|
; |
|
this.hour_hand = this.group.createPolyline(hour_hand_points) |
|
.setStroke({color: "black", width: 2}) |
|
.setFill("#889") |
|
; |
|
this.minute_shadow = this.group.createPolyline(minute_hand_points) |
|
.setFill([0, 0, 0, 0.1]) |
|
; |
|
this.minute_hand = this.group.createPolyline(minute_hand_points) |
|
.setStroke({color: "black", width: 2}) |
|
.setFill("#ccd") |
|
; |
|
this.second_shadow = this.group.createPolyline(second_hand_points) |
|
.setFill([0, 0, 0, 0.1]) |
|
; |
|
this.second_hand = this.group.createPolyline(second_hand_points) |
|
.setStroke({color: "#800", width: 1}) |
|
.setFill("#d00") |
|
; |
|
|
|
this.group.createCircle({r: 1}).setFill("black").setTransform({dx: this.center.x, dy: this.center.y }); |
|
|
|
// start the clock |
|
this.resetTime(); |
|
|
|
window.setInterval(dojo.hitch(this,"advanceTime"), 1000); |
|
}, |
|
|
|
placeHand: function(shape, angle, shift){ |
|
var move = {dx: this.center.x + (shift ? shift.dx : 0), dy: this.center.y + (shift ? shift.dy : 0)}; |
|
return shape.setTransform([move, dojox.gfx.matrix.rotateg(angle)]); |
|
}, |
|
|
|
placeHourHand: function(h, m, s){ |
|
var angle = 30 * (h % 12 + m / 60 + s / 3600); |
|
this.placeHand(this.hour_hand, angle); |
|
this.placeHand(this.hour_shadow, angle, this.hour_shadow_shift); |
|
}, |
|
|
|
placeMinuteHand: function(m, s){ |
|
var angle = 6 * (m + s / 60); |
|
this.placeHand(this.minute_hand, angle); |
|
this.placeHand(this.minute_shadow, angle, this.minute_shadow_shift); |
|
}, |
|
|
|
placeSecondHand:function(s){ |
|
var angle = 6 * s; |
|
this.placeHand(this.second_hand, angle); |
|
this.placeHand(this.second_shadow, angle, this.second_shadow_shift); |
|
}, |
|
|
|
reflectTime: function(time, hold_second_hand, hold_minute_hand, hold_hour_hand){ |
|
if(!time){ time = this.current_time; } |
|
var h = time.getHours(); |
|
var m = time.getMinutes(); |
|
var s = time.getSeconds(); |
|
|
|
if(!hold_hour_hand) this.placeHourHand(h, m, s); |
|
if(!hold_minute_hand) this.placeMinuteHand(m, s); |
|
if(!hold_second_hand) this.placeSecondHand(s); |
|
|
|
this.text_time = dojo.date.locale.format( |
|
time, {selector: "time", timePattern: "h:mm:ss a"} |
|
); |
|
}, |
|
|
|
resetTime: function(){ |
|
this.current_time = new Date(); |
|
this.reflectTime(); |
|
}, |
|
|
|
tick: function(){ |
|
this.current_time.setSeconds(this.current_time.getSeconds()+1); |
|
this.reflectTime(); |
|
}, |
|
|
|
advanceTime: function(){ |
|
if(!this.selected_hand){ |
|
this.tick(); |
|
} |
|
}, |
|
|
|
normalizeAngle: function(angle){ |
|
if(angle > Math.PI) { |
|
angle -= 2 * Math.PI; |
|
} else if(angle < -Math.PI) { |
|
angle += 2 * Math.PI; |
|
} |
|
return angle; |
|
}, |
|
|
|
calculateAngle: function(x, y, handAngle){ |
|
try { |
|
return this.normalizeAngle(Math.atan2(y - this.center.y, x - this.center.x) - handAngle); |
|
}catch(e){ /* suppress */ } |
|
return 0; |
|
}, |
|
|
|
getSecondAngle: function(time){ |
|
if(!time) time = this.current_time; |
|
return (6 * time.getSeconds() - 90) / 180 * Math.PI; |
|
}, |
|
|
|
getMinuteAngle: function(time){ |
|
if(!time) time = this.current_time; |
|
return (6 * (time.getMinutes() + time.getSeconds() / 60) - 90) / 180 * Math.PI; |
|
}, |
|
|
|
getHourAngle: function(time){ |
|
if(!time) time = this.current_time; |
|
return (30 * (time.getHours() + (time.getMinutes() + time.getSeconds() / 60) / 60) - 90) / 180 * Math.PI; |
|
}, |
|
|
|
resize: function(size){ |
|
this.surface.setDimensions(size.w, size.h); |
|
this.group.setTransform(dojox.gfx.matrix.scale(size.w/this.mb.w, size.h/this.mb.h)); |
|
this._setSize(); |
|
} |
|
|
|
}); |
|
|
|
dojo.declare("demo.InteractiveClock",demo.Clock,{ |
|
|
|
_init: function(){ |
|
this.inherited(arguments); |
|
// attach events |
|
this.diff_time = new Date(); |
|
this.hour_hand .connect("onmousedown", this,"onMouseDown"); |
|
this.minute_hand.connect("onmousedown", this,"onMouseDown"); |
|
this.second_hand.connect("onmousedown", this,"onMouseDown"); |
|
this.connect(this.domNode, "onmousemove", "onMouseMove"); |
|
this.connect(this.domNode, "onmouseup", "onMouseUp"); |
|
|
|
}, |
|
|
|
onMouseDown: function(evt){ |
|
this.selected_hand = evt.target; |
|
this.diff_time.setTime(this.current_time.getTime()); |
|
dojo.stopEvent(evt); |
|
}, |
|
|
|
onMouseMove: function(evt){ |
|
if(!this.selected_hand) return; |
|
if(evt.target == this.second_hand.getEventSource() || |
|
evt.target == this.minute_hand.getEventSource() || |
|
evt.target == this.hour_hand.getEventSource()){ |
|
dojo.stopEvent(evt); |
|
return; |
|
} |
|
if(dojox.gfx.equalSources(this.selected_hand, this.second_hand.getEventSource())){ |
|
var angle = this.calculateAngle( |
|
evt.clientX - this.container_position.x, |
|
evt.clientY - this.container_position.y, |
|
this.normalizeAngle(this.getSecondAngle()) |
|
); |
|
var diff = Math.round(angle / Math.PI * 180 / 6); // in whole seconds |
|
this.current_time.setSeconds(this.current_time.getSeconds() + Math.round(diff)); |
|
this.reflectTime(); |
|
}else if(dojox.gfx.equalSources(this.selected_hand, this.minute_hand.getEventSource())){ |
|
var angle = this.calculateAngle( |
|
evt.clientX - this.container_position.x, |
|
evt.clientY - this.container_position.y, |
|
this.normalizeAngle(this.getMinuteAngle(this.diff_time)) |
|
); |
|
var diff = Math.round(angle / Math.PI * 180 / 6 * 60); // in whole seconds |
|
this.diff_time.setTime(this.diff_time.getTime() + 1000 * diff); |
|
this.reflectTime(this.diff_time, true); |
|
|
|
}else if(dojox.gfx.equalSources(this.selected_hand, this.hour_hand.getEventSource())){ |
|
var angle = this.calculateAngle( |
|
evt.clientX - this.container_position.x, |
|
evt.clientY - this.container_position.y, |
|
this.normalizeAngle(this.getHourAngle(this.diff_time)) |
|
); |
|
var diff = Math.round(angle / Math.PI * 180 / 30 * 60 * 60); // in whole seconds |
|
this.diff_time.setTime(this.diff_time.getTime() + 1000 * diff); |
|
this.reflectTime(this.diff_time, true, true); |
|
}else{ |
|
return; |
|
} |
|
dojo.stopEvent(evt); |
|
}, |
|
|
|
onMouseUp:function(evt){ |
|
if(this.selected_hand && !dojox.gfx.equalSources(this.selected_hand, this.second_hand.getEventSource())){ |
|
this.current_time.setTime(this.diff_time.getTime()); |
|
this.reflectTime(); |
|
} |
|
this.selected_hand = null; |
|
dojo.stopEvent(evt); |
|
} |
|
}); |
|
dojo.require("dijit.form.Button"); |
|
dojo.addOnLoad(function(){ |
|
var n = dojo.doc.createElement('div'); |
|
dojo.body().appendChild(n); |
|
dojo.style(n,{ |
|
height:"200px", width:"200px", |
|
border:"5px solid #ededed" |
|
}); |
|
new demo.Clock({},n); |
|
}); |
|
|
|
</script> |
|
<style type="text/css"> |
|
.movable { cursor: hand; } |
|
</style> |
|
</head> |
|
<body> |
|
<h1>dojox.gfx: interactive analog clock</h1> |
|
<p>Grab hands and set your own time.</p> |
|
<p>Warning: Canvas renderer doesn't implement event handling.</p> |
|
|
|
<button dojoType="dijit.form.Button"> |
|
Resize |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dijit.byId("one").resize({ w:250, h:250 }); |
|
</script> |
|
</button> |
|
|
|
<hr noshade size="0" /> |
|
|
|
<div class="dijitInline" dojoType="demo.Clock" id="gfx_holder" style="width: 300px; height: 300px;"></div> |
|
<div class="dijitInline" img="images/clock_face.jpg" dojoType="demo.InteractiveClock" style="width: 225px; height: 225px;"></div> |
|
<div class="dijitInline" id="one" dojoType="demo.Clock" style="width: 150px; height: 150px;"></div> |
|
<div class="dijitInline" dojoType="demo.Clock" style="width: 75px; height: 75px;"></div> |
|
|
|
<hr noshade size="0" /> |
|
|
|
|
|
|
|
|
|
</body> |
|
</html>
|
|
|