mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Multiple normal panels and a time panels now live together in beautiful harmony
This commit is contained in:
George Michael Brower
parent
f96b1f2e9a
commit
e42a7848cd
43
gui.css
43
gui.css
@ -1,18 +1,19 @@
|
||||
#guidat {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
|
||||
top: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.guidat * {
|
||||
.guidat {
|
||||
float: right;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin: 0px 20px 0px 0px;
|
||||
}
|
||||
|
||||
.guidat-time {
|
||||
.guidat-scrubber {
|
||||
width: 75%;
|
||||
float: right;
|
||||
margin-top: -3px;
|
||||
@ -40,11 +41,6 @@
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
/*
|
||||
-moz-transition: height .2s ease-out;
|
||||
-webkit-transition: height .2s ease-out;
|
||||
transition: height .2s ease-out;
|
||||
*/
|
||||
}
|
||||
|
||||
.guidat-controllers hr {
|
||||
@ -116,9 +112,9 @@ a.guidat-toggle:hover {
|
||||
|
||||
.guidat-controller.string input {
|
||||
border: 0;
|
||||
width: 125px;
|
||||
color: #1ed36f;
|
||||
margin-right: 2px;
|
||||
width: 10.5%;
|
||||
}
|
||||
|
||||
.guidat-controller.boolean {
|
||||
@ -130,10 +126,10 @@ a.guidat-toggle:hover {
|
||||
}
|
||||
|
||||
.guidat-controller.number input[type=text] {
|
||||
width: 3%;
|
||||
margin-left: 5px;
|
||||
margin-right: 2px;
|
||||
color: #00aeff;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.guidat .guidat-controller.boolean input {
|
||||
@ -170,7 +166,7 @@ a.guidat-toggle:hover {
|
||||
.guidat-slider-bg {
|
||||
background-color: #222;
|
||||
cursor: ew-resize;
|
||||
width: 7%;
|
||||
width: 85px;
|
||||
margin-top: 2px;
|
||||
float: right;
|
||||
height: 21px;
|
||||
@ -180,3 +176,24 @@ a.guidat-toggle:hover {
|
||||
background-color: #00aeff;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Styles for timed GUI */
|
||||
|
||||
.guidat.time {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.time .guidat-slider-bg {
|
||||
width: 7%;
|
||||
}
|
||||
|
||||
.time .guidat-controller.string input {
|
||||
width: 10.6%;
|
||||
}
|
||||
.time .guidat-controller.number input[type=text] {
|
||||
width: 3%;
|
||||
}
|
||||
|
||||
|
||||
55
gui.js
55
gui.js
@ -1,6 +1,8 @@
|
||||
var GUI = function() {
|
||||
|
||||
var _this = this;
|
||||
// For use with GUIScrubber
|
||||
this.timer = null;
|
||||
|
||||
var MIN_WIDTH = 240;
|
||||
var MAX_WIDTH = 500;
|
||||
@ -33,15 +35,15 @@ var GUI = function() {
|
||||
var resizeTo = 0;
|
||||
var resizeTimeout;
|
||||
|
||||
var width = 280;
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
this.domElement.setAttribute('class', 'guidat');
|
||||
this.domElement.style.width = "100%";//width+'px';
|
||||
this.domElement.style.width = width+'px';
|
||||
|
||||
var controllerContainer = document.createElement('div');
|
||||
controllerContainer.setAttribute('class', 'guidat-controllers');
|
||||
|
||||
// For use with GUIScrubber
|
||||
this.timer = null;
|
||||
|
||||
// Firefox hack to prevent horizontal scrolling
|
||||
controllerContainer.addEventListener('DOMMouseScroll', function(e) {
|
||||
@ -82,7 +84,7 @@ var GUI = function() {
|
||||
my = e.pageY;
|
||||
mx = e.pageX;
|
||||
|
||||
var dmy = pmy-my;
|
||||
var dmy = _this.timer ? pmy - my : my - pmy;
|
||||
|
||||
if (!open) {
|
||||
if (dmy < 0) {
|
||||
@ -94,7 +96,7 @@ var GUI = function() {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Flip this if you want to resize to the left.
|
||||
// TODO: Flip this if you want to resize to the right.
|
||||
var dmx = pmx - mx;
|
||||
|
||||
if (dmy > 0 &&
|
||||
@ -107,11 +109,16 @@ var GUI = function() {
|
||||
dragDisplacementY += dmy;
|
||||
dragDisplacementX += dmx;
|
||||
openHeight += dmy;
|
||||
//width += dmx;
|
||||
|
||||
curControllerContainerHeight += dmy;
|
||||
controllerContainer.style.height = openHeight+'px';
|
||||
|
||||
if (!_this.timer) {
|
||||
width += dmx;
|
||||
width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
|
||||
//_this.domElement.style.width = width+'px';
|
||||
_this.domElement.style.width = width+'px';
|
||||
}
|
||||
|
||||
checkForOverflow();
|
||||
};
|
||||
|
||||
@ -134,28 +141,30 @@ var GUI = function() {
|
||||
}, false);
|
||||
|
||||
|
||||
var correctWidth = function() {
|
||||
// Clears lingering slider column
|
||||
_this.domElement.style.width = (width+1)+'px';
|
||||
setTimeout(function() {
|
||||
_this.domElement.style.width = width+'px';
|
||||
}, 1);
|
||||
};
|
||||
|
||||
document.addEventListener('mouseup', function(e) {
|
||||
|
||||
if (togglePressed && !toggleDragged) {
|
||||
|
||||
_this.toggle();
|
||||
|
||||
// Clears lingering slider column
|
||||
// _this.domElement.style.width = (width+1)+'px';
|
||||
setTimeout(function() {
|
||||
// _this.domElement.style.width = width+'px';
|
||||
}, 1);
|
||||
if (!_this.timer) {
|
||||
correctWidth();
|
||||
}
|
||||
}
|
||||
|
||||
if (togglePressed && toggleDragged) {
|
||||
|
||||
if (dragDisplacementX == 0) {
|
||||
if (dragDisplacementX == 0 && !_this.timer) {
|
||||
|
||||
// Clears lingering slider column
|
||||
_this.domElement.style.width = (width+1)+'px';
|
||||
setTimeout(function() {
|
||||
_this.domElement.style.width = width+'px';
|
||||
}, 1);
|
||||
correctWidth();
|
||||
|
||||
}
|
||||
|
||||
@ -180,11 +189,8 @@ var GUI = function() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
document.removeEventListener('mousemove', resize, false);
|
||||
e.preventDefault();
|
||||
toggleDragged = false;
|
||||
@ -194,8 +200,8 @@ var GUI = function() {
|
||||
|
||||
}, false);
|
||||
|
||||
this.domElement.appendChild(toggleButton);
|
||||
this.domElement.appendChild(controllerContainer);
|
||||
this.domElement.appendChild(toggleButton);
|
||||
|
||||
if (GUI.autoPlace) {
|
||||
if(GUI.autoPlaceContainer == null) {
|
||||
@ -297,8 +303,8 @@ var GUI = function() {
|
||||
|
||||
// Have we already added this?
|
||||
if (alreadyControlled(object, propertyName)) {
|
||||
// GUI.error("Controller for \"" + propertyName+"\" already added.");
|
||||
// return;
|
||||
GUI.error("Controller for \"" + propertyName+"\" already added.");
|
||||
return;
|
||||
}
|
||||
|
||||
var value = object[propertyName];
|
||||
@ -450,7 +456,6 @@ var GUI = function() {
|
||||
|
||||
if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
|
||||
|
||||
|
||||
width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
|
||||
//_this.domElement.style.width = width+"px";
|
||||
|
||||
|
||||
31
index.html
31
index.html
@ -21,9 +21,11 @@
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.string.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/scrubber.js">
|
||||
<script type="text/javascript" src="time/scrubber.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/timer.js">
|
||||
<script type="text/javascript" src="time/timer.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="time/easing.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="demo/improvedNoise.js">
|
||||
</script>
|
||||
@ -34,11 +36,16 @@
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
var timer;
|
||||
this.blabla = "ldkjflkdjf";
|
||||
window.onload = function() {
|
||||
|
||||
var fizzyText = new FizzyText("gui-dat");
|
||||
|
||||
var gui = new GUI();
|
||||
|
||||
var gui2 = new GUI();
|
||||
|
||||
var gui3 = new GUI();
|
||||
timer = new GUI.Timer(gui);
|
||||
|
||||
|
||||
@ -68,17 +75,19 @@
|
||||
.at(2000)
|
||||
.at(3000);
|
||||
|
||||
gui.divider();
|
||||
|
||||
// gui.add(timer, "playhead").step(100).listen();
|
||||
// gui.add(timer, "playPause");
|
||||
gui.add(timer, "snapIncrement");
|
||||
gui.add(timer, "useSnap");
|
||||
/*
|
||||
gui.add(timer, "windowMin").listen();
|
||||
gui.add(timer, "windowWidth").listen();
|
||||
*/
|
||||
|
||||
gui2.add(timer, "playhead").step(125).listen();
|
||||
gui2.add(timer, "playPause");
|
||||
gui2.add(timer, "snapIncrement");
|
||||
gui2.add(timer, "useSnap");
|
||||
|
||||
gui3.add(timer, "windowMin").listen();
|
||||
gui3.add(timer, "windowWidth",0, 20000).listen();
|
||||
|
||||
|
||||
|
||||
gui3.add(this, "blabla");
|
||||
|
||||
//gui.add(timer, "pause");
|
||||
|
||||
|
||||
249
time/easing.js
249
time/easing.js
@ -1,249 +0,0 @@
|
||||
TWEEN.Easing = { Linear: {}, Quadratic: {}, Cubic: {}, Quartic: {}, Quintic: {}, Sinusoidal: {}, Exponential: {}, Circular: {}, Elastic: {}, Back: {}, Bounce: {} };
|
||||
|
||||
TWEEN.Easing.Linear.EaseNone = function ( k ) {
|
||||
|
||||
return k;
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Quadratic.EaseIn = function ( k ) {
|
||||
|
||||
return k * k;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Quadratic.EaseOut = function ( k ) {
|
||||
|
||||
return - k * ( k - 2 );
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Quadratic.EaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
|
||||
return - 0.5 * ( --k * ( k - 2 ) - 1 );
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Cubic.EaseIn = function ( k ) {
|
||||
|
||||
return k * k * k;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Cubic.EaseOut = function ( k ) {
|
||||
|
||||
return --k * k * k + 1;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Cubic.EaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k;
|
||||
return 0.5 * ( ( k -= 2 ) * k * k + 2 );
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Quartic.EaseIn = function ( k ) {
|
||||
|
||||
return k * k * k * k;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Quartic.EaseOut = function ( k ) {
|
||||
|
||||
return - ( --k * k * k * k - 1 );
|
||||
|
||||
}
|
||||
|
||||
TWEEN.Easing.Quartic.EaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k;
|
||||
return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 );
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Quintic.EaseIn = function ( k ) {
|
||||
|
||||
return k * k * k * k * k;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Quintic.EaseOut = function ( k ) {
|
||||
|
||||
return ( k = k - 1 ) * k * k * k * k + 1;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Quintic.EaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k;
|
||||
return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Sinusoidal.EaseIn = function ( k ) {
|
||||
|
||||
return - Math.cos( k * Math.PI / 2 ) + 1;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Sinusoidal.EaseOut = function ( k ) {
|
||||
|
||||
return Math.sin( k * Math.PI / 2 );
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Sinusoidal.EaseInOut = function ( k ) {
|
||||
|
||||
return - 0.5 * ( Math.cos( Math.PI * k ) - 1 );
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Exponential.EaseIn = function ( k ) {
|
||||
|
||||
return k == 0 ? 0 : Math.pow( 2, 10 * ( k - 1 ) );
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Exponential.EaseOut = function ( k ) {
|
||||
|
||||
return k == 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Exponential.EaseInOut = function ( k ) {
|
||||
|
||||
if ( k == 0 ) return 0;
|
||||
if ( k == 1 ) return 1;
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 2, 10 * ( k - 1 ) );
|
||||
return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 );
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Circular.EaseIn = function ( k ) {
|
||||
|
||||
return - ( Math.sqrt( 1 - k * k ) - 1);
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Circular.EaseOut = function ( k ) {
|
||||
|
||||
return Math.sqrt( 1 - --k * k );
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Circular.EaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k /= 0.5 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1);
|
||||
return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1);
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Elastic.EaseIn = function( k ) {
|
||||
|
||||
var s, a = 0.1, p = 0.4;
|
||||
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
|
||||
if ( !a || a < 1 ) { a = 1; s = p / 4; }
|
||||
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
|
||||
return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Elastic.EaseOut = function( k ) {
|
||||
|
||||
var s, a = 0.1, p = 0.4;
|
||||
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
|
||||
if ( !a || a < 1 ) { a = 1; s = p / 4; }
|
||||
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
|
||||
return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Elastic.EaseInOut = function( k ) {
|
||||
|
||||
var s, a = 0.1, p = 0.4;
|
||||
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
|
||||
if ( !a || a < 1 ) { a = 1; s = p / 4; }
|
||||
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
|
||||
if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
|
||||
return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1;
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Back.EaseIn = function( k ) {
|
||||
|
||||
var s = 1.70158;
|
||||
return k * k * ( ( s + 1 ) * k - s );
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Back.EaseOut = function( k ) {
|
||||
|
||||
var s = 1.70158;
|
||||
return ( k = k - 1 ) * k * ( ( s + 1 ) * k + s ) + 1;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Back.EaseInOut = function( k ) {
|
||||
|
||||
var s = 1.70158 * 1.525;
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
|
||||
return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
TWEEN.Easing.Bounce.EaseIn = function( k ) {
|
||||
|
||||
return 1 - TWEEN.Easing.Bounce.EaseOut( 1 - k );
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Bounce.EaseOut = function( k ) {
|
||||
|
||||
if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
|
||||
|
||||
return 7.5625 * k * k;
|
||||
|
||||
} else if ( k < ( 2 / 2.75 ) ) {
|
||||
|
||||
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
|
||||
|
||||
} else if ( k < ( 2.5 / 2.75 ) ) {
|
||||
|
||||
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
|
||||
|
||||
} else {
|
||||
|
||||
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Easing.Bounce.EaseInOut = function( k ) {
|
||||
|
||||
if ( k < 0.5 ) return TWEEN.Easing.Bounce.EaseIn( k * 2 ) * 0.5;
|
||||
return TWEEN.Easing.Bounce.EaseOut( k * 2 - 1 ) * 0.5 + 0.5;
|
||||
|
||||
};
|
||||
267
time/scrubber.js
267
time/scrubber.js
@ -1,5 +1,8 @@
|
||||
GUI.Controller.prototype.at = function(when, what, tween) {
|
||||
// TODO: tween
|
||||
if (!this.scrubber) {
|
||||
GUI.error("You must create a new Timer for this GUI in order to define events.");
|
||||
return this;
|
||||
}
|
||||
this.scrubber.add(new GUI.ScrubberPoint(this.scrubber, when, what));
|
||||
this.scrubber.render();
|
||||
return this;
|
||||
@ -65,7 +68,7 @@ GUI.Scrubber = function(controller, timer) {
|
||||
});
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
this.domElement.setAttribute('class', 'guidat-time');
|
||||
this.domElement.setAttribute('class', 'guidat-scrubber');
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
this.domElement.appendChild(canvas);
|
||||
@ -152,6 +155,7 @@ GUI.Scrubber = function(controller, timer) {
|
||||
|
||||
|
||||
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;
|
||||
@ -162,7 +166,6 @@ GUI.Scrubber = function(controller, timer) {
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
@ -182,7 +185,6 @@ GUI.Scrubber = function(controller, timer) {
|
||||
}
|
||||
|
||||
var dragActive = function(e) {
|
||||
|
||||
var t = GUI.map(e.pageX, position.left, position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth);
|
||||
_this.timer.activePoint.time = _this.timer.snap(t);
|
||||
_this.timer.playhead = _this.timer.snap(t);
|
||||
@ -241,7 +243,7 @@ GUI.Scrubber = function(controller, timer) {
|
||||
|
||||
var dy = e.wheelDeltaY*4;
|
||||
_this.timer.windowWidth -= dy;
|
||||
_this.timer.windowMin += dy/2 + dx;
|
||||
_this.timer.windowMin += dy/2 - dx;
|
||||
|
||||
|
||||
return false;
|
||||
@ -331,7 +333,6 @@ GUI.Scrubber = function(controller, timer) {
|
||||
next = null;
|
||||
}
|
||||
|
||||
console.log(next, prev);
|
||||
|
||||
if (next != null & prev != null) {
|
||||
|
||||
@ -393,6 +394,14 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
|
||||
return val;
|
||||
});
|
||||
|
||||
this.__defineGetter__("x", function() {
|
||||
return x;
|
||||
});
|
||||
|
||||
this.__defineGetter__("y", function() {
|
||||
return y;
|
||||
});
|
||||
|
||||
var barSize = 4;
|
||||
var rectSize = 7;
|
||||
|
||||
@ -402,10 +411,6 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
|
||||
this.getSaveObject = function() {
|
||||
var obj = { 'value': _this.value, 'time': time };
|
||||
|
||||
if (this.hold) {
|
||||
obj.hold = true;
|
||||
}
|
||||
|
||||
// TODO: save tweens
|
||||
|
||||
return obj;
|
||||
@ -458,6 +463,10 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
|
||||
|
||||
y = scrubber.height/2;
|
||||
|
||||
if (scrubber.controller.type == 'number') {
|
||||
y = GUI.map(_this.value, scrubber.controller.min, scrubber.controller.max, scrubber.height, 0);
|
||||
}
|
||||
|
||||
if (scrubber.timer.activePoint == this) {
|
||||
g.fillStyle = '#ffd800'; //
|
||||
} else if (scrubber.timer.hoverPoint == this) {
|
||||
@ -500,14 +509,12 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
|
||||
|
||||
if (n != null) {
|
||||
|
||||
var nx = GUI.constrain(GUI.map(n.time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1));
|
||||
console.log(n.x, n.y);
|
||||
|
||||
nx = GUI.constrain(GUI.map(nx, 0, 1, 0, scrubber.width));
|
||||
|
||||
g.lineWidth = rectSize/2
|
||||
g.lineWidth = rectSize/2;
|
||||
g.strokeStyle='#222';
|
||||
g.beginPath();
|
||||
g.moveTo(nx, y);
|
||||
g.moveTo(n.x, n.y);
|
||||
g.lineTo(x, y);
|
||||
g.stroke();
|
||||
|
||||
@ -535,3 +542,233 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
GUI.Easing = {}
|
||||
GUI.Easing.Linear = function ( k ) {
|
||||
return k;
|
||||
};
|
||||
|
||||
GUI.Easing.QuadraticEaseIn = function ( k ) {
|
||||
|
||||
return k * k;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.QuadraticEaseOut = function ( k ) {
|
||||
|
||||
return - k * ( k - 2 );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.QuadraticEaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
|
||||
return - 0.5 * ( --k * ( k - 2 ) - 1 );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.CubicEaseIn = function ( k ) {
|
||||
|
||||
return k * k * k;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.CubicEaseOut = function ( k ) {
|
||||
|
||||
return --k * k * k + 1;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.CubicEaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k;
|
||||
return 0.5 * ( ( k -= 2 ) * k * k + 2 );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.QuarticEaseIn = function ( k ) {
|
||||
|
||||
return k * k * k * k;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.QuarticEaseOut = function ( k ) {
|
||||
|
||||
return - ( --k * k * k * k - 1 );
|
||||
|
||||
}
|
||||
|
||||
GUI.Easing.QuarticEaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k;
|
||||
return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 );
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
GUI.Easing.QuinticEaseIn = function ( k ) {
|
||||
|
||||
return k * k * k * k * k;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.QuinticEaseOut = function ( k ) {
|
||||
|
||||
return ( k = k - 1 ) * k * k * k * k + 1;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.QuinticEaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k;
|
||||
return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.SinusoidalEaseIn = function ( k ) {
|
||||
|
||||
return - Math.cos( k * Math.PI / 2 ) + 1;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.SinusoidalEaseOut = function ( k ) {
|
||||
|
||||
return Math.sin( k * Math.PI / 2 );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.SinusoidalEaseInOut = function ( k ) {
|
||||
|
||||
return - 0.5 * ( Math.cos( Math.PI * k ) - 1 );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.ExponentialEaseIn = function ( k ) {
|
||||
|
||||
return k == 0 ? 0 : Math.pow( 2, 10 * ( k - 1 ) );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.ExponentialEaseOut = function ( k ) {
|
||||
|
||||
return k == 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.ExponentialEaseInOut = function ( k ) {
|
||||
|
||||
if ( k == 0 ) return 0;
|
||||
if ( k == 1 ) return 1;
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 2, 10 * ( k - 1 ) );
|
||||
return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.CircularEaseIn = function ( k ) {
|
||||
|
||||
return - ( Math.sqrt( 1 - k * k ) - 1);
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.CircularEaseOut = function ( k ) {
|
||||
|
||||
return Math.sqrt( 1 - --k * k );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.CircularEaseInOut = function ( k ) {
|
||||
|
||||
if ( ( k /= 0.5 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1);
|
||||
return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1);
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.ElasticEaseIn = function( k ) {
|
||||
|
||||
var s, a = 0.1, p = 0.4;
|
||||
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
|
||||
if ( !a || a < 1 ) { a = 1; s = p / 4; }
|
||||
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
|
||||
return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.ElasticEaseOut = function( k ) {
|
||||
|
||||
var s, a = 0.1, p = 0.4;
|
||||
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
|
||||
if ( !a || a < 1 ) { a = 1; s = p / 4; }
|
||||
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
|
||||
return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.ElasticEaseInOut = function( k ) {
|
||||
|
||||
var s, a = 0.1, p = 0.4;
|
||||
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
|
||||
if ( !a || a < 1 ) { a = 1; s = p / 4; }
|
||||
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
|
||||
if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
|
||||
return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.BackEaseIn = function( k ) {
|
||||
|
||||
var s = 1.70158;
|
||||
return k * k * ( ( s + 1 ) * k - s );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.BackEaseOut = function( k ) {
|
||||
|
||||
var s = 1.70158;
|
||||
return ( k = k - 1 ) * k * ( ( s + 1 ) * k + s ) + 1;
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.BackEaseInOut = function( k ) {
|
||||
|
||||
var s = 1.70158 * 1.525;
|
||||
if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
|
||||
return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.BounceEaseIn = function( k ) {
|
||||
|
||||
return 1 - GUI.Easing.Bounce.EaseOut( 1 - k );
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.BounceEaseOut = function( k ) {
|
||||
|
||||
if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
|
||||
|
||||
return 7.5625 * k * k;
|
||||
|
||||
} else if ( k < ( 2 / 2.75 ) ) {
|
||||
|
||||
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
|
||||
|
||||
} else if ( k < ( 2.5 / 2.75 ) ) {
|
||||
|
||||
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
|
||||
|
||||
} else {
|
||||
|
||||
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
GUI.Easing.BounceEaseInOut = function( k ) {
|
||||
|
||||
if ( k < 0.5 ) return GUI.Easing.Bounce.EaseIn( k * 2 ) * 0.5;
|
||||
return GUI.Easing.Bounce.EaseOut( k * 2 - 1 ) * 0.5 + 0.5;
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -13,6 +13,14 @@ GUI.Timer = function(gui) {
|
||||
this.gui = gui;
|
||||
this.gui.timer = this;
|
||||
|
||||
this.gui.domElement.setAttribute('class', 'guidat time');
|
||||
this.gui.domElement.style.width = "100%";
|
||||
|
||||
// Put toggle button on top.
|
||||
var toggleButton = this.gui.domElement.lastChild;
|
||||
this.gui.domElement.removeChild(toggleButton);
|
||||
this.gui.domElement.insertBefore(toggleButton, this.gui.domElement.firstChild);
|
||||
|
||||
var playhead = 0;
|
||||
var lastPlayhead = 0;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user