From c55ed6a875578200888f2ae67439b50b82eb7b35 Mon Sep 17 00:00:00 2001 From: Micho Date: Tue, 21 May 2013 16:54:47 +0200 Subject: [PATCH] adding play, pause, speed --- clients/anim/index.html | 64 +++++++++++++++++++++++++++++++----- clients/anim/main.js | 51 ++++++++++++++++++++-------- clients/anim/play-pause.png | Bin 0 -> 373 bytes 3 files changed, 93 insertions(+), 22 deletions(-) create mode 100644 clients/anim/play-pause.png diff --git a/clients/anim/index.html b/clients/anim/index.html index 5c7c5dc..90437c5 100644 --- a/clients/anim/index.html +++ b/clients/anim/index.html @@ -61,29 +61,71 @@ } #slider { position: absolute; - top: 530px; - left: 60px; - width: 920px; + width: 980px; height: 50px; - border-top: 1px solid #aaa; - border-bottom: 1px solid #aaa; + top: 530px; + left: 0px; + } + #play { + top: 0px; + left: 0px; + width: 50px; + height: 50px; + background: #eee; + border: 1px solid #aaa; + font-size: 12px; + text-align: center; + line-height: 15px; + border-radius: 10px; + background-image: url(play-pause.png); + background-repeat: no-repeat; + background-position: -50px 0px; + cursor: pointer; + } + #play.pause { + background-position: 0px 0px; + } + .speed { + width: 35px; + height: 13px; + position: absolute; + background: #eee; + color: #888; + border: 1px solid #aaa; + font-size: 11px; + left: 55px; + padding-top: 1px; + top: 0px; + text-align: center; + border-radius: 5px; + cursor: pointer; + } + .speed.active { + color: #000; } #sliderWrapper { - width: 920px; + width: 883px; height: 50px; + border-radius: 10px; overflow: hidden; position: absolute; + top: 0px; + left: 95px; + border: 1px solid #aaa; + cursor: pointer; } #sliderInner { width: 6140px; height: 50px; position: relative; left: -420px; + top: 0px; } .marker { position: absolute; - left: 480px; - border-left: 3px solid rgba(0,0,0,0.5); + left: 537px; + top: 1px; + border-left: 2px solid rgba(0,0,0,0.5); height: 50px; } .hour { @@ -140,6 +182,12 @@
+
+ +
250
+
500
+
1000
+
15:00
diff --git a/clients/anim/main.js b/clients/anim/main.js index f35417f..7b10f0a 100644 --- a/clients/anim/main.js +++ b/clients/anim/main.js @@ -1,4 +1,4 @@ -var startTime = (24*1 + 9)*60; +var startTime = (24*1 + 14)*60; var minTime = (24*0 + 12)*60; var maxTime = (24*4 + 22)*60; @@ -11,8 +11,8 @@ var height = 490; var gridSize = 3; var nearFieldRadius = 30; -var timeStep = 500/1500; (250, 500, 1000) -var decay = Math.pow(0.8, 1/timeStep); +var timeStep = 1000/1500; (250, 500, 1000) +var decay = Math.pow(0.8, 5); var stepSize = 50*timeStep; var frameDuration = 40; var radius = 1.4; @@ -31,18 +31,35 @@ for (var x = -nearFieldGridRadius; x < width/gridSize+nearFieldGridRadius; x++) $(function () { init(); - start(); - //setTimeout(stop, 60000); + setSpeed(2); + startPlay(); + //update(); + setTimeout(stopPlay, 10000); }) +function setSpeed(speed) { + timeStep = Math.pow(2, speed)*125/1500; + stepSize = 50*timeStep; + stepGridRadius = Math.ceil(stepSize/gridSize); + nearFieldGridRadius = Math.ceil(nearFieldRadius/gridSize); + + $('.speed').removeClass('active'); + $('#speed'+speed).addClass('active'); +} + function init() { context = $('#canvas')[0].getContext('2d'); clients = []; data.matrix.forEach(function (times, index) { - clients[index] = {point:undefined, x:0, y:0, r:0, x0:0, y0:0, r0:0, index:index, lastEvent:0}; + clients[index] = { point:undefined, x:0, y:0, r:0, x0:0, y0:0, r0:0, index:index, lastEvent:0 }; random[index] = Math.random(); }); + $('#play').click(togglePlay); + $('#speed1').click(function () { setSpeed(1); }); + $('#speed2').click(function () { setSpeed(2); }); + $('#speed3').click(function () { setSpeed(3); }); + var index = -1; for (var time = -60; time <= (4*24+1)*60; time++) { while (data.times[index+1] <= time) index++; @@ -77,27 +94,33 @@ function init() { }) } -function start() { - if (!interval) interval = setInterval(update, frameDuration); +function startPlay() { + if (!interval) { + interval = setInterval(update, frameDuration); + $('#play').removeClass('pause'); + } } -function stop() { +function stopPlay() { if (interval) { clearInterval(interval); interval = false; + $('#play').addClass('pause'); } } +function togglePlay() { + if (interval) stopPlay(); else startPlay(); +} + function update() { currentTime += timeStep; if (currentTime > maxTime) { currentTime = maxTime; - stop(); + stopPlay(); } - if (currentTime < minTime) { - currentTime = minTime; - } + if (currentTime < minTime) currentTime = minTime; renderTime(); updateData(); @@ -113,7 +136,7 @@ function renderTime() { m = (m+100+'').substr(1); $('#timer').html('Tag '+d+' - '+h+':'+m); - $('#sliderInner').css('left', -(currentTime-8*60)); + $('#sliderInner').css('left', -(currentTime-441)); } function updateData() { diff --git a/clients/anim/play-pause.png b/clients/anim/play-pause.png new file mode 100644 index 0000000000000000000000000000000000000000..d70bb26577c8859864b83436d19a37fed4ce953b GIT binary patch literal 373 zcmeAS@N?(olHy`uVBq!ia0vp^DL`z*!3HE(nbz$CQj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS=07#PJpT^vIyZoRn~%g1Oa(v~Q?k(parsO-V1eH|@VBU)X1 z`X+SjNT@rLX_H@+7h|$GfB)r|CZVCGPBO=qH3$eead0TIvv6e&l)Pcg4BIv0j;x`Tq{TeSZCT zP31EYOGVe^sV`VRc5h!(WpDY+>PB?Z-fwzubw8d{yd?A`K|`0(|J5ZSpN=goqMs7H z+>hViBvo{3>(6H&G!*{^a7R3knqXMtv_#1Rhy#%5jtNl?wfvj(3xn)--1kuBoY*Dy zr7-zMS!q_JtlM27{U1yCKu&LI5O8wfP*ebWh3lEt0ft3_&T~#y{1pR+BZH@_pUXO@ GgeCw5v68O< literal 0 HcmV?d00001