mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
controller- =
This commit is contained in:
George Michael Brower
parent
64a7d0b630
commit
ca14623507
14
README.md
14
README.md
@ -181,11 +181,11 @@ Since dat-gui is built using [Web Components]( todo ), you can also use HTML syn
|
||||
```html
|
||||
<body>
|
||||
|
||||
<controller-number min="-2" max="2" step="1" value="0"></controller-number>
|
||||
<dat-gui-number min="-2" max="2" step="1" value="0"></dat-gui-number>
|
||||
|
||||
<script>
|
||||
|
||||
var controller = document.querySelector( 'controller-number' );
|
||||
var controller = document.querySelector( 'dat-gui-number' );
|
||||
controller.onChange( function() {
|
||||
|
||||
// react to UI changes ...
|
||||
@ -202,26 +202,26 @@ controller.onChange( function() {
|
||||
|
||||
dat-gui uses [Polymer]( todo ) under the hood to define custom elements. A dat-gui controller is just a [Polymer element]( todo ) with two important requirements:
|
||||
|
||||
- Controllers must extend `<controller-base>`.
|
||||
- Controllers must extend `<dat-gui-base>`.
|
||||
- Controllers must be associated with a data type.
|
||||
|
||||
Take for example this (simplified) source for dat-gui's `<controller-number>`:
|
||||
Take for example this (simplified) source for dat-gui's `<dat-gui-number>`:
|
||||
|
||||
```javascript
|
||||
Polymer( 'controller-number', {
|
||||
Polymer( 'dat-gui-number', {
|
||||
|
||||
// Define element ...
|
||||
|
||||
} );
|
||||
|
||||
Gui.register( 'controller-number', function( value ) {
|
||||
Gui.register( 'dat-gui-number', function( value ) {
|
||||
|
||||
return typeof value == 'number';
|
||||
|
||||
} );
|
||||
```
|
||||
|
||||
`Gui.register` takes an element name and a test function. The test function tells dat-gui to add a `<controller-number>` to the panel when the user adds a variable whose type is `'number'`.
|
||||
`Gui.register` takes an element name and a test function. The test function tells dat-gui to add a `<dat-gui-number>` to the panel when the user adds a variable whose type is `'number'`.
|
||||
|
||||
A test function determines if a controller is appropriate for a given value. This example registers `<vector-controller>` for values that have properties `x`, `y` and `z`.
|
||||
|
||||
|
||||
3
TODO.md
3
TODO.md
@ -5,7 +5,8 @@ BUILD
|
||||
|
||||
REFACTOR
|
||||
|
||||
- [ ] controller-* => gui-*
|
||||
- [ ] kill strict
|
||||
- [ ] controller-* => dat-gui-*
|
||||
- [ ] gui.define* => gui.var*
|
||||
- [ ] Gui.js => gui-panel => dat-gui
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
14
build/gui.js
14
build/gui.js
File diff suppressed because one or more lines are too long
@ -52,7 +52,7 @@ h3
|
||||
#readme
|
||||
margin-right readme-margin
|
||||
|
||||
gui-panel
|
||||
dat-gui
|
||||
position fixed
|
||||
width panel-width
|
||||
top 0px
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
// Make domElement
|
||||
|
||||
this.panel = document.createElement( 'gui-panel' );
|
||||
this.panel = document.createElement( 'dat-gui' );
|
||||
this.panel.autoPlace = params.autoPlace !== false;
|
||||
|
||||
if ( this.panel.autoPlace ) {
|
||||
@ -45,7 +45,7 @@
|
||||
var controller;
|
||||
|
||||
if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
|
||||
controller = document.createElement( 'controller-option' );
|
||||
controller = document.createElement( 'dat-gui-option' );
|
||||
} else {
|
||||
controller = Gui.getController( value );
|
||||
}
|
||||
@ -204,12 +204,12 @@
|
||||
dat.dom.dom = function() {};
|
||||
|
||||
dat.controllers = {};
|
||||
dat.controllers.Controller = constructor( 'controller-base' );
|
||||
dat.controllers.NumberController = constructor( 'controller-number' );
|
||||
dat.controllers.FunctionController = constructor( 'controller-function' );
|
||||
dat.controllers.ColorController = constructor( 'controller-color' );
|
||||
dat.controllers.BooleanController = constructor( 'controller-boolean' );
|
||||
dat.controllers.OptionController = constructor( 'controller-option' );
|
||||
dat.controllers.Controller = constructor( 'dat-gui-base' );
|
||||
dat.controllers.NumberController = constructor( 'dat-gui-number' );
|
||||
dat.controllers.FunctionController = constructor( 'dat-gui-function' );
|
||||
dat.controllers.ColorController = constructor( 'dat-gui-color' );
|
||||
dat.controllers.BooleanController = constructor( 'dat-gui-boolean' );
|
||||
dat.controllers.OptionController = constructor( 'dat-gui-option' );
|
||||
|
||||
dat.controllers.NumberControllerBox = dat.controllers.NumberController;
|
||||
dat.controllers.NumberControllerSlider = dat.controllers.NumberController;
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
<link rel="import" href="../../../polymer/polymer.html">
|
||||
|
||||
<script src="controller-base.js"></script>
|
||||
|
||||
<polymer-element name="controller-base" attributes="object path value"></polymer-element>
|
||||
@ -1,19 +0,0 @@
|
||||
<link rel="import" href="../controller-base/controller-base.html">
|
||||
|
||||
<script src="controller-function.js"></script>
|
||||
|
||||
<polymer-element
|
||||
name="controller-function"
|
||||
extends="controller-base"
|
||||
>
|
||||
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="../shared/input.css">
|
||||
<link rel="stylesheet" href="controller-function.css">
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
</template>
|
||||
|
||||
</polymer-element>
|
||||
@ -1,12 +0,0 @@
|
||||
/* globals Gui, Polymer */
|
||||
|
||||
|
||||
Gui.register( 'controller-function', function( value ) {
|
||||
|
||||
return typeof value == 'function';
|
||||
|
||||
} );
|
||||
|
||||
Polymer( 'controller-function', {
|
||||
|
||||
} );
|
||||
5
elements/dat-gui-base/dat-gui-base.html
Normal file
5
elements/dat-gui-base/dat-gui-base.html
Normal file
@ -0,0 +1,5 @@
|
||||
<link rel="import" href="../../../polymer/polymer.html">
|
||||
|
||||
<script src="dat-gui-base.js"></script>
|
||||
|
||||
<polymer-element name="dat-gui-base" attributes="object path value"></polymer-element>
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
// [ ] onFinishChange()
|
||||
|
||||
Polymer( 'controller-base', {
|
||||
Polymer( 'dat-gui-base', {
|
||||
|
||||
ready: function() {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<link rel="import" href="../controller-base/controller-base.html">
|
||||
<link rel="import" href="../dat-gui-base/dat-gui-base.html">
|
||||
|
||||
<script src="controller-boolean.js"></script>
|
||||
<script src="dat-gui-boolean.js"></script>
|
||||
|
||||
<polymer-element name="controller-boolean" extends="controller-base">
|
||||
<polymer-element name="dat-gui-boolean" extends="dat-gui-base">
|
||||
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="../shared/input.css">
|
||||
<link rel="stylesheet" href="controller-boolean.css">
|
||||
<link rel="stylesheet" href="dat-gui-boolean.css">
|
||||
|
||||
<div id="container" horizontal layout center on-tap="{{ toggle }}" class="value-{{ value }}">
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
/* globals Gui, Polymer */
|
||||
|
||||
|
||||
Gui.register( 'controller-boolean', function( value ) {
|
||||
Gui.register( 'dat-gui-boolean', function( value ) {
|
||||
|
||||
return typeof value == 'boolean';
|
||||
|
||||
} );
|
||||
|
||||
Polymer( 'controller-boolean', {
|
||||
Polymer( 'dat-gui-boolean', {
|
||||
|
||||
ready: function() {
|
||||
|
||||
19
elements/dat-gui-function/dat-gui-function.html
Normal file
19
elements/dat-gui-function/dat-gui-function.html
Normal file
@ -0,0 +1,19 @@
|
||||
<link rel="import" href="../dat-gui-base/dat-gui-base.html">
|
||||
|
||||
<script src="dat-gui-function.js"></script>
|
||||
|
||||
<polymer-element
|
||||
name="dat-gui-function"
|
||||
extends="dat-gui-base"
|
||||
>
|
||||
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="../shared/input.css">
|
||||
<link rel="stylesheet" href="dat-gui-function.css">
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
</template>
|
||||
|
||||
</polymer-element>
|
||||
12
elements/dat-gui-function/dat-gui-function.js
Normal file
12
elements/dat-gui-function/dat-gui-function.js
Normal file
@ -0,0 +1,12 @@
|
||||
/* globals Gui, Polymer */
|
||||
|
||||
|
||||
Gui.register( 'dat-gui-function', function( value ) {
|
||||
|
||||
return typeof value == 'function';
|
||||
|
||||
} );
|
||||
|
||||
Polymer( 'dat-gui-function', {
|
||||
|
||||
} );
|
||||
@ -1,17 +1,17 @@
|
||||
<link rel="import" href="../controller-base/controller-base.html">
|
||||
<link rel="import" href="../dat-gui-base/dat-gui-base.html">
|
||||
|
||||
<script src="controller-number.js"></script>
|
||||
<script src="dat-gui-number.js"></script>
|
||||
|
||||
<polymer-element
|
||||
name="controller-number"
|
||||
name="dat-gui-number"
|
||||
attributes="min max value step"
|
||||
extends="controller-base"
|
||||
extends="dat-gui-base"
|
||||
>
|
||||
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="../shared/input.css">
|
||||
<link rel="stylesheet" href="controller-number.css">
|
||||
<link rel="stylesheet" href="dat-gui-number.css">
|
||||
|
||||
<div id="container" class="transition slider-{{ slider }}" horizontal layout center>
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
// [ ] arrow keys
|
||||
// [ ] min() max() step() commands of yore
|
||||
|
||||
Gui.register( 'controller-number', function( value ) {
|
||||
Gui.register( 'dat-gui-number', function( value ) {
|
||||
|
||||
return typeof value == 'number';
|
||||
|
||||
} );
|
||||
|
||||
Polymer( 'controller-number', {
|
||||
Polymer( 'dat-gui-number', {
|
||||
|
||||
value: 0,
|
||||
decimals: 3,
|
||||
@ -1,12 +1,12 @@
|
||||
<link rel="import" href="../controller-base/controller-base.html">
|
||||
<link rel="import" href="../dat-gui-base/dat-gui-base.html">
|
||||
|
||||
<script src="controller-option.js"></script>
|
||||
<script src="dat-gui-option.js"></script>
|
||||
|
||||
<polymer-element name="controller-option" extends="controller-base" attributes="options key">
|
||||
<polymer-element name="dat-gui-option" extends="dat-gui-base" attributes="options key">
|
||||
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="controller-option.css">
|
||||
<link rel="stylesheet" href="dat-gui-option.css">
|
||||
|
||||
<div id="container" horizontal layout center>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* globals Polymer, Object, Array */
|
||||
|
||||
|
||||
Polymer( 'controller-option', {
|
||||
Polymer( 'dat-gui-option', {
|
||||
|
||||
key: null,
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<link rel="import" href="../controller-base/controller-base.html">
|
||||
<link rel="import" href="../dat-gui-base/dat-gui-base.html">
|
||||
|
||||
<script src="controller-string.js"></script>
|
||||
<script src="dat-gui-string.js"></script>
|
||||
|
||||
<polymer-element
|
||||
name="controller-string"
|
||||
extends="controller-base"
|
||||
name="dat-gui-string"
|
||||
extends="dat-gui-base"
|
||||
>
|
||||
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="../shared/input.css">
|
||||
<link rel="stylesheet" href="controller-string.css">
|
||||
<link rel="stylesheet" href="dat-gui-string.css">
|
||||
|
||||
<input id="input" type="text" value="{{ value }}"
|
||||
on-click="{{ click }}"
|
||||
@ -1,13 +1,13 @@
|
||||
/* globals Gui, Polymer */
|
||||
|
||||
|
||||
Gui.register( 'controller-string', function( value ) {
|
||||
Gui.register( 'dat-gui-string', function( value ) {
|
||||
|
||||
return typeof value == 'string';
|
||||
|
||||
} );
|
||||
|
||||
Polymer( 'controller-string', {
|
||||
Polymer( 'dat-gui-string', {
|
||||
|
||||
click: function( e ) {
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
<link rel="import" href="../gui-button/gui-button.html">
|
||||
|
||||
<polymer-element
|
||||
name="gui-panel"
|
||||
name="dat-gui"
|
||||
attributes="docked autoplace open">
|
||||
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="gui-panel.css">
|
||||
<link rel="stylesheet" href="dat-gui.css">
|
||||
|
||||
<div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }} touch-{{ touch }}" >
|
||||
|
||||
@ -26,6 +26,6 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script src="gui-panel.js"></script>
|
||||
<script src="dat-gui.js"></script>
|
||||
|
||||
</polymer-element>
|
||||
@ -3,7 +3,7 @@
|
||||
// [ ] scrolling when docked
|
||||
// [ ] scrolling when window short and not docked
|
||||
|
||||
Polymer( 'gui-panel', {
|
||||
Polymer( 'dat-gui', {
|
||||
|
||||
docked: false,
|
||||
open: true,
|
||||
@ -1,7 +1,7 @@
|
||||
<link rel="import" href="../../../polymer/polymer.html">
|
||||
<link rel="import" href="../../elements/controller-number/controller-number.html">
|
||||
|
||||
<polymer-element name="controller-vector" extends="controller-base">
|
||||
<polymer-element name="controller-vector" extends="dat-gui-base">
|
||||
|
||||
<template>
|
||||
<controller-number id="x" object="{{ value }}" path="x" min="-1"></controller-number>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<title>dat-gui kitchen sink</title>
|
||||
|
||||
|
||||
<script src="../build/gui.js"></script>
|
||||
<!-- <link rel="import" href="../gui.html"> -->
|
||||
<!-- // <script src="../build/gui.js"></script> -->
|
||||
<link rel="import" href="../gui.html">
|
||||
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
|
||||
|
||||
12
gui.html
12
gui.html
@ -4,12 +4,12 @@
|
||||
<script src="elements/Gui.js"></script>
|
||||
|
||||
<!-- base elements -->
|
||||
<link rel="import" href="elements/gui-panel/gui-panel.html">
|
||||
<link rel="import" href="elements/dat-gui/dat-gui.html">
|
||||
<link rel="import" href="elements/gui-row/gui-row.html">
|
||||
|
||||
<!-- controllers -->
|
||||
<link rel="import" href="elements/controller-number/controller-number.html">
|
||||
<link rel="import" href="elements/controller-string/controller-string.html">
|
||||
<link rel="import" href="elements/controller-boolean/controller-boolean.html">
|
||||
<link rel="import" href="elements/controller-function/controller-function.html">
|
||||
<link rel="import" href="elements/controller-option/controller-option.html">
|
||||
<link rel="import" href="elements/dat-gui-number/dat-gui-number.html">
|
||||
<link rel="import" href="elements/dat-gui-string/dat-gui-string.html">
|
||||
<link rel="import" href="elements/dat-gui-boolean/dat-gui-boolean.html">
|
||||
<link rel="import" href="elements/dat-gui-function/dat-gui-function.html">
|
||||
<link rel="import" href="elements/dat-gui-option/dat-gui-option.html">
|
||||
14
index.html
14
index.html
@ -136,11 +136,11 @@ customContainer.appendChild(gui.domElement);
|
||||
<p>Since dat-gui is built using <a href="todo">Web Components</a>, you can also use HTML syntax to add controllers to the page.</p>
|
||||
<pre><code class="lang-html"><body>
|
||||
|
||||
<controller-number min="-2" max="2" step="1" value="0"></controller-number>
|
||||
<dat-gui-number min="-2" max="2" step="1" value="0"></dat-gui-number>
|
||||
|
||||
<script>
|
||||
|
||||
var controller = document.querySelector( 'controller-number' );
|
||||
var controller = document.querySelector( 'dat-gui-number' );
|
||||
controller.onChange( function() {
|
||||
|
||||
// react to UI changes ...
|
||||
@ -154,23 +154,23 @@ controller.onChange( function() {
|
||||
<h3 id="defining-custom-controllers">Defining Custom Controllers</h3>
|
||||
<p>dat-gui uses <a href="todo">Polymer</a> under the hood to define custom elements. A dat-gui controller is just a <a href="todo">Polymer element</a> with two important requirements:</p>
|
||||
<ul>
|
||||
<li>Controllers must extend <code><controller-base></code>.</li>
|
||||
<li>Controllers must extend <code><dat-gui-base></code>.</li>
|
||||
<li>Controllers must be associated with a data type.</li>
|
||||
</ul>
|
||||
<p>Take for example this (simplified) source for dat-gui's <code><controller-number></code>:</p>
|
||||
<pre><code class="lang-javascript">Polymer( 'controller-number', {
|
||||
<p>Take for example this (simplified) source for dat-gui's <code><dat-gui-number></code>:</p>
|
||||
<pre><code class="lang-javascript">Polymer( 'dat-gui-number', {
|
||||
|
||||
// Define element ...
|
||||
|
||||
} );
|
||||
|
||||
Gui.register( 'controller-number', function( value ) {
|
||||
Gui.register( 'dat-gui-number', function( value ) {
|
||||
|
||||
return typeof value == 'number';
|
||||
|
||||
} );
|
||||
</code></pre>
|
||||
<p><code>Gui.register</code> takes an element name and a test function. The test function tells dat-gui to add a <code><controller-number></code> to the panel when the user adds a variable whose type is <code>'number'</code>.</p>
|
||||
<p><code>Gui.register</code> takes an element name and a test function. The test function tells dat-gui to add a <code><dat-gui-number></code> to the panel when the user adds a variable whose type is <code>'number'</code>.</p>
|
||||
<p>A test function determines if a controller is appropriate for a given value. This example registers <code><vector-controller></code> for values that have properties <code>x</code>, <code>y</code> and <code>z</code>.</p>
|
||||
<pre><code class="lang-javascript">Gui.register( 'vector-controller', function( value ) {
|
||||
|
||||
|
||||
@ -30,13 +30,13 @@ describe( 'Gui', function() {
|
||||
|
||||
it( 'picks the right controller for the job', function() {
|
||||
|
||||
expectController( 'controller-number', 1234 );
|
||||
expectController( 'controller-string', 'string value' );
|
||||
expectController( 'controller-function', function(){} );
|
||||
expectController( 'controller-boolean', true );
|
||||
expectController( 'dat-gui-number', 1234 );
|
||||
expectController( 'dat-gui-string', 'string value' );
|
||||
expectController( 'dat-gui-function', function(){} );
|
||||
expectController( 'dat-gui-boolean', true );
|
||||
|
||||
expectController( 'controller-option', 'hey', [ 'hey', 'hi', 'ho' ] );
|
||||
expectController( 'controller-option', 'a', { a: 'a', b: 'b', c: 'c' } );
|
||||
expectController( 'dat-gui-option', 'hey', [ 'hey', 'hi', 'ho' ] );
|
||||
expectController( 'dat-gui-option', 'a', { a: 'a', b: 'b', c: 'c' } );
|
||||
|
||||
// expectController( 'controller-color', '#00ff00' );
|
||||
// expectController( 'controller-color', '#aba' );
|
||||
|
||||
Loading…
Reference in New Issue
Block a user