Add dat.GUI definitions.

CONTRIBUTORS.md

@@ -67,6 +67,7 @@ All definitions files include a header with the author and editors, so at some p
 * [Crossfilter](https://github.com/square/crossfilter) (by [Schmulik Raskin](https://github.com/schmuli))
 * [crypto-js](https://code.google.com/p/crypto-js/) (by [Gia Bảo @ Sân Đình](https://github.com/giabao)). @see [cryptojs.d.ts repo](https://github.com/giabao/cryptojs.d.ts)
 * [d3.js](http://d3js.org/) (from TypeScript samples)
+* [dat.GUI](https://github.com/dataarts/dat.gui) (by [gyoh_k](https://github.com/gyohk))
 * [dhtmlxGantt](http://dhtmlx.com/docs/products/dhtmlxGantt) (by [Maksim Kozhukh](http://github.com/mkozhukh))
 * [dhtmlxScheduler](http://dhtmlx.com/docs/products/dhtmlxScheduler) (by [Maksim Kozhukh](http://github.com/mkozhukh))
 * [diff](https://github.com/kpdecker/jsdiff) (by [vvakame](http://github.com/vvakame))

dat.gui/dat.gui-tests.ts

@@ -0,0 +1,159 @@
+/////////////////////////////////////////////////////////////
+// http://workshop.chromeexperiments.com/examples/gui/
+//////////////////////////////////////////////////////////////
+
+/// <reference path="dat.gui.d.ts" />
+
+
+// ------------ config
+var FizzyText = function () {
+    return {
+        message: 'dat.gui',
+        speed: 0.8,
+        displayOutline: false,
+        explode: function () {},
+        noiseStrength: 0.5
+        // Define render logic ...
+    }
+};
+
+// ------------ 1. Basic Usage
+() => {
+    window.onload = function () {
+        var text = FizzyText();
+        var gui = new dat.GUI();
+        gui.add(text, 'message');
+        gui.add(text, 'speed', -5, 5);
+        gui.add(text, 'displayOutline');
+        gui.add(text, 'explode');
+    };
+}
+// ------------ 2. Constraining Input
+() => {
+    var text = FizzyText();
+    var gui = new dat.GUI();
+    gui.add(text, 'noiseStrength').step(5); // Increment amount
+    gui.add(text, 'growthSpeed', -5, 5); // Min and max
+    gui.add(text, 'maxSize').min(0).step(0.25); // Mix and match
+
+// Choose from accepted values
+    gui.add(text, 'message', ['pizza', 'chrome', 'hooray']);
+
+// Choose from named values
+    gui.add(text, 'speed', {Stopped: 0, Slow: 0.1, Fast: 5});
+}
+// ------------ 3. Folders
+() => {
+    var text = FizzyText();
+    var gui = new dat.GUI();
+
+    var f1 = gui.addFolder('Flow Field');
+    f1.add(text, 'speed');
+    f1.add(text, 'noiseStrength');
+
+    var f2 = gui.addFolder('Letters');
+    f2.add(text, 'growthSpeed');
+    f2.add(text, 'maxSize');
+    f2.add(text, 'message');
+
+    f2.open();
+}
+// ------------ 4. Color Controllers
+() => {
+    var FizzyText = function () {
+        return {
+            color0: "#ffae23", // CSS string
+            color1: [0, 128, 255], // RGB array
+            color2: [0, 128, 255, 0.3], // RGB with alpha
+            color3: {h: 350, s: 0.9, v: 0.3} // Hue, saturation, value
+
+        // Define render logic ...
+        }
+    };
+
+    window.onload = function () {
+
+        var text = FizzyText();
+        var gui = new dat.GUI();
+
+        gui.addColor(text, 'color0');
+        gui.addColor(text, 'color1');
+        gui.addColor(text, 'color2');
+        gui.addColor(text, 'color3');
+
+    };
+}
+// ------------ 5. Saving Values
+() => {
+    var fizzyText = FizzyText();
+    var gui = new dat.GUI();
+
+    gui.remember(fizzyText);
+}
+
+// ------------ 6. Presets
+() => {
+    var gui = new dat.GUI({
+        load: JSON,
+        preset: 'Flow'
+    });
+}
+
+// ------------ 7. Events
+() => {
+    var fizzyText = FizzyText();
+    var gui = new dat.GUI();
+    var controller = gui.add(fizzyText, 'maxSize', 0, 10);
+
+    controller.onChange(function (value) {
+        // Fires on every change, drag, keypress, etc.
+    });
+
+    controller.onFinishChange(function (value) {
+        // Fires when a controller loses focus.
+        alert("The new value is " + value);
+    });
+}
+
+// ------------ 8. Custom Placement
+() => {
+    var gui = new dat.GUI({autoPlace: false});
+
+    var customContainer = document.getElementById('my-gui-container');
+    customContainer.appendChild(gui.domElement);
+}
+// ------------ 9. Updating the Display Automatically
+() => {
+    var fizzyText = FizzyText();
+    var gui = new dat.GUI();
+
+    gui.add(fizzyText, 'noiseStrength', 0, 100).listen();
+
+    var update = function () {
+        requestAnimationFrame(update);
+        fizzyText.noiseStrength = Math.random();
+    };
+
+    update();
+}
+// ------------ 10. Updating the Display Manually
+() => {
+    var fizzyText = FizzyText();
+    var gui = new dat.GUI();
+
+    gui.add(fizzyText, 'noiseStrength', 0, 100);
+
+    var update = function () {
+        var dt = new Date();
+        requestAnimationFrame(update);
+        fizzyText.noiseStrength = Math.cos(dt.getTime());
+
+        // Iterate over all controllers
+        for (var i in gui.__controllers) {
+            gui.__controllers[i].updateDisplay();
+        }
+
+    };
+
+    update();
+}

dat.gui/dat.gui-tests.ts.tscparams

@@ -0,0 +1 @@
+

dat.gui/dat.gui.d.ts

@@ -0,0 +1,57 @@
+// Type definitions for dat.GUI v0.5
+// Project: https://github.com/dataarts/dat.gui
+// Definitions by: Satoru Kimura <https://github.com/gyohk>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped  
+
+declare module dat {
+    export class GUI {
+        constructor(option?: GUIParams);
+
+        __controllers: GUIController[];
+        __folders: GUI[];
+        domElement: HTMLElement;
+
+        add(target: Object, propName:string): GUIController;
+        add(target: Object, propName:string, min: number, max: number): GUIController;
+        add(target: Object, propName:string, status: boolean): GUIController;
+        add(target: Object, propName:string, items:string[]): GUIController;
+        add(target: Object, propName:string, items:number[]): GUIController;
+        add(target: Object, propName:string, items:Object): GUIController;
+
+        addColor(target: Object, propName:string): GUIController;
+        addColor(target: Object, propName:string, color: string): GUIController;
+        addColor(target: Object, propName:string, rgba: number[]): GUIController; // rgb or rgba
+        addColor(target: Object, propName:string, hsv:{h:number; s:number; v:number}): GUIController;
+
+        addFolder(propName:string): GUI;
+
+        close(): void;
+        open(): void;
+        remember(target: Object): void;
+    }
+
+    export interface GUIParams{
+        autoPlace?: boolean;
+        closed?: boolean;
+        load?: any;
+        name?: string;
+        preset?: string;
+        width?: number;
+    }
+
+    export class GUIController {
+        destroy(): void;
+        fire(): GUIController;
+        getValue(): any;
+        isModified(): boolean;
+        listen(): GUIController;
+        min(n: number): GUIController;
+        remove(target: GUIController): void;
+        setValue(value: any): GUIController;
+        step(n: number): GUIController;
+        updateDisplay(): void;
+
+        onChange: (value?: any) => void;
+        onFinishChange: (value?: any) => void;
+    }
+}