Use Syndicate.Timer in SVG example
This commit is contained in:
parent
6ba9b402ec
commit
23f269fba6
|
@ -1,30 +1,24 @@
|
||||||
var DOM = Syndicate.DOM.DOM;
|
var DOM = Syndicate.DOM.DOM;
|
||||||
var jQueryEvent = Syndicate.JQuery.jQueryEvent;
|
|
||||||
|
|
||||||
assertion type time(value);
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
ground dataspace G {
|
ground dataspace G {
|
||||||
Syndicate.JQuery.spawnJQueryDriver();
|
|
||||||
Syndicate.DOM.spawnDOMDriver();
|
Syndicate.DOM.spawnDOMDriver();
|
||||||
|
Syndicate.Timer.spawnTimerDriver();
|
||||||
|
|
||||||
actor {
|
actor {
|
||||||
setInterval(Syndicate.Dataspace.wrap(function () {
|
|
||||||
:: time(+(new Date()));
|
|
||||||
}), 1000);
|
|
||||||
|
|
||||||
react {
|
react {
|
||||||
on message time($now) {
|
|
||||||
this.angle = (((now / 1000) % 60) / 60) * 2 * Math.PI;
|
|
||||||
this.handX = 50 + 40 * Math.cos(this.angle);
|
|
||||||
this.handY = 50 + 40 * Math.sin(this.angle);
|
|
||||||
}
|
|
||||||
assert DOM('#clock', 'clock',
|
assert DOM('#clock', 'clock',
|
||||||
'<svg width="300px" viewBox="0 0 100 100">'+
|
'<svg width="300px" viewBox="0 0 100 100">'+
|
||||||
'<circle fill="#0B79CE" r=45 cx=50 cy=50/>'+
|
'<circle fill="#0B79CE" r=45 cx=50 cy=50/>'+
|
||||||
'<line stroke="#023963" x1=50 y1=50 x2='+this.handX+' y2='+this.handY+' />'+
|
'<line stroke="#023963" x1=50 y1=50 x2='+this.handX+' y2='+this.handY+' />'+
|
||||||
'</svg>')
|
'</svg>')
|
||||||
when (typeof this.angle === 'number');
|
when (typeof this.angle === 'number');
|
||||||
|
|
||||||
|
on message Syndicate.Timer.periodicTick(1000) {
|
||||||
|
this.angle = ((((Date.now() / 1000) % 60) / 60) - 0.25) * 2 * Math.PI;
|
||||||
|
this.handX = 50 + 40 * Math.cos(this.angle);
|
||||||
|
this.handY = 50 + 40 * Math.sin(this.angle);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue