From 70c5c0447d9b778440368adfd6deb23a32b140d8 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Mon, 31 Jan 2011 23:02:22 -0500 Subject: [PATCH 01/19] Just a non-functioning little mock ;) --- controllers/controller.js | 5 +++++ gui.css | 28 ++++++++++++++++++---------- gui.js | 7 +++---- index.html | 4 +--- 4 files changed, 27 insertions(+), 17 deletions(-) diff --git a/controllers/controller.js b/controllers/controller.js index c785d53..be4510c 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -14,6 +14,11 @@ var Controller = function() { this.name(this.propertyName); this.domElement.appendChild(this.propertyNameElement); + this.timeElement = document.createElement('div'); + this.timeElement.setAttribute('class', 'guidat-time'); + this.domElement.appendChild(this.timeElement); + + GUI.makeUnselectable(this.domElement); }; diff --git a/gui.css b/gui.css index d33d588..c48caa1 100644 --- a/gui.css +++ b/gui.css @@ -1,10 +1,10 @@ #guidat { position: fixed; - top: 0; - right: 0; - width: auto; + bottom: 0; + width: 100%; + left: 0; + z-index: 1001; - text-align: right; } .guidat * { @@ -12,13 +12,21 @@ margin: 0px; } +.guidat-time { +width: 75%; +float: right; +margin-top: -3px; +margin-right: -2px; +margin-left: 3px; +background-color: #555; +border-bottom: 1px solid #666; +height: 31px; +} + .guidat { color: #fff; opacity: 0.97; text-align: left; - float: right; - margin-right: 20px; - margin-bottom: 20px; background-color: #fff; } @@ -105,7 +113,7 @@ a.guidat-toggle:hover { border: 0; color: #1ed36f; margin-right: 2px; -width: 148px; + width: 10.5%; } .guidat-controller.boolean { @@ -117,7 +125,7 @@ width: 148px; } .guidat-controller.number input[type=text] { - width: 35px; + width: 3%; margin-left: 5px; margin-right: 2px; color: #00aeff; @@ -157,7 +165,7 @@ width: 148px; .guidat-slider-bg { background-color: #222; cursor: ew-resize; - width: 40%; + width: 7%; margin-top: 2px; float: right; height: 21px; diff --git a/gui.js b/gui.js index 326ed84..cb9cffd 100644 --- a/gui.js +++ b/gui.js @@ -23,7 +23,6 @@ var GUI = function() { var _this = this; var open = false; - var width = 280; // Prevents checkForOverflow bug in which loaded gui appearance // settings are not respected by presence of scrollbar. @@ -37,7 +36,7 @@ var GUI = function() { this.domElement = document.createElement('div'); this.domElement.setAttribute('class', 'guidat'); - this.domElement.style.width = width+'px'; + this.domElement.style.width = "100%";//width+'px'; var controllerContainer = document.createElement('div'); controllerContainer.setAttribute('class', 'guidat-controllers'); @@ -112,7 +111,7 @@ var GUI = function() { curControllerContainerHeight += dmy; controllerContainer.style.height = openHeight+'px'; width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH); - _this.domElement.style.width = width+'px'; + //_this.domElement.style.width = width+'px'; checkForOverflow(); }; @@ -444,7 +443,7 @@ var GUI = function() { width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]); - _this.domElement.style.width = width+"px"; + //_this.domElement.style.width = width+"px"; openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]); explicitOpenHeight = true; diff --git a/index.html b/index.html index 00632bf..783b71f 100644 --- a/index.html +++ b/index.html @@ -40,12 +40,10 @@ var fizzyText = new FizzyText("gui-dat"); var gui = new GUI(); - var gui2 = new GUI(); - + // Text field gui.add(fizzyText, "message"); - gui2.add(window, "onload"); // Sliders with min and max gui.add(fizzyText, "maxSize", 0.5, 7); From de420197e1fcba23f6990b0d6b4d6e80a3bcac25 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Tue, 1 Feb 2011 13:00:08 -0500 Subject: [PATCH 02/19] playback --- gui.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gui.css b/gui.css index c48caa1..5ba1d17 100644 --- a/gui.css +++ b/gui.css @@ -18,8 +18,8 @@ float: right; margin-top: -3px; margin-right: -2px; margin-left: 3px; -background-color: #555; -border-bottom: 1px solid #666; +background-color: #333; +border-bottom: 1px solid #444; height: 31px; } From 5be42748bdd1ca3a6e7801f8fd6208ce14638b31 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 2 Feb 2011 13:12:55 -0500 Subject: [PATCH 03/19] Now we have a FUNCTIONING mock :) --- controllers/controller.boolean.js | 9 +- controllers/controller.function.js | 7 +- controllers/controller.js | 23 ++- controllers/controller.number.js | 28 ++- controllers/controller.string.js | 7 +- controllers/scrubber.js | 278 +++++++++++++++++++++++++++++ controllers/slider.js | 2 +- demo/demo.css | 6 +- gui-bare.css | 26 --- gui.css | 21 ++- gui.js | 88 +++++---- index.html | 259 +++------------------------ 12 files changed, 410 insertions(+), 344 deletions(-) create mode 100644 controllers/scrubber.js delete mode 100644 gui-bare.css diff --git a/controllers/controller.boolean.js b/controllers/controller.boolean.js index 8c52605..66808ca 100644 --- a/controllers/controller.boolean.js +++ b/controllers/controller.boolean.js @@ -1,7 +1,7 @@ -var BooleanController = function() { +GUI.BooleanController = function() { this.type = "boolean"; - Controller.apply(this, arguments); + GUI.Controller.apply(this, arguments); var _this = this; var input = document.createElement('input'); @@ -32,9 +32,8 @@ var BooleanController = function() { val = eval(val); } catch (e) {} } - return Controller.prototype.setValue.call(this, val); + return GUI.Controller.prototype.setValue.call(this, val); } }; -BooleanController.prototype = new Controller(); -BooleanController.prototype.constructor = BooleanController; +GUI.extendController(GUI.BooleanController); \ No newline at end of file diff --git a/controllers/controller.function.js b/controllers/controller.function.js index c95c5ec..bf17507 100644 --- a/controllers/controller.function.js +++ b/controllers/controller.function.js @@ -1,12 +1,11 @@ -var FunctionController = function() { +GUI.FunctionController = function() { this.type = "function"; var that = this; - Controller.apply(this, arguments); + GUI.Controller.apply(this, arguments); this.domElement.addEventListener('click', function() { that.object[that.propertyName].call(that.object); }, false); this.domElement.style.cursor = "pointer"; this.propertyNameElement.style.cursor = "pointer"; }; -FunctionController.prototype = new Controller(); -FunctionController.prototype.constructor = FunctionController; +GUI.extendController(GUI.FunctionController); diff --git a/controllers/controller.js b/controllers/controller.js index be4510c..d5b4047 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -1,4 +1,4 @@ -var Controller = function() { +GUI.Controller = function() { this.parent = arguments[0]; this.object = arguments[1]; @@ -14,38 +14,35 @@ var Controller = function() { this.name(this.propertyName); this.domElement.appendChild(this.propertyNameElement); - this.timeElement = document.createElement('div'); - this.timeElement.setAttribute('class', 'guidat-time'); - this.domElement.appendChild(this.timeElement); GUI.makeUnselectable(this.domElement); }; -Controller.prototype.changeFunction = null; +GUI.Controller.prototype.changeFunction = null; -Controller.prototype.name = function(n) { +GUI.Controller.prototype.name = function(n) { this.propertyNameElement.innerHTML = n; return this; }; -Controller.prototype.reset = function() { +GUI.Controller.prototype.reset = function() { this.setValue(this.initialValue); return this; }; -Controller.prototype.listen = function() { +GUI.Controller.prototype.listen = function() { this.parent.listenTo(this); return this; } -Controller.prototype.unlisten = function() { +GUI.Controller.prototype.unlisten = function() { this.parent.unlistenTo(this); // <--- hasn't been tested yet return this; } -Controller.prototype.setValue = function(n) { +GUI.Controller.prototype.setValue = function(n) { this.object[this.propertyName] = n; if (this.changeFunction != null) { this.changeFunction.call(this, n); @@ -56,13 +53,13 @@ Controller.prototype.setValue = function(n) { return this; } -Controller.prototype.getValue = function() { +GUI.Controller.prototype.getValue = function() { return this.object[this.propertyName]; } -Controller.prototype.updateDisplay = function() {} +GUI.Controller.prototype.updateDisplay = function() {} -Controller.prototype.onChange = function(fnc) { +GUI.Controller.prototype.onChange = function(fnc) { this.changeFunction = fnc; return this; } diff --git a/controllers/controller.number.js b/controllers/controller.number.js index 3f8e3fb..4c8dcaa 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -1,8 +1,8 @@ -var NumberController = function() { +GUI.NumberController = function() { this.type = "number"; - Controller.apply(this, arguments); + GUI.Controller.apply(this, arguments); var _this = this; @@ -16,7 +16,22 @@ var NumberController = function() { var min = arguments[3]; var max = arguments[4]; - var step = arguments[5]; + var step = arguments[5]; + + this.step = function(s) { + step = s; + return this; + } + + this.min = function(s) { + min = s; + return this; + } + + this.max = function(s) { + max = s; + return this; + } if (!step) { if (min != undefined && max != undefined) { @@ -38,7 +53,7 @@ var NumberController = function() { var slider; if (min != undefined && max != undefined) { - slider = new Slider(this, min, max, step, this.getValue()); + slider = new GUI.Slider(this, min, max, step, this.getValue()); this.domElement.appendChild(slider.domElement); } @@ -121,7 +136,7 @@ var NumberController = function() { val = max; } - return Controller.prototype.setValue.call(this, val); + return GUI.Controller.prototype.setValue.call(this, val); } @@ -131,5 +146,4 @@ var NumberController = function() { } }; -NumberController.prototype = new Controller(); -NumberController.prototype.constructor = NumberController; +GUI.extendController(GUI.NumberController); diff --git a/controllers/controller.string.js b/controllers/controller.string.js index 57cb832..d29804d 100644 --- a/controllers/controller.string.js +++ b/controllers/controller.string.js @@ -1,9 +1,9 @@ -var StringController = function() { +GUI.StringController = function() { this.type = "string"; var _this = this; - Controller.apply(this, arguments); + GUI.Controller.apply(this, arguments); var input = document.createElement('input'); @@ -30,5 +30,4 @@ var StringController = function() { }; -StringController.prototype = new Controller(); -StringController.prototype.constructor = StringController; +GUI.extendController(GUI.StringController); \ No newline at end of file diff --git a/controllers/scrubber.js b/controllers/scrubber.js new file mode 100644 index 0000000..8ea11cc --- /dev/null +++ b/controllers/scrubber.js @@ -0,0 +1,278 @@ +// Would really love to make it so that as FEW changes as possible are required to gui.js in order to make this work. Would love to make it so you simply include gui.scrubber.min.js in addition to gui.min.js. + +GUI.Controller.prototype.at = function(when, what, tween) { + + this.scrubber.addPoint(new GUI.ScrubberPoint(this.scrubber, when, what)); + this.scrubber.render(); + return this; + +} + +GUI.Scrubber = function(controller, timer) { + + var _this = this; + + var points = []; + this.timer = timer; + this.controller = controller; + this.controller.scrubber = this; + + + this.domElement = document.createElement('div'); + this.domElement.setAttribute('class', 'guidat-time'); + + var canvas = document.createElement('canvas'); + this.domElement.appendChild(canvas); + + this.g = canvas.getContext('2d'); + + var width; + var height; + + this.__defineGetter__("width", function() { + return width; + }); + + this.__defineGetter__("height", function() { + return height; + }); + + controller.domElement.insertBefore(this.domElement, controller.propertyNameElement.nextSibling); + + + this.addPoint = function(point) { + points.push(point); + points.sort(function(a,b) { + return a.time - b.time; + }); + } + + + + this.render = function() { + + // TODO: if visible ... + _this.g.clearRect(0, 0, width, height); + + for (var i in points) { + points[i].render(); + } + + // Draw playhead + + _this.g.strokeStyle = "red"; + var t = Math.round(GUI.map(_this.timer.playhead, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth, 0, width))+0.5; + _this.g.beginPath(); + _this.g.moveTo(t, 0); + _this.g.lineTo(t, height); + _this.g.stroke(); + + } + + this.render(); + + var onResize = function() { + canvas.width = width = _this.domElement.offsetWidth; + canvas.height = height = _this.domElement.offsetHeight; + _this.render(); + }; + + window.addEventListener('resize', function(e) { + onResize(); + }, false); + + onResize(); + + this.timer.addPlayListener(this.render); + + var onPlayChange = function(curTime, prevTime) { + + // This assumes a SORTED point array + // And a PROGRESSING/INCREASING/GROWING playhead + for (var i = 0; i < points.length; i++) { + var cur = points[i]; + + if (cur.time < prevTime) { + continue; + } + + if (cur.time >= prevTime && cur.time <= curTime) { + pointHandlers[_this.controller.type].call(_this, cur); + } + + } + + }; + + var pointHandlers = { + + 'function': function(point) { + this.controller.getValue().call(this); + }, + + 'boolean': function(point) { + this.controller.setValue(point.value); + }, + + 'string': function(point) { + this.controller.setValue(point.value); + }, + + 'number': function(point) { + // + } + + } + + this.timer.addPlayListener(onPlayChange); + + this.timer.addWindowListener(this.render); + + +}; + +GUI.ScrubberPoint = function(scrubber, time, value) { + + var _this = this; + + var g = scrubber.g; + var timer = scrubber.timer; + this.value = value; + var rectSize = 4; + + this.__defineGetter__("time", function() { + return time; + }); + + this.render = function() { + + var x = GUI.map(time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1); + + if (x >= 0 && x <= 1) { + x = Math.round(GUI.map(x, 0, 1, 0, scrubber.width)); + } + + g.save(); + g.translate(x-rectSize/2, 0); + g.fillStyle = "#ffd800"; + g.fillRect(0, 0, rectSize/2, scrubber.height-1); + g.fillStyle = "#ff9000"; + g.fillRect(rectSize/2, 0, rectSize/2, scrubber.height-1); + g.restore(); + + } + +} + +GUI.Timer = function(gui) { + + var _this = this; + + this.gui = gui; + this.gui.timer = this; + + var playhead = 0; + var lastPlayhead = 0; + var playListeners = []; + var windowListeners = []; + + var windowMin = 0; + var windowWidth = 10000; + + var thisTime; + var lastTime; + + var playInterval = -1; + var playResolution = 1000/60; + + var playing = false; + + var millis = function() { + var d = new Date(); + return d.getTime(); + } + + this.__defineGetter__("windowMin", function() { + return windowMin; + }); + + this.__defineSetter__("windowMin", function(v) { + windowMin = v; + for (var i in windowListeners) { + windowListeners[i].call(windowListeners[i]); + } + }); + + this.__defineGetter__("windowWidth", function() { + return windowWidth; + }); + + + this.__defineSetter__("windowWidth", function(v) { + windowWidth = v; + for (var i in windowListeners) { + windowListeners[i].call(windowListeners[i]); + } + }); + + this.__defineGetter__("playhead", function() { + return playhead; + }); + + this.__defineSetter__("playhead", function(t) { + lastPlayhead = playhead; + playhead = t; + for (var i = 0; i < playListeners.length; i++) { + playListeners[i].call(this, playhead, lastPlayhead); + } + }); + + this.__defineGetter__("playing", function() { + return playing; + }); + + this.play = function() { + playing = true; + lastTime = millis(); + if (playInterval == -1) { + playInterval = setInterval(this.update, playResolution); + } + }; + + this.update = function() { + thisTime = millis(); + _this.playhead = _this.playhead + (thisTime - lastTime); + lastTime = thisTime; + }; + + this.pause = function() { + playing = false; + clearInterval(playInterval); + playInterval = -1; + }; + + this.playPause = function() { + if (playing) { + this.pause(); + } else { + this.play(); + } + } + + + this.stop = function() { + this.pause(); + this.playhead = 0; + }; + + this.addPlayListener = function(fnc) { + playListeners.push(fnc); + }; + + this.addWindowListener = function(fnc) { + windowListeners.push(fnc); + }; + + + +} \ No newline at end of file diff --git a/controllers/slider.js b/controllers/slider.js index ee2902e..9c7c28e 100644 --- a/controllers/slider.js +++ b/controllers/slider.js @@ -1,4 +1,4 @@ -var Slider = function(numberController, min, max, step, initValue) { +GUI.Slider = function(numberController, min, max, step, initValue) { var min = min; var max = max; diff --git a/demo/demo.css b/demo/demo.css index 966a9ad..9e5ce3d 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -66,10 +66,6 @@ div.collapsed h2, div.expanded h2 { width: 100%; cursor: pointer; } -h2.last { -border-bottom: 1px dotted #ccc; -margin-bottom: 20px; -} div.expanded h2:before { content: '-'; @@ -162,10 +158,12 @@ a:active { } footer { +margin-top: 20px; background-color: #eee; width: 510px; padding: 10px; clear: both; + color: #444; } diff --git a/gui-bare.css b/gui-bare.css deleted file mode 100644 index a61a1f2..0000000 --- a/gui-bare.css +++ /dev/null @@ -1,26 +0,0 @@ -#guidat { - position: fixed; - width: 250px; - z-index: 200; - top: 0; - left: 100%; - margin-left: -270px; -} - -#guidat-controllers { - height: 300px; - overflow-y: auto; -} - -#guidat-toggle { - cursor: pointer; -} - -.guidat-controller { - clear: both; -} - -.guidat-controller input { - float: right; - clear: both; -} diff --git a/gui.css b/gui.css index 5ba1d17..db30521 100644 --- a/gui.css +++ b/gui.css @@ -13,14 +13,14 @@ } .guidat-time { -width: 75%; -float: right; -margin-top: -3px; -margin-right: -2px; -margin-left: 3px; -background-color: #333; -border-bottom: 1px solid #444; -height: 31px; + width: 75%; + float: right; + margin-top: -3px; + margin-right: -2px; + margin-left: 3px; + background-color: #333; + border-bottom: 1px solid #444; + height: 31px; } .guidat { @@ -47,6 +47,11 @@ height: 31px; */ } +.guidat-controllers hr { +height: 0; +border-top: 1px solid #000; +} + a.guidat-toggle { text-decoration: none; cursor: pointer; diff --git a/gui.js b/gui.js index cb9cffd..a8b4c93 100644 --- a/gui.js +++ b/gui.js @@ -17,9 +17,6 @@ var GUI = function() { var curControllerContainerHeight = 0; - // How big we get when we open - - var _this = this; var open = false; @@ -27,6 +24,8 @@ var GUI = function() { // Prevents checkForOverflow bug in which loaded gui appearance // settings are not respected by presence of scrollbar. var explicitOpenHeight = false; + + // How big we get when we open var openHeight; var name; @@ -41,7 +40,10 @@ var GUI = function() { var controllerContainer = document.createElement('div'); controllerContainer.setAttribute('class', 'guidat-controllers'); - // Firefox hack for horizontal scrolling + // For use with GUIScrubber + this.timer = null; + + // Firefox hack to prevent horizontal scrolling controllerContainer.addEventListener('DOMMouseScroll', function(e) { var scrollAmount = this.scrollTop; @@ -80,19 +82,17 @@ var GUI = function() { my = e.pageY; mx = e.pageX; - var dmy = my - pmy; - - - if (!open) { - if (dmy > 0) { - open = true; - curControllerContainerHeight = openHeight = 1; - toggleButton.innerHTML = name || "Hide Controls"; - } else { - return; + var dmy = pmy-my; + + if (!open) { + if (dmy < 0) { + open = true; + curControllerContainerHeight = openHeight = 1; + toggleButton.innerHTML = name || "Hide Controls"; + } else { + return; + } } - } - // TODO: Flip this if you want to resize to the left. var dmx = pmx - mx; @@ -107,7 +107,7 @@ var GUI = function() { dragDisplacementY += dmy; dragDisplacementX += dmx; openHeight += dmy; - width += dmx; + //width += dmx; curControllerContainerHeight += dmy; controllerContainer.style.height = openHeight+'px'; width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH); @@ -141,9 +141,9 @@ var GUI = function() { _this.toggle(); // Clears lingering slider column - _this.domElement.style.width = (width+1)+'px'; + // _this.domElement.style.width = (width+1)+'px'; setTimeout(function() { - _this.domElement.style.width = width+'px'; + // _this.domElement.style.width = width+'px'; }, 1); } @@ -194,8 +194,8 @@ var GUI = function() { }, false); - this.domElement.appendChild(controllerContainer); this.domElement.appendChild(toggleButton); + this.domElement.appendChild(controllerContainer); if (GUI.autoPlace) { if(GUI.autoPlaceContainer == null) { @@ -259,13 +259,6 @@ var GUI = function() { this.autoListen = true; - var handlerTypes = { - "number": NumberController, - "string": StringController, - "boolean": BooleanController, - "function": FunctionController - }; - var alreadyControlled = function(object, propertyName) { for (var i in controllers) { if (controllers[i].object == object && @@ -284,10 +277,22 @@ var GUI = function() { F.prototype = constructor.prototype; return new F(); }; + + this.divider = function() { + controllerContainer.appendChild(document.createElement('hr')); + } this.add = function() { - + var object = arguments[0]; + + if (arguments.length == 1) { + for (var i in object) { + this.add(object, i); + } + return; + } + var propertyName = arguments[1]; // Have we already added this? @@ -347,6 +352,10 @@ var GUI = function() { openHeight = controllerHeight; } + if (this.timer != null) { + new GUI.Scrubber(controllerObject, this.timer); + } + return controllerObject; } @@ -361,14 +370,13 @@ var GUI = function() { } else { controllerContainer.style.overflowY = "hidden"; } - // console.log(controllerHeight, openHeight); } - var addHandlers = { - "number": NumberController, - "string": StringController, - "boolean": BooleanController, - "function": FunctionController + var handlerTypes = { + "number": GUI.NumberController, + "string": GUI.StringController, + "boolean": GUI.BooleanController, + "function": GUI.FunctionController }; var alreadyControlled = function(object, propertyName) { @@ -390,7 +398,7 @@ var GUI = function() { }; this.reset = function() { - // + // TODO } // GUI ... GUI @@ -485,10 +493,8 @@ GUI.saveURL = function() { GUI.scrollTop = -1; -// TODO: Not working in FF. GUI.load = function(saveString) { - //GUI.savedAppearanceVars = []; var vals = saveString.split(","); var numGuis = parseInt(vals[0]); @@ -499,6 +505,7 @@ GUI.load = function(saveString) { } GUI.savedValues = vals.splice(2, vals.length); + }; GUI.savedValues = []; @@ -616,7 +623,7 @@ GUI.constrain = function (v, o1, o2) { GUI.error = function(str) { if (typeof console.error == 'function') { - console.GUI.error("[GUI ERROR] " + str); + console.error("[GUI ERROR] " + str); } }; @@ -625,4 +632,9 @@ GUI.roundToDecimal = function(n, decimals) { return Math.round(n*t)/t; } +GUI.extendController = function(clazz) { + clazz.prototype = new GUI.Controller(); + clazz.prototype.constructor = clazz; +} + if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString')); \ No newline at end of file diff --git a/index.html b/index.html index 783b71f..c115756 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,6 @@ - - gui-dat @@ -22,6 +20,8 @@ + @@ -34,17 +34,18 @@ window.onload = function() { - prettyPrint(); - - var fizzyText = new FizzyText("gui-dat"); var gui = new GUI(); - - - // Text field - gui.add(fizzyText, "message"); + var timer = new GUI.Timer(gui); + + // Text field + gui.add(fizzyText, "message") + .at(1000, "is") + .at(2000, "the") + .at(3000, "shit"); + // Sliders with min and max gui.add(fizzyText, "maxSize", 0.5, 7); gui.add(fizzyText, "growthSpeed", 0.01, 1); @@ -57,245 +58,35 @@ gui.add(fizzyText, "displayOutline"); // Fires a function called "explode" - gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name. + gui.add(fizzyText, "explode") + .at(1000) + .at(2000) + .at(3000); // Specify a custom name. - gui.add(GUI, "showSaveString"); - gui.add(GUI, "saveURL"); + gui.divider(); + + // gui.add(timer, "playhead").step(100).listen(); + gui.add(timer, "playPause"); + /* + gui.add(timer, "windowMin").listen(); + gui.add(timer, "windowWidth").listen(); + */ + + + //gui.add(timer, "pause"); - - // Javascript for documentation - getCollapsables(); - handleListening(); }; - function toggle(e) { - - if(this.className == 'collapsed') { - this.className = 'expanded'; - } else { - this.className = 'collapsed'; - } - } - - function getCollapsables() { - - if (document.getElementsByClassName == undefined) { - document.getElementsByClassName = function(className) - { - var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); - var allElements = document.getElementsByTagName("*"); - var results = []; - - var element; - for (var i = 0; (element = allElements[i]) != null; i++) { - var elementClass = element.className; - if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) - results.push(element); - } - - return results; - }; - } - - collapsed = document.getElementsByClassName('collapsed'); - expanded = document.getElementsByClassName('expanded'); - } - - function handleListening() { - - for(var i = 0; i < collapsed.length; i++) { - collapsed[i].addEventListener('click', toggle, false); - } - - for(var j = 0; j < expanded.length; j++) { - expanded[i].addEventListener('click', toggle, false); - } - } //]]> -
- -
-

GUI-DAT flag

- -

gui-dat is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.

- - - -

Basic Usage

- 
-<script type="text/javascript" src="gui.min.js"></script>
-<script type="text/javascript">
-
-window.onload = function() {
-
-   var fizzyText = new FizzyText("gui-dat");
-
-   var gui = new GUI();
-
-   // Text field
-   gui.add(fizzyText, "message");
-
-   // 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);
-
-   // Sliders with min, max and increment.
-   gui.add(fizzyText, "noiseStrength", 10, 100, 5);
-
-   // Boolean checkbox
-   gui.add(fizzyText, "displayOutline");
-
-   // Fires a function called "explode"
-   gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
-
-};
-
-</script>
-
- -
    -
  • gui-dat will infer the type of the property you're trying to add
    - (based on its initial value) and create the corresponding control.
    • - -
  • The properties must be public, i.e. defined by this.prop = value.
    • -
- - - - - - - - - - - - - - - From 263fcbc677e8a38ff2058d5b91806cb25a4882cb Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 2 Feb 2011 14:43:49 -0500 Subject: [PATCH 04/19] We've got tweening in between numbers. Next up, actual mouse and keyboard interaction --- controllers/controller.function.js | 2 +- controllers/controller.number.js | 15 +- controllers/scrubber.js | 273 +++++++++++++---------------- controllers/timer.js | 110 ++++++++++++ index.html | 20 ++- 5 files changed, 254 insertions(+), 166 deletions(-) create mode 100644 controllers/timer.js diff --git a/controllers/controller.function.js b/controllers/controller.function.js index bf17507..73e2f58 100644 --- a/controllers/controller.function.js +++ b/controllers/controller.function.js @@ -2,7 +2,7 @@ GUI.FunctionController = function() { this.type = "function"; var that = this; GUI.Controller.apply(this, arguments); - this.domElement.addEventListener('click', function() { + this.domElement.addEventListener('mousedown', function() { that.object[that.propertyName].call(that.object); }, false); this.domElement.style.cursor = "pointer"; diff --git a/controllers/controller.number.js b/controllers/controller.number.js index 4c8dcaa..fec3d84 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -23,15 +23,12 @@ GUI.NumberController = function() { return this; } - this.min = function(s) { - min = s; - return this; - } - - this.max = function(s) { - max = s; - return this; - } + this.__defineGetter__("min", function() { + return min; + }); + this.__defineGetter__("max", function() { + return max; + }); if (!step) { if (min != undefined && max != undefined) { diff --git a/controllers/scrubber.js b/controllers/scrubber.js index 8ea11cc..bea770a 100644 --- a/controllers/scrubber.js +++ b/controllers/scrubber.js @@ -1,18 +1,16 @@ // Would really love to make it so that as FEW changes as possible are required to gui.js in order to make this work. Would love to make it so you simply include gui.scrubber.min.js in addition to gui.min.js. GUI.Controller.prototype.at = function(when, what, tween) { - - this.scrubber.addPoint(new GUI.ScrubberPoint(this.scrubber, when, what)); + new GUI.ScrubberPoint(this.scrubber, when, what); this.scrubber.render(); return this; - } GUI.Scrubber = function(controller, timer) { var _this = this; - var points = []; + this.points = []; this.timer = timer; this.controller = controller; this.controller.scrubber = this; @@ -39,28 +37,20 @@ GUI.Scrubber = function(controller, timer) { controller.domElement.insertBefore(this.domElement, controller.propertyNameElement.nextSibling); - - this.addPoint = function(point) { - points.push(point); - points.sort(function(a,b) { - return a.time - b.time; - }); - } - - this.render = function() { // TODO: if visible ... _this.g.clearRect(0, 0, width, height); - for (var i in points) { - points[i].render(); + for (var i in _this.points) { + _this.points[i].render(); } // Draw playhead _this.g.strokeStyle = "red"; + _this.g.lineWidth = 1; var t = Math.round(GUI.map(_this.timer.playhead, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth, 0, width))+0.5; _this.g.beginPath(); _this.g.moveTo(t, 0); @@ -89,18 +79,48 @@ GUI.Scrubber = function(controller, timer) { // This assumes a SORTED point array // And a PROGRESSING/INCREASING/GROWING playhead - for (var i = 0; i < points.length; i++) { - var cur = points[i]; - - if (cur.time < prevTime) { - continue; + + if (_this.controller.type == "number") { + + var closestToLeft = null; + for (var i = 0; i < _this.points.length; i++) { + var cur = _this.points[i]; + if (cur.time >= curTime && i > 0) { + closestToLeft = _this.points[i-1]; + } } - if (cur.time >= prevTime && cur.time <= curTime) { - pointHandlers[_this.controller.type].call(_this, cur); - } - } + if (closestToLeft == null || closestToLeft.time > curTime) return; + + 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++) { + var cur = _this.points[i]; + + if (cur.time < prevTime) { + continue; + } + + if (cur.time >= prevTime && cur.time <= curTime) { + pointHandlers[_this.controller.type].call(_this, cur); + } + + } + + } }; @@ -118,10 +138,6 @@ GUI.Scrubber = function(controller, timer) { this.controller.setValue(point.value); }, - 'number': function(point) { - // - } - } this.timer.addPlayListener(onPlayChange); @@ -135,10 +151,42 @@ GUI.ScrubberPoint = function(scrubber, time, value) { var _this = this; + scrubber.points.push(this); + scrubber.points.sort(function(a,b) { + return a.time - b.time; + }); + var g = scrubber.g; var timer = scrubber.timer; + var type = scrubber.controller.type; + + this.tween = function(t) { + return t; + }; + + this.hold = false; + + this.__defineGetter__("next", function() { + if (scrubber.points.length <= 1) { + return null; + } + + var i = scrubber.points.indexOf(this); + if (i + 1 >= scrubber.points.length) { + return null; + } + + return scrubber.points[i+1]; + }); + + + this.value = value; - var rectSize = 4; + var barSize = 4; + var rectSize = 7; + + var c1 = "#ffd800"; + var c2 = "#ff9000"; this.__defineGetter__("time", function() { return time; @@ -146,133 +194,60 @@ GUI.ScrubberPoint = function(scrubber, time, value) { this.render = function() { + + var x = GUI.map(time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1); if (x >= 0 && x <= 1) { x = Math.round(GUI.map(x, 0, 1, 0, scrubber.width)); } - g.save(); - g.translate(x-rectSize/2, 0); - g.fillStyle = "#ffd800"; - g.fillRect(0, 0, rectSize/2, scrubber.height-1); - g.fillStyle = "#ff9000"; - g.fillRect(rectSize/2, 0, rectSize/2, scrubber.height-1); - g.restore(); + switch (type) { + + case "number": + + g.save(); + var y = scrubber.height/2; + + var n = this.next; + + if (n != null) { + + var nx = GUI.constrain(GUI.map(n.time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1)); + + if (nx >= 0 && nx <= 1) { + nx = Math.round(GUI.map(nx, 0, 1, 0, scrubber.width)); + } + + g.lineWidth = rectSize/2 + g.strokeStyle="#222"; + g.beginPath(); + g.moveTo(nx, y); + g.lineTo(x, y); + g.stroke(); + + + } + + g.translate(x, y); + g.rotate(Math.PI/4); + g.fillStyle = c1; + g.fillRect(-rectSize/2, -rectSize/2, rectSize, rectSize); + g.restore(); + + break; + + default: + g.save(); + g.translate(x-barSize/2, 0); + g.fillStyle = c1; + g.fillRect(0, 0, barSize/2, scrubber.height-1); + g.fillStyle = c2; + g.fillRect(barSize/2, 0, barSize/2, scrubber.height-1); + g.restore(); + + } } } - -GUI.Timer = function(gui) { - - var _this = this; - - this.gui = gui; - this.gui.timer = this; - - var playhead = 0; - var lastPlayhead = 0; - var playListeners = []; - var windowListeners = []; - - var windowMin = 0; - var windowWidth = 10000; - - var thisTime; - var lastTime; - - var playInterval = -1; - var playResolution = 1000/60; - - var playing = false; - - var millis = function() { - var d = new Date(); - return d.getTime(); - } - - this.__defineGetter__("windowMin", function() { - return windowMin; - }); - - this.__defineSetter__("windowMin", function(v) { - windowMin = v; - for (var i in windowListeners) { - windowListeners[i].call(windowListeners[i]); - } - }); - - this.__defineGetter__("windowWidth", function() { - return windowWidth; - }); - - - this.__defineSetter__("windowWidth", function(v) { - windowWidth = v; - for (var i in windowListeners) { - windowListeners[i].call(windowListeners[i]); - } - }); - - this.__defineGetter__("playhead", function() { - return playhead; - }); - - this.__defineSetter__("playhead", function(t) { - lastPlayhead = playhead; - playhead = t; - for (var i = 0; i < playListeners.length; i++) { - playListeners[i].call(this, playhead, lastPlayhead); - } - }); - - this.__defineGetter__("playing", function() { - return playing; - }); - - this.play = function() { - playing = true; - lastTime = millis(); - if (playInterval == -1) { - playInterval = setInterval(this.update, playResolution); - } - }; - - this.update = function() { - thisTime = millis(); - _this.playhead = _this.playhead + (thisTime - lastTime); - lastTime = thisTime; - }; - - this.pause = function() { - playing = false; - clearInterval(playInterval); - playInterval = -1; - }; - - this.playPause = function() { - if (playing) { - this.pause(); - } else { - this.play(); - } - } - - - this.stop = function() { - this.pause(); - this.playhead = 0; - }; - - this.addPlayListener = function(fnc) { - playListeners.push(fnc); - }; - - this.addWindowListener = function(fnc) { - windowListeners.push(fnc); - }; - - - -} \ No newline at end of file diff --git a/controllers/timer.js b/controllers/timer.js new file mode 100644 index 0000000..020329d --- /dev/null +++ b/controllers/timer.js @@ -0,0 +1,110 @@ +GUI.Timer = function(gui) { + + var _this = this; + + this.gui = gui; + this.gui.timer = this; + + var playhead = 0; + var lastPlayhead = 0; + var playListeners = []; + var windowListeners = []; + + var windowMin = 0; + var windowWidth = 10000; + + var thisTime; + var lastTime; + + var playInterval = -1; + var playResolution = 1000/60; + + var playing = false; + + var millis = function() { + var d = new Date(); + return d.getTime(); + } + + this.__defineGetter__("windowMin", function() { + return windowMin; + }); + + this.__defineSetter__("windowMin", function(v) { + windowMin = v; + for (var i in windowListeners) { + windowListeners[i].call(windowListeners[i]); + } + }); + + this.__defineGetter__("windowWidth", function() { + return windowWidth; + }); + + + this.__defineSetter__("windowWidth", function(v) { + windowWidth = v; + for (var i in windowListeners) { + windowListeners[i].call(windowListeners[i]); + } + }); + + this.__defineGetter__("playhead", function() { + return playhead; + }); + + this.__defineSetter__("playhead", function(t) { + lastPlayhead = playhead; + playhead = t; + for (var i = 0; i < playListeners.length; i++) { + playListeners[i].call(this, playhead, lastPlayhead); + } + }); + + this.__defineGetter__("playing", function() { + return playing; + }); + + this.play = function() { + playing = true; + lastTime = millis(); + if (playInterval == -1) { + playInterval = setInterval(this.update, playResolution); + } + }; + + this.update = function() { + thisTime = millis(); + _this.playhead = _this.playhead + (thisTime - lastTime); + lastTime = thisTime; + }; + + this.pause = function() { + playing = false; + clearInterval(playInterval); + playInterval = -1; + }; + + this.playPause = function() { + if (playing) { + this.pause(); + } else { + this.play(); + } + } + + + this.stop = function() { + this.pause(); + this.playhead = 0; + }; + + this.addPlayListener = function(fnc) { + playListeners.push(fnc); + }; + + this.addWindowListener = function(fnc) { + windowListeners.push(fnc); + }; + +} \ No newline at end of file diff --git a/index.html b/index.html index c115756..323b2b4 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,8 @@ + @@ -47,25 +49,29 @@ .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); + gui.add(fizzyText, "noiseStrength", 10, 100, 5). + at(1000, 30). + at(4500, 20); // Boolean checkbox - gui.add(fizzyText, "displayOutline"); + gui.add(fizzyText, "displayOutline") + .at(50, true) + .at(250, false); // Fires a function called "explode" gui.add(fizzyText, "explode") .at(1000) .at(2000) - .at(3000); // Specify a custom name. + .at(3000); gui.divider(); - // gui.add(timer, "playhead").step(100).listen(); + // gui.add(timer, "playhead").step(100).listen(); gui.add(timer, "playPause"); /* gui.add(timer, "windowMin").listen(); From e17d9be5340df73eb0d6da9f875dde50f62b78c0 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 2 Feb 2011 15:51:58 -0500 Subject: [PATCH 05/19] Mildly selectable keyframes --- controllers/controller.js | 11 ++-- controllers/scrubber.js | 126 ++++++++++++++++++++++++++++++-------- controllers/slider.js | 14 +---- controllers/timer.js | 3 + gui.js | 11 ++++ index.html | 7 ++- 6 files changed, 128 insertions(+), 44 deletions(-) diff --git a/controllers/controller.js b/controllers/controller.js index d5b4047..59865fd 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -3,6 +3,7 @@ GUI.Controller = function() { this.parent = arguments[0]; this.object = arguments[1]; this.propertyName = arguments[2]; + this.changeListeners = []; if (arguments.length > 0) this.initialValue = this.propertyName[this.object]; @@ -20,7 +21,7 @@ GUI.Controller = function() { }; -GUI.Controller.prototype.changeFunction = null; + GUI.Controller.prototype.name = function(n) { this.propertyNameElement.innerHTML = n; @@ -44,8 +45,8 @@ GUI.Controller.prototype.unlisten = function() { GUI.Controller.prototype.setValue = function(n) { this.object[this.propertyName] = n; - if (this.changeFunction != null) { - this.changeFunction.call(this, n); + for (var i in this.changeListeners) { + this.changeListeners[i].call(this, n); } // Whenever you call setValue, the display will be updated automatically. // This reduces some clutter in subclasses. We can also use this method for listen(). @@ -59,7 +60,7 @@ GUI.Controller.prototype.getValue = function() { GUI.Controller.prototype.updateDisplay = function() {} -GUI.Controller.prototype.onChange = function(fnc) { - this.changeFunction = fnc; +GUI.Controller.prototype.addChangeListener = function(fnc) { + this.changeListeners.push(fnc); return this; } diff --git a/controllers/scrubber.js b/controllers/scrubber.js index bea770a..2edd8fe 100644 --- a/controllers/scrubber.js +++ b/controllers/scrubber.js @@ -1,7 +1,7 @@ // Would really love to make it so that as FEW changes as possible are required to gui.js in order to make this work. Would love to make it so you simply include gui.scrubber.min.js in addition to gui.min.js. GUI.Controller.prototype.at = function(when, what, tween) { - new GUI.ScrubberPoint(this.scrubber, when, what); + this.scrubber.add(new GUI.ScrubberPoint(this.scrubber, when, what)); this.scrubber.render(); return this; } @@ -14,7 +14,30 @@ GUI.Scrubber = function(controller, timer) { this.timer = timer; this.controller = controller; this.controller.scrubber = this; - + this.playing = false; + + this.sort = function() { + this.points.sort(function(a,b) { + return a.time - b.time; + }); + } + + this.add = function(p) { + this.points.push(p); + this.sort(); + } + + 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.render(); + } else { + _this.timer.activePoint.value = newVal; + } + } + }); this.domElement = document.createElement('div'); this.domElement.setAttribute('class', 'guidat-time'); @@ -25,6 +48,7 @@ GUI.Scrubber = function(controller, timer) { this.g = canvas.getContext('2d'); var width; + var position; var height; this.__defineGetter__("width", function() { @@ -61,9 +85,12 @@ GUI.Scrubber = function(controller, timer) { this.render(); + + var onResize = function() { canvas.width = width = _this.domElement.offsetWidth; canvas.height = height = _this.domElement.offsetHeight; + position = GUI.getOffset(canvas); _this.render(); }; @@ -71,12 +98,55 @@ GUI.Scrubber = function(controller, timer) { onResize(); }, false); + 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; + } + + canvas.addEventListener('mousedown', function(e) { + if (_this.timer.hoverPoint != null) { + + _this.timer.activePoint = _this.timer.hoverPoint; + _this.timer.playhead = _this.timer.activePoint.time; + + } else { + + _this.timer.activePoint = null; + scrub(e); + document.body.style.cursor = "text"; + document.addEventListener('mousemove', scrub, false); + _this.render(); + + } + + }, false); + + canvas.addEventListener('mousemove', function(e) { + _this.timer.hoverPoint = null; + for (var i in _this.points) { + var cur = _this.points[i]; + if (cur.isHovering(e.pageX-position.left)) { + _this.timer.hoverPoint = cur; + } + } + _this.render(); + }); + + document.addEventListener('mouseup', function() { + document.body.style.cursor = "auto"; + document.removeEventListener('mousemove', scrub, false); + }, false); + + + onResize(); this.timer.addPlayListener(this.render); var onPlayChange = function(curTime, prevTime) { + _this.playing = true; + // This assumes a SORTED point array // And a PROGRESSING/INCREASING/GROWING playhead @@ -87,10 +157,10 @@ GUI.Scrubber = function(controller, timer) { var cur = _this.points[i]; if (cur.time >= curTime && i > 0) { closestToLeft = _this.points[i-1]; + break; } } - if (closestToLeft == null || closestToLeft.time > curTime) return; var n = closestToLeft.next; @@ -122,6 +192,8 @@ GUI.Scrubber = function(controller, timer) { } + _this.playing = false; + }; var pointHandlers = { @@ -151,20 +223,29 @@ GUI.ScrubberPoint = function(scrubber, time, value) { var _this = this; - scrubber.points.push(this); - scrubber.points.sort(function(a,b) { - return a.time - b.time; - }); var g = scrubber.g; var timer = scrubber.timer; var type = scrubber.controller.type; + var x, y; + + this.hold = false; + + this.value = value; + + var barSize = 4; + var rectSize = 7; + + var c1 = "#ffd800"; + var c2 = "#ff9000"; this.tween = function(t) { return t; }; - this.hold = false; + this.isHovering = function(xx) { + return xx >= x-rectSize/2 && xx <= x+rectSize/2; + }; this.__defineGetter__("next", function() { if (scrubber.points.length <= 1) { @@ -177,38 +258,28 @@ GUI.ScrubberPoint = function(scrubber, time, value) { } return scrubber.points[i+1]; + }); - - - this.value = value; - var barSize = 4; - var rectSize = 7; - - var c1 = "#ffd800"; - var c2 = "#ff9000"; - this.__defineGetter__("time", function() { return time; }); this.render = function() { - - - var x = GUI.map(time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1); + x = GUI.map(time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1); if (x >= 0 && x <= 1) { x = Math.round(GUI.map(x, 0, 1, 0, scrubber.width)); } + y = scrubber.height/2; + switch (type) { case "number": g.save(); - var y = scrubber.height/2; - var n = this.next; if (n != null) { @@ -240,9 +311,16 @@ GUI.ScrubberPoint = function(scrubber, time, value) { default: g.save(); g.translate(x-barSize/2, 0); - g.fillStyle = c1; + 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; + //g.fillStyle = c2; g.fillRect(barSize/2, 0, barSize/2, scrubber.height-1); g.restore(); diff --git a/controllers/slider.js b/controllers/slider.js index 9c7c28e..6543293 100644 --- a/controllers/slider.js +++ b/controllers/slider.js @@ -17,16 +17,6 @@ GUI.Slider = function(numberController, min, max, step, initValue) { this.domElement.appendChild(this.fg); - var findPos = function(obj) { - var curleft = curtop = 0; - if (obj.offsetParent) { - do { - curleft += obj.offsetLeft; - curtop += obj.offsetTop; - } while (obj = obj.offsetParent); - return [curleft,curtop]; - } - } this.__defineSetter__('value', function(e) { var pct = GUI.map(e, min, max, 0, 100); @@ -35,8 +25,8 @@ GUI.Slider = function(numberController, min, max, step, initValue) { var onDrag = function(e) { if (!clicked) return; - var pos = findPos(_this.domElement); - var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max); + var pos = GUI.getOffset(_this.domElement); + var val = GUI.map(e.pageX, pos.left, pos.top + _this.domElement.offsetWidth, min, max); val = Math.round(val/step)*step; numberController.setValue(val); } diff --git a/controllers/timer.js b/controllers/timer.js index 020329d..f9a0e26 100644 --- a/controllers/timer.js +++ b/controllers/timer.js @@ -2,6 +2,9 @@ GUI.Timer = function(gui) { var _this = this; + this.hoverPoint = null; + this.activePoint = null; + this.gui = gui; this.gui.timer = this; diff --git a/gui.js b/gui.js index a8b4c93..3bcbc5c 100644 --- a/gui.js +++ b/gui.js @@ -627,6 +627,17 @@ GUI.error = function(str) { } }; +GUI.getOffset = function(obj) { + var curleft = curtop = 0; + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj = obj.offsetParent); + return {left: curleft,top: curtop}; + } +} + GUI.roundToDecimal = function(n, decimals) { var t = Math.pow(10, decimals); return Math.round(n*t)/t; diff --git a/index.html b/index.html index 323b2b4..9b0d467 100644 --- a/index.html +++ b/index.html @@ -56,12 +56,13 @@ // Sliders with min, max and increment. gui.add(fizzyText, "noiseStrength", 10, 100, 5). at(1000, 30). - at(4500, 20); + at(4500, 20). + at(7000, 100); // Boolean checkbox gui.add(fizzyText, "displayOutline") - .at(50, true) - .at(250, false); + .at(250, true) + .at(450, false); // Fires a function called "explode" gui.add(fizzyText, "explode") From 634ddc0736baaf09f7edbc5f8383be10df5aad4c Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 2 Feb 2011 19:01:12 -0500 Subject: [PATCH 06/19] 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). From 121da420e853e082bd65fb57c61a3005ce034ffd Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 2 Feb 2011 19:45:12 -0500 Subject: [PATCH 07/19] Starting navigation --- controllers/scrubber.js | 5 +++++ controllers/slider.js | 1 + index.html | 18 ++++++++---------- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/controllers/scrubber.js b/controllers/scrubber.js index 9522aff..87fac67 100644 --- a/controllers/scrubber.js +++ b/controllers/scrubber.js @@ -158,6 +158,11 @@ GUI.Scrubber = function(controller, timer) { _this.timer.hoverPoint = cur; } } + if (_this.timer.hoverPoint == null) { + document.body.style.cursor = "pointer"; + } else { + document.body.style.cursor = "auto"; + } _this.render(); }); diff --git a/controllers/slider.js b/controllers/slider.js index c3a254e..88ef9c4 100644 --- a/controllers/slider.js +++ b/controllers/slider.js @@ -25,6 +25,7 @@ GUI.Slider = function(numberController, min, max, step, initValue) { var onDrag = function(e) { if (!clicked) return; var pos = GUI.getOffset(_this.domElement); + console.log(pos.left + " " + pos.top); var val = GUI.map(e.pageX, pos.left, pos.top + _this.domElement.offsetWidth, min, max); val = Math.round(val/step)*step; numberController.setValue(val); diff --git a/index.html b/index.html index a28e560..ea050e5 100644 --- a/index.html +++ b/index.html @@ -44,25 +44,23 @@ // Text field gui.add(fizzyText, "message") + .at(-1000, "gui-dat") .at(1000, "is") - .at(2000, "the") - .at(3000, "shit"); + .at(2000, "getting") + .at(3000, "pretty") + .at(4000, "tight"); // 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); // Sliders with min, max and increment. - gui.add(fizzyText, "noiseStrength", 10, 100, 5). - at(1000, 30). - at(4500, 20). - at(7000, 100); - + gui.add(fizzyText, "noiseStrength", 10, 100, 5); + // Boolean checkbox - gui.add(fizzyText, "displayOutline") - .at(250, true) - .at(450, false); + gui.add(fizzyText, "displayOutline"); // Fires a function called "explode" gui.add(fizzyText, "explode") From 7d9bc0ef96b74313936747e6a03bd7ed311fbe3f Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 2 Feb 2011 22:12:01 -0500 Subject: [PATCH 08/19] Made backwards scrubbing better, weird bug on last string point --- controllers/controller.boolean.js | 9 +-- controllers/scrubber.js | 92 +++++++++++++++++++++---------- controllers/slider.js | 5 +- controllers/timer.js | 18 +++--- index.html | 2 +- 5 files changed, 81 insertions(+), 45 deletions(-) diff --git a/controllers/controller.boolean.js b/controllers/controller.boolean.js index 66808ca..52b5df5 100644 --- a/controllers/controller.boolean.js +++ b/controllers/controller.boolean.js @@ -8,13 +8,14 @@ GUI.BooleanController = function() { input.setAttribute('type', 'checkbox'); this.domElement.addEventListener('click', function(e) { - input.checked = !input.checked; - e.preventDefault(); - _this.setValue(input.checked); + // input.checked = !input.checked; +// e.preventDefault(); +// _this.setValue(input.checked); }, false); input.addEventListener('mouseup', function(e) { - input.checked = !input.checked; // counteracts default. + //input.checked = !input.checked; // counteracts default. + _this.setValue(this.checked); }, false); this.domElement.style.cursor = "pointer"; diff --git a/controllers/scrubber.js b/controllers/scrubber.js index 87fac67..1475b8d 100644 --- a/controllers/scrubber.js +++ b/controllers/scrubber.js @@ -27,18 +27,20 @@ GUI.Scrubber = function(controller, timer) { this.sort(); } + var lastDown = 0; + this.controller.addChangeListener(function(newVal) { - - - if (!_this.playing) { - if (_this.timer.activePoint == null) { - _this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, newVal); - _this.add(_this.timer.activePoint); - _this.render(); - } else { - _this.timer.activePoint.value = newVal; + + if (!_this.playing) { + if (_this.timer.activePoint == null) { + _this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, newVal); + _this.add(_this.timer.activePoint); + _this.render(); + } else { + _this.timer.activePoint.value = newVal; + } } - } + }); this.domElement = document.createElement('div'); @@ -101,20 +103,30 @@ GUI.Scrubber = function(controller, timer) { onResize(); }, false); + + var scrubPan = function() { + var t = _this.timer.playhead; + var tmin = _this.timer.windowMin + _this.timer.windowWidth/5; + var tmax = _this.timer.windowMin + _this.timer.windowWidth - _this.timer.windowWidth/5; + + if (t < tmin) { + _this.timer.windowMin += GUI.map(t, _this.timer.windowMin, tmin, -_this.timer.windowWidth/50, 0); + } + + if (t > tmax) { + _this.timer.windowMin += 0; + + _this.timer.windowMin += GUI.map(t, tmax, _this.timer.windowMin+_this.timer.windowWidth, 0,_this.timer.windowWidth/50); + } + + } 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; - }*/ + scrubPan(); } @@ -130,7 +142,16 @@ GUI.Scrubber = function(controller, timer) { } canvas.addEventListener('mousedown', function(e) { - if (_this.timer.hoverPoint != null) { + + var thisDown = GUI.millis(); + + if (thisDown - lastDown < 300) { + + _this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, _this.controller.getValue()); + _this.add(_this.timer.activePoint); + _this.render(); + + } else if (_this.timer.hoverPoint != null ) { _this.timer.activePoint = _this.timer.hoverPoint; _this.timer.playhead = _this.timer.activePoint.time; @@ -143,11 +164,14 @@ GUI.Scrubber = function(controller, timer) { _this.timer.hoverPoint = null; scrub(e); document.body.style.cursor = "text"; + _this.timer.pause(); document.addEventListener('mousemove', scrub, false); _this.render(); } + lastDown = thisDown; + }, false); canvas.addEventListener('mousemove', function(e) { @@ -185,7 +209,8 @@ GUI.Scrubber = function(controller, timer) { // This assumes a SORTED point array // And a PROGRESSING/INCREASING/GROWING playhead - if (_this.controller.type == "number") { + if (_this.controller.type == "number" || + _this.controller.type == "string") { var closestToLeft = null; for (var i = 0; i < _this.points.length; i++) { @@ -196,7 +221,8 @@ GUI.Scrubber = function(controller, timer) { } } - if (closestToLeft != null && closestToLeft.time <= curTime) { + if (closestToLeft != null && closestToLeft.time <= curTime && + _this.controller.type == "number") { var n = closestToLeft.next; if (n != null) { @@ -209,19 +235,29 @@ GUI.Scrubber = function(controller, timer) { } + } else if (closestToLeft != null) { + _this.controller.setValue(closestToLeft.value); + } + } else { for (var i = 0; i < _this.points.length; i++) { - var cur = _this.points[i]; - if (cur.time < prevTime) { - continue; - } - - if (cur.time >= prevTime && cur.time <= curTime) { - pointHandlers[_this.controller.type].call(_this, cur); + + var cur = _this.points[i]; + if (prevTime < curTime) { + + + if (cur.time < prevTime) { + continue; + } + + if (cur.time >= prevTime && cur.time <= curTime) { + pointHandlers[_this.controller.type].call(_this, cur); + } + } } diff --git a/controllers/slider.js b/controllers/slider.js index 88ef9c4..0141380 100644 --- a/controllers/slider.js +++ b/controllers/slider.js @@ -25,13 +25,12 @@ GUI.Slider = function(numberController, min, max, step, initValue) { var onDrag = function(e) { if (!clicked) return; var pos = GUI.getOffset(_this.domElement); - console.log(pos.left + " " + pos.top); - var val = GUI.map(e.pageX, pos.left, pos.top + _this.domElement.offsetWidth, min, max); + var val = GUI.map(e.pageX, pos.left, pos.left + _this.domElement.offsetWidth, min, max); val = Math.round(val/step)*step; numberController.setValue(val); } - this.domElement.addEventListener('mousedown', function(e) { + this.domElement.addEventListener('mousedown', function(e) { clicked = true; x = px = e.pageX; _this.domElement.setAttribute('class', 'guidat-slider-bg active'); diff --git a/controllers/timer.js b/controllers/timer.js index 0179d66..c131eee 100644 --- a/controllers/timer.js +++ b/controllers/timer.js @@ -1,3 +1,8 @@ +GUI.millis = function() { + var d = new Date(); + return d.getTime(); +} + GUI.Timer = function(gui) { var _this = this; @@ -13,8 +18,8 @@ GUI.Timer = function(gui) { var playListeners = []; var windowListeners = []; - var windowMin = 0; var windowWidth = 10000; + var windowMin = -windowWidth/4; var thisTime; var lastTime; @@ -24,11 +29,6 @@ GUI.Timer = function(gui) { var playing = false; - var millis = function() { - var d = new Date(); - return d.getTime(); - } - window.addEventListener("keyup", function(e) { switch (e.keyCode) { case 32: @@ -91,14 +91,14 @@ GUI.Timer = function(gui) { this.play = function() { playing = true; - lastTime = millis(); + lastTime = GUI.millis(); if (playInterval == -1) { playInterval = setInterval(this.update, playResolution); } }; this.update = function() { - thisTime = millis(); + thisTime = GUI.millis(); _this.playhead = _this.playhead + (thisTime - lastTime); lastTime = thisTime; }; @@ -120,7 +120,7 @@ GUI.Timer = function(gui) { this.stop = function() { this.pause(); this.playhead = 0; - this.windowMin = 0; + this.windowMin = -windowWidth/4; }; this.addPlayListener = function(fnc) { diff --git a/index.html b/index.html index ea050e5..7faa0db 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,7 @@ // Text field gui.add(fizzyText, "message") - .at(-1000, "gui-dat") + .at(1, "gui-dat") .at(1000, "is") .at(2000, "getting") .at(3000, "pretty") From 046ef1e1c8a36c09869254203b9a6c07ee7c918e Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 2 Feb 2011 22:53:46 -0500 Subject: [PATCH 09/19] Improved scrubber rendering --- controllers/scrubber.js | 36 ++++++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/controllers/scrubber.js b/controllers/scrubber.js index 1475b8d..da58a28 100644 --- a/controllers/scrubber.js +++ b/controllers/scrubber.js @@ -78,7 +78,7 @@ GUI.Scrubber = function(controller, timer) { // Draw playhead - _this.g.strokeStyle = "red"; + _this.g.strokeStyle = "#ff0024"; _this.g.lineWidth = 1; var t = Math.round(GUI.map(_this.timer.playhead, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth, 0, width))+0.5; _this.g.beginPath(); @@ -359,15 +359,40 @@ GUI.ScrubberPoint = function(scrubber, time, value) { y = scrubber.height/2; if (scrubber.timer.activePoint == this) { - g.fillStyle = "#fff"; // + g.fillStyle = "#ffd800"; // } else if (scrubber.timer.hoverPoint == this) { - g.fillStyle = "#ddd"; + g.fillStyle = "#999"; } else { g.fillStyle = "#ccc"; } switch (type) { + case "boolean": + + g.save(); + + g.translate(x, y-0.5); + + if (this.value) { + + g.strokeStyle = g.fillStyle; + g.lineWidth = barSize; + g.beginPath(); + g.arc(0, 0, barSize, 0, Math.PI*2, false); + g.stroke(); + } else { + + g.rotate(Math.PI/4); + g.fillRect(-barSize/2, -barSize*3.5/2, barSize, barSize*3.5); + g.rotate(Math.PI/2); + g.fillRect(-barSize/2, -barSize*3.5/2, barSize, barSize*3.5); + } + + g.restore(); + + break; + case "number": g.save(); @@ -377,9 +402,8 @@ GUI.ScrubberPoint = function(scrubber, time, value) { var nx = GUI.constrain(GUI.map(n.time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1)); - if (nx >= 0 && nx <= 1) { - nx = Math.round(GUI.map(nx, 0, 1, 0, scrubber.width)); - } + nx = GUI.constrain(GUI.map(nx, 0, 1, 0, scrubber.width)); + g.lineWidth = rectSize/2 g.strokeStyle="#222"; From f96b1f2e9a8e8e6ee1796e0fb01ef10d822d7543 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Tue, 8 Feb 2011 10:40:38 -0500 Subject: [PATCH 10/19] Better keyframes. --- controllers/controller.js | 2 + controllers/controller.string.js | 4 +- demo/demo.css | 1 + demo/demo.js | 4 +- gui.js | 1 + index.html | 8 +- time/easing.js | 249 +++++++++++++++++++++++ {controllers => time}/scrubber.js | 321 +++++++++++++++++++----------- {controllers => time}/timer.js | 60 +++++- 9 files changed, 531 insertions(+), 119 deletions(-) create mode 100644 time/easing.js rename {controllers => time}/scrubber.js (58%) rename {controllers => time}/timer.js (69%) diff --git a/controllers/controller.js b/controllers/controller.js index 59865fd..7e78ba5 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -44,8 +44,10 @@ GUI.Controller.prototype.unlisten = function() { } GUI.Controller.prototype.setValue = function(n) { + this.object[this.propertyName] = n; for (var i in this.changeListeners) { + console.log("Telling you I changed to " + n); this.changeListeners[i].call(this, n); } // Whenever you call setValue, the display will be updated automatically. diff --git a/controllers/controller.string.js b/controllers/controller.string.js index d29804d..98a03c1 100644 --- a/controllers/controller.string.js +++ b/controllers/controller.string.js @@ -13,8 +13,8 @@ GUI.StringController = function() { input.setAttribute('spellcheck', 'false'); this.domElement.addEventListener('mouseup', function() { - input.focus(); - input.select(); + //input.focus(); + //input.select(); }, false); // TODO: getting messed up on ctrl a diff --git a/demo/demo.css b/demo/demo.css index 9e5ce3d..e79aba6 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -17,6 +17,7 @@ h1, h2, h3, h4, h5, h6 { color: #222; } + hr { border: 0; height: 0; diff --git a/demo/demo.js b/demo/demo.js index e002bd1..4745681 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -44,8 +44,8 @@ function FizzyText(message) { var width = 550; var height = 200; - var textAscent = 82; - var textOffsetLeft = 80; + var textAscent = 140; + var textOffsetLeft = 20; var noiseScale = 300; var frameTime = 30; diff --git a/gui.js b/gui.js index 3bcbc5c..c85ce3c 100644 --- a/gui.js +++ b/gui.js @@ -365,6 +365,7 @@ var GUI = function() { for (var i in controllers) { controllerHeight += controllers[i].domElement.offsetHeight; } + return; if (controllerHeight - 1 > openHeight) { controllerContainer.style.overflowY = "auto"; } else { diff --git a/index.html b/index.html index 7faa0db..6ede8da 100644 --- a/index.html +++ b/index.html @@ -33,13 +33,13 @@ - - + @@ -34,11 +36,16 @@ - @@ -36,10 +34,11 @@ - - - - - - - - - - - + + + + + + + + + + + +