From 20795bdd53b38d689a22569d362ca6cd6bc4973d Mon Sep 17 00:00:00 2001 From: satoru kimura Date: Wed, 22 Oct 2014 15:31:28 +0900 Subject: [PATCH] Add dat.GUI definitions. --- CONTRIBUTORS.md | 1 + dat.gui/dat.gui-tests.ts | 159 +++++++++++++++++++++++++++++ dat.gui/dat.gui-tests.ts.tscparams | 1 + dat.gui/dat.gui.d.ts | 57 +++++++++++ 4 files changed, 218 insertions(+) create mode 100644 dat.gui/dat.gui-tests.ts create mode 100644 dat.gui/dat.gui-tests.ts.tscparams create mode 100644 dat.gui/dat.gui.d.ts diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 84f0c9190..af48d572b 100644 --- a/CONTRIBUTORS.md +++ b/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)) diff --git a/dat.gui/dat.gui-tests.ts b/dat.gui/dat.gui-tests.ts new file mode 100644 index 000000000..fc3bf5de7 --- /dev/null +++ b/dat.gui/dat.gui-tests.ts @@ -0,0 +1,159 @@ +///////////////////////////////////////////////////////////// +// http://workshop.chromeexperiments.com/examples/gui/ +////////////////////////////////////////////////////////////// + +/// + + +// ------------ 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(); +} diff --git a/dat.gui/dat.gui-tests.ts.tscparams b/dat.gui/dat.gui-tests.ts.tscparams new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/dat.gui/dat.gui-tests.ts.tscparams @@ -0,0 +1 @@ + diff --git a/dat.gui/dat.gui.d.ts b/dat.gui/dat.gui.d.ts new file mode 100644 index 000000000..c17cb5bd7 --- /dev/null +++ b/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 +// 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; + } +}