diff --git a/demo/demo.css b/demo/demo.css index 74d9b39..bd65ce6 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -4,8 +4,8 @@ } body { - padding: 0 20px 20px 20px; font: 9.5px/13px Lucida Grande, sans-serif; + padding: 0 20px 20px 20px; } h1, h2, h3, h4, h5, h6 { @@ -18,7 +18,7 @@ h1 { font-weight: 800; text-transform: lowercase; line-height: 80px; - margin: 20px 0 0 0; + margin: 20px 0 20px 0; } h1 a:link, h1 a:visited, h1 a:hover, h1 a:active { @@ -31,11 +31,22 @@ h1 img { height: 45px; -moz-border-radius: 9px; border-radius: 9px; - margin-bottom: 20px; + margin-bottom: 8px; } h2 { -font-size: 18px; + margin-top: 30px; + font-size: 18px; + margin-bottom: 24px; +} + +#helvetica-demo { + position: absolute; + left: 0; + top: 0; + width: 800; + height: 300; + z-index: -1; } pre { @@ -46,39 +57,62 @@ pre { font: 10px Monaco, monospace; } -p { font-size: 125%; max-width: 530px; line-height: 18px; margin-bottom: 36px; } +p, ul { + font-size: 125%; + max-width: 530px; + line-height: 18px; + margin-bottom: 24px; +} + +li { + margin-left: 18px; +} + +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 { -background-color: #eee; -width: 510px; -padding: 10px; + background-color: #eee; + width: 510px; + padding: 10px; } -#columns { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - height: 10px; +pre a:link, +pre a:visited, +pre a:active { +color: #ccc; } -#columns div { - float: left; - width : auto; - height: 10px; +pre a:hover { +color: #e61d5f; +} + +code { + font: 10px Monaco, monospace; +} + +code strong { + font-weight: normal; + color: #e61d5f; } /* SPAN elements with the classes below are added by prettyprint. */ diff --git a/demo/demo.js b/demo/demo.js index 97657aa..1029d3f 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,114 +1,169 @@ -function DynamicText(message, width, height, textAscent) { - +function FizzyText(message) { + var _this = this; - - this.growthSpeed = 0.1; + + var width = 550; + var height = 200; + var textAscent = 82; + var textLeft = 80; + + + this.growthSpeed = 0.5; this.minSize = 0; - this.maxSize = 5; - - var message = message; - - this.width = width; - this.height = height; - + this.maxSize = 3.2; + + this.noiseScale = 300; + this.noiseStrength = 10; + this.speed = 0.4; + + this.displayOutline = false; + this.textAscent = textAscent; - + + + var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"]; + var r = document.createElement('canvas'); var s = r.getContext('2d'); - + var c = document.createElement('canvas'); var g = c.getContext('2d'); - - r.setAttribute('width', width); - c.setAttribute('width', width); + + r.setAttribute('width', width); + c.setAttribute('width', width); r.setAttribute('height', height); c.setAttribute('height', height); - + document.getElementById('helvetica-demo').appendChild(c); - - var pixels = []; + + var pixels = []; var particles = []; - - s.font = "800 "+textAscent+"px helvetica, arial, sans-serif"; - - // Set reference onto particles - for (var i = 0; i < 1000; i++) { - particles.push( new Particle(Math.random()*width, Math.random()*height)); - } - - var createBitmap = function(m) { + + s.font = g.font = "800 " + textAscent + "px helvetica, arial, sans-serif"; + + // Set reference onto particles + for (var i = 0; i < 1000; i++) { + particles.push(new Particle(Math.random() * width, Math.random() * height)); + } + + var createBitmap = function (m) { s.fillStyle = "#fff"; s.fillRect(0, 0, width, height); - + s.fillStyle = "#222"; - s.fillText(m, 0, textAscent); - + s.fillText(m, textLeft, textAscent); + // Pull reference var imageData = s.getImageData(0, 0, width, height); pixels = imageData.data; - - }; - - var render = function() { - - g.clearRect(0, 0, width, height); - - for (var i = 0; i < particles.length; i++) { - particles[i].update(); - particles[i].draw(); - } - }; - - var getPosition = function(i) { - return { x: (i - (width * 4) * Math.floor(i/(width * 4))) / 4, y: Math.floor(i/(width * 4)) }; - }; - - 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.__defineGetter__("message", function() { + + var render = function () { + + g.clearRect(0, 0, width, height); + + if (_this.displayOutline) { + g.globalCompositeOperation = "source-over"; + g.strokeStyle = "#000"; + g.lineWidth = .5; + g.strokeText(message, textLeft, textAscent); + } + + g.globalCompositeOperation = "darker"; + + for (var i = 0; i < particles.length; i++) { + g.fillStyle = colors[i % colors.length]; + particles[i].render(); + } + + }; + + var getPosition = function (i) { + return { + x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4, + y: Math.floor(i / (width * 4)) + }; + }; + + 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.__defineGetter__("message", function () { return message; }); - - this.__defineSetter__("message", function(m) { + + this.__defineSetter__("message", function (m) { message = m; createBitmap(message); }); - - createBitmap(message); - setInterval(render, 30); - - function Particle(x, y, c) { - this.x = x; - this.y = y; - this.r = 0; - this.update = function() { - this.x += Math.random() - Math.random(); - this.y += Math.random() - Math.random(); + + 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; } - this.draw = function() { - var c = getColor(this.x, this.y); - if (c == "rgb(255,255,255)") { - this.r -= _this.growthSpeed; - } else { - this.r += _this.growthSpeed; - } - this.r = constrain(this.r, _this.minSize, _this.maxSize); - g.beginPath(); - g.arc(this.x, this.y, this.r, 0, Math.PI*2, false); - g.fill(); - } - } + }; + this.message = message; - var constrain = function(v, o1, o2) { - if (v < o1) v = o1; - else if (v > o2) v = o2; - return v; - } + setInterval(render, 30); + + function Particle(x, y, c) { + this.x = x; + this.y = y; -} + this.vx = 0; + this.vy = 0; + this.r = 0; + + this.render = function () { + var c = getColor(this.x, this.y); + var angle = noise(this.x / _this.noiseScale, this.y / _this.noiseScale) * _this.noiseStrength; + + var onScreen = this.x > 0 && this.x < width && + this.y > 0 && this.y < height; + var isBlack = c != "rgb(255,255,255)" && + onScreen; + + if (isBlack) { + this.r += _this.growthSpeed; + } else { + this.r -= _this.growthSpeed; + } + this.vx *= 0.5; + this.vy *= 0.5; + this.x += Math.cos(angle) * _this.speed + this.vx; + this.y += -Math.sin(angle) * _this.speed + this.vy; + this.r = constrain(this.r, _this.minSize, _this.maxSize); + if (this.r <= _this.minSize) { + this.x = Math.random() * width; + this.y = Math.random() * height; + } + if (this.r <= 0) { + return; + } + g.beginPath(); + g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); + g.fill(); + } + } + + var constrain = function (v, o1, o2) { + if (v < o1) v = o1; + else if (v > o2) v = o2; + return v; + } + +} \ No newline at end of file diff --git a/demo/improvedNoise.js b/demo/improvedNoise.js new file mode 100644 index 0000000..30e06a1 --- /dev/null +++ b/demo/improvedNoise.js @@ -0,0 +1,181 @@ +// 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 o2) v = o2; + return v; + } + + var findPos = function(obj) { + var curleft = curtop = 0; + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj = obj.offsetParent); + return [curleft,curtop]; + } + } + + this.__defineSetter__('value', function(e) { + + var pct = map(e, min, max, 0, 100); + this.fg.style.width = pct+"%"; + + }); + + var onDrag = function(e) { + if (!clicked) return; + var pos = findPos(_this.domElement); + var val = map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max); + val = Math.round(val/step)*step; + numberController.updateValue(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; + +} +var Controller = function() { + + var onChange = null; + + this.setName = function(n) { + this.propertyNameElement.innerHTML = n; + } + + this.setValue = function(n) { + this.object[this.propertyName] = n; + if (onChange != null) { + onChange.call(this, n); + } + } + + this.getValue = function() { + return this.object[this.propertyName]; + } + + this.onChange = function(fnc) { + onChange = fnc; + } + + this.makeUnselectable = function(elem) { + elem.onselectstart = function() { return false; }; + elem.style.MozUserSelect = "none"; + elem.style.KhtmlUserSelect = "none"; + elem.unselectable = "on"; + } + + this.makeSelectable = function(elem) { + elem.onselectstart = function() { }; + elem.style.MozUserSelect = "auto"; + elem.style.KhtmlUserSelect = "auto"; + elem.unselectable = "off"; + } + + this.domElement = document.createElement('div'); + this.domElement.setAttribute('class', 'guidat-controller ' + this.type); + + this.object = arguments[0]; + this.propertyName = arguments[1]; + + this.propertyNameElement = document.createElement('span'); + this.propertyNameElement.setAttribute('class', 'guidat-propertyname'); + this.setName(this.propertyName); + this.domElement.appendChild(this.propertyNameElement); + + this.makeUnselectable(this.domElement); + +}; +var BooleanController = function() { + this.type = "boolean"; + 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. + }, false); + + this.domElement.style.cursor = "pointer"; + this.propertyNameElement.style.cursor = "pointer"; + this.domElement.appendChild(input); + +}; +BooleanController.prototype = new Controller(); +BooleanController.prototype.constructor = BooleanController; +var FunctionController = function() { + this.type = "function"; + var _this = this; + Controller.apply(this, arguments); + this.domElement.addEventListener('click', function() { + _this.object[_this.propertyName].call(_this.object); + }, false); + this.domElement.style.cursor = "pointer"; + this.propertyNameElement.style.cursor = "pointer"; +}; +FunctionController.prototype = new Controller(); +FunctionController.prototype.constructor = FunctionController; +// TODO: Provide alternate controllers for non-html5 browsers? +var NumberController = function() { + + this.type = "number"; + + 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[2]; + var max = arguments[3]; + var step = arguments[4]; + + if (!step) { + if (min && max) { + step = (max-min)*0.01; + } else { + step = 1; + } + } + + var numberField = document.createElement('input'); + numberField.setAttribute('id', this.propertyName); + + // Little up and down arrows are pissing me off. + 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 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.updateValue(val); + } else { + this.value = _this.getValue(); + } + }, false); + + numberField.addEventListener('mousewheel', function(e) { + e.preventDefault(); + this.updateValue(_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); + + document.addEventListener('mouseup', function(e) { + document.removeEventListener('mousemove', dragNumberField, false); + _this.makeSelectable(GUI.domElement); + _this.makeSelectable(numberField); + if (clickedNumberField && !draggedNumberField) { + numberField.focus(); + numberField.select(); + } + draggedNumberField = false; + clickedNumberField = false; + }, false); + + // Kinda nast + if (navigator.appVersion.indexOf('chrome') != -1) { + document.addEventListener('mouseout', function(e) { + document.removeEventListener('mousemove', dragNumberField, 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. + _this.makeUnselectable(GUI.domElement); + _this.makeUnselectable(numberField); + + py = y; + y = e.pageY; + var dy = py - y; + var newVal = _this.getValue() + dy*step; + _this.updateValue(newVal); + return false; + } + + this.updateValue = function(val) { + + val = parseFloat(val); + + if (min != undefined && val <= min) { + val = min; + } else if (max != undefined && val >= max) { + val = max; + } + _this.setValue(val); + + numberField.value = _this.getValue(); + if (slider) slider.value = _this.getValue(); + } + +}; + +NumberController.prototype = new Controller(); +NumberController.prototype.constructor = NumberController; +var StringController = function() { + + this.type = "string"; + + var _this = this; + + 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); + + input.addEventListener('keyup', function() { + _this.setValue(input.value); + }, false); + + this.domElement.appendChild(input); +}; +StringController.prototype = new Controller(); +StringController.prototype.constructor = StringController; \ No newline at end of file diff --git a/gui.css b/gui.css index 005ec90..e55b459 100644 --- a/gui.css +++ b/gui.css @@ -94,7 +94,7 @@ border: 0; color: #1ed36f; margin-right: 2px; -width: 53%; +width: 148px; } .guidat-controller.boolean { diff --git a/gui.min.js b/gui.min.js new file mode 100644 index 0000000..8d5d355 --- /dev/null +++ b/gui.min.js @@ -0,0 +1 @@ +var GUI=new function(){var g=this;var c=[];var a="#guidat{color:#fff;position:fixed;width:280px;z-index:200;opacity:.97;top:0;left:100%;margin-left:-300px;background-color:#fff;-moz-transition:margin-top .2s ease-out;-webkit-transition:margin-top .2s ease-out;transition:margin-top .2s ease-out;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.3);-moz-box-shadow:0 0 10px rgba(0,0,0,0.3);box-shadow:0 0 10px rgba(0,0,0,0.3)}#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-toggle{text-decoration:none;cursor:pointer;color:#fff;background-color:#222;text-align:center;display:block;padding:5px}#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 .15s linear;-webkit-transition:background-color .15s linear;transition:background-color .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;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:0 1px 3px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);box-shadow:0 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:40%;margin-top:2px;float:right;height:21px}.guidat-slider-fg{background-color:#00aeff;height:20px}";this.add=function(){if(!h){i("Make sure to call GUI.start() in the window.onload function");return}var n=arguments[0];var l=arguments[1];if(d(n,l)){i('Controller for "'+l+'" already added.');return}var q=n[l];if(q==undefined){i(n+' either has no property "'+l+'", or the property is inaccessible.');return}var p=typeof q;var o=j[p];if(o==undefined){i('Cannot create controller for data type "'+p+'"');return}var m=o.apply(this,arguments);if(!m){i('Error creating controller for "'+l+'".');return}b.appendChild(m.domElement);c.push(m);return m};var j={number:function(){return k(NumberController,arguments)},string:function(){return k(StringController,arguments)},"boolean":function(){return k(BooleanController,arguments)},"function":function(){return k(FunctionController,arguments)},};var d=function(m,l){for(var n in c){if(c[n].object==m&&c[n].propertyName==l){return true}}return false};var i=function(l){if(typeof console.log=="function"){console.error("[GUI ERROR] "+l)}};var k=function(m,l){function n(){return m.apply(this,l)}n.prototype=m.prototype;return new n()};this.domElement=null;var b;var h=false;var f=false;var e=300;this.start=function(){var l=document.createElement("style");l.setAttribute("type","text/css");l.innerHTML=a;document.getElementsByTagName("head")[0].appendChild(l);this.domElement=document.createElement("div");this.domElement.setAttribute("id","guidat");b=document.createElement("div");b.setAttribute("id","guidat-controllers");toggleButton=document.createElement("a");toggleButton.setAttribute("id","guidat-toggle");toggleButton.setAttribute("href","#");toggleButton.innerHTML="Show Controls";toggleButton.addEventListener("click",function(m){g.toggle();m.preventDefault()},false);this.domElement.appendChild(b);this.domElement.appendChild(toggleButton);this.domElement.style.marginTop=-e+"px";document.body.appendChild(this.domElement);h=true};this.toggle=function(){if(f){this.hide()}else{this.show()}};this.show=function(){this.domElement.style.marginTop=0+"px";toggleButton.innerHTML="Hide Controls";f=true};this.hide=function(){this.domElement.style.marginTop=-e+"px";toggleButton.innerHTML="Show Controls";f=false}};var Slider=function(a,e,j,c,i){var e=e;var j=j;var c=c;var h=false;var f=this;var k,l;this.domElement=document.createElement("div");this.fg=document.createElement("div");this.domElement.setAttribute("class","guidat-slider-bg");this.fg.setAttribute("class","guidat-slider-fg");this.domElement.appendChild(this.fg);var b=function(m,p,n,q,o){var m=q+(o-q)*((m-p)/(n-p));if(mo){m=o}}return m};var g=function(m){var n=curtop=0;if(m.offsetParent){do{n+=m.offsetLeft;curtop+=m.offsetTop}while(m=m.offsetParent);return[n,curtop]}};this.__defineSetter__("value",function(n){var m=b(n,e,j,0,100);this.fg.style.width=m+"%"});var d=function(m){if(!h){return}var o=g(f.domElement);var n=b(m.pageX,o[0],o[0]+f.domElement.offsetWidth,e,j);n=Math.round(n/c)*c;a.updateValue(n)};this.domElement.addEventListener("mousedown",function(m){h=true;k=l=m.pageX;f.domElement.setAttribute("class","guidat-slider-bg active");f.fg.setAttribute("class","guidat-slider-fg active");d(m)},false);document.addEventListener("mouseup",function(m){f.domElement.setAttribute("class","guidat-slider-bg");f.fg.setAttribute("class","guidat-slider-fg");h=false},false);document.addEventListener("mousemove",d,false);this.value=i};var Controller=function(){var a=null;this.setName=function(b){this.propertyNameElement.innerHTML=b};this.setValue=function(b){this.object[this.propertyName]=b;if(a!=null){a.call(this,b)}};this.getValue=function(){return this.object[this.propertyName]};this.onChange=function(b){a=b};this.makeUnselectable=function(b){b.onselectstart=function(){return false};b.style.MozUserSelect="none";b.style.KhtmlUserSelect="none";b.unselectable="on"};this.makeSelectable=function(b){b.onselectstart=function(){};b.style.MozUserSelect="auto";b.style.KhtmlUserSelect="auto";b.unselectable="off"};this.domElement=document.createElement("div");this.domElement.setAttribute("class","guidat-controller "+this.type);this.object=arguments[0];this.propertyName=arguments[1];this.propertyNameElement=document.createElement("span");this.propertyNameElement.setAttribute("class","guidat-propertyname");this.setName(this.propertyName);this.domElement.appendChild(this.propertyNameElement);this.makeUnselectable(this.domElement)};var BooleanController=function(){this.type="boolean";Controller.apply(this,arguments);var b=this;var a=document.createElement("input");a.setAttribute("type","checkbox");this.domElement.addEventListener("click",function(c){a.checked=!a.checked;c.preventDefault();b.setValue(a.checked)},false);a.addEventListener("mouseup",function(c){a.checked=!a.checked},false);this.domElement.style.cursor="pointer";this.propertyNameElement.style.cursor="pointer";this.domElement.appendChild(a)};BooleanController.prototype=new Controller();BooleanController.prototype.constructor=BooleanController;var FunctionController=function(){this.type="function";var a=this;Controller.apply(this,arguments);this.domElement.addEventListener("click",function(){a.object[a.propertyName].call(a.object)},false);this.domElement.style.cursor="pointer";this.propertyNameElement.style.cursor="pointer"};FunctionController.prototype=new Controller();FunctionController.prototype.constructor=FunctionController;var NumberController=function(){this.type="number";Controller.apply(this,arguments);var f=this;var a=false;var g=false;var i=py=0;var e=arguments[2];var j=arguments[3];var d=arguments[4];if(!d){if(e&&j){d=(j-e)*0.01}else{d=1}}var c=document.createElement("input");c.setAttribute("id",this.propertyName);c.setAttribute("type","text");c.setAttribute("value",this.getValue());if(d){c.setAttribute("step",d)}this.domElement.appendChild(c);var b;if(e!=undefined&&j!=undefined){b=new Slider(this,e,j,d,this.getValue());this.domElement.appendChild(b.domElement)}c.addEventListener("blur",function(k){var l=parseFloat(this.value);if(!isNaN(l)){f.updateValue(l)}else{this.value=f.getValue()}},false);c.addEventListener("mousewheel",function(k){k.preventDefault();this.updateValue(f.getValue()+Math.abs(k.wheelDeltaY)/k.wheelDeltaY*d);return false},false);c.addEventListener("mousedown",function(k){py=i=k.pageY;g=true;document.addEventListener("mousemove",h,false)},false);document.addEventListener("mouseup",function(k){document.removeEventListener("mousemove",h,false);f.makeSelectable(GUI.domElement);f.makeSelectable(c);if(g&&!a){c.focus();c.select()}a=false;g=false},false);if(navigator.appVersion.indexOf("chrome")!=-1){document.addEventListener("mouseout",function(k){document.removeEventListener("mousemove",h,false)},false)}var h=function(m){a=true;m.preventDefault();f.makeUnselectable(GUI.domElement);f.makeUnselectable(c);py=i;i=m.pageY;var k=py-i;var l=f.getValue()+k*d;f.updateValue(l);return false};this.updateValue=function(k){k=parseFloat(k);if(e!=undefined&&k<=e){k=e}else{if(j!=undefined&&k>=j){k=j}}f.setValue(k);c.value=f.getValue();if(b){b.value=f.getValue()}}};NumberController.prototype=new Controller();NumberController.prototype.constructor=NumberController;var StringController=function(){this.type="string";var c=this;Controller.apply(this,arguments);var b=document.createElement("input");var a=this.getValue();b.setAttribute("value",a);b.setAttribute("spellcheck","false");this.domElement.addEventListener("mouseup",function(){b.focus();b.select()},false);b.addEventListener("keyup",function(){c.setValue(b.value)},false);this.domElement.appendChild(b)};StringController.prototype=new Controller();StringController.prototype.constructor=StringController; \ No newline at end of file diff --git a/index.html b/index.html index d09d33b..c334815 100644 --- a/index.html +++ b/index.html @@ -1,63 +1,36 @@ - GUI-DAT + gui-dat - - - - - - - - - - - - + + -

GUI-DAT flag

- -
+
+

GUI-DAT flag

gui-dat is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.

- -

• Download the minified source [2.3kb]
- • Contribute on GitHub!

- + + +

Basic Usage

+ 
<script type="text/javascript" src="gui.min.js"></script>
<script type="text/javascript">

window.onload = function() {

   var fizzyText = new FizzyText("gui-dat");

   GUI.start();
   
   // Adds a text field
   GUI.add(fizzyText, "message");
   
   // Adds sliders with min and max
   GUI.add(fizzyText, "maxSize", 0.5, 7);
   GUI.add(fizzyText, "growthSpeed", 0.01, 1);
   GUI.add(fizzyText, "speed", 0.1, 2);
   
   // Adds sliders with min, max and increment.
   GUI.add(fizzyText, "noiseStrength", 10, 100, 5);
   
   // Adds a boolean checkbox
   GUI.add(fizzyText, "displayOutline");

   // Adds a function button
   GUI.add(fizzyText, "explode")
   
};

</script>
- 
-<script type="text/javascript" src="gui.min.js"></script>
-<script type="text/javascript">
-
-var controllableObject = 
-   {   
-	  numberProperty: 20,
-	  constrainedNum: 0,
-	  notchedNum: 240,
-	  textProperty: "a string",
-	  anotherTextProperty: "another string",
-	  booleanProperty: false,
-	  anotherBooleanProperty: false,
-	  functionProperty: function() {
-		 alert("I am a function!");
-	  }
-   };
-
-window.onload = function() {
-
-   GUI.start();
-  
-   // Creates a number box
-   GUI.add(controllableObject, "numberProperty");
-
-   // Creates a slider (min, max)
-   GUI.add(controllableObject, "constrainedNum", -100, 100)
-   
-   // Creates a slider with notches
-   GUI.add(controllableObject, "notchedNum", 0, 800, 100)
-
-   // Creates a text field
-   GUI.add(controllableObject, "textProperty");
-
-   // Creates a checkbox
-   GUI.add(controllableObject, "booleanProperty");
-
-   // Creates a button
-   GUI.add(controllableObject, "functionProperty").setName("Fire a Function");
-
-};
-
-</script>
+