p5.gui.js

//

(function() {

    // list of guis
    var guis = [];

    // default slider params
    var sliderMin = 1;
    var sliderMax = 100;
    var sliderStep = 1;

    // default gui provider
    var guiProvider = 'QuickSettings';

    // Create a GUI using QuickSettings (or DAT.GUI or ...)
    p5.prototype.createGui = function(label, x, y, provider) {

        label = label || 'GUI';
        x = x || 20;
        y = y || 20;
        provider = provider || guiProvider;

        var gui;

        // create a gui using the provider
        if (provider === 'QuickSettings') {
            if (QuickSettings) {
                console.log('Creating p5.gui powered by QuickSettings.');
                gui = new QSGui(label, x, y);
            } else {
                console.log('QuickSettings not found. Is the script included in your HTML?');
                gui = new DummyGui(label, x, y);
            }
        } else {
            console.log('Unknown GUI provider ' + provider);
            gui = new DummyGui(label, x, y);
        }

        // add it to the list of guis
        guis.push(gui);

        // return it
        return gui;

    };


    p5.prototype.removeGui = function(gui) {
        // TODO: implement this
    };

    // update defaults used for creation of sliders
    p5.prototype.sliderRange = function(vmin, vmax, vstep) {
        sliderMin = vmin;
        sliderMax = vmax;
        sliderStep = vstep;
    };

    // extend default behaviour of noLoop()
    p5.prototype.noLoop = function() {
        this._loop = false;
        for (var i = 0; i < guis.length; i++) {
            guis[i].noLoop();
        }
    };

    // extend default behaviour of loop()
    p5.prototype.loop = function() {
        for (var i = 0; i < guis.length; i++) {
            guis[i].loop();
        }
        this._loop = true;
        this._draw();
    };


    // interface for quicksettings
    function QSGui(label, x, y) {

        var qs = QuickSettings.create(x, y, label);
        this.prototype = qs;

        // addGlobals(global1, global2, ...) to add the selected globals
        this.addGlobals = function() {
            qs.bindGlobals(arguments);
        };

        // addObject(object) to add all params of the object
        // addObject(object, param1, param2, ...) to add selected params
        this.addObject = function() {
            // get object
            object = arguments[0];
            // convert arguments object to array
            var params = [];
            if (arguments.length > 1) {
                params = Array.prototype.slice.call(arguments)
                params = params.slice(1);
            }
            // if no arguments are provided take all keys of the object
            if (params.length === 0) {
                params = object.keys();
            }
            qs.bindParams(object, params);
        };

        this.addButton = function(title, callback) {
            qs.addButton(title, callback);
        };

        this.setValue = function(title, value) {
            qs.setValue(title, value);
        };

        this.setBoolean = function(title, index) {
            qs.setValue(title, Math.round(index));
        }


        this.setDropDownIndex = function(title, index) {
            qs.setValue(title, Math.round(index));
        };

        this.addHTML = function(title, html) {
            qs.addHTML(title, html);
        }

        // noLoop() to call draw every time the gui changes when we are not looping
        this.noLoop = function() {
            qs.setGlobalChangeHandler(draw);
        };

        this.loop = function() {
            qs.setGlobalChangeHandler(null);
        };

        this.show = function() { qs.show(); };
        this.hide = function() { qs.hide(); };

    }

    // Just a Dummy object that provides the GUI interface
    function DummyGui() {
        var f = function() {};
        this.addGlobals = f;
        this.noLoop = f;
        this.addObject = f;
        this.show = f;
    }

    // Extend Quicksettings
    // so it can magically create a GUI for parameters passed by name
    QuickSettings.bindParams = function(object, params) {

        // iterate over all the arguments
        for (var i = 0; i < params.length; i++) {

            var arg = params[i];
            var val = object[arg];
            var typ = typeof val;

            // console.log(typ, arg, val);

            switch (typ) {

                case 'object':

                    // color triple ?
                    if (val instanceof Array && val.length === 3 && typeof val[0] === 'number') {
                        // create color according to the current color mode
                        var c = color(val[0], val[1], val[2]);
                        // get decimal RGB values
                        var c2 = c.levels.slice(0, 3);
                        // create HTML color code
                        var vcolor = '#' + c2.map(function(value) {
                            return ('0' + value.toString(16)).slice(-2);
                        }).join('');
                        this.bindColor(arg, vcolor, object);
                    } else {
                        // multiple choice drop down list
                        this.bindDropDown(arg, val, object);
                        object[arg] = val[0];
                    }
                    break;

                case 'number':

                    // values as defined by magic variables or gui.sliderRange()
                    var vmin = object[arg + 'Min'] || object[arg + 'min'] || sliderMin;
                    var vmax = object[arg + 'Max'] || object[arg + 'max'] || sliderMax;
                    var vstep = object[arg + 'Step'] || object[arg + 'step'] || sliderStep;

                    // the actual values can still overrule the limits set by magic
                    var vmin = min(val, vmin);
                    var vmax = max(val, vmax);

                    // set the range
                    this.bindRange(arg, vmin, vmax, val, vstep, object);

                    break;

                case 'string':

                    var HEX6 = /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i;
                    if (HEX6.test(val)) {
                        // HTML color value (such as #ff0000)
                        this.bindColor(arg, val, object);
                    } else {
                        // String value
                        this.bindText(arg, val, object);
                    }
                    break;

                case 'boolean':

                    this.bindBoolean(arg, object[arg], object);
                    break;

            }
        }
    };

    // bind params that are defined globally
    QuickSettings.bindGlobals = function(params) {
        this.bindParams(window, params);
    };

})();