library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

merging

Browse Source
This commit is contained in:
Jono Brandel 2011-08-10 10:48:51 -07:00
commit 6e3dda6c15
32 changed files with 2979 additions and 4070 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
controllers/controller.boolean.js Normal file
View File

@ -0,0 +1,41 @@
GUI.BooleanController = function() {
this.type = "boolean";
GUI.Controller.apply(this, arguments);
var _this = this;
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
this.domElement.addEventListener('click', function(e) {
// input.checked = !input.checked;
e.preventDefault();
// _this.setValue(input.checked);
}, false);
input.addEventListener('mouseup', function(e) {
input.checked = !input.checked; // counteracts default.
_this.setValue(this.checked);
}, false);
this.domElement.style.cursor = "pointer";
this.propertyNameElement.style.cursor = "pointer";
this.domElement.appendChild(input);
this.updateDisplay = function() {
input.checked = _this.getValue();
};
this.setValue = function(val) {
if (typeof val != "boolean") {
try {
val = eval(val);
} catch (e) {}
}
return GUI.Controller.prototype.setValue.call(this, val);
}
};
GUI.extendController(GUI.BooleanController);

11
controllers/controller.function.js Normal file
View File

@ -0,0 +1,11 @@
GUI.FunctionController = function() {
this.type = "function";
var that = this;
GUI.Controller.apply(this, arguments);
this.domElement.addEventListener('mousedown', function() {
that.object[that.propertyName].call(that.object);
}, false);
this.domElement.style.cursor = "pointer";
this.propertyNameElement.style.cursor = "pointer";
};
GUI.extendController(GUI.FunctionController);

67
controllers/controller.js Normal file
View File

@ -0,0 +1,67 @@
GUI.Controller = function() {
this.parent = arguments[0];
this.object = arguments[1];
this.propertyName = arguments[2];
this.changeListeners = [];
if (arguments.length > 0) this.initialValue = this.propertyName[this.object];
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
this.propertyNameElement = document.createElement('span');
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
this.name(this.propertyName);
this.domElement.appendChild(this.propertyNameElement);
GUI.makeUnselectable(this.domElement);
};
GUI.Controller.prototype.name = function(n) {
this.propertyNameElement.innerHTML = n;
return this;
};
GUI.Controller.prototype.reset = function() {
this.setValue(this.initialValue);
return this;
};
GUI.Controller.prototype.listen = function() {
this.parent.listenTo(this);
return this;
}
GUI.Controller.prototype.unlisten = function() {
this.parent.unlistenTo(this); // <--- hasn't been tested yet
return this;
}
GUI.Controller.prototype.setValue = function(n) {
this.object[this.propertyName] = n;
for (var i in this.changeListeners) {
this.changeListeners[i].call(this, n);
}
// Whenever you call setValue, the display will be updated automatically.
// This reduces some clutter in subclasses. We can also use this method for listen().
this.updateDisplay();
return this;
}
GUI.Controller.prototype.getValue = function() {
return this.object[this.propertyName];
}
GUI.Controller.prototype.updateDisplay = function() {}
GUI.Controller.prototype.addChangeListener = function(fnc) {
this.changeListeners.push(fnc);
return this;
}

146
controllers/controller.number.js Normal file
View File

@ -0,0 +1,146 @@
GUI.NumberController = function() {
this.type = "number";
GUI.Controller.apply(this, arguments);
var _this = this;
// If we simply click and release a number field, we want to highlight it.
// This variable keeps track of whether or not we've dragged
var draggedNumberField = false;
var clickedNumberField = false;
var y = py = 0;
var min = arguments[3];
var max = arguments[4];
var step = arguments[5];
this.step = function(s) {
step = s;
return this;
}
this.__defineGetter__("min", function() {
return min;
});
this.__defineGetter__("max", function() {
return max;
});
if (!step) {
if (min != undefined && max != undefined) {
step = (max-min)*0.01;
} else {
step = 1;
}
}
var numberField = document.createElement('input');
numberField.setAttribute('id', this.propertyName);
numberField.setAttribute('type', 'text');
numberField.setAttribute('value', this.getValue());
if (step) numberField.setAttribute('step', step);
this.domElement.appendChild(numberField);
var slider;
if (min != undefined && max != undefined) {
slider = new GUI.Slider(this, min, max, step, this.getValue());
this.domElement.appendChild(slider.domElement);
}
numberField.addEventListener('blur', function(e) {
var val = parseFloat(this.value);
if (!isNaN(val)) {
_this.updateDisplay();
} else {
this.value = _this.getValue();
}
}, false);
numberField.addEventListener('mousewheel', function(e) {
e.preventDefault();
_this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
return false;
}, false);
numberField.addEventListener('mousedown', function(e) {
py = y = e.pageY;
clickedNumberField = true;
document.addEventListener('mousemove', dragNumberField, false);
}, false);
// Handle up arrow and down arrow
numberField.addEventListener('keydown', function(e) {
switch(e.keyCode) {
case 38: // up
var newVal = _this.getValue() + step;
_this.setValue(newVal);
break;
case 40: // down
var newVal = _this.getValue() - step;
_this.setValue(newVal);
break;
}
}, false);
document.addEventListener('mouseup', function(e) {
document.removeEventListener('mousemove', dragNumberField, false);
GUI.makeSelectable(_this.parent.domElement);
GUI.makeSelectable(numberField);
if (clickedNumberField && !draggedNumberField) {
numberField.focus();
numberField.select();
}
draggedNumberField = false;
clickedNumberField = false;
}, false);
var dragNumberField = function(e) {
draggedNumberField = true;
e.preventDefault();
// We don't want to be highlighting this field as we scroll.
// Or any other fields in this gui for that matter ...
// TODO: Make makeUselectable go through each element and child element.
GUI.makeUnselectable(_this.parent.domElement);
GUI.makeUnselectable(numberField);
py = y;
y = e.pageY;
var dy = py - y;
var newVal = _this.getValue() + dy*step;
_this.setValue(newVal);
return false;
}
this.setValue = function(val) {
val = parseFloat(val);
if (min != undefined && val <= min) {
val = min;
} else if (max != undefined && val >= max) {
val = max;
}
return GUI.Controller.prototype.setValue.call(this, val);
}
this.updateDisplay = function() {
numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
if (slider) slider.value = _this.getValue();
}
};
GUI.extendController(GUI.NumberController);

41
controllers/controller.string.js Normal file
View File

@ -0,0 +1,41 @@
GUI.StringController = function() {
this.type = "string";
var _this = this;
GUI.Controller.apply(this, arguments);
var input = document.createElement('input');
var initialValue = this.getValue();
input.setAttribute('value', initialValue);
input.setAttribute('spellcheck', 'false');
this.domElement.addEventListener('mouseup', function() {
//input.focus();
//input.select();
}, false);
// TODO: getting messed up on ctrl a
input.addEventListener('keyup', function() {
_this.setValue(input.value);
}, false);
input.addEventListener('focus', function() {
GUI.disableKeyListeners = true;
}, false);
input.addEventListener('blur', function() {
GUI.disableKeyListeners = false;
}, false);
this.updateDisplay = function() {
input.value = _this.getValue();
}
this.domElement.appendChild(input);
};
GUI.extendController(GUI.StringController);

51
controllers/slider.js Normal file
View File

@ -0,0 +1,51 @@
GUI.Slider = function(numberController, min, max, step, initValue) {
var min = min;
var max = max;
var step = step;
var clicked = false;
var _this = this;
var x, px;
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-slider-bg');
this.fg = document.createElement('div');
this.fg.setAttribute('class', 'guidat-slider-fg');
this.domElement.appendChild(this.fg);
this.__defineSetter__('value', function(e) {
var pct = GUI.map(e, min, max, 0, 100);
this.fg.style.width = pct+"%";
});
var onDrag = function(e) {
if (!clicked) return;
var pos = GUI.getOffset(_this.domElement);
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) {
clicked = true;
x = px = e.pageX;
_this.domElement.setAttribute('class', 'guidat-slider-bg active');
_this.fg.setAttribute('class', 'guidat-slider-fg active');
onDrag(e);
}, false);
document.addEventListener('mouseup', function(e) {
_this.domElement.setAttribute('class', 'guidat-slider-bg');
_this.fg.setAttribute('class', 'guidat-slider-fg');
clicked = false;
}, false);
document.addEventListener('mousemove', onDrag, false);
this.value = initValue;
}

198
demo/demo.css Normal file
View File

@ -0,0 +1,198 @@
* {
padding: 0px;
margin: 0px;
}
body {
font: 9.5px/13px Lucida Grande, sans-serif;
padding: 0 20px 20px 20px;
}
#container {
max-width: 530px;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
color: #222;
}
hr {
border: 0;
height: 0;
border-top: 1px dotted #ccc;
}
h1 {
font-size: 80px;
font-weight: 800;
text-transform: lowercase;
line-height: 80px;
margin: 39px 0 20px 0;
}
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
text-decoration: none;
margin-right: 7px;
}
h1 img {
width: 45px;
height: 45px;
margin-bottom: 8px;
}
h2 {
margin-top: 30px;
font-size: 18px;
margin-bottom: 24px;
}
h2.section {
margin: 0;
padding: 20px 0 20px;
cursor: pointer;
border-top: 1px dotted #ccc;
-webkit-transition: color 0.15s linear;
}
h2.section:hover {
color: #00aeff;
}
div.collapsed h2, div.expanded h2 {
float: left;
clear: both;
width: 100%;
cursor: pointer;
}
div.expanded h2:before {
content: '-';
}
div.collapsed h2:before {
content: '+';
}
div.expanded h2:before, div.collapsed h2:before {
font-weight: normal;
line-height: 2px;
float: left;
margin-top: 6px;
margin-right: 6px;
font-size: 9px;
font-family: Monaco, monospace;
}
div.collapsed .collapsable {
overflow: hidden;
clear: both;
height: 0;
}
div.expanded .collapsable {
overflow: hidden;
clear: both;
height: auto;
}
div.expanded { cursor: pointer; }
#helvetica-demo {
position: absolute;
left: 0;
top: 0;
width: 800;
height: 300;
z-index: -1;
}
#notifier {
position: fixed;
right: 0;
top: 0;
width: 271px;
height: 142px;
background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
z-index: -2;
margin: 30px 22px 0 0;
}
pre {
margin: 20px 0 20px 0;
padding: 15px;
background-color: #222;
max-width: 500px;
font: 10px Monaco, monospace;
clear: both;
}
p, ul, ol {
font-size: 125%;
clear: both;
line-height: 18px;
margin-bottom: 24px;
}
li {
margin-left: 22px;
}
ul#desc {
list-style: circle;
font-size: 100%;
max-width: 380px;
}
a:link {
color: #00aeff;
}
a:visited {
color: #0fa954;
}
a:hover {
color: #e61d5f;
}
a:active {
color: #54396e;
}
footer {
margin-top: 20px;
background-color: #eee;
width: 510px;
padding: 10px;
clear: both;
color: #444;
}
pre a:link,
pre a:visited,
pre a:active,
pre a:hover {
color: #ccc;
}
code {
font: 10px Monaco, monospace;
}
code strong {
font-weight: normal;
color: #e61d5f;
}
/* SPAN elements with the classes below are added by prettyprint. */
.str { color: #0fa954; }
.kwd { color: #e61d5f; }
.com { color: #555; }
.typ { color: #ccc; }
.lit { color: #00aeff; }
.pun, .opn, .clo { color: #777; }
.pln { color: #ccc; }
.tag { color: #555; }
.atn { color: #555; }
.atv { color: #777; }
.dec { color: #606; }

241
demo/demo.js Normal file
View File

@ -0,0 +1,241 @@
function FizzyText(message) {
var _this = this;
// These are the variables _this we manipulate with gui-dat.
// Notice they're all defined with "this". _this makes them public.
// Otherwise, gui-dat can't see them.
this.growthSpeed = 0.5; // how fast do particles change size?
this.maxSize = 3.2; // how big can they get?
this.noiseStrength = 10; // how turbulent is the flow?
this.speed = 0.4; // how fast do particles move?
this.displayOutline = false; // should we draw the message as a stroke?
this.framesRendered = 0;
this.x = 0;
this.y = 0;
this.scale = 1;
// __defineGetter__ and __defineSetter__ makes JavaScript believe _this
// we've defined a variable 'this.message'. This way, whenever we
// change the message variable, we can call some more functions.
this.__defineGetter__("message", function () {
return message;
});
this.__defineSetter__("message", function (m) {
message = m;
createBitmap(message);
});
// We can even add functions to the GUI! As long as they have
// 0 arguments, we can call them from the dat-gui panel.
this.explode = function() {
var mag = Math.random()*30+30;
for (var i in particles) {
var angle= Math.random()*Math.PI*2;
particles[i].vx = Math.cos(angle)*mag;
particles[i].vy = Math.sin(angle)*mag;
}
};
////////////////////////////////////////////////////////////////
var _this = this;
var width, height;
var textAscent = 140;
var textOffsetLeft = 20;
var noiseScale = 300;
var frameTime = 30;
var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"];
// This is the context we use to get a bitmap of text using
// the getImageData function.
var r = document.createElement('canvas');
var s = r.getContext('2d');
// This is the context we actually use to draw.
var c = document.createElement('canvas');
var g = c.getContext('2d');
var onResize = function() {
r.width = c.width = width = window.innerWidth;
r.height = c.height = height = window.innerHeight;
console.log(width, height);
}
window.addEventListener('resize', function() {
onResize();
createBitmap(this.message);
}, false);
onResize();
// Add our demo to the HTML
document.getElementById('helvetica-demo').appendChild(c);
// Stores bitmap image
var pixels = [];
// Stores a list of particles
var particles = [];
// Set g.font to the same font as the bitmap canvas, incase we
// want to draw some outlines.
s.font = g.font = "bold " + textAscent + "px Helvetica, Arial, sans-serif";
// Instantiate some particles
for (var i = 0; i < 1500; i++) {
particles.push(new Particle(Math.random() * width, Math.random() * height));
}
// This function creates a bitmap of pixels based on your message
// It's called every time we change the message property.
var createBitmap = function (msg) {
s.fillStyle = "#fff";
s.fillRect(0, 0, width, height);
s.fillStyle = "#222";
s.textAlign = 'center';
s.fillText(msg, width/2, height/2);
// Pull reference
var imageData = s.getImageData(0, 0, width, height);
pixels = imageData.data;
};
// Called once per frame, updates the animation.
var render = function () {
_this.framesRendered ++;
g.fillStyle="#000";
g.fillRect(0, 0, width, height);
g.save();
g.translate(width/2, height/2);
g.scale(_this.scale, _this.scale);
g.translate(-width/2+_this.x, -height/2+_this.y);
if (_this.displayOutline) {
g.globalCompositeOperation = "source-over";
g.strokeStyle = "#000";
g.lineWidth = .5;
g.strokeText(message, textOffsetLeft+width/2, textAscent+height/2);
}
g.globalCompositeOperation = "lighter";
for (var i = 0; i < particles.length; i++) {
g.fillStyle = colors[i % colors.length];
particles[i].render();
}
g.restore();
};
// Returns x, y coordinates for a given index in the pixel array.
var getPosition = function (i) {
return {
x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
y: Math.floor(i / (width * 4))
};
};
// Returns a color for a given pixel in the pixel array.
var getColor = function (x, y) {
var base = (Math.floor(y) * width + Math.floor(x)) * 4;
var c = {
r: pixels[base + 0],
g: pixels[base + 1],
b: pixels[base + 2],
a: pixels[base + 3]
};
return "rgb(" + c.r + "," + c.g + "," + c.b + ")";
};
// This calls the setter we've defined above, so it also calls
// the createBitmap function.
this.message = message;
var loop = function() {
render();
}
// This calls the render function every 30 milliseconds.
setInterval(loop, frameTime);
// This class is responsible for drawing and moving those little
// colored dots.
function Particle(x, y, c) {
// Position
this.x = x;
this.y = y;
// Size of particle
this.r = 0;
// This velocity is used by the explode function.
this.vx = 0;
this.vy = 0;
// Called every frame
this.render = function () {
// What color is the pixel we're sitting on top of?
var c = getColor(this.x, this.y);
// Where should we move?
var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
// Are we within the boundaries of the image?
var onScreen = this.x > 0 && this.x < width &&
this.y > 0 && this.y < height;
var isBlack = c != "rgb(255,255,255)" && onScreen;
// If we're on top of a black pixel, grow.
// If not, shrink.
if (isBlack) {
this.r += _this.growthSpeed;
} else {
this.r -= _this.growthSpeed;
}
// This velocity is used by the explode function.
this.vx *= 0.5;
this.vy *= 0.5;
// Change our position based on the flow field and our
// explode velocity.
this.x += Math.cos(angle) * _this.speed + this.vx;
this.y += -Math.sin(angle) * _this.speed + this.vy;
this.r = GUI.constrain(this.r, 0, _this.maxSize);
// If we're tiny, keep moving around until we find a black
// pixel.
if (this.r <= 0) {
this.x = Math.random() * width;
this.y = Math.random() * height;
return; // Don't draw!
}
// Draw the circle.
g.beginPath();
g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
g.fill();
}
}
}

22
docs/RequestAnimationFrame.js
View File

@ -1,22 +0,0 @@
/**
* Provides requestAnimationFrame in a cross browser way.
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
*/
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
} )();
}

BIN
docs/assets/arrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

188
docs/assets/favicon.ai
View File

File diff suppressed because one or more lines are too long

BIN
docs/assets/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 183 B

BIN
docs/assets/itgivesyouthis.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.2 KiB

BIN
docs/assets/profile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 670 B

231
docs/demo.js
View File

@ -1,231 +0,0 @@
function FizzyText(message) {
var that = this;
// These are the variables that we manipulate with gui-dat.
// Notice they're all defined with "this". That makes them public.
// Otherwise, gui-dat can't see them.
this.growthSpeed = 0.2; // how fast do particles change size?
this.maxSize = 5.59; // how big can they get?
this.noiseStrength = 10; // how turbulent is the flow?
this.speed = 0.4; // how fast do particles move?
this.displayOutline = false; // should we draw the message as a stroke?
this.framesRendered = 0;
// __defineGetter__ and __defineSetter__ makes JavaScript believe that
// we've defined a variable 'this.message'. This way, whenever we
// change the message variable, we can call some more functions.
this.__defineGetter__("message", function () {
return message;
});
this.__defineSetter__("message", function (m) {
message = m;
createBitmap(message);
});
// We can even add functions to the DAT.GUI! As long as they have
// 0 arguments, we can call them from the dat-gui panel.
this.explode = function() {
var mag = Math.random() * 30 + 30;
for (var i in particles) {
var angle = Math.random() * Math.PI * 2;
particles[i].vx = Math.cos(angle) * mag;
particles[i].vy = Math.sin(angle) * mag;
}
};
////////////////////////////////////////////////////////////////
var _this = this;
var width = 550;
var height = 200;
var textAscent = 101;
var textOffsetLeft = 80;
var noiseScale = 300;
var frameTime = 30;
var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"];
// This is the context we use to get a bitmap of text using
// the getImageData function.
var r = document.createElement('canvas');
var s = r.getContext('2d');
// This is the context we actually use to draw.
var c = document.createElement('canvas');
var g = c.getContext('2d');
r.setAttribute('width', width);
c.setAttribute('width', width);
r.setAttribute('height', height);
c.setAttribute('height', height);
// Add our demo to the HTML
document.getElementById('helvetica-demo').appendChild(c);
// Stores bitmap image
var pixels = [];
// Stores a list of particles
var particles = [];
// Set g.font to the same font as the bitmap canvas, incase we
// want to draw some outlines.
s.font = g.font = "800 82px helvetica, arial, sans-serif";
// Instantiate some particles
for (var i = 0; i < 1000; i++) {
particles.push(new Particle(Math.random() * width, Math.random() * height));
}
// This function creates a bitmap of pixels based on your message
// It's called every time we change the message property.
var createBitmap = function (msg) {
s.fillStyle = "#fff";
s.fillRect(0, 0, width, height);
s.fillStyle = "#222";
s.fillText(msg, textOffsetLeft, textAscent);
// Pull reference
var imageData = s.getImageData(0, 0, width, height);
pixels = imageData.data;
};
// Called once per frame, updates the animation.
var render = function () {
that.framesRendered ++;
g.clearRect(0, 0, width, height);
if (_this.displayOutline) {
g.globalCompositeOperation = "source-over";
g.strokeStyle = "#000";
g.lineWidth = .5;
g.strokeText(message, textOffsetLeft, textAscent);
}
g.globalCompositeOperation = "darker";
for (var i = 0; i < particles.length; i++) {
g.fillStyle = colors[i % colors.length];
particles[i].render();
}
};
// Returns x, y coordinates for a given index in the pixel array.
var getPosition = function (i) {
return {
x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
y: Math.floor(i / (width * 4))
};
};
// Returns a color for a given pixel in the pixel array.
var getColor = function (x, y) {
var base = (Math.floor(y) * width + Math.floor(x)) * 4;
var c = {
r: pixels[base + 0],
g: pixels[base + 1],
b: pixels[base + 2],
a: pixels[base + 3]
};
return "rgb(" + c.r + "," + c.g + "," + c.b + ")";
};
// This calls the setter we've defined above, so it also calls
// the createBitmap function.
this.message = message;
var loop = function() {
requestAnimationFrame(loop);
// Don't render if we don't see it.
// Would be cleaner if I dynamically acquired the top of the canvas.
if (document.body.scrollTop < height + 20) {
render();
}
}
// This calls the render function every 30 milliseconds.
loop();
// This class is responsible for drawing and moving those little
// colored dots.
function Particle(x, y, c) {
// Position
this.x = x;
this.y = y;
// Size of particle
this.r = 0;
// This velocity is used by the explode function.
this.vx = 0;
this.vy = 0;
// Called every frame
this.render = function () {
// What color is the pixel we're sitting on top of?
var c = getColor(this.x, this.y);
// Where should we move?
var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
// Are we within the boundaries of the image?
var onScreen = this.x > 0 && this.x < width &&
this.y > 0 && this.y < height;
var isBlack = c != "rgb(255,255,255)" && onScreen;
// If we're on top of a black pixel, grow.
// If not, shrink.
if (isBlack) {
this.r += _this.growthSpeed;
} else {
this.r -= _this.growthSpeed;
}
// This velocity is used by the explode function.
this.vx *= 0.5;
this.vy *= 0.5;
// Change our position based on the flow field and our
// explode velocity.
this.x += Math.cos(angle) * _this.speed + this.vx;
this.y += -Math.sin(angle) * _this.speed + this.vy;
this.r = DAT.GUI.constrain(this.r, 0, _this.maxSize);
// If we're tiny, keep moving around until we find a black
// pixel.
if (this.r <= 0) {
this.x = Math.random() * width;
this.y = Math.random() * height;
return; // Don't draw!
}
// Draw the circle.
g.beginPath();
g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
g.fill();
}
}
}

265
docs/docs.css
View File

@ -1,265 +0,0 @@
* {
padding: 0px;
margin: 0px;
}
body {
font: 9.5px/13px Lucida Grande, sans-serif;
padding: 0 20px 20px 20px;
}
#container {
max-width: 530px;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
color: #222;
}
hr {
border: 0;
height: 0;
border-top: 1px dotted #ccc;
}
h1 {
font-size: 80px;
font-weight: 800;
text-transform: lowercase;
line-height: 80px;
margin: 39px 0 20px 0;
}
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
text-decoration: none;
margin-right: 7px;
}
h1 img {
width: 45px;
height: 45px;
margin-bottom: 8px;
}
h2 {
margin-top: 30px;
font-size: 18px;
margin-bottom: 24px;
}
h2.section {
margin: 0;
padding: 20px 0px 20px 0px;
cursor: pointer;
border-top: 1px dotted #ccc;
-webkit-transition: color 0.15s linear;
}
h2.section:hover {
color: #00aeff;
}
div.collapsed h2, div.expanded h2 {
float: left;
clear: both;
width: 100%;
cursor: pointer;
}
.last {
margin-bottom: 0px !important;
}
.first {
margin-top: 0px;
}
div.trans {
border-top: 1px dotted #ccc;
margin: 0px 0px 20px 0px;
}
ol#secrets {
padding: 0px;
margin: 0px;
}
div.expanded h2:before {
content: '-';
}
div.collapsed h2:before {
content: '+';
}
div.expanded h2:before, div.collapsed h2:before {
font-weight: normal;
line-height: 2px;
float: left;
margin-top: 6px;
margin-right: 6px;
font-size: 9px;
font-family: Monaco, monospace;
}
div.collapsable>div {
padding-bottom: 10px;
}
div.collapsable {
overflow: hidden;
clear: both;
-moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out;
transition: height .2s ease-out;
}
div.collapsable div {
padding-bottom: 20px;
margin-bottom: -20px;
height: auto;
}
div.collapsed .collapsable {
overflow: hidden;
clear: both;
height: 0;
}
div.expanded {
cursor: pointer;
}
#helvetica-demo {
position: absolute;
left: 0;
top: 0;
width: 800;
height: 300;
z-index: -1;
}
#notifier {
position: fixed;
right: 0;
top: 230px;
width: 271px;
height: 142px;
background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
z-index: -2;
margin: 30px 22px 0 0;
}
pre {
margin: 20px 0 20px 0;
padding: 15px;
background-color: #222;
max-width: 500px;
font: 10px Monaco, monospace;
clear: both;
}
p, ul, ol {
font-size: 125%;
clear: both;
line-height: 18px;
margin-bottom: 24px;
}
li {
margin-left: 22px;
}
ul#desc {
list-style: circle;
font-size: 100%;
max-width: 380px;
}
a:link {
color: #00aeff;
}
a:visited {
color: #0fa954;
}
a:hover {
color: #e61d5f;
}
a:active {
color: #54396e;
}
footer {
margin-top: 20px;
background-color: #eee;
width: 510px;
padding: 10px;
clear: both;
color: #444;
}
pre a:link,
pre a:visited,
pre a:active,
pre a:hover {
color: #ccc;
}
code {
font: 10px Monaco, monospace;
}
code strong {
font-weight: normal;
color: #e61d5f;
}
.str {
color: #0fa954;
}
.kwd {
color: #e61d5f;
}
.com {
color: #555;
}
.typ {
color: #ccc;
}
.lit {
color: #00aeff;
}
.pun, .opn, .clo {
color: #777;
}
.pln {
color: #ccc;
}
.tag {
color: #555;
}
.atn {
color: #555;
}
.atv {
color: #777;
}
.dec {
color: #606;
}

181
docs/improvedNoise.js
View File

@ -1,181 +0,0 @@
// http://mrl.nyu.edu/~perlin/noise/
var ImprovedNoise = function () {
var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
for ( var i = 0; i < 256 ; i++ ) {
p[ 256 + i ] = p[ i ];
}
function fade( t ) {
return t * t * t * ( t * ( t * 6 - 15 ) + 10 );
}
function lerp( t, a, b ) {
return a + t * ( b - a );
}
function grad( hash, x, y, z ) {
var h = hash & 15;
var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
return ( ( h & 1 ) == 0 ? u : -u ) + ( ( h & 2 ) == 0 ? v : -v );
}
return {
noise: function ( x, y, z ) {
var floorX = Math.floor( x ), floorY = Math.floor( y ), floorZ = Math.floor( z );
var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
x -= floorX;
y -= floorY;
z -= floorZ;
var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
var u = fade( x ), v = fade( y ), w = fade( z );
var A = p[ X ] + Y, AA = p[ A ] + Z, AB = p[ A + 1 ] + Z, B = p[ X + 1 ] + Y, BA = p[ B ] + Z, BB = p[ B + 1 ] + Z;
return lerp( w, lerp( v, lerp( u, grad( p[ AA ], x, y, z ),
grad( p[ BA ], xMinus1, y, z ) ),
lerp( u, grad( p[ AB ], x, yMinus1, z ),
grad( p[ BB ], xMinus1, yMinus1, z ) ) ),
lerp( v, lerp( u, grad( p[ AA + 1 ], x, y, zMinus1 ),
grad( p[ BA + 1 ], xMinus1, y, z - 1 ) ),
lerp( u, grad( p[ AB + 1 ], x, yMinus1, zMinus1 ),
grad( p[ BB + 1 ], xMinus1, yMinus1, zMinus1 ) ) ) );
}
}
}
var currentRandom = Math.random;
// Pseudo-random generator
function Marsaglia(i1, i2) {
// from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c
var z=i1 || 362436069, w= i2 || 521288629;
var nextInt = function() {
z=(36969*(z&65535)+(z>>>16)) & 0xFFFFFFFF;
w=(18000*(w&65535)+(w>>>16)) & 0xFFFFFFFF;
return (((z&0xFFFF)<<16) | (w&0xFFFF)) & 0xFFFFFFFF;
};
this.nextDouble = function() {
var i = nextInt() / 4294967296;
return i < 0 ? 1 + i : i;
};
this.nextInt = nextInt;
}
Marsaglia.createRandomized = function() {
var now = new Date();
return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
};
// Noise functions and helpers
function PerlinNoise(seed) {
var rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized();
var i, j;
// http://www.noisemachine.com/talk1/17b.html
// http://mrl.nyu.edu/~perlin/noise/
// generate permutation
var p = new Array(512);
for(i=0;i<256;++i) { p[i] = i; }
for(i=0;i<256;++i) { var t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; }
// copy to avoid taking mod in p[0];
for(i=0;i<256;++i) { p[i + 256] = p[i]; }
function grad3d(i,x,y,z) {
var h = i & 15; // convert into 12 gradient directions
var u = h<8 ? x : y,
v = h<4 ? y : h===12||h===14 ? x : z;
return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v);
}
function grad2d(i,x,y) {
var v = (i & 1) === 0 ? x : y;
return (i&2) === 0 ? -v : v;
}
function grad1d(i,x) {
return (i&1) === 0 ? -x : x;
}
function lerp(t,a,b) { return a + t * (b - a); }
this.noise3d = function(x, y, z) {
var X = Math.floor(x)&255, Y = Math.floor(y)&255, Z = Math.floor(z)&255;
x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y, fz = (3-2*z)*z*z;
var p0 = p[X]+Y, p00 = p[p0] + Z, p01 = p[p0 + 1] + Z, p1 = p[X + 1] + Y, p10 = p[p1] + Z, p11 = p[p1 + 1] + Z;
return lerp(fz,
lerp(fy, lerp(fx, grad3d(p[p00], x, y, z), grad3d(p[p10], x-1, y, z)),
lerp(fx, grad3d(p[p01], x, y-1, z), grad3d(p[p11], x-1, y-1,z))),
lerp(fy, lerp(fx, grad3d(p[p00 + 1], x, y, z-1), grad3d(p[p10 + 1], x-1, y, z-1)),
lerp(fx, grad3d(p[p01 + 1], x, y-1, z-1), grad3d(p[p11 + 1], x-1, y-1,z-1))));
};
this.noise2d = function(x, y) {
var X = Math.floor(x)&255, Y = Math.floor(y)&255;
x -= Math.floor(x); y -= Math.floor(y);
var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y;
var p0 = p[X]+Y, p1 = p[X + 1] + Y;
return lerp(fy,
lerp(fx, grad2d(p[p0], x, y), grad2d(p[p1], x-1, y)),
lerp(fx, grad2d(p[p0 + 1], x, y-1), grad2d(p[p1 + 1], x-1, y-1)));
};
this.noise1d = function(x) {
var X = Math.floor(x)&255;
x -= Math.floor(x);
var fx = (3-2*x)*x*x;
return lerp(fx, grad1d(p[X], x), grad1d(p[X+1], x-1));
};
}
// these are lifted from Processing.js
// processing defaults
var noiseProfile = { generator: undefined, octaves: 4, fallout: 0.5, seed: undefined};
function noise(x, y, z) {
if(noiseProfile.generator === undefined) {
// caching
noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
}
var generator = noiseProfile.generator;
var effect = 1, k = 1, sum = 0;
for(var i=0; i<noiseProfile.octaves; ++i) {
effect *= noiseProfile.fallout;
switch (arguments.length) {
case 1:
sum += effect * (1 + generator.noise1d(k*x))/2; break;
case 2:
sum += effect * (1 + generator.noise2d(k*x, k*y))/2; break;
case 3:
sum += effect * (1 + generator.noise3d(k*x, k*y, k*z))/2; break;
}
k *= 2;
}
return sum;
};

1538
docs/prettify.js
View File

File diff suppressed because it is too large Load Diff

241
gui.css Normal file
View File

@ -0,0 +1,241 @@
#guidat {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1001;
}
.guidat-tween-selector {
z-index: 1001;
position: absolute;
top: 0;
left: 0;
}
.guidat {
float: right;
padding: 0px;
margin: 0px 20px 0px 0px;
}
.guidat-scrubber {
width: 75%;
float: right;
margin-top: -3px;
margin-right: -2px;
margin-left: 3px;
background-color: #333;
border-bottom: 1px solid #444;
height: 31px;
}
#guidat-save-dialogue {
z-index: 1001;
-webkit-box-shadow: rgba(0,0,0,0.6) 0px 0px 10px;
position: fixed;
top: 50%;
left: 50%;
background-color: #111;
color: #ccc;
width: 400px;
height: 228px;
margin-top: -114px;
margin-left: -200px;
text-align: center;
padding: 10px;
}
#guidat-save-dialogue textarea {
margin-top: 9px;
width: 390px;
height: 160px;
font-size: 9px;
border: 0;
font-family: Monaco, monospace;
padding: 5px;
}
#guidat-save-dialogue a {
display: block;
text-decoration: none;
background-color: rgba(255,255,255,0.1);
border: 1px outset #444;
margin-bottom: 9px;
padding: 5px;
}
.guidat {
color: #fff;
opacity: 0.97;
text-align: left;
background-color: #fff;
}
.guidat,
.guidat input {
font: 9.5px Lucida Grande, sans-serif;
}
.guidat-controllers {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
background-color: rgba(0,0,0,0.1);
}
.guidat-controllers hr {
height: 0;
border-top: 1px solid #000;
}
a.guidat-toggle {
text-decoration: none;
cursor: pointer;
color: #fff;
background-color: #222;
text-align: center;
display: block;
padding: 5px;
}
a.guidat-toggle:hover {
background-color: #000;
}
.guidat-controller {
padding: 3px;
height: 25px;
clear: left;
border-bottom: 1px solid #222;
background-color: #111;
}
.guidat-controller,
.guidat-controller input,
.guidat-slider-bg,
.guidat-slider-fg {
-moz-transition: background-color 0.15s linear;
-webkit-transition: background-color 0.15s linear;
transition: background-color 0.15s linear;
}
.guidat-controller.boolean:hover,
.guidat-controller.function:hover {
background-color: #000;
}
.guidat-controller input {
float: right;
outline: none;
border: 0;
padding: 4px;
margin-top: 2px;
background-color: #222;
}
.guidat-controller input:hover {
background-color: #444;
}
.guidat-controller input:focus {
background-color: #555;
}
.guidat-controller.number {
border-left: 5px solid #00aeff ;
}
.guidat-controller.string {
border-left: 5px solid #1ed36f;
}
.guidat-controller.string input {
border: 0;
width: 125px;
color: #1ed36f;
margin-right: 2px;
}
.guidat-controller.boolean {
border-left: 5px solid #54396e;
}
.guidat-controller.function {
border-left: 5px solid #e61d5f;
}
.guidat-controller.number input[type=text] {
margin-left: 5px;
margin-right: 2px;
color: #00aeff;
width: 35px;
}
.guidat .guidat-controller.boolean input {
margin-top: 6px;
margin-right: 2px;
font-size: 20px;
}
.guidat-controller:last-child {
border-bottom: none;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.guidat-propertyname {
padding: 5px;
padding-top: 7px;
cursor: default;
display: inline-block;
}
.guidat-slider-bg:hover,
.guidat-slider-bg.active {
background-color: #444;
}
.guidat-slider-bg:hover .guidat-slider-fg,
.guidat-slider-bg.active .guidat-slider-fg {
background-color: #52c8ff;
}
.guidat-slider-bg {
background-color: #222;
cursor: ew-resize;
width: 85px;
margin-top: 2px;
float: right;
height: 21px;
}
.guidat-slider-fg {
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%;
}

621
gui.js Normal file
View File

@ -0,0 +1,621 @@
var GUI = function() {
GUI.allGuis.push(this);
if (GUI.loadedJSON != null && GUI.loadedJSON.guis.length > 0) {
// Consume object at index 0
var json = GUI.loadedJSON.guis.splice(0, 1)[0];
}
this.__defineGetter__("json", function() {
return json;
});
var _this = this;
// For use with GUIScrubber
this.timer = null;
var MIN_WIDTH = 240;
var MAX_WIDTH = 500;
var controllers = [];
var listening = [];
var autoListen = true;
var listenInterval;
// Sum total of heights of controllers in this gui
var controllerHeight;
var curControllerContainerHeight = 0;
var _this = this;
var open = false;
// Prevents checkForOverflow bug in which loaded gui appearance
// settings are not respected by presence of scrollbar.
var explicitOpenHeight = false;
// How big we get when we open
var openHeight;
var name;
var resizeTo = 0;
var resizeTimeout;
var width = 280;
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat');
this.domElement.style.width = width+'px';
var controllerContainer = document.createElement('div');
controllerContainer.setAttribute('class', 'guidat-controllers');
// Firefox hack to prevent horizontal scrolling
controllerContainer.addEventListener('DOMMouseScroll', function(e) {
var scrollAmount = this.scrollTop;
if (e.wheelDelta) {
scrollAmount+=e.wheelDelta;
} else if (e.detail) {
scrollAmount+=e.detail;
}
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
controllerContainer.scrollTop = scrollAmount;
}, false);
controllerContainer.style.height = '0px';
var toggleButton = document.createElement('a');
toggleButton.setAttribute('class', 'guidat-toggle');
toggleButton.setAttribute('href', '#');
toggleButton.innerHTML = "Show Controls";
var toggleDragged = false;
var dragDisplacementY = 0;
var togglePressed = false;
var my, pmy, mx, pmx;
this.popout = function(e) {
var w = window.open("index.html",
"mywindow",
"location=1,status=1,scrollbars=1,width=100,height=100");
w.document.title = "gui-dat";
console.log(w.document);
}
var resize = function(e) {
pmy = my;
pmx = mx;
my = e.pageY;
mx = e.pageX;
var dmy = _this.timer ? pmy - my : my - pmy;
if (!open) {
if (dmy < 0) {
open = true;
curControllerContainerHeight = openHeight = 1;
toggleButton.innerHTML = name || "Hide Controls";
} else {
return;
}
}
// TODO: Flip this if you want to resize to the right.
var dmx = pmx - mx;
if (dmy > 0 &&
curControllerContainerHeight > controllerHeight) {
var d = GUI.map(curControllerContainerHeight, controllerHeight, controllerHeight + 100, 1, 0);
dmy *= d;
}
toggleDragged = true;
dragDisplacementY += dmy;
dragDisplacementX += dmx;
openHeight += dmy;
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';
}
checkForOverflow();
};
toggleButton.addEventListener('mousedown', function(e) {
pmy = my = e.pageY;
pmx = mx = e.pageX;
togglePressed = true;
e.preventDefault();
dragDisplacementY = 0;
dragDisplacementX = 0;
document.addEventListener('mousemove', resize, false);
return false;
}, false);
toggleButton.addEventListener('click', function(e) {
e.preventDefault();
return false;
}, false);
// Clears lingering slider column
var correctWidth = function() {
_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();
if (!_this.timer) {
correctWidth();
}
}
if (togglePressed && toggleDragged) {
if (dragDisplacementX == 0 && !_this.timer) {
correctWidth();
}
if (openHeight > controllerHeight) {
clearTimeout(resizeTimeout);
openHeight = resizeTo = controllerHeight;
beginResize();
} else if (controllerContainer.children.length >= 1) {
var singleControllerHeight = controllerContainer.children[0].offsetHeight;
clearTimeout(resizeTimeout);
var target = Math.round(curControllerContainerHeight/singleControllerHeight)*singleControllerHeight-1;
resizeTo = target;
if (resizeTo <= 0) {
_this.hide();
openHeight = singleControllerHeight*2;
} else {
openHeight = resizeTo;
beginResize();
}
}
}
document.removeEventListener('mousemove', resize, false);
e.preventDefault();
toggleDragged = false;
togglePressed = false;
return false;
}, false);
this.domElement.appendChild(controllerContainer);
this.domElement.appendChild(toggleButton);
if (GUI.autoPlace) {
if(GUI.autoPlaceContainer == null) {
GUI.autoPlaceContainer = document.createElement('div');
GUI.autoPlaceContainer.setAttribute("id", "guidat");
document.body.appendChild(GUI.autoPlaceContainer);
}
GUI.autoPlaceContainer.appendChild(this.domElement);
}
this.autoListenIntervalTime = 1000/60;
var createListenInterval = function() {
listenInterval = setInterval(function() {
_this.listen();
}, this.autoListenIntervalTime);
}
this.__defineSetter__("autoListen", function(v) {
autoListen = v;
if (!autoListen) {
clearInterval(listenInterval);
} else {
if (listening.length > 0) createListenInterval();
}
});
this.__defineGetter__("autoListen", function(v) {
return autoListen;
});
this.listenTo = function(controller) {
// TODO: check for duplicates
if (listening.length == 0) {
createListenInterval();
}
listening.push(controller);
};
this.unlistenTo = function(controller) {
// TODO: test this
for(var i = 0; i < listening.length; i++) {
if(listening[i] == controller) listening.splice(i, 1);
}
if(listening.length <= 0) {
clearInterval(listenInterval);
}
};
this.listen = function(whoToListenTo) {
var arr = whoToListenTo || listening;
for (var i in arr) {
arr[i].updateDisplay();
}
};
this.listenAll = function() {
this.listen(controllers);
}
this.autoListen = true;
var alreadyControlled = function(object, propertyName) {
for (var i in controllers) {
if (controllers[i].object == object &&
controllers[i].propertyName == propertyName) {
return true;
}
}
return false;
};
var construct = function(constructor, args) {
function F() {
return constructor.apply(this, args);
}
F.prototype = constructor.prototype;
return new F();
};
// TODO: Keep this? If so, controllerContainerHeight should be aware of these, which it is not.
this.divider = function() {
controllerContainer.appendChild(document.createElement('hr'));
}
this.add = function() {
var object = arguments[0];
if (arguments.length == 1) {
for (var i in object) {
this.add(object, i);
}
return;
}
var propertyName = arguments[1];
// Have we already added this?
if (alreadyControlled(object, propertyName)) {
GUI.error("Controller for \"" + propertyName+"\" already added.");
return;
}
var value = object[propertyName];
// Does this value exist? Is it accessible?
if (value == undefined) {
GUI.error(object + " either has no property \""+propertyName+"\", or the property is inaccessible.");
return;
}
var type = typeof value;
var handler = handlerTypes[type];
// Do we know how to deal with this data type?
if (handler == undefined) {
GUI.error("Cannot create controller for data type \""+type+"\"");
return;
}
var args = [this]; // Set first arg (parent) to this
for (var j = 0; j < arguments.length; j++) {
args.push(arguments[j]);
}
var controllerObject = construct(handler, args);
// Were we able to make the controller?
if (!controllerObject) {
GUI.error("Error creating controller for \""+propertyName+"\".");
return;
}
// Success.
controllerContainer.appendChild(controllerObject.domElement);
controllers.push(controllerObject);
GUI.allControllers.push(controllerObject);
// Do we have a saved value for this controller?
if (json && json.values.length > 0) {
var val = json.values.splice(0, 1)[0];
if (type != "function") {
controllerObject.setValue(val);
}
}
// Compute sum height of controllers.
checkForOverflow();
// Prevents checkForOverflow bug in which loaded gui appearance
// settings are not respected by presence of scrollbar.
if (!explicitOpenHeight) {
openHeight = controllerHeight;
}
if (this.timer != null) {
new GUI.Scrubber(controllerObject, this.timer);
}
return controllerObject;
}
var checkForOverflow = function() {
controllerHeight = 0;
for (var i in controllers) {
controllerHeight += controllers[i].domElement.offsetHeight;
}
if (controllerHeight - 1 > openHeight) {
controllerContainer.style.overflowY = "auto";
} else {
controllerContainer.style.overflowY = "hidden";
}
}
var handlerTypes = {
"number": GUI.NumberController,
"string": GUI.StringController,
"boolean": GUI.BooleanController,
"function": GUI.FunctionController
};
var alreadyControlled = function(object, propertyName) {
for (var i in controllers) {
if (controllers[i].object == object &&
controllers[i].propertyName == propertyName) {
return true;
}
}
return false;
};
var construct = function(constructor, args) {
function F() {
return constructor.apply(this, args);
}
F.prototype = constructor.prototype;
return new F();
};
this.reset = function() {
// TODO
}
this.getJSON = function() {
var values = [];
for (var i in controllers) {
var val;
switch (controllers[i].type) {
case 'function':
val = null;
break;
case 'number':
val = GUI.roundToDecimal(controllers[i].getValue(), 4);
break;
default:
val = controllers[i].getValue();
break;
}
values.push(val);
}
var obj= {open:open, width:width, openHeight:openHeight, scroll:controllerContainer.scrollTop, values:values}
if (this.timer) {
obj.timer = timer.getJSON();
}
return obj;
}
// GUI ... GUI
this.toggle = function() {
open ? this.hide() : this.show();
};
this.show = function() {
toggleButton.innerHTML = name || "Hide Controls";
resizeTo = openHeight;
clearTimeout(resizeTimeout);
beginResize();
open = true;
}
this.hide = function() {
toggleButton.innerHTML = name || "Show Controls";
resizeTo = 0;
clearTimeout(resizeTimeout);
beginResize();
open = false;
}
this.name = function(n) {
name = n;
toggleButton.innerHTML = n;
}
var beginResize = function() {
//console.log("Resizing from " + curControllerContainerHeight + " to " + resizeTo);
curControllerContainerHeight += (resizeTo - curControllerContainerHeight)*0.6;
if (Math.abs(curControllerContainerHeight-resizeTo) < 1) {
curControllerContainerHeight = resizeTo;
} else {
resizeTimeout = setTimeout(beginResize, 1000/30);
}
controllerContainer.style.height = Math.round(curControllerContainerHeight)+'px';
checkForOverflow();
}
// Load saved appearance.
if (json) {
width = json.width;
_this.domElement.style.width = width+"px";
openHeight = json.openHeight;
explicitOpenHeight = true;
if (json.open) {
curControllerContainerHeight = openHeight;
// Hack.
setTimeout(function() {
controllerContainer.scrollTop = json.scroll;
}, 0);
resizeTo = openHeight;
this.show();
}
}
// Add hide listener if this is the first GUI.
if (GUI.allGuis.length == 1) {
window.addEventListener('keyup', function(e) {
// Hide on "H"
if (e.keyCode == 72) {
GUI.toggleHide();
}
}, false);
}
};
// Do not set this directly.
GUI.hidden = false;
GUI.toggleHide = function() {
if (GUI.hidden) {
GUI.show();
} else {
GUI.hide();
}
}
GUI.show = function() {
GUI.hidden = false;
for (var i in GUI.allGuis) {
GUI.allGuis[i].domElement.style.display = "block";
}
}
GUI.hide = function() {
GUI.hidden = true;
for (var i in GUI.allGuis) {
GUI.allGuis[i].domElement.style.display = "none";
}
}
GUI.autoPlace = true;
GUI.autoPlaceContainer = null;
GUI.allControllers = [];
GUI.allGuis = [];
GUI.makeUnselectable = function(elem) {
elem.onselectstart = function() { return false; };
elem.style.MozUserSelect = "none";
elem.style.KhtmlUserSelect = "none";
elem.unselectable = "on";
}
GUI.makeSelectable = function(elem) {
elem.onselectstart = function() { };
elem.style.MozUserSelect = "auto";
elem.style.KhtmlUserSelect = "auto";
elem.unselectable = "off";
}
GUI.map = function(v, i1, i2, o1, o2) {
var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
return v;
}
GUI.constrain = function (v, o1, o2) {
if (v < o1) v = o1;
else if (v > o2) v = o2;
return v;
}
GUI.error = function(str) {
if (typeof console.error == 'function') {
console.error("[GUI ERROR] " + str);
}
};
GUI.getOffset = function(obj, relativeTo) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
var c = obj = obj.offsetParent;
if (relativeTo) {
c = c && obj != relativeTo;
}
} while (c);
return {left: curleft,top: curtop};
}
}
GUI.roundToDecimal = function(n, decimals) {
var t = Math.pow(10, decimals);
return Math.round(n*t)/t;
}
GUI.extendController = function(clazz) {
clazz.prototype = new GUI.Controller();
clazz.prototype.constructor = clazz;
}

93
index.html
View File

@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<<<<<<< HEAD
<title>dat.gui</title> <title>dat.gui</title>
@ -398,5 +399,97 @@ document.getElementById('my-gui-container').appendChild( gui.domElement );</pre>
Michael Brower</a> and <a href='http://jonobr1.com/'>Jono Brandel</a> of the Michael Brower</a> and <a href='http://jonobr1.com/'>Jono Brandel</a> of the
Data Arts Team, Google Creative Lab. Data Arts Team, Google Creative Lab.
</footer> </footer>
=======
<title>gui-dat</title>
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="controllers/slider.js"></script>
<script type="text/javascript" src="controllers/controller.js"></script>
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
<script type="text/javascript" src="controllers/controller.function.js"></script>
<script type="text/javascript" src="controllers/controller.number.js"></script>
<script type="text/javascript" src="controllers/controller.string.js"></script>
<script type="text/javascript" src="time/scrubber.js"></script>
<script type="text/javascript" src="time/timer.js"></script>
<script type="text/javascript" src="demo/improvedNoise.js"></script>
<script type="text/javascript" src="demo/prettify.js"></script>
<script type="text/javascript" src="demo/demo.js"></script>
<script type="text/javascript">
//<![CDATA[
var timer;
window.onload = function() {
GUI.loadJSON({"guis":[{"open":true,"width":280,"openHeight":319,"scroll":0,"values":["gui-dat",1.35,7,0.5425,0.4132,10,false,null,0,null],"timer":{"windowMin":-4225.189783755155,"windowWidth":11596,"playhead":1704,"snapIncrement":250,"useSnap":true,"scrubbers":[{"points":[{"value":"gui-dat","time":-3250},{"value":"over","time":5500},{"value":"time","time":9750}]},{"points":[{"value":1.3499999999999999,"time":644.1387},{"value":1.3499999999999999,"time":9750,"tween":"CircularEaseIn"}]},{"points":[{"value":0,"time":-2750,"tween":"SinusoidalEaseInOut"},{"value":7,"time":659.1556},{"value":7,"time":2211.2348},{"value":5.525,"time":5500},{"value":8.955,"time":6413.8663},{"value":8.339963195382083,"time":12000,"tween":"SinusoidalEaseInOut"},{"value":0,"time":16500}]},{"points":[{"value":0.5049,"time":-532.8902,"tween":"Hold"},{"value":0.5544,"time":1666.4321},{"value":0.01,"time":3382.0743,"tween":"Hold"},{"value":0.9900000000000001,"time":5500},{"value":0.18810000000000002,"time":9500,"tween":"Hold"},{"value":0.3069,"time":9750},{"value":0.1683,"time":11000},{"value":0.0495,"time":11750}]},{"points":[{"value":0.39899999999999997,"time":1652.5592,"tween":"SinusoidalEaseInOut"},{"value":7.6000000000000005,"time":3471.5432,"tween":"Hold"},{"value":0.8,"time":5500},{"value":1.3,"time":6000},{"value":0.1,"time":9750},{"value":0.01,"time":11500,"tween":"SinusoidalEaseInOut"},{"value":1.9000000000000001,"time":15250}]},{"points":[{"value":10,"time":795.5192,"tween":"Hold"},{"value":10,"time":5500},{"value":75,"time":5500,"tween":"CircularEaseOut"},{"value":45,"time":9750}]},{"points":[]},{"points":[{"time":9750}]},{"points":[{"value":0,"time":250,"tween":"Hold"}]},{"points":[{"time":18250}]}]}},{"open":true,"width":280,"openHeight":127,"scroll":0,"values":[null,true,250,null]}]});
var fizzyText = new FizzyText("gui-dat");
var gui = new GUI();
var timerControls = new GUI();
timer = new GUI.Timer(gui);
// Text field
gui.add(fizzyText, "message");
gui.add(fizzyText, "scale", 0.25, 4);
// Sliders with min and max
gui.add(fizzyText, "maxSize", 0, 20);
gui.add(fizzyText, "growthSpeed", 0.01, 1);
gui.add(fizzyText, "speed", 0, 10);
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox
gui.add(fizzyText, "displayOutline");
// Fires a function called "explode"
gui.add(fizzyText, "explode");
timerControls.add(timer, "playPause");
timerControls.add(timer, "useSnap");
timerControls.add(timer, "snapIncrement");
timerControls.add(GUI, "save");
var thing = {
loop: function() {
timer.playhead = -3500;
timer.play();
}
};
gui.add(fizzyText, 'y', -500, 500);
gui.add(thing, 'loop');
//GUI.hide();
timer.playhead = 0;
timer.play();
};
//]]>
</script>
</head>
<body>
<!-- GUIDAT logo -->
<div id="helvetica-demo"></div>
>>>>>>> 12aa1bb166dfd75ea0be40adec481706cf6a2c14
</body> </body>
</html> </html>

114
src/DAT/GUI/Controller.js
View File

@ -1,114 +0,0 @@
DAT.GUI.Controller = function() {
this.parent = arguments[0];
this.object = arguments[1];
this.propertyName = arguments[2];
//if (arguments.length > 0) this.initialValue = this.propertyName[this.object];
if (arguments.length > 0) this.initialValue = this.object[this.propertyName];
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
this.propertyNameElement = document.createElement('span');
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
this.name(this.propertyName);
this.domElement.appendChild(this.propertyNameElement);
DAT.GUI.makeUnselectable(this.domElement);
};
DAT.GUI.Controller.prototype.changeFunction = null;
DAT.GUI.Controller.prototype.finishChangeFunction = null;
DAT.GUI.Controller.prototype.name = function(n) {
this.propertyNameElement.innerHTML = n;
return this;
};
DAT.GUI.Controller.prototype.reset = function() {
this.setValue(this.initialValue);
return this;
};
DAT.GUI.Controller.prototype.listen = function() {
this.parent.listenTo(this);
return this;
};
DAT.GUI.Controller.prototype.unlisten = function() {
this.parent.unlistenTo(this); // <--- hasn't been tested yet
return this;
};
DAT.GUI.Controller.prototype.setValue = function(n) {
if(this.object[this.propertyName] != undefined){
this.object[this.propertyName] = n;
}else{
var o = new Object();
o[this.propertyName] = n;
this.object.set(o);
}
if (this.changeFunction != null) {
this.changeFunction.call(this, n);
}
this.updateDisplay();
return this;
};
DAT.GUI.Controller.prototype.getValue = function() {
var val = this.object[this.propertyName];
if(val == undefined) val = this.object.get(this.propertyName);
return val;
};
DAT.GUI.Controller.prototype.updateDisplay = function() {
};
DAT.GUI.Controller.prototype.onChange = function(fnc) {
this.changeFunction = fnc;
return this;
};
DAT.GUI.Controller.prototype.onFinishChange = function(fnc) {
this.finishChangeFunction = fnc;
return this;
};
DAT.GUI.Controller.prototype.options = function() {
var _this = this;
var select = document.createElement('select');
if (arguments.length == 1) {
var arr = arguments[0];
for (var i in arr) {
var opt = document.createElement('option');
opt.innerHTML = i;
opt.setAttribute('value', arr[i]);
if (arguments[i] == this.getValue()) {
opt.selected = true;
}
select.appendChild(opt);
}
} else {
for (var i = 0; i < arguments.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = arguments[i];
opt.setAttribute('value', arguments[i]);
if (arguments[i] == this.getValue()) {
opt.selected = true;
}
select.appendChild(opt);
}
}
select.addEventListener('change', function() {
_this.setValue(this.value);
if (_this.finishChangeFunction != null) {
_this.finishChangeFunction.call(this, _this.getValue());
}
}, false);
_this.domElement.appendChild(select);
return this;
};

43
src/DAT/GUI/ControllerBoolean.js
View File

@ -1,43 +0,0 @@
DAT.GUI.ControllerBoolean = function() {
this.type = "boolean";
DAT.GUI.Controller.apply(this, arguments);
var _this = this;
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.checked = this.getValue();
this.setValue(this.getValue());
this.domElement.addEventListener('click', function(e) {
input.checked = !input.checked;
e.preventDefault();
_this.setValue(input.checked);
}, false);
input.addEventListener('mouseup', function(e) {
input.checked = !input.checked; // counteracts default.
}, false);
this.domElement.style.cursor = "pointer";
this.propertyNameElement.style.cursor = "pointer";
this.domElement.appendChild(input);
this.updateDisplay = function() {
input.checked = _this.getValue();
};
this.setValue = function(val) {
if (typeof val != "boolean") {
try {
val = eval(val);
} catch (e) {
}
}
return DAT.GUI.Controller.prototype.setValue.call(this, val);
};
};
DAT.GUI.extendController(DAT.GUI.ControllerBoolean);

30
src/DAT/GUI/ControllerFunction.js
View File

@ -1,30 +0,0 @@
DAT.GUI.ControllerFunction = function() {
this.type = "function";
var _this = this;
DAT.GUI.Controller.apply(this, arguments);
this.domElement.addEventListener('click', function() {
_this.fire();
}, false);
this.domElement.style.cursor = "pointer";
this.propertyNameElement.style.cursor = "pointer";
var fireFunction = null;
this.onFire = function(fnc) {
fireFunction = fnc;
return this;
}
this.fire = function() {
if (fireFunction != null) {
fireFunction.call(this);
}
_this.object[_this.propertyName].call(_this.object);
};
};
DAT.GUI.extendController(DAT.GUI.ControllerFunction);

243
src/DAT/GUI/ControllerNumber.js
View File

@ -1,243 +0,0 @@
DAT.GUI.ControllerNumber = function() {
this.type = "number";
DAT.GUI.Controller.apply(this, arguments);
var _this = this;
// If we simply click and release a number field, we want to highlight it.
// This variable keeps track of whether or not we've dragged
var draggedNumberField = false;
var clickedNumberField = false;
var draggingHorizontal = false;
var draggingVertical = false;
var y = 0, py = 0;
var min = arguments[3];
var max = arguments[4];
var step = arguments[5];
var defaultStep = function() {
step = (max - min) * 0.01;
};
this.min = function() {
var needsSlider = false;
if (min == undefined && max != undefined) {
needsSlider = true;
}
if (arguments.length == 0) {
return min;
} else {
min = arguments[0];
}
if (needsSlider) {
addSlider();
if (step == undefined) {
defaultStep();
}
}
return _this;
};
this.max = function() {
var needsSlider = false;
if (min != undefined && max == undefined) {
needsSlider = true;
}
if (arguments.length == 0) {
return max;
} else {
max = arguments[0];
}
if (needsSlider) {
addSlider();
if (step == undefined) {
defaultStep();
}
}
return _this;
};
this.step = function() {
if (arguments.length == 0) {
return step;
} else {
step = arguments[0];
}
return _this;
};
this.getMin = function() {
return min;
};
this.getMax = function() {
return max;
};
this.getStep = function() {
if (step == undefined) {
if (max != undefined && min != undefined) {
return (max-min)/100;
} else {
return 1;
}
} else {
return step;
}
}
var numberField = document.createElement('input');
numberField.setAttribute('id', this.propertyName);
numberField.setAttribute('type', 'text');
numberField.setAttribute('value', this.getValue());
if (step) numberField.setAttribute('step', step);
this.domElement.appendChild(numberField);
var slider;
var addSlider = function() {
slider = new DAT.GUI.ControllerNumberSlider(_this, min, max, step, _this.getValue());
_this.domElement.appendChild(slider.domElement);
};
if (min != undefined && max != undefined) {
addSlider();
}
numberField.addEventListener('blur', function() {
var val = parseFloat(this.value);
if (slider) {
DAT.GUI.removeClass(_this.domElement, 'active');
}
if (!isNaN(val)) {
_this.setValue(val);
}
}, false);
numberField.addEventListener('mousewheel', function(e) {
e.preventDefault();
_this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY) / e.wheelDeltaY * _this.getStep());
return false;
}, false);
numberField.addEventListener('mousedown', function(e) {
py = y = e.pageY;
clickedNumberField = true;
DAT.GUI.makeSelectable(numberField);
document.addEventListener('mousemove', dragNumberField, false);
document.addEventListener('mouseup', mouseup, false);
}, false);
// Handle up arrow and down arrow
numberField.addEventListener('keydown', function(e) {
var newVal;
switch (e.keyCode) {
case 13: // enter
newVal = parseFloat(this.value);
_this.setValue(newVal);
break;
case 38: // up
newVal = _this.getValue() + _this.getStep();
_this.setValue(newVal);
break;
case 40: // down
newVal = _this.getValue() - _this.getStep();
_this.setValue(newVal);
break;
}
}, false);
var mouseup = function(e) {
document.removeEventListener('mousemove', dragNumberField, false);
DAT.GUI.makeSelectable(numberField);
if (clickedNumberField && !draggedNumberField) {
//numberField.focus();
//numberField.select();
}
draggedNumberField = false;
clickedNumberField = false;
if (_this.finishChangeFunction != null) {
_this.finishChangeFunction.call(this, _this.getValue());
}
draggingHorizontal = false;
draggingVertical = false;
document.removeEventListener('mouseup', mouseup, false);
};
var dragNumberField = function(e) {
py = y;
y = e.pageY;
var dy = py - y;
if (!draggingHorizontal && !draggingVertical) {
if (dy == 0) {
draggingHorizontal = true;
} else {
draggingVertical = true;
}
}
if (draggingHorizontal) {
return true;
}
DAT.GUI.addClass(_this.domElement, 'active');
DAT.GUI.makeUnselectable(_this.parent.domElement);
DAT.GUI.makeUnselectable(numberField);
draggedNumberField = true;
e.preventDefault();
var newVal = _this.getValue() + dy * _this.getStep();
_this.setValue(newVal);
return false;
};
this.options = function() {
_this.noSlider();
_this.domElement.removeChild(numberField);
return DAT.GUI.Controller.prototype.options.apply(this, arguments);
};
this.noSlider = function() {
if (slider) {
_this.domElement.removeChild(slider.domElement);
}
return this;
};
this.setValue = function(val) {
val = parseFloat(val);
if (min != undefined && val <= min) {
val = min;
} else if (max != undefined && val >= max) {
val = max;
}
return DAT.GUI.Controller.prototype.setValue.call(this, val);
};
this.updateDisplay = function() {
numberField.value = DAT.GUI.roundToDecimal(_this.getValue(), 4);
if (slider) slider.value = _this.getValue();
};
};
DAT.GUI.extendController(DAT.GUI.ControllerNumber);

64
src/DAT/GUI/ControllerNumberSlider.js
View File

@ -1,64 +0,0 @@
DAT.GUI.ControllerNumberSlider = function(numberController, min, max, step, initValue) {
var clicked = false;
var _this = this;
var x, px;
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-slider-bg');
this.fg = document.createElement('div');
this.fg.setAttribute('class', 'guidat-slider-fg');
this.domElement.appendChild(this.fg);
var onDrag = function(e) {
if (!clicked) return;
var pos = findPos(_this.domElement);
var val = DAT.GUI.map(e.pageX, pos[0], pos[0] + _this.domElement
.offsetWidth, numberController.getMin(), numberController.getMax());
val = Math.round(val / numberController.getStep()) * numberController
.getStep();
numberController.setValue(val);
};
this.domElement.addEventListener('mousedown', function(e) {
clicked = true;
x = px = e.pageX;
DAT.GUI.addClass(numberController.domElement, 'active');
onDrag(e);
document.addEventListener('mouseup', mouseup, false);
}, false);
var mouseup = function(e) {
DAT.GUI.removeClass(numberController.domElement, 'active');
clicked = false;
if (numberController.finishChangeFunction != null) {
numberController.finishChangeFunction.call(this,
numberController.getValue());
}
document.removeEventListener('mouseup', mouseup, false);
};
var findPos = function(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while ((obj = obj.offsetParent));
return [curleft,curtop];
}
};
this.__defineSetter__('value', function(e) {
this.fg.style.width = DAT.GUI.map(e, numberController.getMin(),
numberController.getMax(), 0, 100) + "%";
});
document.addEventListener('mousemove', onDrag, false);
this.value = initValue;
};

57
src/DAT/GUI/ControllerString.js
View File

@ -1,57 +0,0 @@
DAT.GUI.ControllerString = function() {
this.type = "string";
var _this = this;
DAT.GUI.Controller.apply(this, arguments);
var input = document.createElement('input');
var initialValue = this.getValue();
input.setAttribute('value', initialValue);
input.setAttribute('spellcheck', 'false');
this.domElement.addEventListener('mouseup', function() {
input.focus();
input.select();
}, false);
// TODO: getting messed up on ctrl a
input.addEventListener('keyup', function(e) {
if (e.keyCode == 13 && _this.finishChangeFunction != null) {
_this.finishChangeFunction.call(this, _this.getValue());
input.blur();
}
_this.setValue(input.value);
}, false);
input.addEventListener('mousedown', function(e) {
DAT.GUI.makeSelectable(input);
}, false);
input.addEventListener('blur', function() {
DAT.GUI.supressHotKeys = false;
if (_this.finishChangeFunction != null) {
_this.finishChangeFunction.call(this, _this.getValue());
}
}, false);
input.addEventListener('focus', function() {
DAT.GUI.supressHotKeys = true;
}, false);
this.updateDisplay = function() {
input.value = _this.getValue();
};
this.options = function() {
_this.domElement.removeChild(input);
return DAT.GUI.Controller.prototype.options.apply(this, arguments);
};
this.domElement.appendChild(input);
};
DAT.GUI.extendController(DAT.GUI.ControllerString);

168
src/DAT/GUI/GUI.css
View File

@ -1,168 +0,0 @@
#guidat {
position: fixed;
top: 0;
right: 0;
width: auto;
z-index: 1001;
text-align: right;
}
.guidat {
color: #fff;
opacity: 0.97;
text-align: left;
float: right;
margin-right: 20px;
margin-bottom: 20px;
background-color: #fff;
}
.guidat,
.guidat input {
font: 9.5px Lucida Grande, sans-serif;
}
.guidat-controllers {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
background-color: rgba(0, 0, 0, 0.1);
}
a.guidat-toggle:link,
a.guidat-toggle:visited,
a.guidat-toggle:active {
text-decoration: none;
cursor: pointer;
color: #fff;
background-color: #222;
text-align: center;
display: block;
padding: 5px;
}
a.guidat-toggle:hover {
background-color: #000;
}
.guidat-controller {
padding: 3px;
height: 25px;
clear: left;
border-bottom: 1px solid #222;
background-color: #111;
}
.guidat-controller,
.guidat-controller input,
.guidat-slider-bg,
.guidat-slider-fg {
-moz-transition: background-color 0.15s linear;
-webkit-transition: background-color 0.15s linear;
transition: background-color 0.15s linear;
}
.guidat-controller.boolean:hover,
.guidat-controller.function:hover {
background-color: #000;
}
.guidat-controller input {
float: right;
outline: none;
border: 0;
padding: 4px;
margin-top: 2px;
background-color: #222;
}
.guidat-controller select {
margin-top: 4px;
float: right;
}
.guidat-controller input:hover {
background-color: #444;
}
.guidat-controller input:focus,
.guidat-controller.active input {
background-color: #555;
color: #fff;
}
.guidat-controller.number {
border-left: 5px solid #00aeff;
}
.guidat-controller.string {
border-left: 5px solid #1ed36f;
}
.guidat-controller.string input {
border: 0;
color: #1ed36f;
margin-right: 2px;
width: 148px;
}
.guidat-controller.boolean {
border-left: 5px solid #54396e;
}
.guidat-controller.function {
border-left: 5px solid #e61d5f;
}
.guidat-controller.number input[type=text] {
width: 35px;
margin-left: 5px;
margin-right: 2px;
color: #00aeff;
}
.guidat .guidat-controller.boolean input {
margin-top: 6px;
margin-right: 2px;
font-size: 20px;
}
.guidat-controller:last-child {
border-bottom: none;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.guidat-propertyname {
padding: 5px;
padding-top: 7px;
cursor: default;
display: inline-block;
}
.guidat-controller .guidat-slider-bg:hover,
.guidat-controller.active .guidat-slider-bg {
background-color: #444;
}
.guidat-controller .guidat-slider-bg .guidat-slider-fg:hover,
.guidat-controller.active .guidat-slider-bg .guidat-slider-fg {
background-color: #52c8ff;
}
.guidat-slider-bg {
background-color: #222;
cursor: ew-resize;
width: 40%;
margin-top: 2px;
float: right;
height: 21px;
}
.guidat-slider-fg {
cursor: ew-resize;
background-color: #00aeff;
height: 21px;
}

740
src/DAT/GUI/GUI.js
View File

@ -1,740 +0,0 @@
var DAT = DAT || {};
DAT.GUI = function(parameters) {
if (parameters == undefined) {
parameters = {};
}
var paramsExplicitHeight = false;
if (parameters.height == undefined) {
parameters.height = 300;
} else {
paramsExplicitHeight = true;
}
var MIN_WIDTH = 240;
var MAX_WIDTH = 500;
var controllers = [];
var listening = [];
var autoListen = true;
var listenInterval;
// Sum total of heights of controllers in this gui
var controllerHeight;
var _this = this;
var open = true;
var width = 280;
if (parameters.width != undefined) {
width = parameters.width;
}
// Prevents checkForOverflow bug in which loaded gui appearance
// settings are not respected by presence of scrollbar.
var explicitOpenHeight = false;
// How big we get when we open
var openHeight;
var closeString = 'Close Controls';
var openString = 'Open Controls';
var name;
var resizeTo = 0;
var resizeTimeout;
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat');
this.domElement.style.width = width + 'px';
var curControllerContainerHeight = parameters.height;
var controllerContainer = document.createElement('div');
controllerContainer.setAttribute('class', 'guidat-controllers');
controllerContainer.style.height = curControllerContainerHeight + 'px';
// Firefox hack to prevent horizontal scrolling
controllerContainer.addEventListener('DOMMouseScroll', function(e) {
var scrollAmount = this.scrollTop;
if (e.wheelDelta) {
scrollAmount += e.wheelDelta;
} else if (e.detail) {
scrollAmount += e.detail;
}
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
controllerContainer.scrollTop = scrollAmount;
}, false);
var toggleButton = document.createElement('a');
toggleButton.setAttribute('class', 'guidat-toggle');
toggleButton.setAttribute('href', '#');
toggleButton.innerHTML = open ? closeString : openString;
var toggleDragged = false;
var dragDisplacementY = 0;
var dragDisplacementX = 0;
var togglePressed = false;
var my, pmy, mx, pmx;
var resize = function(e) {
pmy = my;
pmx = mx;
my = e.pageY;
mx = e.pageX;
var dmy = my - pmy;
if (!open) {
if (dmy > 0) {
open = true;
curControllerContainerHeight = openHeight = 1;
toggleButton.innerHTML = name || closeString;
} else {
return;
}
}
// TODO: Flip this if you want to resize to the left.
var dmx = pmx - mx;
if (dmy > 0 &&
curControllerContainerHeight > controllerHeight) {
var d = DAT.GUI.map(curControllerContainerHeight, controllerHeight,
controllerHeight + 100, 1, 0);
dmy *= d;
}
toggleDragged = true;
dragDisplacementY += dmy;
openHeight += dmy;
curControllerContainerHeight += dmy;
controllerContainer.style.height = openHeight + 'px';
dragDisplacementX += dmx;
width += dmx;
width = DAT.GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
_this.domElement.style.width = width + 'px';
checkForOverflow();
};
toggleButton.addEventListener('mousedown', function(e) {
pmy = my = e.pageY;
pmx = mx = e.pageX;
togglePressed = true;
e.preventDefault();
dragDisplacementX = 0;
dragDisplacementY = 0;
document.addEventListener('mousemove', resize, false);
return false;
}, false);
toggleButton.addEventListener('click', function(e) {
e.preventDefault();
return false;
}, false);
document.addEventListener('mouseup', function(e) {
if (togglePressed && !toggleDragged) {
_this.toggle();
}
if (togglePressed && toggleDragged) {
if (dragDisplacementX == 0) {
adaptToScrollbar();
}
if (openHeight > controllerHeight) {
clearTimeout(resizeTimeout);
openHeight = resizeTo = controllerHeight;
beginResize();
} else if (controllerContainer.children.length >= 1) {
var singleControllerHeight = controllerContainer.children[0].
offsetHeight;
clearTimeout(resizeTimeout);
var target = Math.round(curControllerContainerHeight /
singleControllerHeight) * singleControllerHeight - 1;
resizeTo = target;
if (resizeTo <= 0) {
_this.close();
openHeight = singleControllerHeight * 2;
} else {
openHeight = resizeTo;
beginResize();
}
}
}
document.removeEventListener('mousemove', resize, false);
e.preventDefault();
toggleDragged = false;
togglePressed = false;
return false;
}, false);
this.domElement.appendChild(controllerContainer);
this.domElement.appendChild(toggleButton);
if (parameters.domElement) {
parameters.domElement.appendChild(this.domElement);
} else if (DAT.GUI.autoPlace) {
if (DAT.GUI.autoPlaceContainer == null) {
DAT.GUI.autoPlaceContainer = document.createElement('div');
DAT.GUI.autoPlaceContainer.setAttribute('id', 'guidat');
document.body.appendChild(DAT.GUI.autoPlaceContainer);
}
DAT.GUI.autoPlaceContainer.appendChild(this.domElement);
}
this.autoListenIntervalTime = 1000 / 60;
var createListenInterval = function() {
listenInterval = setInterval(function() {
_this.listen();
}, this.autoListenIntervalTime);
};
this.__defineSetter__('autoListen', function(v) {
autoListen = v;
if (!autoListen) {
clearInterval(listenInterval);
} else {
if (listening.length > 0) createListenInterval();
}
});
this.__defineGetter__('autoListen', function(v) {
return autoListen;
});
this.listenTo = function(controller) {
// TODO: check for duplicates
if (listening.length == 0) {
createListenInterval();
}
listening.push(controller);
};
this.unlistenTo = function(controller) {
// TODO: test this
for (var i = 0; i < listening.length; i++) {
if (listening[i] == controller) listening.splice(i, 1);
}
if (listening.length <= 0) {
clearInterval(listenInterval);
}
};
this.listen = function(whoToListenTo) {
var arr = whoToListenTo || listening;
for (var i in arr) {
arr[i].updateDisplay();
}
};
this.listenAll = function() {
this.listen(controllers);
}
this.autoListen = true;
var alreadyControlled = function(object, propertyName) {
for (var i in controllers) {
if (controllers[i].object == object &&
controllers[i].propertyName == propertyName) {
return true;
}
}
return false;
};
var construct = function(constructor, args) {
function C() {
return constructor.apply(this, args);
}
C.prototype = constructor.prototype;
return new C();
};
this.add = function() {
if (arguments.length == 1) {
var toReturn = [];
for (var i in arguments[0]) {
toReturn.push(_this.add(arguments[0], i));
}
return toReturn;
}
var object = arguments[0];
var propertyName = arguments[1];
// Have we already added this?
if (alreadyControlled(object, propertyName)) {
// DAT.GUI.error('Controller for \'' + propertyName+'\' already added.');
// return;
}
var value = object[propertyName];
if(value == undefined && object.get) value = object.get(propertyName);
// Does this value exist? Is it accessible?
if (value == undefined) {
DAT.GUI.error(object + ' either has no property \'' + propertyName +
'\', or the property is inaccessible.');
return;
}
var type = typeof value;
var handler = handlerTypes[type];
// Do we know how to deal with this data type?
if (handler == undefined) {
DAT.GUI.error('Cannot create controller for data type \'' + type + '\'');
return;
}
var args = [this]; // Set first arg (parent) to this
for (var j = 0; j < arguments.length; j++) {
args.push(arguments[j]);
}
var controllerObject = construct(handler, args);
// Were we able to make the controller?
if (!controllerObject) {
DAT.GUI.error('Error creating controller for \'' + propertyName + '\'.');
return;
}
// Success.
controllerContainer.appendChild(controllerObject.domElement);
controllers.push(controllerObject);
DAT.GUI.allControllers.push(controllerObject);
// Do we have a saved value for this controller?
if (type != 'function' &&
DAT.GUI.saveIndex < DAT.GUI.savedValues.length) {
controllerObject.setValue(DAT.GUI.savedValues[DAT.GUI.saveIndex]);
DAT.GUI.saveIndex++;
}
// Compute sum height of controllers.
checkForOverflow();
// Prevents checkForOverflow bug in which loaded gui appearance
// settings are not respected by presence of scrollbar.
if (!explicitOpenHeight) {
openHeight = controllerHeight;
}
// Let's see if we're doing this on onload and lets *try* to guess how
// big you want the damned box.
if (!paramsExplicitHeight) {
try {
// Probably a better way to do this
var caller = arguments.callee.caller;
if (caller == window['onload']) {
curControllerContainerHeight = resizeTo = openHeight =
controllerHeight;
controllerContainer.style.height = curControllerContainerHeight + 'px';
}
} catch (e) {}
}
return controllerObject;
}
var checkForOverflow = function() {
controllerHeight = 0;
for (var i in controllers) {
controllerHeight += controllers[i].domElement.offsetHeight;
}
if (controllerHeight - 1 > openHeight) {
controllerContainer.style.overflowY = 'auto';
} else {
controllerContainer.style.overflowY = 'hidden';
}
};
var handlerTypes = {
'number': DAT.GUI.ControllerNumber,
'string': DAT.GUI.ControllerString,
'boolean': DAT.GUI.ControllerBoolean,
'function': DAT.GUI.ControllerFunction
};
this.reset = function() {
// TODO ... Set all values back to their initials.
for (var i = 0, l = DAT.GUI.allControllers.length; i < l; i++) {
// apply to each controller
DAT.GUI.allControllers[i].reset();
}
}
this.toggle = function() {
open ? this.close() : this.open();
};
this.open = function() {
toggleButton.innerHTML = name || closeString;
resizeTo = openHeight;
clearTimeout(resizeTimeout);
beginResize();
adaptToScrollbar();
open = true;
}
this.close = function() {
toggleButton.innerHTML = name || openString;
resizeTo = 0;
clearTimeout(resizeTimeout);
beginResize();
adaptToScrollbar();
open = false;
}
this.name = function(n) {
name = n;
toggleButton.innerHTML = n;
}
// used in saveURL
this.appearanceVars = function() {
return [open, width, openHeight, controllerContainer.scrollTop]
}
var beginResize = function() {
curControllerContainerHeight = controllerContainer.offsetHeight;
curControllerContainerHeight += (resizeTo - curControllerContainerHeight)
* 0.6;
if (Math.abs(curControllerContainerHeight - resizeTo) < 1) {
curControllerContainerHeight = resizeTo;
} else {
resizeTimeout = setTimeout(beginResize, 1000 / 30);
}
controllerContainer.style.height = Math.round(curControllerContainerHeight)
+ 'px';
checkForOverflow();
}
var adaptToScrollbar = function() {
// Clears lingering scrollbar column
_this.domElement.style.width = (width - 1) + 'px';
setTimeout(function() {
_this.domElement.style.width = width + 'px';
}, 1);
};
// Load saved appearance:
if (DAT.GUI.guiIndex < DAT.GUI.savedAppearanceVars.length) {
width = parseInt(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][1]);
_this.domElement.style.width = width + 'px';
openHeight = parseInt(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][2]);
explicitOpenHeight = true;
if (eval(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][0]) == true) {
curControllerContainerHeight = openHeight;
var t = DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][3]
// Hack.
setTimeout(function() {
controllerContainer.scrollTop = t;
}, 0);
if (DAT.GUI.scrollTop > -1) {
document.body.scrollTop = DAT.GUI.scrollTop;
}
resizeTo = openHeight;
this.open();
}
DAT.GUI.guiIndex++;
}
DAT.GUI.allGuis.push(this);
// Add hide listener if this is the first DAT.GUI.
if (DAT.GUI.allGuis.length == 1) {
window.addEventListener('keyup', function(e) {
// Hide on 'H'
if (!DAT.GUI.supressHotKeys && e.keyCode == 72) {
DAT.GUI.toggleHide();
}
}, false);
if (DAT.GUI.inlineCSS) {
var styleSheet = document.createElement('style');
styleSheet.setAttribute('type', 'text/css');
styleSheet.innerHTML = DAT.GUI.inlineCSS;
document.head.insertBefore(styleSheet, document.head.firstChild);
}
}
};
// Do not set this directly.
DAT.GUI.hidden = false;
// Static members
DAT.GUI.autoPlace = true;
DAT.GUI.autoPlaceContainer = null;
DAT.GUI.allControllers = [];
DAT.GUI.allGuis = [];
DAT.GUI.supressHotKeys = false;
DAT.GUI.toggleHide = function() {
if (DAT.GUI.hidden) {
DAT.GUI.open();
} else {
DAT.GUI.close();
}
}
DAT.GUI.open = function() {
DAT.GUI.hidden = false;
for (var i in DAT.GUI.allGuis) {
DAT.GUI.allGuis[i].domElement.style.display = 'block';
}
}
DAT.GUI.close = function() {
DAT.GUI.hidden = true;
for (var i in DAT.GUI.allGuis) {
DAT.GUI.allGuis[i].domElement.style.display = 'none';
}
}
DAT.GUI.saveURL = function() {
var url = DAT.GUI.replaceGetVar('saveString', DAT.GUI.getSaveString());
window.location = url;
};
DAT.GUI.scrollTop = -1;
DAT.GUI.load = function(saveString) {
//DAT.GUI.savedAppearanceVars = [];
var vals = saveString.split(',');
var numGuis = parseInt(vals[0]);
DAT.GUI.scrollTop = parseInt(vals[1]);
for (var i = 0; i < numGuis; i++) {
var appr = vals.splice(2, 4);
DAT.GUI.savedAppearanceVars.push(appr);
}
DAT.GUI.savedValues = vals.splice(2, vals.length);
};
DAT.GUI.savedValues = [];
DAT.GUI.savedAppearanceVars = [];
DAT.GUI.getSaveString = function() {
var vals = [], i;
vals.push(DAT.GUI.allGuis.length);
vals.push(document.body.scrollTop);
for (i in DAT.GUI.allGuis) {
var av = DAT.GUI.allGuis[i].appearanceVars();
for (var j = 0; j < av.length; j++) {
vals.push(av[j]);
}
}
for (i in DAT.GUI.allControllers) {
// We don't save values for functions.
if (DAT.GUI.allControllers[i].type == 'function') {
continue;
}
var v = DAT.GUI.allControllers[i].getValue();
// Round numbers so they don't get enormous
if (DAT.GUI.allControllers[i].type == 'number') {
v = DAT.GUI.roundToDecimal(v, 4);
}
vals.push(v);
}
return vals.join(',');
};
DAT.GUI.getVarFromURL = function(v) {
var vars = [], hash;
var hashes = window.location.href.slice(
window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
if (hash == undefined) continue;
if (hash[0] == v) {
return hash[1];
}
}
return null;
};
DAT.GUI.replaceGetVar = function(varName, val) {
var vars = [], hash;
var loc = window.location.href;
var hashes = window.location.href.slice(
window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
if (hash == undefined) continue;
if (hash[0] == varName) {
return loc.replace(hash[1], val);
}
}
if (window.location.href.indexOf('?') != -1) {
return loc + '&' + varName + '=' + val;
}
return loc + '?' + varName + '=' + val;
};
DAT.GUI.saveIndex = 0;
DAT.GUI.guiIndex = 0;
DAT.GUI.showSaveString = function() {
alert(DAT.GUI.getSaveString());
};
// Util functions
DAT.GUI.makeUnselectable = function(elem) {
if (elem == undefined || elem.style == undefined) return;
elem.onselectstart = function() {
return false;
};
elem.style.MozUserSelect = 'none';
elem.style.KhtmlUserSelect = 'none';
elem.unselectable = 'on';
var kids = elem.childNodes;
for (var i = 0; i < kids.length; i++) {
DAT.GUI.makeUnselectable(kids[i]);
}
};
DAT.GUI.makeSelectable = function(elem) {
if (elem == undefined || elem.style == undefined) return;
elem.onselectstart = function() {
};
elem.style.MozUserSelect = 'auto';
elem.style.KhtmlUserSelect = 'auto';
elem.unselectable = 'off';
var kids = elem.childNodes;
for (var i = 0; i < kids.length; i++) {
DAT.GUI.makeSelectable(kids[i]);
}
};
DAT.GUI.map = function(v, i1, i2, o1, o2) {
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
};
DAT.GUI.constrain = function (v, o1, o2) {
if (v < o1) v = o1;
else if (v > o2) v = o2;
return v;
};
DAT.GUI.error = function(str) {
if (typeof console.error == 'function') {
console.error('[DAT.GUI ERROR] ' + str);
}
};
DAT.GUI.roundToDecimal = function(n, decimals) {
var t = Math.pow(10, decimals);
return Math.round(n * t) / t;
};
DAT.GUI.extendController = function(clazz) {
clazz.prototype = new DAT.GUI.Controller();
clazz.prototype.constructor = clazz;
};
DAT.GUI.addClass = function(domElement, className) {
if (DAT.GUI.hasClass(domElement, className)) return;
domElement.className += ' ' + className;
}
DAT.GUI.hasClass = function(domElement, className) {
return domElement.className.indexOf(className) != -1;
}
DAT.GUI.removeClass = function(domElement, className) {
var reg = new RegExp(' ' + className, 'g');
domElement.className = domElement.className.replace(reg, '');
}
if (DAT.GUI.getVarFromURL('saveString') != null) {
DAT.GUI.load(DAT.GUI.getVarFromURL('saveString'));
}

917
time/scrubber.js Normal file
View File

@ -0,0 +1,917 @@
GUI.Scrubber = function(controller, timer) {
var _this = this;
this.points = [];
this.timer = timer;
this.timer.scrubbers.push(this);
this.controller = controller;
this.controller.scrubber = this;
this.playing = false;
var previouslyHandled;
this.position = null;
this.getJSON = function() {
var pointArray = [];
for (var i in this.points) {
pointArray.push(this.points[i].getJSON());
}
var obj = {'points': pointArray};
return obj;
};
this.sort = function() {
this.points.sort(function(a,b) {
return a.time - b.time;
});
};
this.add = function(p) {
this.points.push(p);
this.sort();
};
var lastDown = 0;
this.controller.addChangeListener(function(newVal) {
if (!_this.playing) {
var v = newVal;
if (_this.controller.type == 'boolean') {
v = !v; // Couldn't tell you why I have to do this.
}
if (_this.timer.activePoint == null) {
_this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, v);
_this.add(_this.timer.activePoint);
_this.render();
} else {
_this.timer.activePoint.value = v;
}
}
});
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-scrubber');
this.canvas = document.createElement('canvas');
this.domElement.appendChild(this.canvas);
this.g = this.canvas.getContext('2d');
var width;
var height;
var mx, pmx;
this.__defineGetter__('width', function() {
return width;
});
this.__defineGetter__('height', function() {
return height;
});
controller.domElement.insertBefore(this.domElement, controller.propertyNameElement.nextSibling);
this.render = function() {
// TODO: if visible ...
_this.g.clearRect(0, 0, width, height);
// Draw 0
if (_this.timer.windowMin < 0) {
var x = GUI.map(0, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth, 0, width);
_this.g.fillStyle = '#000';
_this.g.fillRect(0, 0, x, height-1);
}
// 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;
if (i < 0) {
_this.g.strokeStyle = '#111';
} else {
_this.g.strokeStyle = '#363636';
}
_this.g.beginPath();
_this.g.moveTo(x, 0);
_this.g.lineTo(x, height-1);
_this.g.stroke();
}
}
// Draw points
for (var i in _this.points) {
_this.points[i].update();
}
for (var i in _this.points) {
_this.points[i].render();
}
// Draw playhead
_this.g.strokeStyle = '#ff0024';
_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);
_this.g.lineTo(t, height);
_this.g.stroke();
}
this.render();
var onResize = function() {
_this.canvas.width = width = _this.domElement.offsetWidth;
_this.canvas.height = height = _this.domElement.offsetHeight;
_this.position = GUI.getOffset(_this.canvas);
_this.render();
};
window.addEventListener('resize', function(e) {
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, _this.position.left, _this.position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth);
_this.timer.playhead = _this.timer.snap(t);
scrubPan();
}
var pan = function(e) {
mx = e.pageX;
var t = GUI.map(mx - pmx, 0, width, 0, _this.timer.windowWidth);
_this.timer.windowMin -= t;
pmx = mx;
}
this.canvas.addEventListener('mousedown', function(e) {
// TODO: Detect right click and prevent that menu?
if (false) {
e.preventDefault();
document.addEventListener('mousemove', pan, false);
return false;
}
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);
pmx = mx = e.pageX;
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);
document.body.style.cursor = 'text';
_this.timer.pause();
pmx = mx = e.pageX;
document.addEventListener('mousemove', scrub, false);
_this.render();
}
lastDown = thisDown;
}, false);
this.canvas.addEventListener('mousewheel', function(e) {
e.preventDefault();
var dx = e.wheelDeltaX*4;
var dy = e.wheelDeltaY*4;
_this.timer.windowWidth -= dy;
_this.timer.windowMin += dy/2 - dx;
return false;
}, false);
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-_this.position.left)) {
_this.timer.hoverPoint = cur;
}
}
if (_this.timer.hoverPoint == null) {
document.body.style.cursor = 'auto';
} else {
document.body.style.cursor = 'pointer';
}
_this.render();
});
document.addEventListener('mouseup', function() {
document.body.style.cursor = 'auto';
if (_this.timer.activePoint != null) {
document.removeEventListener('mousemove', _this.timer.activePoint.onDrag, false);
}
document.removeEventListener('mousemove', scrub, false);
document.removeEventListener('mousemove', pan, false);
}, false);
onResize();
this.timer.addPlayListener(this.render);
var handlePoint = function(point) {
if (point != previouslyHandled) {
previouslyHandled = point;
_this.controller.setValue(point.value);
}
};
var onPlayChange = function(curTime, prevTime) {
if (_this.points.length == 0) return;
_this.playing = true;
if (_this.controller.type == 'function') {
for (var i = 0; i < _this.points.length; i++) {
var t = _this.points[i].time;
if ((curTime > prevTime && prevTime < t && t < curTime) ||
(curTime < prevTime && prevTime > t && t > curTime)) {
_this.controller.getValue().call(this);
}
}
} else {
var prev = undefined, next = undefined;
// Find 'surrounding' points.
for (var i = 0; i < _this.points.length; i++) {
var t = _this.points[i].time;
if (t > curTime) {
if (i == 0) {
prev = null;
next = _this.points[i];
break;
} else {
prev = _this.points[i-1];
next = _this.points[i];
break;
}
}
}
if (next == undefined) {
prev = _this.points[_this.points.length-1];
next = null;
}
if (next != null & prev != null) {
if (_this.controller.type == 'number') {
var t = prev.tween(GUI.map(curTime, prev.time, next.time, 0, 1));
_this.controller.setValue(GUI.map(t, 0, 1, prev.value, next.value));
} else {
handlePoint(prev);
}
} else if (next != null) {
handlePoint(next);
} else if (prev != null) {
handlePoint(prev);
}
}
_this.playing = false;
};
this.timer.addPlayListener(onPlayChange);
this.timer.addWindowListener(this.render);
// Load saved points!!!!
if (timer.gui.json) {
var json = timer.gui.json.timer.scrubbers.splice(0, 1)[0];
for (var i in json.points) {
var p = json.points[i];
var pp = new GUI.ScrubberPoint(this, p.time, p.value);
if (p.tween) {
pp.tween = GUI.Easing[p.tween];
}
this.add(pp);
}
}
};
GUI.ScrubberPoint = function(scrubber, time, value) {
var _this = this;
var g = scrubber.g;
var timer = scrubber.timer;
var type = scrubber.controller.type;
var x, y;
this.hold = false;
var val;
this.__defineSetter__('value', function(v) {
val = v;
scrubber.render();
});
this.value = value;
this.__defineGetter__('value', function() {
return val;
});
this.__defineGetter__('x', function() {
return x;
});
this.__defineGetter__('y', function() {
return y;
});
var barSize = 4;
var rectSize = 5;
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();
var tweenName;
for (var i in GUI.Easing) {
if (this.tween == GUI.Easing[i]) {
tweenName = i;
}
}
timer.tweenSelector.value = tweenName;
}
}
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.getJSON = function() {
var obj = { 'value': _this.value, 'time': GUI.roundToDecimal(time,4) };
// TODO: save tweens
if (this.tween != GUI.Easing.Linear) {
for (var i in GUI.Easing) {
if (this.tween == GUI.Easing[i]) {
obj.tween = i;
}
}
}
return obj;
};
this.tween = GUI.Easing.Linear;
this.remove = function() {
scrubber.points.splice(scrubber.points.indexOf(this), 1);
scrubber.render();
};
this.isHovering = function(xx) {
return xx >= x-rectSize/2 && xx <= x+rectSize/2;
};
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.__defineGetter__('prev', function() {
if (scrubber.points.length <= 1) {
return null;
}
var i = scrubber.points.indexOf(this);
if (i - 1 < 0) {
return null;
}
return scrubber.points[i-1];
});
this.__defineGetter__('time', function() {
return time;
});
this.__defineSetter__('time', function(s) {
time = s;
});
this.update = function() {
x = GUI.map(time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1);
x = Math.round(GUI.map(x, 0, 1, 0, scrubber.width));
y = scrubber.height/2;
if (scrubber.controller.type == 'number') {
y = GUI.map(_this.value, scrubber.controller.min, scrubber.controller.max, scrubber.height, 0);
}
}
this.render = function() {
if (x < 0 || x > scrubber.width) {
return;
}
if (GUI.hidden) {
return;
}
// TODO: if hidden because of scroll top.
if (scrubber.timer.activePoint == this) {
g.fillStyle = '#ffd800'; //
} else if (scrubber.timer.hoverPoint == this) {
g.fillStyle = '#999';
} else {
g.fillStyle = '#ccc';
}
switch (type) {
case 'boolean':
g.save();
g.translate(x, y-0.5);
if (this.value) {
g.strokeStyle = g.fillStyle;
g.lineWidth = barSize;
g.beginPath();
g.arc(0, 0, barSize, 0, Math.PI*2, false);
g.stroke();
} else {
g.rotate(Math.PI/4);
g.fillRect(-barSize/2, -barSize*3.5/2, barSize, barSize*3.5);
g.rotate(Math.PI/2);
g.fillRect(-barSize/2, -barSize*3.5/2, barSize, barSize*3.5);
}
g.restore();
break;
case 'number':
g.save();
var p = this.prev;
g.lineWidth = 3;
g.strokeStyle='#222';
if (p != null && p.time < timer.windowMin) {
var t = GUI.map(timer.windowMin, p.time, this.time, 0, 1);
var yy = GUI.map(p.tween(t), 0, 1, p.y, y);
g.beginPath();
g.moveTo(0, yy);
if (p.tween == GUI.Easing.Linear) {
g.lineTo(x, y);
} else {
for (var i = t; i < 1; i+=0.01) {
var tx = GUI.map(i, 0, 1, p.x, x);
var ty = p.tween(i);
ty = GUI.map(ty, 0, 1, p.y, y);
g.lineTo(tx, ty);
}
}
g.stroke();
}
var n = this.next;
if (n != null) {
g.beginPath();
g.moveTo(x, y);
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();
}
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.Easing = {}
GUI.Easing.Linear = function ( k ) {
return k;
};
GUI.Easing.Hold = function(k) {
return 0;
}
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.BounceEaseOut( 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.BounceEaseIn( k * 2 ) * 0.5;
return GUI.Easing.BounceEaseOut( k * 2 - 1 ) * 0.5 + 0.5;
};

311
time/timer.js Normal file
View File

@ -0,0 +1,311 @@
GUI.millis = function() {
var d = new Date();
return d.getTime();
};
GUI.Controller.prototype.at = function(when, what, tween) {
// TODO: Disable if we're using loaded JSON. Don't want to duplicate events.
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;
}
GUI.loadJSON = function(json) {
if (typeof json == 'string') {
json = eval('('+json+')');
}
GUI.loadedJSON = json;
}
GUI.loadedJSON = null;
GUI.getJSON = function() {
var guis = [];
for (var i in GUI.allGuis) {
guis.push(GUI.allGuis[i].getJSON());
}
var obj = {guis:guis};
return {guis:guis};
}
GUI.closeSave = function() {
//
}
GUI.save = function() {
var jsonString = JSON.stringify(GUI.getJSON());
var dialogue = document.createElement('div');
dialogue.setAttribute('id', 'guidat-save-dialogue');
var a = document.createElement('a');
a.setAttribute('href', window.location.href+'?gui='+escape(jsonString));
a.innerHTML = 'Use this URL.';
var span2 = document.createElement('span');
span2.innerHTML = '&hellip; or paste this into the beginning of your source:';
var textarea = document.createElement('textarea');
//textarea.setAttribute('disabled', 'true');
textarea.innerHTML += 'GUI.loadJSON('+jsonString+');';
var close = document.createElement('div');
close.setAttribute('id', 'guidat-save-dialogue-close');
close.addEventListener('click', function() {
GUI.closeSave();
}, false);
dialogue.appendChild(a);
dialogue.appendChild(span2);
dialogue.appendChild(textarea);
document.body.appendChild(dialogue);
textarea.addEventListener('click', function() {
this.select();
}, false);
}
GUI.Timer = function(gui) {
var _this = this;
this.hoverPoint = null;
this.activePoint = null;
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);
// Create tween dropdown.
this.tweenSelector = document.createElement('select');
this.tweenSelector.setAttribute('class', 'guidat-tween-selector');
for (var i in GUI.Easing) {
var opt = document.createElement('option');
opt.innerHTML = i;
this.tweenSelector.appendChild(opt);
}
this.tweenSelector.addEventListener('change', function(e) {
if (_this.activePoint != null) {
_this.activePoint.tween = GUI.Easing[this.value];
}
}, false);
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;
var playListeners = [];
var windowListeners = [];
var windowWidth = 10000;
var windowMin = -windowWidth/4;
var thisTime;
var lastTime;
var playInterval = -1;
var playResolution = 1000/60;
var playing = false;
var snapIncrement = 250;
var useSnap = false;
this.__defineGetter__('useSnap', function() {
return useSnap;
});
this.__defineSetter__('useSnap', function(v) {
useSnap = v;
for (var i in _this.scrubbers) {
_this.scrubbers[i].render();
};
});
this.__defineGetter__('snapIncrement', function() {
return snapIncrement;
});
this.__defineSetter__('snapIncrement', function(v) {
if (snapIncrement > 0) {
snapIncrement = v;
for (var i in _this.scrubbers) {
_this.scrubbers[i].render();
};
}
});
this.snap = function(t) {
if (!this.useSnap) {
return t;
}
var r = Math.round(t/this.snapIncrement)*this.snapIncrement;
return r;
}
this.scrubbers = [];
window.addEventListener('keyup', function(e) {
if (GUI.disableKeyListeners) return;
switch (e.keyCode) {
case 32:
_this.playPause();
break;
case 13:
_this.stop();
break;
case 8:
if (_this.activePoint != null) {
_this.activePoint.remove();
_this.activePoint = null;
}
_this.hideTweenSelector();
break;
}
}, false);
this.getJSON = function() {
var scrubberArr = [];
for (var i in _this.scrubbers) {
scrubberArr.push(_this.scrubbers[i].getJSON());
}
var obj = {'windowMin':_this.windowMin,
'windowWidth':_this.windowWidth,
'playhead':_this.playhead,
'snapIncrement': _this.snapIncrement,
'useSnap': _this.useSnap,
'scrubbers': scrubberArr};
return obj;
};
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) {
// TODO: Make these constants.
windowWidth = GUI.constrain(v, 1000, 60000);
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;
if (playing) {
windowMin += ((playhead-windowWidth/2)-windowMin)*0.3;
}
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 = GUI.millis();
if (playInterval == -1) {
playInterval = setInterval(this.update, playResolution);
}
};
this.update = function() {
thisTime = GUI.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.windowMin = -windowWidth/4;
};
this.addPlayListener = function(fnc) {
playListeners.push(fnc);
};
this.addWindowListener = function(fnc) {
windowListeners.push(fnc);
};
// Load saved stuff.
if (gui.json && gui.json.timer) {
this.playhead = gui.json.timer.playhead;
this.snapIncrement = gui.json.timer.snapIncrement;
this.useSnap = gui.json.timer.useSnap;
this.windowMin = gui.json.timer.windowMin;
this.windowWidth = gui.json.timer.windowWidth;
}
}

186
utils/build.py
View File

@ -1,186 +0,0 @@
#/usr/bin/env python
from optparse import OptionParser
import httplib, urllib
import os, fnmatch, shutil, re
usage = """usage: %prog [options] command
Commands:
build build the script
debug print the header to include js files
clean remove any built files
"""
parser = OptionParser(usage=usage)
parser.add_option('-l', '--level', dest='level', default='SIMPLE_OPTIMIZATIONS',
help='Closure compilation level [WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS, \
ADVANCED_OPTIMIZATIONS]')
UTILS = os.path.dirname(os.path.relpath(__file__))
PREFIX = os.path.join(UTILS,'..')
SRC_ROOT= os.path.join(PREFIX,'src')
BUILD_ROOT = os.path.join(PREFIX,'build')
INDEX = os.path.join(PREFIX,'index.html')
BUILD_NAME = 'DAT.GUI'
ALL_JS = ['DAT.GUI.js','DAT.GUI']
LICENSE = """/**
* dat.gui Javascript Controller Library
* http://dataarts.github.com/dat.gui
*
* Copyright 2011 Data Arts Team, Google Creative Lab
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
"""
def flatten(l, ltypes=(list, tuple)):
ltype = type(l)
l = list(l)
i = 0
while i < len(l):
while isinstance(l[i], ltypes):
if not l[i]:
l.pop(i)
i -= 1
break
else:
l[i:i + 1] = l[i]
i += 1
return ltype(l)
def expand(path, globby):
matches = []
path = path.split('.')
path.insert(0,SRC_ROOT)
filename = "%s.%s"%(path[-2],path[-1])
if fnmatch.fnmatch(filename, globby):
tmppath = os.path.join(*(path[:-1]+[filename]))
if os.path.exists(tmppath):
path[-1] = filename
else:
path = path[:-2]+[filename]
path = os.path.join(*path)
if os.path.isdir(path):
for root, dirnames, filenames in os.walk(path):
for filename in fnmatch.filter(filenames, globby):
matches.append(os.path.join(root, filename))
else:
matches.append(path)
return matches
def unique(seq, idfun=None):
"""Ordered uniquify function
if in 2.7 use:
OrderedDict.fromkeys(seq).keys()
"""
if idfun is None:
def idfun(x): return x
seen = {}
result = []
for item in seq:
marker = idfun(item)
if marker in seen: continue
seen[marker] = 1
result.append(item)
return result
def source_list(src, globby='*.js'):
def expander(f):
return expand(f,globby)
return unique(flatten(map(expander, src)))
def compile(code):
params = urllib.urlencode([
('js_code', code),
('compilation_level', options.level),
('output_format', 'text'),
('output_info', 'compiled_code'),
])
headers = { 'Content-type': 'application/x-www-form-urlencoded' }
conn = httplib.HTTPConnection('closure-compiler.appspot.com')
conn.request('POST', '/compile', params, headers)
response = conn.getresponse()
data = response.read()
conn.close()
return data
def bytes_to_kb(b,digits=1):
return round(0.0009765625 * b, digits)
def clean():
if os.path.exists(BUILD_ROOT):
shutil.rmtree(BUILD_ROOT)
print('DONE. Removed %s'%(BUILD_ROOT,))
else:
print('DONE. Nothing to clean')
def build(jssrc, csssrc=list([''])):
if not os.path.exists(BUILD_ROOT):
os.makedirs(BUILD_ROOT)
if csssrc:
cssfiles = source_list(csssrc, '*.css')
print('CSS files being compiled: ', cssfiles)
css = '\n'.join([open(f).read() for f in cssfiles])
css = re.sub(r'[ \t\n\r]+',' ',css)
jsfiles = source_list(jssrc, '*.js')
print('JS files being compiled: ', jsfiles)
code = '\n'.join([open(f).read() for f in jsfiles])
if csssrc:
code += """DAT.GUI.inlineCSS = '%s';\n"""%(css,)
outpath = os.path.join(BUILD_ROOT, BUILD_NAME+'.js')
with open(outpath,'w') as f:
f.write(LICENSE)
f.write(code)
compiled = compile(code)
outpathmin = os.path.join(BUILD_ROOT, BUILD_NAME+'.min.js')
with open(outpathmin,'w') as f:
f.write(LICENSE)
f.write(compiled)
size = bytes_to_kb(os.path.getsize(outpath))
sizemin = bytes_to_kb(os.path.getsize(outpathmin))
with open(INDEX,'r') as f:
index = f.read()
with open(INDEX,'w') as f:
index = re.sub(r'<small id=\'buildsize\'>\[[0-9.]+kb\]','<small id=\'buildsize\'>[%skb]'%(size,),index)
index = re.sub(r'<small id=\'buildsizemin\'>\[[0-9.]+kb\]','<small id=\'buildsizemin\'>[%skb]'%(sizemin,),index)
f.write(index)
print('DONE. Built files in %s.'%(BUILD_ROOT,))
def debug(jssrc, csssrc=list([''])):
head = ""
files = source_list(csssrc, '*.css')
for f in files:
f = f.replace(PREFIX+'/','')
head += '<link href="%s" media="screen" rel="stylesheet" type="text/css"/>\n'%(f,)
files = source_list(jssrc, '*.js')
for f in files:
f = f.replace(PREFIX+'/','')
head += '<script type="text/javascript" src="%s"></script>\n'%(f,)
print(head)
if __name__ == '__main__':
global options
(options, args) = parser.parse_args()
if len(args) != 1:
print(parser.usage)
exit(0)
command = args[0]
if command == 'build':
build(ALL_JS)
elif command == 'clean':
clean()
elif command == 'debug':
debug(ALL_JS)