DieterHolvoet
1/15/2016 - 1:35 PM

Automatically construct a dat.GUI form with a single object

Automatically construct a dat.GUI form with a single object

dat.GUI.prototype.autoAdd = function(obj, change) {
    change = (typeof change === "function") ? change : function() {};
    
    if(typeof arguments[0] !== "object") {
        Debugger.error("dat.GUI.prototype.autoAdd: Invalid argument.");
        return false;
    } else {
        obj = arguments[0];
    }
    
    for(var prop in obj) {
        var min = obj[prop].min,
            max = obj[prop].max,
            step = obj[prop].step,
            hasMin = min !== undefined,
            hasMax = max !== undefined,
            hasStep = step !== undefined;
        
        if(hasMin || hasMax || hasStep) {
            obj[prop] = obj[prop].value;
        }
        
        if(typeof obj[prop] !== "function") {
            if(!hasMin && !hasMax && !hasStep) {
                this.add(obj, prop).onChange(change);
            } else if(hasMin && hasMax && hasStep) {
                this.add(obj, prop).onChange(change).min(min).max(max).step(step);
            } else if(hasMin && hasMax && !hasStep) {
                this.add(obj, prop).onChange(change).min(min).max(max);
            } else if(hasMin && !hasMax && hasStep) {
                this.add(obj, prop).onChange(change).min(min).step(step);
            } else if(!hasMin && hasMax && hasStep) {
                this.add(obj, prop).onChange(change).max(max).step(step);
            } else if(!hasMin && !hasMax && hasStep) {
                this.add(obj, prop).onChange(change).step(step);
            } else if(hasMin && !hasMax && !hasStep) {
                this.add(obj, prop).onChange(change).min(min);
            } else if(!hasMin && hasMax && !hasStep) {
                this.add(obj, prop).onChange(change).max(max);
            }
        }
    }
};

// Example object
pieChart = {
    x: {value: (window.innerWidth / 2) - 450, min: 0},
    y: {value: (window.innerHeight / 2) - 450, min: 0},
    graphWidth: {value: 900, min: 0},
    graphHeight: {value: 600, min: 0},
    diameter: {value: 300, min: 0},
    pieces: "[30, 50, 20]",
    colors: "['27891a', 'eb1c0c', '2989ec']",
    showOutlines: false
}