mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
merging
This commit is contained in:
Jono Brandel
commit
6e3dda6c15
41
controllers/controller.boolean.js
Normal file
41
controllers/controller.boolean.js
Normal 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
11
controllers/controller.function.js
Normal 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
67
controllers/controller.js
Normal 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
146
controllers/controller.number.js
Normal 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
41
controllers/controller.string.js
Normal 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
51
controllers/slider.js
Normal 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
198
demo/demo.css
Normal 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
241
demo/demo.js
Normal 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();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -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 );
|
||||
|
||||
};
|
||||
|
||||
} )();
|
||||
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 183 B |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 670 B |
231
docs/demo.js
231
docs/demo.js
@ -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
265
docs/docs.css
@ -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;
|
||||
}
|
||||
@ -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
1538
docs/prettify.js
File diff suppressed because it is too large
Load Diff
241
gui.css
Normal file
241
gui.css
Normal 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
621
gui.js
Normal 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
93
index.html
@ -1,6 +1,7 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<<<<<<< HEAD
|
||||
|
||||
<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
|
||||
Data Arts Team, Google Creative Lab.
|
||||
</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>
|
||||
</html>
|
||||
|
||||
@ -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;
|
||||
};
|
||||
@ -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);
|
||||
@ -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);
|
||||
@ -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);
|
||||
@ -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;
|
||||
|
||||
};
|
||||
@ -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);
|
||||
@ -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;
|
||||
}
|
||||
@ -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
917
time/scrubber.js
Normal 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
311
time/timer.js
Normal 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 = '… 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
186
utils/build.py
@ -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)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user