mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
We've got tweening in between numbers. Next up, actual mouse and keyboard interaction
This commit is contained in:
George Michael Brower
parent
5be42748bd
commit
263fcbc677
@ -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";
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
@ -40,27 +38,19 @@ 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,15 +79,45 @@ 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);
|
||||
};
|
||||
|
||||
|
||||
|
||||
}
|
||||
110
controllers/timer.js
Normal file
110
controllers/timer.js
Normal file
@ -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);
|
||||
};
|
||||
|
||||
}
|
||||
20
index.html
20
index.html
@ -22,6 +22,8 @@
|
||||
<script type="text/javascript" src="controllers/controller.string.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/scrubber.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/timer.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="demo/improvedNoise.js">
|
||||
</script>
|
||||
@ -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();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user