Added easing curves for numbers, about to break old saving methods for JSON

gui.css

@@ -12,7 +12,6 @@
 	position: absolute;
 	top: 0; 
 	left: 0;
-
 }
 
 .guidat {

index.html

@@ -24,8 +24,6 @@
   <script type="text/javascript" src="time/scrubber.js">
 </script>
   <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>
@@ -36,11 +34,12 @@
   <script type="text/javascript">
 	//<![CDATA[
 				var timer;
-				this.blabla = "ldkjflkdjf";
                 window.onload = function() {
 
                         var fizzyText = new FizzyText("gui-dat");
 					
+						GUI.load('{"windowMin":-2500,"windowWidth":10000,"playhead":0,"snapIncrement":250,"scrubbers":[{"points":[{"value":"gui-dat","time":1},{"value":"is","time":1000},{"value":"getting","time":2000},{"value":"pretty","time":3000},{"value":"tight","time":4000}]},{"points":[]},{"points":[]},{"points":[]},{"points":[]},{"points":[]},{"points":[{"time":1000},{"time":2000},{"time":3000},{"time":4000}]}]}');
+
                         var gui = new GUI();
                         
                         var gui2 = new GUI();
@@ -48,7 +47,6 @@
                         var gui3 = new GUI();
 						timer = new GUI.Timer(gui);
 
-
                         // Text field
                         gui.add(fizzyText, "message")
                            .at(1, "gui-dat")
@@ -84,11 +82,7 @@
                         gui3.add(timer, "windowMin").listen();
                         gui3.add(timer, "windowWidth", 0, 20000).listen();
                         
-
+                        console.log(JSON.stringify(timer.getSaveObject()));
-						
-						gui3.add(this, "blabla");
-                        
-                        //gui.add(timer, "pause");
                         
                 };
 

time/scrubber.js

@@ -8,6 +8,12 @@ GUI.Controller.prototype.at = function(when, what, tween) {
 	return this;
 }
 
+GUI.downloadText = function(text) {
+	var url = 'data:application/plain;charset=utf-8,' + escape( text );
+	console.log(url);
+    window.open( url, '_blank' );
+}
+
 GUI.Scrubber = function(controller, timer) {	
 
 	var _this = this;
@@ -20,6 +26,7 @@ GUI.Scrubber = function(controller, timer) {
 	this.playing = false;
 	
 	var previouslyHandled;
+	this.position = null;
 	
 	this.getSaveObject = function() {	
 		
@@ -72,13 +79,12 @@ GUI.Scrubber = function(controller, timer) {
 	this.domElement = document.createElement('div');
 	this.domElement.setAttribute('class', 'guidat-scrubber');
 
-	var canvas = document.createElement('canvas');
+	this.canvas = document.createElement('canvas');
-	this.domElement.appendChild(canvas);
+	this.domElement.appendChild(this.canvas);
 	
-	this.g = canvas.getContext('2d');
+	this.g = this.canvas.getContext('2d');
 	
 	var width;
-	var position;
 	var height;
 	
 	var mx, pmx;
@@ -109,6 +115,7 @@ GUI.Scrubber = function(controller, timer) {
 		// Draw ticks
 		if (_this.timer.useSnap) {
 			_this.g.lineWidth = 1;
+			// TODO: That's just a damned nasty for loop.
 			for (var i = _this.timer.snap(_this.timer.windowMin); i < _this.timer.windowMin+_this.timer.windowWidth; i+= _this.timer.snapIncrement) {
 				if (i == 0) continue;
 				var x = Math.round(GUI.map(i, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth, 0, width))+0.5;
@@ -147,9 +154,9 @@ GUI.Scrubber = function(controller, timer) {
 	this.render();
 	
 	var onResize = function() {
-		canvas.width = width = _this.domElement.offsetWidth;
+		_this.canvas.width = width = _this.domElement.offsetWidth;
-		canvas.height = height = _this.domElement.offsetHeight;
+		_this.canvas.height = height = _this.domElement.offsetHeight;
-		position = GUI.getOffset(canvas);
+		_this.position = GUI.getOffset(_this.canvas);
 		_this.render();
 	};
 	
@@ -176,7 +183,7 @@ 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);
+		var t = GUI.map(e.pageX, _this.position.left, _this.position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth);
 		_this.timer.playhead = _this.timer.snap(t);
 		scrubPan();
 	}
@@ -188,16 +195,9 @@ GUI.Scrubber = function(controller, timer) {
 		pmx = mx;
 	}
 	
-	var dragActive = function(e) {
+	this.canvas.addEventListener('mousedown', 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);
-		pmx = mx;		
-		_this.sort();
-	}
-	
-	canvas.addEventListener('mousedown', function(e) {
 	
+		// TODO: Detect right click and prevent that menu?
 		if (false) {
 			e.preventDefault();
 			document.addEventListener('mousemove', pan, false);
@@ -207,38 +207,44 @@ GUI.Scrubber = function(controller, timer) {
 		var thisDown = GUI.millis();
 		
 		// Double click creates a keyframe
+		// TODO: You can double click to create a keyframe right on top of an existing keyframe.
+		// TODO: Make 300 a constant of some sort.
 		if (thisDown - lastDown < 300) {
 
 			var val = _this.controller.getValue();
+			
 			if (_this.controller.type == 'boolean') {
 				val = !val;
 			}
+			
 			_this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, val);
+			_this.timer.activePoint.update(); // Grab x and y
+			_this.timer.activePoint.onSelect();
 			_this.add(_this.timer.activePoint);
 			_this.render();
 		
 		// A regular click COULD select a point ...
 		} else if (_this.timer.hoverPoint != null) {
 
+			if (_this.timer.activePoint != _this.timer.hoverPoint) {
+				if (_this.timer.activePoint != null) _this.timer.activePoint.onBlur();
 				_this.timer.activePoint = _this.timer.hoverPoint;
+				_this.timer.activePoint.onSelect();
+			}
 			_this.timer.playhead = _this.timer.snap(_this.timer.activePoint.time);
 			
-			if (_this.controller.type == 'number') {
-				var tweenSelectorLeft = (position.left + _this.timer.activePoint.x) - _this.timer.tweenSelector.offsetWidth/2;
-				var tweenSelectorTop = GUI.getOffset(canvas, _this.timer.gui.domElement).top + _this.timer.activePoint.y - 25;
-				console.log(position.top, GUI.getOffset(_this.timer.gui.domElement).top, tweenSelectorTop);
-				_this.timer.tweenSelector.style.left = tweenSelectorLeft+'px';
-				_this.timer.tweenSelector.style.top = tweenSelectorTop+'px';
-			}
-			
 			pmx = mx = e.pageX;
-			document.addEventListener('mousemove', dragActive, false);
+			document.addEventListener('mousemove', _this.timer.activePoint.onDrag, false);
 			
 			
 			
 		// Or we could just be trying to place the playhead/scrub.
 		} else { 
 		
+			if (_this.timer.activePoint != null) {
+				_this.timer.activePoint.onBlur();
+			}
+		
 			_this.timer.activePoint = null;
 			_this.timer.hoverPoint = null;
 			scrub(e);
@@ -254,7 +260,7 @@ GUI.Scrubber = function(controller, timer) {
 		
 	}, false);
 	
-	canvas.addEventListener('mousewheel', function(e) {
+	this.canvas.addEventListener('mousewheel', function(e) {
 		e.preventDefault();
 		
 		var dx = e.wheelDeltaX*4;
@@ -267,11 +273,11 @@ GUI.Scrubber = function(controller, timer) {
 		return false;
 	}, false);
 	
-	canvas.addEventListener('mousemove', function(e) {
+	this.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)) {
+			if (cur.isHovering(e.pageX-_this.position.left)) {
 				_this.timer.hoverPoint = cur;
 			}
 		}
@@ -285,7 +291,9 @@ GUI.Scrubber = function(controller, timer) {
 	
 	document.addEventListener('mouseup', function() {
 		document.body.style.cursor = 'auto';
-		document.removeEventListener('mousemove', dragActive, false);
+		if (_this.timer.activePoint != null) {
+			document.removeEventListener('mousemove', _this.timer.activePoint.onDrag, false);
+		}
 		document.removeEventListener('mousemove', scrub, false);
 		document.removeEventListener('mousemove', pan, false);
 	}, false);
@@ -426,6 +434,39 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 	var c1 = '#ffd800';
 	var c2 = '#ff9000';
 	
+	var positionTweenSelector = function() {
+		var tweenSelectorLeft = (scrubber.position.left + timer.activePoint.x) - timer.tweenSelector.offsetWidth/2;
+		var tweenSelectorTop = GUI.getOffset(scrubber.canvas, timer.gui.domElement).top + timer.activePoint.y - 25;
+		timer.tweenSelector.style.left = tweenSelectorLeft+'px';
+		timer.tweenSelector.style.top = tweenSelectorTop+'px';
+	}
+	
+	this.onSelect = function() {
+	
+		if (type == 'number') {
+			timer.showTweenSelector();
+			positionTweenSelector();
+		}
+		
+	}
+	
+	this.onBlur = function() {
+		if (type == 'number') {
+			timer.hideTweenSelector();
+		}
+	}
+	
+	this.onDrag = function(e) {
+		var t = GUI.map(e.pageX, scrubber.position.left, scrubber.position.left+scrubber.canvas.width, timer.windowMin, timer.windowMin+timer.windowWidth);
+		_this.time = timer.snap(t);		
+		timer.playhead = timer.snap(t);
+		scrubber.sort();
+		_this.update();
+		if (type == 'number') { 
+			positionTweenSelector();
+		}
+	}
+	
 	this.getSaveObject = function() {
 		var obj = { 'value': _this.value, 'time': time };
 		
@@ -435,9 +476,7 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 
 	};
 	
-	this.tween = function(t) {
+	this.tween = GUI.Easing.Linear;
-		return t;
-	};
 	
 	this.remove = function() {
 		scrubber.points.splice(scrubber.points.indexOf(this), 1);
@@ -495,7 +534,6 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 		
 		// TODO: if hidden because of scroll top.
 		
-
 		if (scrubber.timer.activePoint == this) {
 			g.fillStyle = '#ffd800'; //
 		} else if (scrubber.timer.hoverPoint == this) {
@@ -509,7 +547,6 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 			case 'boolean':
 			
 				g.save();
-				
 				g.translate(x, y-0.5);
 				
 				if (this.value) {
@@ -519,6 +556,7 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 					g.beginPath();
 					g.arc(0, 0, barSize, 0, Math.PI*2, false);
 					g.stroke();
+					
 				} else { 
 				
 					g.rotate(Math.PI/4);
@@ -538,12 +576,26 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 				
 				if (n != null) {
 					
-					
 					g.lineWidth = rectSize/2;
 					g.strokeStyle='#222';
 					g.beginPath();
-					g.moveTo(n.x, n.y);
+					
-					g.lineTo(x, y);
+					g.moveTo(x, y);
+						
+					// TODO: Lines from points that may be outside of the window's scope.
+					if (_this.tween == GUI.Easing.Linear) {
+						g.lineTo(n.x, n.y);
+					} else { 
+						
+						for (var i = 0; i < 1; i+=0.01) {
+							var tx = GUI.map(i, 0, 1, x, n.x);
+							var ty = _this.tween(i);
+							ty = GUI.map(ty, 0, 1, y, n.y);
+							g.lineTo(tx, ty);
+						}
+						
+					}
+					
 					g.stroke();
 					
 				}		
@@ -557,6 +609,7 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 				break;
 		
 			default:	
+			
 				g.save();
 				g.translate(x-barSize/2, 0);
 				//g.fillStyle = c1;
@@ -772,7 +825,7 @@ GUI.Easing.BackEaseInOut = function( k ) {
 
 GUI.Easing.BounceEaseIn = function( k ) {
 
-	return 1 - GUI.Easing.Bounce.EaseOut( 1 - k );
+	return 1 - GUI.Easing.BounceEaseOut( 1 - k );
 
 };
 
@@ -800,8 +853,8 @@ GUI.Easing.BounceEaseOut = function( k ) {
 
 GUI.Easing.BounceEaseInOut = function( k ) {
 
-	if ( k < 0.5 ) return GUI.Easing.Bounce.EaseIn( k * 2 ) * 0.5;
+	if ( k < 0.5 ) return GUI.Easing.BounceEaseIn( k * 2 ) * 0.5;
-	return GUI.Easing.Bounce.EaseOut( k * 2 - 1 ) * 0.5 + 0.5;
+	return GUI.Easing.BounceEaseOut( k * 2 - 1 ) * 0.5 + 0.5;
 
 };
 

time/timer.js

@@ -16,14 +16,12 @@ GUI.Timer = function(gui) {
 	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);
 	
-	
 	// Create tween dropdown.
 	this.tweenSelector = document.createElement('select');
 	this.tweenSelector.setAttribute('class', 'guidat-tween-selector');
@@ -33,7 +31,6 @@ GUI.Timer = function(gui) {
 		this.tweenSelector.appendChild(opt);
 	}
 	this.tweenSelector.addEventListener('change', function(e) {
-		alert("CHANGE");
 		if (_this.activePoint != null) {
 			_this.activePoint.tween = GUI.Easing[this.value];
 		}
@@ -41,6 +38,15 @@ GUI.Timer = function(gui) {
 	this.gui.domElement.appendChild(this.tweenSelector);
 
 	
+	this.showTweenSelector = function() {
+		_this.tweenSelector.style.display = 'block';
+	}
+	this.hideTweenSelector = function() {
+		_this.tweenSelector.style.display = 'none';
+	}
+	
+	this.hideTweenSelector();
+	
 	var playhead = 0;
 	var lastPlayhead = 0;