Added Kinect example. Updated DAT.GUI.

examples/js/gui/gui.css

@@ -1,166 +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 { 
-    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.
-.guidat-controller.number.active { 
-    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: 0px 1px 3px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-}
-
-.guidat-propertyname { 
-    padding: 5px;
-    padding-top: 7px;
-    cursor: default;
-    display: inline-block;
-}
-
-
-.guidat-slider-bg:hover,
-.guidat-slider-bg.active {
-    background-color: #444;
-}
-
-.guidat-slider-bg:hover .guidat-slider-fg, 
-.guidat-slider-bg.active .guidat-slider-fg { 
-    background-color: #52c8ff;
-}
-
-.guidat-slider-bg { 
-    background-color: #222;
-    cursor: ew-resize;
-    width: 40%;
-    margin-top: 2px;
-    float: right;
-    height: 21px;
-}
-
-.guidat-slider-fg { 
-    background-color: #00aeff;
-    height: 20px;
-}

examples/js/gui/gui.full.js

@@ -1,1111 +0,0 @@
-var GUI = function() {
-
-    var _this = this;
-    
-    var MIN_WIDTH = 240;
-    var MAX_WIDTH = 500;
-    
-    var controllers = [];
-    var listening = [];
-    
-    var autoListen = true;
-    
-    var listenInterval;
-    
-    // Sum total of heights of controllers in this gui
-    var controllerHeight;
-    
-    var curControllerContainerHeight = 0;
-
-    var _this = this;
-
-    var open = false;
-    var width = 280;
-
-    // Prevents checkForOverflow bug in which loaded gui appearance
-    // settings are not respected by presence of scrollbar.
-    var explicitOpenHeight = false;
-
-    // How big we get when we open
-    var openHeight;
-    
-    var name;
-    
-    var resizeTo = 0;
-    var resizeTimeout;
-    
-    this.domElement = document.createElement('div');
-    this.domElement.setAttribute('class', 'guidat');
-    this.domElement.style.width = width+'px';
-
-    var controllerContainer = document.createElement('div');
-    controllerContainer.setAttribute('class', 'guidat-controllers');
-    
-    // Firefox hack to prevent horizontal scrolling
-    controllerContainer.addEventListener('DOMMouseScroll', function(e) {
-        
-        var scrollAmount = this.scrollTop;
-        
-        if (e.wheelDelta) {
-            scrollAmount+=e.wheelDelta; 
-        } else if (e.detail) {
-            scrollAmount+=e.detail;
-        }
-            
-        if (e.preventDefault) {
-            e.preventDefault();
-        }
-        e.returnValue = false;
-        
-        controllerContainer.scrollTop = scrollAmount;
-        
-    }, false);
-    
-    controllerContainer.style.height = '0px';
-
-    var toggleButton = document.createElement('a');
-    toggleButton.setAttribute('class', 'guidat-toggle');
-    toggleButton.setAttribute('href', '#');
-    toggleButton.innerHTML = "Show Controls";
-    
-    var toggleDragged = false;
-    var dragDisplacementY = 0;
-    var togglePressed = false;
-    
-    var my, pmy, mx, pmx;
-    
-    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 || "Hide Controls";
-            } else {
-                return;
-            }
-        }
-        
-        // TODO: Flip this if you want to resize to the left.
-        var dmx = pmx - mx;
-        
-        if (dmy > 0 && 
-            curControllerContainerHeight > controllerHeight) {
-            var d = GUI.map(curControllerContainerHeight, controllerHeight, controllerHeight + 100, 1, 0);
-            dmy *= d;
-        }
-        
-        toggleDragged = true;
-        dragDisplacementY += dmy;
-        dragDisplacementX += dmx;
-        openHeight += dmy;
-        width += dmx;
-        curControllerContainerHeight += dmy;
-        controllerContainer.style.height = openHeight+'px';
-        width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
-        _this.domElement.style.width = width+'px';
-        checkForOverflow();
-    };
-    
-    toggleButton.addEventListener('mousedown', function(e) {
-        pmy = my = e.pageY;
-        pmx = mx = e.pageX;
-        togglePressed = true;
-        e.preventDefault();
-        dragDisplacementY = 0;
-        dragDisplacementX = 0;
-        document.addEventListener('mousemove', resize, false);
-        return false;
-
-    }, false);
-
-    toggleButton.addEventListener('click', function(e) {
-        e.preventDefault();
-        return false;
-    }, false);
-
-    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.hide();
-                    openHeight = singleControllerHeight*2;
-                } else {
-                    openHeight = resizeTo;
-                    beginResize();
-                }
-            }
-        };
-        
-        
-        document.removeEventListener('mousemove', resize, false);
-        e.preventDefault();
-        toggleDragged = false;
-        togglePressed = false;
-        
-        return false;
-
-    }, false);
-    
-    this.domElement.appendChild(controllerContainer);
-    this.domElement.appendChild(toggleButton);
-    
-    if (GUI.autoPlace) {
-        if(GUI.autoPlaceContainer == null) {
-            GUI.autoPlaceContainer = document.createElement('div');
-            GUI.autoPlaceContainer.setAttribute("id", "guidat");
-            
-            document.body.appendChild(GUI.autoPlaceContainer);
-        }
-        GUI.autoPlaceContainer.appendChild(this.domElement);
-    }
-    
-    this.autoListenIntervalTime = 1000/60;
-    
-    var createListenInterval = function() {
-        listenInterval = setInterval(function() {
-            _this.listen();
-        }, this.autoListenIntervalTime);
-    };
-    
-    this.__defineSetter__("autoListen", function(v) {
-        autoListen = v;
-        if (!autoListen) {
-            clearInterval(listenInterval);
-        } else { 
-            if (listening.length > 0) createListenInterval();
-        }
-    });
-    
-    this.__defineGetter__("autoListen", function(v) {
-        return autoListen;
-    });
-    
-    this.listenTo = function(controller) {
-        // TODO: check for duplicates
-        if (listening.length == 0) {
-            createListenInterval();
-        }
-        listening.push(controller);
-    };
-    
-    this.unlistenTo = function(controller) {
-        // TODO: test this
-        for(var i = 0; i < listening.length; i++) {
-            if(listening[i] == controller) listening.splice(i, 1);
-        }
-        if(listening.length <= 0) {
-            clearInterval(listenInterval);
-        }
-    };
-    
-    this.listen = function(whoToListenTo) {
-        var arr = whoToListenTo || listening;
-        for (var i in arr) {
-            arr[i].updateDisplay();
-        }
-    };
-    
-    this.listenAll = function() {
-        this.listen(controllers);
-    }
-    
-    this.autoListen = true;
-
-    var alreadyControlled = function(object, propertyName) {
-        for (var i in controllers) {
-            if (controllers[i].object == object &&
-                controllers[i].propertyName == propertyName) {
-                return true;
-            }
-        }
-        return false;
-    };
-
-
-    var construct = function(constructor, args) {
-        function F() {
-            return constructor.apply(this, args);
-        }
-        F.prototype = constructor.prototype;
-        return new F();
-    };
-
-    this.add = function() {
-
-        var object = arguments[0];
-        var propertyName = arguments[1];
-
-        // Have we already added this?
-        if (alreadyControlled(object, propertyName)) {
-        //  GUI.error("Controller for \"" + propertyName+"\" already added.");
-        //  return;
-        }
-
-        var value = object[propertyName];
-
-        // Does this value exist? Is it accessible?
-        if (value == undefined) {
-            GUI.error(object + " either has no property \""+propertyName+"\", or the property is inaccessible.");
-            return;
-        }
-
-        var type = typeof value;
-        var handler = handlerTypes[type];
-
-        // Do we know how to deal with this data type?
-        if (handler == undefined) {
-            GUI.error("Cannot create controller for data type \""+type+"\"");
-            return;
-        }
-    
-        var args = [this]; // Set first arg (parent) to this 
-        for (var j = 0; j < arguments.length; j++) {
-            args.push(arguments[j]);
-        }
-    
-        var controllerObject = construct(handler, args);
-        
-        // Were we able to make the controller?
-        if (!controllerObject) {
-            GUI.error("Error creating controller for \""+propertyName+"\".");
-            return;
-        }
-
-        // Success.
-        controllerContainer.appendChild(controllerObject.domElement);
-        controllers.push(controllerObject);
-        GUI.allControllers.push(controllerObject);
-
-        // Do we have a saved value for this controller?
-        if (type != "function" && 
-            GUI.saveIndex < GUI.savedValues.length) {
-            controllerObject.setValue(GUI.savedValues[GUI.saveIndex]);
-            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;
-        }
-        
-        return controllerObject;
-        
-    }
-    
-    var checkForOverflow = function() {
-        controllerHeight = 0;
-        for (var i in controllers) {
-            controllerHeight += controllers[i].domElement.offsetHeight;
-        }
-        if (controllerHeight - 1 > openHeight) {
-            controllerContainer.style.overflowY = "auto";
-        } else {
-            controllerContainer.style.overflowY = "hidden";
-        }   
-    };
-    
-    var handlerTypes = {
-        "number": GUI.NumberController,
-        "string": GUI.StringController,
-        "boolean": GUI.BooleanController,
-        "function": GUI.FunctionController
-    };
-    
-    var alreadyControlled = function(object, propertyName) {
-        for (var i in controllers) {
-            if (controllers[i].object == object &&
-                controllers[i].propertyName == propertyName) {
-                return true;
-            }
-        }
-        return false;
-    };
-    
-    var construct = function(constructor, args) {
-
-        function F() {
-            return constructor.apply(this, args);
-        }
-        F.prototype = constructor.prototype;
-        return new F();
-    };
-
-    this.reset = function() {
-        // TODO
-    }
-
-    // GUI ... GUI
-    
-    this.toggle = function() {
-        open ? this.hide() : this.show();
-    };
-
-    this.show = function() {
-        toggleButton.innerHTML = name || "Hide Controls";
-        resizeTo = openHeight;
-        clearTimeout(resizeTimeout);
-        beginResize();
-        open = true;
-    }
-
-    this.hide = function() {
-        toggleButton.innerHTML = name || "Show Controls";
-        resizeTo = 0;
-        clearTimeout(resizeTimeout);
-        beginResize();
-        open = false;
-    }
-    
-    this.name = function(n) {
-        name = n;
-        toggleButton.innerHTML = n;
-    }
-    
-    // used in saveURL
-    this.appearanceVars = function() {
-        return [open, width, openHeight, controllerContainer.scrollTop]
-    }
-    
-    var beginResize = function() {
-        //console.log("Resizing from " + curControllerContainerHeight + " to " + resizeTo);
-        curControllerContainerHeight += (resizeTo - curControllerContainerHeight)*0.6;
-        if (Math.abs(curControllerContainerHeight-resizeTo) < 1) {
-            curControllerContainerHeight = resizeTo;
-            adaptToScrollbar();
-            
-        } else { 
-            resizeTimeout = setTimeout(beginResize, 1000/30);
-        }
-        controllerContainer.style.height = Math.round(curControllerContainerHeight)+'px';
-        checkForOverflow();
-    }
-    
-    var adaptToScrollbar = function() {
-        // Clears lingering slider column
-        _this.domElement.style.width = (width+1)+'px';
-        setTimeout(function() {
-            _this.domElement.style.width = width+'px';
-        }, 1);
-    };
-    
-    // Load saved appearance:
-
-    if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
-
-    
-        width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
-        _this.domElement.style.width = width+"px";
-        
-        openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
-        explicitOpenHeight = true;
-        if (eval(GUI.savedAppearanceVars[GUI.guiIndex][0]) == true) {
-            curControllerContainerHeight = openHeight;
-            var t = GUI.savedAppearanceVars[GUI.guiIndex][3]
-            
-            // Hack.
-            setTimeout(function() {
-                controllerContainer.scrollTop = t;
-            }, 0);
-            
-            if (GUI.scrollTop > -1) {
-                document.body.scrollTop = GUI.scrollTop;
-            }
-            resizeTo = openHeight;
-            this.show();
-        }
-
-        GUI.guiIndex++;
-    }
-
-    GUI.allGuis.push(this);
-
-	// Add hide listener if this is the first GUI. 
-	if (GUI.allGuis.length == 1) {
-		window.addEventListener('keyup', function(e) {
-			// Hide on "H"
-			if (e.keyCode == 72) {
-				GUI.toggleHide();
-			}
-		}, false);
-	}
-
-};
-
-// Do not set this directly.
-GUI.hidden = false;
-
-
-// Static members
-
-GUI.autoPlace = true;
-GUI.autoPlaceContainer = null;
-GUI.allControllers = [];
-GUI.allGuis = [];
-
-
-GUI.toggleHide = function() {
-	if (GUI.hidden) {
-		GUI.show();
-	} else { 
-		GUI.hide();
-	}
-}
-
-GUI.show = function() {
-	GUI.hidden = false;
-	for (var i in GUI.allGuis) {
-		GUI.allGuis[i].domElement.style.display = "block";
-	}
-}
-
-GUI.hide = function() {
-	GUI.hidden = true;
-	for (var i in GUI.allGuis) {
-		GUI.allGuis[i].domElement.style.display = "none";
-	}
-}
-
-GUI.saveURL = function() {
-    var url = GUI.replaceGetVar("saveString", GUI.getSaveString());
-    window.location = url;
-};
-
-GUI.scrollTop = -1;
-
-GUI.load = function(saveString) {
-
-    //GUI.savedAppearanceVars = [];
-    var vals = saveString.split(",");
-    var numGuis = parseInt(vals[0]);
-    GUI.scrollTop = parseInt(vals[1]);
-    for (var i = 0; i < numGuis; i++) {
-        var appr = vals.splice(2, 4);
-        GUI.savedAppearanceVars.push(appr);
-    }
-
-    GUI.savedValues = vals.splice(2, vals.length);
-
-};
-
-GUI.savedValues = [];
-GUI.savedAppearanceVars = [];
-
-GUI.getSaveString = function() {
-
-    var vals = [],
-        i;
-
-    vals.push(GUI.allGuis.length);
-    vals.push(document.body.scrollTop);
-
-
-    for (i in GUI.allGuis) {
-        var av = GUI.allGuis[i].appearanceVars();
-        for (var j = 0; j < av.length; j++) {
-            vals.push(av[j]);
-        }
-    }
-
-    for (i in GUI.allControllers) {
-
-        // We don't save values for functions.
-        if (GUI.allControllers[i].type == "function") {
-            continue;
-        }
-
-        var v = GUI.allControllers[i].getValue();
-
-        // Round numbers so they don't get enormous
-        if (GUI.allControllers[i].type == "number") {
-            v = GUI.roundToDecimal(v, 4);
-        }
-
-        vals.push(v);
-
-    }
-
-    return vals.join(',');
-
-};
-
-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;
-
-};
-
-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;
-
-};
-
-GUI.saveIndex = 0;
-GUI.guiIndex = 0;
-
-GUI.showSaveString = function() {
-    alert(GUI.getSaveString());
-};
-
-// Util functions
-
-GUI.makeUnselectable = function(elem) {
-    elem.onselectstart = function() { return false; };
-    elem.style.MozUserSelect = "none";
-    elem.style.KhtmlUserSelect = "none";
-    elem.unselectable = "on";
-};
-
-GUI.makeSelectable = function(elem) {
-    elem.onselectstart = function() { };
-    elem.style.MozUserSelect = "auto";
-    elem.style.KhtmlUserSelect = "auto";
-    elem.unselectable = "off";
-};
-
-GUI.map = function(v, i1, i2, o1, o2) {
-    return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
-};
-
-GUI.constrain = function (v, o1, o2) {
-    if (v < o1) v = o1;
-    else if (v > o2) v = o2;
-    return v;
-};
-
-GUI.error = function(str) {
-    if (typeof console.error == 'function') {
-        console.error("[GUI ERROR] " + str);
-    }
-};
-
-GUI.roundToDecimal = function(n, decimals) {
-    var t = Math.pow(10, decimals);
-    return Math.round(n*t)/t;
-};
-
-GUI.extendController = function(clazz) {
-    clazz.prototype = new GUI.Controller();
-    clazz.prototype.constructor = clazz;
-};
-
-if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));
-GUI.Slider = 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 = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
-        val = Math.round(val/step)*step;
-        numberController.setValue(val);
-    };
-    
-    this.domElement.addEventListener('mousedown', function(e) {
-        clicked = true;
-        x = px = e.pageX;
-        _this.domElement.className += ' active';
-        _this.fg.className += ' active';
-        numberController.domElement.className += ' active';
-        onDrag(e);
-        document.addEventListener('mouseup', mouseup, false);
-    }, false);
-    
-    var mouseup = function(e) { 
-        _this.domElement.className = _this.domElement.className.replace(' active', '');
-        _this.fg.className = _this.fg.className.replace(' active', '');
-        numberController.domElement.className = numberController.domElement.className.replace(' 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) {
-        var pct = GUI.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 = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
-        val = Math.round(val/step)*step;
-        numberController.setValue(val);
-    };
-
-    this.domElement.addEventListener('mousedown', function(e) {
-        clicked = true;
-        x = px = e.pageX;
-        _this.domElement.setAttribute('class', 'guidat-slider-bg active');
-        _this.fg.setAttribute('class', 'guidat-slider-fg active');
-        onDrag(e);
-        document.addEventListener('mouseup', mouseup, false);
-    }, false);
-
-    var mouseup = function(e) {
-        _this.domElement.setAttribute('class', 'guidat-slider-bg');
-        _this.fg.setAttribute('class', 'guidat-slider-fg');
-        clicked = false;
-        if (numberController.finishChangeFunction != null) {
-            numberController.finishChangeFunction.call(this, numberController.getValue());
-        }
-        document.removeEventListener('mouseup', mouseup, false);
-    };
-
-    document.addEventListener('mousemove', onDrag, false);
-
-    this.value = initValue;
-
-};
-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);
-
-    GUI.makeUnselectable(this.domElement);
-
-};
-
-GUI.Controller.prototype.changeFunction = null;
-GUI.Controller.prototype.finishChangeFunction = null;
-
-GUI.Controller.prototype.name = function(n) {
-    this.propertyNameElement.innerHTML = n;
-    return this;
-};
-
-GUI.Controller.prototype.reset = function() {
-    this.setValue(this.initialValue);
-    return this;
-};
-
-GUI.Controller.prototype.listen = function() {
-    this.parent.listenTo(this);
-    return this;
-};
-
-GUI.Controller.prototype.unlisten = function() {
-    this.parent.unlistenTo(this); // <--- hasn't been tested yet
-    return this;
-};
-
-GUI.Controller.prototype.setValue = function(n) {
-    this.object[this.propertyName] = n;
-    if (this.changeFunction != null) {
-        this.changeFunction.call(this, n);
-    }
-    this.updateDisplay();
-    return this;
-};
-
-GUI.Controller.prototype.getValue = function() {
-    return this.object[this.propertyName];
-};
-
-GUI.Controller.prototype.updateDisplay = function() {};
-
-GUI.Controller.prototype.onChange = function(fnc) {
-    this.changeFunction = fnc;
-    return this;
-};
-
-GUI.Controller.prototype.onFinishChange = function(fnc) {
-    this.finishChangeFunction = fnc;
-    return this;
-};
-
-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]);
-            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]);
-            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;
-};
-GUI.BooleanController = function() {
-
-    this.type = "boolean";
-    GUI.Controller.apply(this, arguments);
-
-    var _this = this;
-    var input = document.createElement('input');
-    input.setAttribute('type', 'checkbox');
-
-    this.domElement.addEventListener('click', function(e) {
-        input.checked = !input.checked;
-        e.preventDefault();
-        _this.setValue(input.checked);
-    }, false);
-
-    input.addEventListener('mouseup', function(e) {
-        input.checked = !input.checked; // counteracts default.
-    }, false);
-
-    this.domElement.style.cursor = "pointer";
-    this.propertyNameElement.style.cursor = "pointer";
-    this.domElement.appendChild(input);
-
-    this.updateDisplay = function() {
-        input.checked = _this.getValue();
-    };
-
-
-    this.setValue = function(val) {
-        if (typeof val != "boolean") {
-            try {
-                val = eval(val);
-            } catch (e) {}
-        }
-        return GUI.Controller.prototype.setValue.call(this, val);
-    };
-
-};
-GUI.extendController(GUI.BooleanController);
-GUI.FunctionController = function() {
-    
-    this.type = "function";
-    
-    var _this = this;
-    
-    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);
-    };
-};
-GUI.extendController(GUI.FunctionController);
-GUI.NumberController = function() {
-
-    this.type = "number";
-
-    GUI.Controller.apply(this, arguments);
-
-    var _this = this;
-
-    // If we simply click and release a number field, we want to highlight it.
-    // This variable keeps track of whether or not we've dragged
-    var draggedNumberField = false;
-
-    var clickedNumberField = false;
-
-    var y = 0, py = 0;
-
-    var min = arguments[3];
-    var max = arguments[4];
-    var step = arguments[5];
-
-    if (!step) {
-        if (min != undefined && max != undefined) {
-            step = (max-min)*0.01;
-        } else {
-            step = 1;
-        }
-    }
-
-    var numberField = document.createElement('input');
-    numberField.setAttribute('id', this.propertyName);
-    numberField.setAttribute('type', 'text');
-    numberField.setAttribute('value', this.getValue());
-
-    if (step) numberField.setAttribute('step', step);
-
-    this.domElement.appendChild(numberField);
-
-    var slider;
-
-    if (min != undefined && max != undefined) {
-        slider = new GUI.Slider(this, min, max, step, this.getValue());
-        this.domElement.appendChild(slider.domElement);
-    }
-
-    numberField.addEventListener('blur', function(e) {
-        var val = parseFloat(this.value);
-        if (!isNaN(val)) {
-            _this.setValue(val);
-        }
-    }, false);
-
-    numberField.addEventListener('mousewheel', function(e) {
-        e.preventDefault();
-        _this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
-        return false;
-    }, false);
-
-    numberField.addEventListener('mousedown', function(e) {
-        py = y = e.pageY;
-        clickedNumberField = true;
-        document.addEventListener('mousemove', dragNumberField, false);
-        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() + step;
-                _this.setValue(newVal);
-                break;
-            case 40:    // down
-                newVal = _this.getValue() - step;
-                _this.setValue(newVal);
-                break;
-        }
-    }, false);
-
-    var mouseup = function(e) {
-        document.removeEventListener('mousemove', dragNumberField, false);
-        GUI.makeSelectable(_this.parent.domElement);
-        GUI.makeSelectable(numberField);
-        if (clickedNumberField && !draggedNumberField) {
-            numberField.focus();
-            numberField.select();
-        }
-        if(slider) slider.domElement.className = slider.domElement.className.replace(' active', '');
-        draggedNumberField = false;
-        clickedNumberField = false;
-        if (_this.finishChangeFunction != null) {
-            _this.finishChangeFunction.call(this, _this.getValue());
-        }
-        document.removeEventListener('mouseup', mouseup, false);
-    };
-
-    var dragNumberField = function(e) {
-
-        draggedNumberField = true;
-        e.preventDefault();
-
-        // We don't want to be highlighting this field as we scroll.
-        // Or any other fields in this gui for that matter ...
-        // TODO: Make makeUselectable go through each element and child element.
-
-        GUI.makeUnselectable(_this.parent.domElement);
-        GUI.makeUnselectable(numberField);
-        
-        if(slider) slider.domElement.className += ' active';
-        
-        py = y;
-        y = e.pageY;
-        var dy = py - y;
-        var newVal = _this.getValue() + dy*step;
-        _this.setValue(newVal);
-        return false;
-    };
-
-    this.options = function() {
-        _this.noSlider();
-        _this.domElement.removeChild(numberField);
-        return 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 GUI.Controller.prototype.setValue.call(this, val);
-
-    };
-
-    this.updateDisplay = function() {
-        numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
-        if (slider) slider.value = _this.getValue();
-    };
-};
-
-GUI.extendController(GUI.NumberController);
-GUI.StringController = function() {
-
-    this.type = "string";
-
-    var _this = this;
-    GUI.Controller.apply(this, arguments);
-
-    var input = document.createElement('input');
-
-    var initialValue = this.getValue();
-
-    input.setAttribute('value', initialValue);
-    input.setAttribute('spellcheck', 'false');
-
-    this.domElement.addEventListener('mouseup', function() {
-        input.focus();
-        input.select();
-    }, false);
-
-    // TODO: getting messed up on ctrl a
-    input.addEventListener('keyup', function(e) {
-        if (e.keyCode == 13 && _this.finishChangeFunction != null) {
-            _this.finishChangeFunction.call(this, _this.getValue());
-        }
-        _this.setValue(input.value);
-    }, false);
-
-    input.addEventListener('blur', function() {
-        if (_this.finishChangeFunction != null) {
-            _this.finishChangeFunction.call(this, _this.getValue());
-        }
-    }, false);
-
-    this.updateDisplay = function() {
-        input.value = _this.getValue();
-    };
-
-    this.options = function() {
-        _this.domElement.removeChild(input);
-        return GUI.Controller.prototype.options.apply(this, arguments);
-    };
-
-    this.domElement.appendChild(input);
-
-};
-
-GUI.extendController(GUI.StringController);

examples/js/gui/gui.min.js

@@ -1,36 +0,0 @@
-var GUI=function(){var a=this,b=[],d=[],f=true,m,k,h=0;a=this;var n=false,i=280,o=false,g,p,e=0,s;this.domElement=document.createElement("div");this.domElement.setAttribute("class","guidat");this.domElement.style.width=i+"px";var q=document.createElement("div");q.setAttribute("class","guidat-controllers");q.addEventListener("DOMMouseScroll",function(c){var j=this.scrollTop;if(c.wheelDelta)j+=c.wheelDelta;else if(c.detail)j+=c.detail;c.preventDefault&&c.preventDefault();c.returnValue=false;q.scrollTop=
-j},false);q.style.height="0px";var r=document.createElement("a");r.setAttribute("class","guidat-toggle");r.setAttribute("href","#");r.innerHTML="Show Controls";var u=false,C=0,v=false,w,y,x,z,D=function(c){y=w;z=x;w=c.pageY;x=c.pageX;c=w-y;if(!n)if(c>0){n=true;h=g=1;r.innerHTML=p||"Hide Controls"}else return;var j=z-x;if(c>0&&h>k){var l=GUI.map(h,k,k+100,1,0);c*=l}u=true;C+=c;dragDisplacementX+=j;g+=c;i+=j;h+=c;q.style.height=g+"px";i=GUI.constrain(i,240,500);a.domElement.style.width=i+"px";A()};
-r.addEventListener("mousedown",function(c){y=w=c.pageY;z=x=c.pageX;v=true;c.preventDefault();dragDisplacementX=C=0;document.addEventListener("mousemove",D,false);return false},false);r.addEventListener("click",function(c){c.preventDefault();return false},false);document.addEventListener("mouseup",function(c){v&&!u&&a.toggle();if(v&&u){dragDisplacementX==0&&E();if(g>k){clearTimeout(s);g=e=k;t()}else if(q.children.length>=1){var j=q.children[0].offsetHeight;clearTimeout(s);e=Math.round(h/j)*j-1;if(e<=
-0){a.hide();g=j*2}else{g=e;t()}}}document.removeEventListener("mousemove",D,false);c.preventDefault();return v=u=false},false);this.domElement.appendChild(q);this.domElement.appendChild(r);if(GUI.autoPlace){if(GUI.autoPlaceContainer==null){GUI.autoPlaceContainer=document.createElement("div");GUI.autoPlaceContainer.setAttribute("id","guidat");document.body.appendChild(GUI.autoPlaceContainer)}GUI.autoPlaceContainer.appendChild(this.domElement)}this.autoListenIntervalTime=1E3/60;var F=function(){m=setInterval(function(){a.listen()},
-this.autoListenIntervalTime)};this.__defineSetter__("autoListen",function(c){if(f=c)d.length>0&&F();else clearInterval(m)});this.__defineGetter__("autoListen",function(){return f});this.listenTo=function(c){d.length==0&&F();d.push(c)};this.unlistenTo=function(c){for(var j=0;j<d.length;j++)d[j]==c&&d.splice(j,1);d.length<=0&&clearInterval(m)};this.listen=function(c){c=c||d;for(var j in c)c[j].updateDisplay()};this.listenAll=function(){this.listen(b)};this.autoListen=true;var G=function(c,j){for(var l in b)if(b[l].object==
-c&&b[l].propertyName==j)return true;return false},H=function(c,j){function l(){return c.apply(this,j)}l.prototype=c.prototype;return new l};this.add=function(){var c=arguments[0],j=arguments[1];G(c,j);var l=c[j];if(l==undefined)GUI.error(c+' either has no property "'+j+'", or the property is inaccessible.');else{c=typeof l;l=J[c];if(l==undefined)GUI.error('Cannot create controller for data type "'+c+'"');else{for(var I=[this],B=0;B<arguments.length;B++)I.push(arguments[B]);if(l=H(l,I)){q.appendChild(l.domElement);
-b.push(l);GUI.allControllers.push(l);if(c!="function"&&GUI.saveIndex<GUI.savedValues.length){l.setValue(GUI.savedValues[GUI.saveIndex]);GUI.saveIndex++}A();o||(g=k);return l}else GUI.error('Error creating controller for "'+j+'".')}}};var A=function(){k=0;for(var c in b)k+=b[c].domElement.offsetHeight;q.style.overflowY=k-1>g?"auto":"hidden"},J={number:GUI.NumberController,string:GUI.StringController,"boolean":GUI.BooleanController,"function":GUI.FunctionController};G=function(c,j){for(var l in b)if(b[l].object==
-c&&b[l].propertyName==j)return true;return false};H=function(c,j){function l(){return c.apply(this,j)}l.prototype=c.prototype;return new l};this.reset=function(){};this.toggle=function(){n?this.hide():this.show()};this.show=function(){r.innerHTML=p||"Hide Controls";e=g;clearTimeout(s);t();n=true};this.hide=function(){r.innerHTML=p||"Show Controls";e=0;clearTimeout(s);t();n=false};this.name=function(c){p=c;r.innerHTML=c};this.appearanceVars=function(){return[n,i,g,q.scrollTop]};var t=function(){h+=
-(e-h)*0.6;if(Math.abs(h-e)<1){h=e;E()}else s=setTimeout(t,1E3/30);q.style.height=Math.round(h)+"px";A()},E=function(){a.domElement.style.width=i+1+"px";setTimeout(function(){a.domElement.style.width=i+"px"},1)};if(GUI.guiIndex<GUI.savedAppearanceVars.length){i=parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);a.domElement.style.width=i+"px";g=parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);o=true;if(eval(GUI.savedAppearanceVars[GUI.guiIndex][0])==true){h=g;var K=GUI.savedAppearanceVars[GUI.guiIndex][3];
-setTimeout(function(){q.scrollTop=K},0);if(GUI.scrollTop>-1)document.body.scrollTop=GUI.scrollTop;e=g;this.show()}GUI.guiIndex++}GUI.allGuis.push(this);GUI.allGuis.length==1&&window.addEventListener("keyup",function(c){c.keyCode==72&&GUI.toggleHide()},false)};GUI.hidden=false;GUI.autoPlace=true;GUI.autoPlaceContainer=null;GUI.allControllers=[];GUI.allGuis=[];GUI.toggleHide=function(){GUI.hidden?GUI.show():GUI.hide()};
-GUI.show=function(){GUI.hidden=false;for(var a in GUI.allGuis)GUI.allGuis[a].domElement.style.display="block"};GUI.hide=function(){GUI.hidden=true;for(var a in GUI.allGuis)GUI.allGuis[a].domElement.style.display="none"};GUI.saveURL=function(){var a=GUI.replaceGetVar("saveString",GUI.getSaveString());window.location=a};GUI.scrollTop=-1;
-GUI.load=function(a){a=a.split(",");var b=parseInt(a[0]);GUI.scrollTop=parseInt(a[1]);for(var d=0;d<b;d++){var f=a.splice(2,4);GUI.savedAppearanceVars.push(f)}GUI.savedValues=a.splice(2,a.length)};GUI.savedValues=[];GUI.savedAppearanceVars=[];
-GUI.getSaveString=function(){var a=[],b;a.push(GUI.allGuis.length);a.push(document.body.scrollTop);for(b in GUI.allGuis)for(var d=GUI.allGuis[b].appearanceVars(),f=0;f<d.length;f++)a.push(d[f]);for(b in GUI.allControllers)if(GUI.allControllers[b].type!="function"){d=GUI.allControllers[b].getValue();if(GUI.allControllers[b].type=="number")d=GUI.roundToDecimal(d,4);a.push(d)}return a.join(",")};
-GUI.getVarFromURL=function(a){for(var b,d=window.location.href.slice(window.location.href.indexOf("?")+1).split("&"),f=0;f<d.length;f++){b=d[f].split("=");if(b!=undefined)if(b[0]==a)return b[1]}return null};
-GUI.replaceGetVar=function(a,b){for(var d,f=window.location.href,m=window.location.href.slice(window.location.href.indexOf("?")+1).split("&"),k=0;k<m.length;k++){d=m[k].split("=");if(d!=undefined)if(d[0]==a)return f.replace(d[1],b)}if(window.location.href.indexOf("?")!=-1)return f+"&"+a+"="+b;return f+"?"+a+"="+b};GUI.saveIndex=0;GUI.guiIndex=0;GUI.showSaveString=function(){alert(GUI.getSaveString())};
-GUI.makeUnselectable=function(a){a.onselectstart=function(){return false};a.style.MozUserSelect="none";a.style.KhtmlUserSelect="none";a.unselectable="on"};GUI.makeSelectable=function(a){a.onselectstart=function(){};a.style.MozUserSelect="auto";a.style.KhtmlUserSelect="auto";a.unselectable="off"};GUI.map=function(a,b,d,f,m){return f+(m-f)*((a-b)/(d-b))};GUI.constrain=function(a,b,d){if(a<b)a=b;else if(a>d)a=d;return a};
-GUI.error=function(a){typeof console.error=="function"&&console.error("[GUI ERROR] "+a)};GUI.roundToDecimal=function(a,b){var d=Math.pow(10,b);return Math.round(a*d)/d};GUI.extendController=function(a){a.prototype=new GUI.Controller;a.prototype.constructor=a};GUI.getVarFromURL("saveString")!=null&&GUI.load(GUI.getVarFromURL("saveString"));
-GUI.Slider=function(a,b,d,f,m){var k=false,h=this;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 n=function(g){if(k){var p=o(h.domElement);g=GUI.map(g.pageX,p[0],p[0]+h.domElement.offsetWidth,b,d);g=Math.round(g/f)*f;a.setValue(g)}};this.domElement.addEventListener("mousedown",function(g){k=true;h.domElement.className+=
-" active";h.fg.className+=" active";a.domElement.className+=" active";n(g);document.addEventListener("mouseup",i,false)},false);var i=function(){h.domElement.className=h.domElement.className.replace(" active","");h.fg.className=h.fg.className.replace(" active","");a.domElement.className=a.domElement.className.replace(" active","");k=false;a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue());document.removeEventListener("mouseup",i,false)},o=function(g){var p=0,e=0;if(g.offsetParent){do{p+=
-g.offsetLeft;e+=g.offsetTop}while(g=g.offsetParent);return[p,e]}};this.__defineSetter__("value",function(g){this.fg.style.width=GUI.map(g,b,d,0,100)+"%"});n=function(g){if(k){var p=o(h.domElement);g=GUI.map(g.pageX,p[0],p[0]+h.domElement.offsetWidth,b,d);g=Math.round(g/f)*f;a.setValue(g)}};this.domElement.addEventListener("mousedown",function(g){k=true;h.domElement.setAttribute("class","guidat-slider-bg active");h.fg.setAttribute("class","guidat-slider-fg active");n(g);document.addEventListener("mouseup",
-i,false)},false);i=function(){h.domElement.setAttribute("class","guidat-slider-bg");h.fg.setAttribute("class","guidat-slider-fg");k=false;a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue());document.removeEventListener("mouseup",i,false)};document.addEventListener("mousemove",n,false);this.value=m};
-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);
-GUI.makeUnselectable(this.domElement)};GUI.Controller.prototype.changeFunction=null;GUI.Controller.prototype.finishChangeFunction=null;GUI.Controller.prototype.name=function(a){this.propertyNameElement.innerHTML=a;return this};GUI.Controller.prototype.reset=function(){this.setValue(this.initialValue);return this};GUI.Controller.prototype.listen=function(){this.parent.listenTo(this);return this};GUI.Controller.prototype.unlisten=function(){this.parent.unlistenTo(this);return this};
-GUI.Controller.prototype.setValue=function(a){this.object[this.propertyName]=a;this.changeFunction!=null&&this.changeFunction.call(this,a);this.updateDisplay();return this};GUI.Controller.prototype.getValue=function(){return this.object[this.propertyName]};GUI.Controller.prototype.updateDisplay=function(){};GUI.Controller.prototype.onChange=function(a){this.changeFunction=a;return this};GUI.Controller.prototype.onFinishChange=function(a){this.finishChangeFunction=a;return this};
-GUI.Controller.prototype.options=function(){var a=this,b=document.createElement("select");if(arguments.length==1){var d=arguments[0],f;for(f in d){var m=document.createElement("option");m.innerHTML=f;m.setAttribute("value",d[f]);b.appendChild(m)}}else for(f=0;f<arguments.length;f++){m=document.createElement("option");m.innerHTML=arguments[f];m.setAttribute("value",arguments[f]);b.appendChild(m)}b.addEventListener("change",function(){a.setValue(this.value);a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,
-a.getValue())},false);a.domElement.appendChild(b);return this};
-GUI.BooleanController=function(){this.type="boolean";GUI.Controller.apply(this,arguments);var a=this,b=document.createElement("input");b.setAttribute("type","checkbox");this.domElement.addEventListener("click",function(d){b.checked=!b.checked;d.preventDefault();a.setValue(b.checked)},false);b.addEventListener("mouseup",function(){b.checked=!b.checked},false);this.domElement.style.cursor="pointer";this.propertyNameElement.style.cursor="pointer";this.domElement.appendChild(b);this.updateDisplay=function(){b.checked=
-a.getValue()};this.setValue=function(d){if(typeof d!="boolean")try{d=eval(d)}catch(f){}return GUI.Controller.prototype.setValue.call(this,d)}};GUI.extendController(GUI.BooleanController);
-GUI.FunctionController=function(){this.type="function";var a=this;GUI.Controller.apply(this,arguments);this.domElement.addEventListener("click",function(){a.fire()},false);this.domElement.style.cursor="pointer";this.propertyNameElement.style.cursor="pointer";var b=null;this.onFire=function(d){b=d;return this};this.fire=function(){b!=null&&b.call(this);a.object[a.propertyName].call(a.object)}};GUI.extendController(GUI.FunctionController);
-GUI.NumberController=function(){this.type="number";GUI.Controller.apply(this,arguments);var a=this,b=false,d=false,f=0,m=0,k=arguments[3],h=arguments[4],n=arguments[5];n||(n=k!=undefined&&h!=undefined?(h-k)*0.01:1);var i=document.createElement("input");i.setAttribute("id",this.propertyName);i.setAttribute("type","text");i.setAttribute("value",this.getValue());n&&i.setAttribute("step",n);this.domElement.appendChild(i);var o;if(k!=undefined&&h!=undefined){o=new GUI.Slider(this,k,h,n,this.getValue());
-this.domElement.appendChild(o.domElement)}i.addEventListener("blur",function(){var e=parseFloat(this.value);isNaN(e)||a.setValue(e)},false);i.addEventListener("mousewheel",function(e){e.preventDefault();a.setValue(a.getValue()+Math.abs(e.wheelDeltaY)/e.wheelDeltaY*n);return false},false);i.addEventListener("mousedown",function(e){m=f=e.pageY;d=true;document.addEventListener("mousemove",p,false);document.addEventListener("mouseup",g,false)},false);i.addEventListener("keydown",function(e){switch(e.keyCode){case 13:e=
-parseFloat(this.value);a.setValue(e);break;case 38:e=a.getValue()+n;a.setValue(e);break;case 40:e=a.getValue()-n;a.setValue(e)}},false);var g=function(){document.removeEventListener("mousemove",p,false);GUI.makeSelectable(a.parent.domElement);GUI.makeSelectable(i);if(d&&!b){i.focus();i.select()}if(o)o.domElement.className=o.domElement.className.replace(" active","");d=b=false;a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue());document.removeEventListener("mouseup",g,false)},
-p=function(e){b=true;e.preventDefault();GUI.makeUnselectable(a.parent.domElement);GUI.makeUnselectable(i);if(o)o.domElement.className+=" active";m=f;f=e.pageY;e=m-f;e=a.getValue()+e*n;a.setValue(e);return false};this.options=function(){a.noSlider();a.domElement.removeChild(i);return GUI.Controller.prototype.options.apply(this,arguments)};this.noSlider=function(){o&&a.domElement.removeChild(o.domElement);return this};this.setValue=function(e){e=parseFloat(e);if(k!=undefined&&e<=k)e=k;else if(h!=undefined&&
-e>=h)e=h;return GUI.Controller.prototype.setValue.call(this,e)};this.updateDisplay=function(){i.value=GUI.roundToDecimal(a.getValue(),4);if(o)o.value=a.getValue()}};GUI.extendController(GUI.NumberController);
-GUI.StringController=function(){this.type="string";var a=this;GUI.Controller.apply(this,arguments);var b=document.createElement("input"),d=this.getValue();b.setAttribute("value",d);b.setAttribute("spellcheck","false");this.domElement.addEventListener("mouseup",function(){b.focus();b.select()},false);b.addEventListener("keyup",function(f){f.keyCode==13&&a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue());a.setValue(b.value)},false);b.addEventListener("blur",function(){a.finishChangeFunction!=
-null&&a.finishChangeFunction.call(this,a.getValue())},false);this.updateDisplay=function(){b.value=a.getValue()};this.options=function(){a.domElement.removeChild(b);return GUI.Controller.prototype.options.apply(this,arguments)};this.domElement.appendChild(b)};GUI.extendController(GUI.StringController);

examples/textures/kinect.nfo

@@ -0,0 +1,5 @@
+Using freenect and a modified version of glview.c:
+https://gist.github.com/1326080
+
+Recorded the screen using ffmpeg (I have 0 knowledge of C...):
+https://gist.github.com/1325393

examples/webgl_interactive_voxelpainter.html

@@ -23,8 +23,7 @@
 		<script src="js/RequestAnimationFrame.js"></script>
 		<script src="js/Stats.js"></script>
 
-		<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />
-		<script src="js/gui/gui.min.js"></script>
+		<script src='js/DAT.GUI.min.js'></script>
 
 		<script>
 
@@ -119,7 +118,7 @@
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
 
 				// add GUI
-				gui = new GUI();
+				gui = new DAT.GUI();
 				gui.add(voxelConfig, 'orthographicProjection').onChange(function(){
 
 					if ( voxelConfig.orthographicProjection ) {
@@ -134,6 +133,7 @@
 					}
 
 				});
+				gui.close();
 
 			}
 

examples/webgl_kinect.html

@@ -0,0 +1,221 @@
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<title>three.js - kinect</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #000000;
+				margin: 0px;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script src="../build/Three.js"></script>
+
+		<script src='js/DAT.GUI.min.js'></script>
+
+		<script src="js/RequestAnimationFrame.js"></script>
+		<script src="js/Stats.js"></script>
+
+		<script id="vs" type="x-shader/x-vertex">
+
+			uniform sampler2D map;
+
+			uniform float width;
+			uniform float height;
+			uniform float nearClipping, farClipping;
+
+			uniform float zOffset;
+
+			varying vec2 vUv;
+
+			const float XtoZ = 1.11146; // tan( 1.0144686 / 2.0 ) * 2.0;
+			const float YtoZ = 0.83359; // tan( 0.7898090 / 2.0 ) * 2.0;
+
+			void main() {
+
+				vUv = vec2( position.x / width, 1.0 - ( position.y / height ) );
+
+				vec4 color = texture2D( map, vUv );
+				float depth = ( color.r + color.g + color.b ) / 3.0;
+
+				// Projection code by @kcmic
+
+				float z = ( 1.0 - depth ) * (farClipping - nearClipping) + nearClipping;
+
+				vec4 pos = vec4(
+					( position.x / width - 0.5 ) * z * XtoZ,
+					( position.y / height - 0.5 ) * z * YtoZ,
+					- z + zOffset,
+					1.0);
+
+				gl_PointSize = 2.0;
+				gl_Position = projectionMatrix * modelViewMatrix * pos;
+
+			}
+
+		</script>
+
+		<script id="fs" type="x-shader/x-fragment">
+
+			uniform sampler2D map;
+
+			varying vec2 vUv;
+
+			void main() {
+
+				vec4 color = texture2D( map, vUv );
+				gl_FragColor = vec4( color.r, color.g, color.b, smoothstep( 8000.0, -8000.0, gl_FragCoord.z / gl_FragCoord.w ) );
+
+			}
+
+		</script>
+
+		<script>
+
+			var container;
+
+			var scene, camera, light, renderer;
+			var geometry, cube, mesh, material;
+			var mouse, center;
+			var stats;
+
+			var video, texture;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				// container.appendChild( stats.domElement );
+
+				scene = new THREE.Scene();
+				center = new THREE.Vector3();
+				center.z = - 1000;
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.set( 0, 0, 500 );
+				scene.add( camera );
+
+				video = document.createElement( 'video' );
+				video.addEventListener( 'loadedmetadata', function ( event ) {
+
+					texture = new THREE.Texture( video );
+
+					var width = 640, height = 480;
+					var nearClipping = 850/*850*/, farClipping = 4000/*4000*/;
+
+					geometry = new THREE.Geometry();
+
+					for ( var i = 0, l = width * height; i < l; i ++ ) {
+ 
+						var position = new THREE.Vector3();
+						position.x = ( i % width );
+						position.y = Math.floor( i / width );
+
+						geometry.vertices.push( new THREE.Vertex( position ) );
+
+					}
+
+					material = new THREE.ShaderMaterial( {
+
+						uniforms: {
+
+							"map": { type: "t", value: 0, texture: texture },
+							"width": { type: "f", value: width },
+							"height": { type: "f", value: height },
+							"nearClipping": { type: "f", value: nearClipping },
+							"farClipping": { type: "f", value: farClipping },
+
+							"zOffset": { type: "f", value: 1000 }
+
+						},
+						vertexShader: document.getElementById( 'vs' ).textContent,
+						fragmentShader: document.getElementById( 'fs' ).textContent,
+						depthWrite: false
+
+					} );
+
+					mesh = new THREE.ParticleSystem( geometry, material );
+					mesh.position.x = 0;
+					mesh.position.y = 0;
+					scene.add( mesh );
+
+					setInterval( function () {
+
+						if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
+
+							texture.needsUpdate = true;
+
+						}
+
+					}, 1000 / 30 );
+
+
+					var gui = new DAT.GUI();
+					gui.add( material.uniforms.zOffset, 'value' ).name( 'zOffset' ).min( 0 ).max( 4000 ).step( 1.0 );
+					gui.close();
+
+
+				}, false );
+				video.loop = true;
+				video.src = 'textures/kinect.webm';
+				video.play();
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				mouse = new THREE.Vector3( 0, 0, 1 );
+				projector = new THREE.Projector();
+				ray = new THREE.Ray( camera.position );
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouse.x = ( event.clientX - window.innerWidth / 2 ) * 8;
+				mouse.y = ( event.clientY - window.innerHeight / 2 ) * 8;
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				video.width = 256;
+				video.height = 256;
+
+				camera.position.x += ( mouse.x - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouse.y - camera.position.y ) * 0.05;
+				camera.lookAt( center );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>

examples/webgl_postprocessing_dof.html

@@ -38,8 +38,7 @@
 		<script src="js/ShaderExtras.js"></script>
 		<script src="js/Stats.js"></script>
 
-		<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />
-		<script src="js/gui/gui.min.js"></script>
+		<script src='js/DAT.GUI.min.js'></script>
 
 		<div id="info">
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl depth-of-field with bokeh example -
@@ -194,10 +193,11 @@
 
 				};
 
-				var gui = new GUI();
+				var gui = new DAT.GUI();
 				gui.add( effectController, "focus", 0.0, 3.0, 0.025 ).onChange( matChanger );
 				gui.add( effectController, "aperture", 0.001, 0.2, 0.001 ).onChange( matChanger );
 				gui.add( effectController, "maxblur", 0.0, 3.0, 0.025 ).onChange( matChanger );
+				gui.close();
 
 			}