mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-10-10 06:54:18 +00:00
added built objects as their own branch
This commit is contained in:
Doug Fritz
parent
18168c1137
commit
bfad27a2a2
0
build/DAT.GUI.min.js → DAT.GUI.min.js
vendored
0
build/DAT.GUI.min.js → DAT.GUI.min.js
vendored
@ -1,5 +0,0 @@
|
||||
**dat.gui** is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
|
||||
|
||||
Check the [index page](http://dataarts.github.com/dat.gui/) for usage.
|
||||
|
||||
Initiated by [George Michael Brower](http://georgemichaelbrower.com/) and [Jono Brandel](http://jonobr1.com/) of the Data Arts Team, Google Creative Lab.
|
||||
@ -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
402
index.html
402
index.html
@ -1,402 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>dat.gui</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='docs/assets/favicon.png'/>
|
||||
|
||||
<!--Minified build-->
|
||||
<!--<script type='text/javascript' src='build/DAT.GUI.min.js'></script>-->
|
||||
|
||||
<!--Build--->
|
||||
<!--<script type='text/javascript' src='build/DAT.GUI.js'></script>-->
|
||||
|
||||
<!--All source-->
|
||||
<link href='src/DAT/GUI/GUI.css' media='screen' rel='stylesheet' type='text/css'/>
|
||||
<script type='text/javascript' src='src/DAT/GUI/GUI.js'></script>
|
||||
<script type='text/javascript' src='src/DAT/GUI/ControllerNumberSlider.js'></script>
|
||||
<script type='text/javascript' src='src/DAT/GUI/Controller.js'></script>
|
||||
<script type='text/javascript' src='src/DAT/GUI/ControllerBoolean.js'></script>
|
||||
<script type='text/javascript' src='src/DAT/GUI/ControllerString.js'></script>
|
||||
<script type='text/javascript' src='src/DAT/GUI/ControllerFunction.js'></script>
|
||||
<script type='text/javascript' src='src/DAT/GUI/ControllerNumber.js'></script>
|
||||
|
||||
<!--Demo-->
|
||||
<link href='docs/docs.css' media='screen' rel='stylesheet' type='text/css'/>
|
||||
<script type='text/javascript' src='docs/RequestAnimationFrame.js'></script>
|
||||
<script type='text/javascript' src='docs/improvedNoise.js'></script>
|
||||
<script type='text/javascript' src='docs/prettify.js'></script>
|
||||
<script type='text/javascript' src='docs/demo.js'></script>
|
||||
|
||||
<script type='text/javascript'>
|
||||
//<![CDATA[
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
prettyPrint();
|
||||
|
||||
var fizzyText = new FizzyText('dat.gui');
|
||||
var gui = new DAT.GUI();
|
||||
|
||||
// Text field
|
||||
gui.add(fizzyText, 'message');
|
||||
|
||||
// Sliders with min + max
|
||||
gui.add(fizzyText, 'maxSize').min(0.5).max(7);
|
||||
gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05);
|
||||
gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step
|
||||
|
||||
// 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').name('Explode!'); // Specify a custom name.
|
||||
|
||||
// Javascript for documentation
|
||||
getCollapsables();
|
||||
handleListening();
|
||||
};
|
||||
|
||||
function toggle(e) {
|
||||
|
||||
var collapsable = this.childNodes[3],
|
||||
wrapper = collapsable.childNodes[1];
|
||||
|
||||
if (this.className === 'collapsed') {
|
||||
this.className = 'expanded';
|
||||
collapsable.style.height = wrapper.clientHeight + 'px';
|
||||
} else {
|
||||
this.className = 'collapsed';
|
||||
collapsable.style.height = '0px';
|
||||
}
|
||||
}
|
||||
|
||||
function getCollapsables() {
|
||||
|
||||
if (document.getElementsByClassName == undefined) {
|
||||
document.getElementsByClassName = function(className) {
|
||||
var hasClassName = new RegExp('(?:^|\\s)' + className + '(?:$|\\s)');
|
||||
var allElements = document.getElementsByTagName('*');
|
||||
var results = [];
|
||||
|
||||
var element;
|
||||
for (var i = 0; (element = allElements[i]) != null; i++) {
|
||||
var elementClass = element.className;
|
||||
if (elementClass && elementClass.indexOf(className) != -1 &&
|
||||
hasClassName.test(elementClass))
|
||||
results.push(element);
|
||||
}
|
||||
|
||||
return results;
|
||||
};
|
||||
}
|
||||
|
||||
collapsed = document.getElementsByClassName('collapsed');
|
||||
expanded = document.getElementsByClassName('expanded');
|
||||
}
|
||||
|
||||
function handleListening() {
|
||||
|
||||
for (var i = 0; i < collapsed.length; i++) {
|
||||
collapsed[i].addEventListener('click', toggle, false);
|
||||
}
|
||||
|
||||
for (var j = 0; j < expanded.length; j++) {
|
||||
expanded[i].addEventListener('click', toggle, false);
|
||||
}
|
||||
}
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='container'>
|
||||
|
||||
<!-- GUIDAT logo -->
|
||||
<div id='helvetica-demo'></div>
|
||||
|
||||
<!-- It gives you this! -->
|
||||
<div id='notifier'></div>
|
||||
|
||||
<h1><a href='http://twitter.com/guidat'><img src='docs/assets/profile.png'
|
||||
border='0' alt='dat.gui flag'/></a>
|
||||
</h1>
|
||||
|
||||
<p><strong>dat.gui</strong> is a lightweight controller library for JavaScript.
|
||||
It allows you to easily manipulate variables and fire functions on the fly.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href='https://github.com/dataarts/dat.gui/raw/master/build/DAT.GUI.min.js'><strong>Download the minified source</strong></a>
|
||||
<small id='buildsizemin'>[19.5kb]
|
||||
</small>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://github.com/dataarts/dat.gui/raw/master/build/DAT.GUI.js'><strong>Download the uncompressed source</strong></a>
|
||||
<small id='buildsize'>[33.6kb]
|
||||
</small>
|
||||
</li>
|
||||
|
||||
<li><a href='http://github.com/dataarts/dat.gui'>Contribute on GitHub!</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Basic Usage</h2>
|
||||
<pre id='demo-pre' class='prettyprint'>
|
||||
<script type='text/javascript' src='DAT.GUI.min.js'></script>
|
||||
<script type='text/javascript'>
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var fizzyText = new <a href='docs/demo.js'>FizzyText</a>('dat.gui');
|
||||
|
||||
var gui = new DAT.GUI();
|
||||
|
||||
// Text field
|
||||
gui.add(fizzyText, 'message');
|
||||
|
||||
// Sliders with min + max
|
||||
gui.add(fizzyText, 'maxSize').min(0.5).max(7);
|
||||
gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05);
|
||||
gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step
|
||||
|
||||
gui.add(fizzyText, 'noiseStrength', 10, 100, 5);
|
||||
|
||||
// Boolean checkbox
|
||||
gui.add(fizzyText, 'displayOutline');
|
||||
|
||||
// Fires a function called 'explode'
|
||||
gui.add(fizzyText, 'explode').name('Explode!'); // Specify a custom name.
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<ul id='desc'>
|
||||
<li><code>DAT.GUI</code> will infer the type of the property you're trying
|
||||
to add<br/>
|
||||
(based on its initial value) and create the corresponding control.
|
||||
</li>
|
||||
|
||||
<li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop
|
||||
= value</code>.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
<h2 class='collapsed'>Fire a function when someone uses a control</h2>
|
||||
<pre class='prettyprint'>gui.add(obj, 'propName').onChange(function(n) {
|
||||
alert('You changed me to ' + n);
|
||||
});</pre>-->
|
||||
|
||||
<!--<div class='collapsed'>-->
|
||||
<!---->
|
||||
<!--<h2 class='section'>Saving your parameters</h2>-->
|
||||
|
||||
<!--<div class='collapsable'>-->
|
||||
<!--<div>-->
|
||||
<!--<p>The simplest way to save your parameters is via-->
|
||||
<!--<code>DAT.GUI.saveURL()</code>. This method directs your browser to a-->
|
||||
<!--URL containing the current GUI settings.</p>-->
|
||||
<!--<pre class='prettyprint last'>-->
|
||||
<!--// Make a button for the url function-->
|
||||
<!--gui.add(DAT.GUI, 'saveURL');</pre>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class='collapsed'>-->
|
||||
<!--<h2 class='section'>Advanced saving</h2>-->
|
||||
|
||||
<!--<div class='collapsable'>-->
|
||||
<!--<div>-->
|
||||
<!--<p>Let's say you'd like to share your settings with someone. Instead of-->
|
||||
<!--sending a long link with lots of parameters stored in it, you can make-->
|
||||
<!--your saved settings the defaults.</p>-->
|
||||
|
||||
<!--<p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui-->
|
||||
<!--object:</p>-->
|
||||
<!--<pre class='prettyprint'>var gui = new DAT.GUI();-->
|
||||
|
||||
<!--// Add some stuff (and pretend I change their values);-->
|
||||
<!--gui.add(someObject, 'someProperty');-->
|
||||
<!--gui.add(someObject, 'someOtherProperty');-->
|
||||
|
||||
<!--// Make a save button.-->
|
||||
<!--gui.add(DAT.GUI, 'showSaveString');</pre>-->
|
||||
|
||||
<!--<p>Clicking the 'showSaveString' button bring up an alert with a string.-->
|
||||
<!--Copy and paste that string into the method <code>DAT.GUI.load()</code>-->
|
||||
<!--before you instantiate any gui objects.</p>-->
|
||||
<!--<pre class='prettyprint'>-->
|
||||
<!--// Replace COPIED STRING with the value you got from showSaveString()-->
|
||||
<!--DAT.GUI.load('COPIED STRING');-->
|
||||
|
||||
<!--var gui = new DAT.GUI();-->
|
||||
|
||||
<!--// Now these properties will be set to the values you just saved.-->
|
||||
<!--gui.add(someObject, 'someProperty');-->
|
||||
<!--gui.add(someObject, 'someOtherProperty');</pre>-->
|
||||
|
||||
<!--<p class='last'><strong>Save strings won't work if you change the order in-->
|
||||
<!--which you've added properties to your gui objects, or the order of the-->
|
||||
<!--gui objects themselves.</strong>. If you want to add more parameters to-->
|
||||
<!--your gui and use an old save string, make sure they're added after the-->
|
||||
<!--properties whose values you've saved.</p>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
|
||||
<div class='collapsed'>
|
||||
<h2 class='section'>Choosing from a list of values</h2>
|
||||
|
||||
<div class='collapsable'>
|
||||
<div>
|
||||
<pre class='prettyprint first last'>gui.add(obj, 'propertyName').options(1, 2, 3, 5, 8);
|
||||
|
||||
// Alternatively, you can specify custom labels using object syntax
|
||||
gui.add(obj, 'propertyName').options({'Small': 1, 'Medium': 2, 'Large': 3});
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='collapsed'>
|
||||
<h2 class='section'>Listen for variable changes inside the GUI</h2>
|
||||
|
||||
<div class='collapsable'>
|
||||
<div>
|
||||
<p>To fire a function whenever a user changes a variable via the GUI, use
|
||||
the following syntax:</p>
|
||||
<pre class='prettyprint'>gui.add(obj, 'propertyName').onChange(function(newValue) {
|
||||
alert('You changed me to ' + newValue);
|
||||
});</pre>
|
||||
<p>This can be slightly annoying for types like number or string. You may
|
||||
not want to fire a function while the user is sliding, or while they're
|
||||
typing. To fire a function when the user has <em>finished</em> making
|
||||
changes, use the following:</p>
|
||||
<pre class='prettyprint'>gui.add(obj, 'propertyName').onFinishChange(function(newValue) {
|
||||
alert('You just finished changing me to ' + newValue);
|
||||
});</pre>
|
||||
<p>Finally, if you'd like to do a little something extra when a function
|
||||
is called, use the following:</p>
|
||||
<pre class='prettyprint last'>gui.add(obj, 'functionName').onFire(function() {
|
||||
alert('You called a function with dat.gui');
|
||||
});</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='collapsed'>
|
||||
<h2 class='section'>Listen for variable changes outside of the GUI</h2>
|
||||
|
||||
<div class='collapsable'>
|
||||
<div>
|
||||
<p>Let's say you have a variable that changes by itself from time to time.
|
||||
If you'd like the GUI to reflect those changes, use the <code>listen()</code>
|
||||
method.</p>
|
||||
<pre
|
||||
class='prettyprint last'>gui.add(obj, 'changingProperty').listen();</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='collapsed'>
|
||||
<h2 class='section'>Advanced listening</h2>
|
||||
|
||||
<div class='collapsable'>
|
||||
<div>
|
||||
<p>By default, <code>DAT.GUI</code> will create an internal interval
|
||||
that checks for changes in the values you've marked with
|
||||
<code>listen()</code>. If you'd like to check for these changes in an
|
||||
interval of your own definition, use the following:</p>
|
||||
<pre class='prettyprint'>
|
||||
gui.autoListen = false; // disables internal interval
|
||||
gui.add(obj, 'changingProperty').listen();
|
||||
|
||||
// Make your own loop
|
||||
setInterval(function() {
|
||||
gui.listen(); // updates values you've marked with listen()
|
||||
}, 1000 / 60);</pre>
|
||||
|
||||
<p>Alternatively, you can forego calling <code>listen()</code> on
|
||||
individual controllers, and instead choose to monitor changes in
|
||||
<em>all</em> values controlled by your gui.</p>
|
||||
<pre class='prettyprint last'>
|
||||
gui.autoListen = false; // disables internal interval
|
||||
gui.add(obj, 'add');
|
||||
gui.add(obj, 'lotsa');
|
||||
gui.add(obj, 'properties');
|
||||
|
||||
// Make your own loop
|
||||
setInterval(function() {
|
||||
gui.listenAll(); // updates ALL values managed by this gui
|
||||
}, 1000 / 60);</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='collapsed'>
|
||||
<h2 class='section'>Multiple panels and custom placement</h2>
|
||||
|
||||
<div class='collapsable'>
|
||||
<div>
|
||||
<p>You can instantiate multiple <code>DAT.GUI</code> objects and name them
|
||||
however you'd like.</p>
|
||||
<pre class='prettyprint'>var gui1 = new DAT.GUI();
|
||||
var gui2 = new DAT.GUI();
|
||||
|
||||
// The name function overwrites the 'Show Controls' text.
|
||||
gui1.name('Utilities');
|
||||
gui2.name('Camera Placement');</pre>
|
||||
|
||||
<p>By default, <code>DAT.GUI</code> panels will be automatically added
|
||||
to the HTML document and fixed to the top of the screen from right to
|
||||
left. You can disable this behavior and append the gui DOM element to
|
||||
a container of your choosing.</p>
|
||||
<pre class='prettyprint last'>
|
||||
// Notice this belongs to the DAT.GUI class (uppercase)
|
||||
// and not an instance thereof.
|
||||
DAT.GUI.autoPlace = false;
|
||||
|
||||
var gui = new DAT.GUI();
|
||||
|
||||
// Do some custom styles ...
|
||||
gui.domElement.style.position = 'absolute';
|
||||
gui.domElement.style.top = '20px';
|
||||
gui.domElement.style.left = '20px';
|
||||
|
||||
document.getElementById('my-gui-container').appendChild( gui.domElement );</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='collapsed'>
|
||||
<h2 class='section'>Pro tips.</h2>
|
||||
|
||||
<div class='collapsable'>
|
||||
<div>
|
||||
<ol id='secrets'>
|
||||
<li><code>DAT.GUI</code> panels are resizeable. Drag the open/close
|
||||
button.
|
||||
</li>
|
||||
|
||||
<li>Press 'H' to show/hide GUI's.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='trans'> </div>
|
||||
|
||||
<footer class='trans'>Initiated by <a href='http://georgemichaelbrower.com/'>George
|
||||
Michael Brower</a> and <a href='http://jonobr1.com/'>Jono Brandel</a> of the
|
||||
Data Arts Team, Google Creative Lab.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,105 +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];
|
||||
|
||||
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) {
|
||||
this.object[this.propertyName] = n;
|
||||
if (this.changeFunction != null) {
|
||||
this.changeFunction.call(this, n);
|
||||
}
|
||||
this.updateDisplay();
|
||||
return this;
|
||||
};
|
||||
|
||||
DAT.GUI.Controller.prototype.getValue = function() {
|
||||
return this.object[this.propertyName];
|
||||
};
|
||||
|
||||
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,735 +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];
|
||||
|
||||
// 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.
|
||||
}
|
||||
|
||||
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'));
|
||||
}
|
||||
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