From 634ddc0736baaf09f7edbc5f8383be10df5aad4c Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 2 Feb 2011 19:01:12 -0500 Subject: [PATCH] This is getting really close. --- controllers/scrubber.js | 88 ++++++++++++++++++++++++++++++----------- controllers/slider.js | 4 +- controllers/timer.js | 23 ++++++++++- index.html | 6 +-- 4 files changed, 91 insertions(+), 30 deletions(-) diff --git a/controllers/scrubber.js b/controllers/scrubber.js index 2edd8fe..9522aff 100644 --- a/controllers/scrubber.js +++ b/controllers/scrubber.js @@ -28,10 +28,12 @@ GUI.Scrubber = function(controller, timer) { } this.controller.addChangeListener(function(newVal) { + + if (!_this.playing) { if (_this.timer.activePoint == null) { - console.log(_this, _this.timer.playhead, newVal); _this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, newVal); + _this.add(_this.timer.activePoint); _this.render(); } else { _this.timer.activePoint.value = newVal; @@ -51,6 +53,8 @@ GUI.Scrubber = function(controller, timer) { var position; var height; + var mx, pmx; + this.__defineGetter__("width", function() { return width; }); @@ -61,7 +65,6 @@ GUI.Scrubber = function(controller, timer) { controller.domElement.insertBefore(this.domElement, controller.propertyNameElement.nextSibling); - this.render = function() { // TODO: if visible ... @@ -100,7 +103,30 @@ GUI.Scrubber = function(controller, timer) { var scrub = function(e) { var t = GUI.map(e.pageX, position.left, position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth); + + _this.timer.playhead = t; + + /* + if (t < _this.timer.windowMin + _this.timer.windowWidth/5) { + _this.timer.windowMin = _this.timer.playhead -_this.timer.windowWidth/5; + } + + if (t > _this.timer.windowMin + _this.timer.windowWidth - _this.timer.windowWidth/5) { + _this.timer.windowMin = _this.timer.playhead +_this.timer.windowWidth/5-_this.timer.windowWidth; + }*/ + + } + + var dragActive = function(e) { + + mx = e.pageX; + var t = GUI.map(mx - pmx, 0, width, 0, _this.timer.windowWidth); + _this.timer.activePoint.time += t; + pmx = mx; + _this.sort(); + _this.timer.playhead += t; + } canvas.addEventListener('mousedown', function(e) { @@ -108,10 +134,13 @@ GUI.Scrubber = function(controller, timer) { _this.timer.activePoint = _this.timer.hoverPoint; _this.timer.playhead = _this.timer.activePoint.time; - + pmx = mx = e.pageX; + document.addEventListener("mousemove", dragActive, false); + } else { _this.timer.activePoint = null; + _this.timer.hoverPoint = null; scrub(e); document.body.style.cursor = "text"; document.addEventListener('mousemove', scrub, false); @@ -134,6 +163,7 @@ GUI.Scrubber = function(controller, timer) { document.addEventListener('mouseup', function() { document.body.style.cursor = "auto"; + document.removeEventListener("mousemove", dragActive, false); document.removeEventListener('mousemove', scrub, false); }, false); @@ -161,20 +191,21 @@ GUI.Scrubber = function(controller, timer) { } } - if (closestToLeft == null || closestToLeft.time > curTime) return; - - var n = closestToLeft.next; - if (n != null) { + if (closestToLeft != null && closestToLeft.time <= curTime) { - // Interpolate. - var t = GUI.map(curTime, closestToLeft.time, n.time, 0, 1); - t = closestToLeft.tween(t); - var val = GUI.map(t, 0, 1, closestToLeft.value, n.value); - _this.controller.setValue(val); + var n = closestToLeft.next; + if (n != null) { + + // Interpolate. + var t = GUI.map(curTime, closestToLeft.time, n.time, 0, 1); + t = closestToLeft.tween(t); + var val = GUI.map(t, 0, 1, closestToLeft.value, n.value); + _this.controller.setValue(val); + + } } - } else { for (var i = 0; i < _this.points.length; i++) { @@ -221,8 +252,9 @@ GUI.Scrubber = function(controller, timer) { GUI.ScrubberPoint = function(scrubber, time, value) { - var _this = this; + + var _this = this; var g = scrubber.g; var timer = scrubber.timer; @@ -243,6 +275,11 @@ GUI.ScrubberPoint = function(scrubber, time, value) { return t; }; + this.remove = function() { + scrubber.points.splice(scrubber.points.indexOf(this), 1); + scrubber.render(); + }; + this.isHovering = function(xx) { return xx >= x-rectSize/2 && xx <= x+rectSize/2; }; @@ -264,6 +301,9 @@ GUI.ScrubberPoint = function(scrubber, time, value) { this.__defineGetter__("time", function() { return time; }); + this.__defineSetter__("time", function(s) { + time = s; + }); this.render = function() { @@ -271,10 +311,20 @@ GUI.ScrubberPoint = function(scrubber, time, value) { if (x >= 0 && x <= 1) { x = Math.round(GUI.map(x, 0, 1, 0, scrubber.width)); + } else { + return; } y = scrubber.height/2; + if (scrubber.timer.activePoint == this) { + g.fillStyle = "#fff"; // + } else if (scrubber.timer.hoverPoint == this) { + g.fillStyle = "#ddd"; + } else { + g.fillStyle = "#ccc"; + } + switch (type) { case "number": @@ -297,12 +347,11 @@ GUI.ScrubberPoint = function(scrubber, time, value) { g.lineTo(x, y); g.stroke(); - } g.translate(x, y); g.rotate(Math.PI/4); - g.fillStyle = c1; + // g.fillStyle = c1; g.fillRect(-rectSize/2, -rectSize/2, rectSize, rectSize); g.restore(); @@ -311,13 +360,6 @@ GUI.ScrubberPoint = function(scrubber, time, value) { default: g.save(); g.translate(x-barSize/2, 0); - if (scrubber.timer.activePoint == this) { - g.fillStyle = "red"; // - } else if (scrubber.timer.hoverPoint == this) { - g.fillStyle = "green"; - } else { - g.fillStyle = "blue"; - } //g.fillStyle = c1; g.fillRect(0, 0, barSize/2, scrubber.height-1); //g.fillStyle = c2; diff --git a/controllers/slider.js b/controllers/slider.js index 6543293..c3a254e 100644 --- a/controllers/slider.js +++ b/controllers/slider.js @@ -17,7 +17,6 @@ GUI.Slider = function(numberController, min, max, step, initValue) { this.domElement.appendChild(this.fg); - this.__defineSetter__('value', function(e) { var pct = GUI.map(e, min, max, 0, 100); this.fg.style.width = pct+"%"; @@ -39,7 +38,6 @@ GUI.Slider = function(numberController, min, max, step, initValue) { onDrag(e); }, false); - document.addEventListener('mouseup', function(e) { _this.domElement.setAttribute('class', 'guidat-slider-bg'); _this.fg.setAttribute('class', 'guidat-slider-fg'); @@ -50,4 +48,4 @@ GUI.Slider = function(numberController, min, max, step, initValue) { this.value = initValue; -} +} \ No newline at end of file diff --git a/controllers/timer.js b/controllers/timer.js index f9a0e26..0179d66 100644 --- a/controllers/timer.js +++ b/controllers/timer.js @@ -29,6 +29,24 @@ GUI.Timer = function(gui) { return d.getTime(); } + window.addEventListener("keyup", function(e) { + switch (e.keyCode) { + case 32: + _this.playPause(); + break; + case 13: + _this.stop(); + break; + case 8: + if (_this.activePoint != null) { + _this.activePoint.remove(); + _this.activePoint = null; + } + break; + } + console.log(e.keyCode); + }, false); + this.__defineGetter__("windowMin", function() { return windowMin; }); @@ -59,6 +77,9 @@ GUI.Timer = function(gui) { this.__defineSetter__("playhead", function(t) { lastPlayhead = playhead; playhead = t; + if (playing) { + windowMin += ((playhead-windowWidth/2)-windowMin)*0.3; + } for (var i = 0; i < playListeners.length; i++) { playListeners[i].call(this, playhead, lastPlayhead); } @@ -96,10 +117,10 @@ GUI.Timer = function(gui) { } } - this.stop = function() { this.pause(); this.playhead = 0; + this.windowMin = 0; }; this.addPlayListener = function(fnc) { diff --git a/index.html b/index.html index 9b0d467..a28e560 100644 --- a/index.html +++ b/index.html @@ -49,9 +49,9 @@ .at(3000, "shit"); // Sliders with min and max - // gui.add(fizzyText, "maxSize", 0.5, 7); - //gui.add(fizzyText, "growthSpeed", 0.01, 1); - //gui.add(fizzyText, "speed", 0.1, 2); + gui.add(fizzyText, "maxSize", 0.5, 7); + gui.add(fizzyText, "growthSpeed", 0.01, 1); + gui.add(fizzyText, "speed", 0.1, 2); // Sliders with min, max and increment. gui.add(fizzyText, "noiseStrength", 10, 100, 5).