Made backwards scrubbing better, weird bug on last string point

This commit is contained in:
George Michael Brower 2011-02-02 22:12:01 -05:00
parent 121da420e8
commit 7d9bc0ef96
5 changed files with 81 additions and 45 deletions

View File

@ -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";

View File

@ -27,8 +27,9 @@ GUI.Scrubber = function(controller, timer) {
this.sort();
}
this.controller.addChangeListener(function(newVal) {
var lastDown = 0;
this.controller.addChangeListener(function(newVal) {
if (!_this.playing) {
if (_this.timer.activePoint == null) {
@ -39,6 +40,7 @@ GUI.Scrubber = function(controller, timer) {
_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,12 +235,20 @@ 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 (prevTime < curTime) {
if (cur.time < prevTime) {
continue;
@ -228,6 +262,8 @@ GUI.Scrubber = function(controller, timer) {
}
}
_this.playing = false;
};

View File

@ -25,8 +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);
var val = GUI.map(e.pageX, pos.left, pos.left + _this.domElement.offsetWidth, min, max);
val = Math.round(val/step)*step;
numberController.setValue(val);
}

View File

@ -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) {

View File

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