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")