.add( controller )

[mrdoob]

I was wondering if it would be possible to allow this approach:

gui.add( new ControllerVector2D( vector ) );

Maybe with a patch like this?

this.add = function() {

    var object = arguments[ 0 ];

    if ( object instanceof Controller ) {

        controllers.add( object );
        return;

    }

    // rest of the code that figures if object is a number, string, etc

}

This would allow people to create their own custom controllers without having to mess up with the GUI internal code.

[jonobr1]

This is a great idea! I'll patch that in.

[jonobr1]

I imagine we would have another handlerType, perhaps called anonymous to serve this purpose

[georgealways]

I also like this idea, but I want to be sure people are extending our controller class properly -- there are specific things you have to do if you want them to work in accordance with .listen() for example, or further, the sort of save features I'm adding now.

I feel like the syntax should look something more like

gui.custom(ClassName, CustomControllerClassName);

// i.e.
gui.custom(Vector2D, CustomVector2DControllerImplementation)

HOWEVER I was thinking we should do this in addition to another, simpler thing that may suffice for a lot of situations in which:

gui.add( myObj )

would just add all of that object's public properties to a given panel. So, if you happened to have given myObj a property of type Vector2D, its control could be registered automatically.

[jonobr1]

I find that gui.add( myObj ) would be insanely helpful, even to the point where the GUI could expose things that you probably didn't even know you wanted to control :)

Great idea George.

[tarelli]

This would be a great addition, but I see last update is 2yrs ago. Did development stop? Thx.

[donmccurdy]

I'm open to merging a PR along these lines, if someone would like to look into implementing it without scrambling internal code too much. :)

[anhr]

I use my own CustomController for resolving of the problem. See my code.
Using:

var gui = new dat.GUI();
gui.addCustomController(object, [property], [min], [max], [step]);

For more details see gui.add
and add some features:
Param object.constructor = function ( controller ) {
//Add your custom elements into controller.domElement
}
See an example of using.
Currently I am request to merge of my code to dat.gui

[donmccurdy]

Hi @anhr, thanks for working on this. You'll need to open a pull request against this repository rather than yours. Make sure to use the latest version of the master branch when making the pull request, as well, to avoid including unrelated changes.

Is it possible to do this without creating a new method (addCustomController) or class (CustomController)? I'm hoping for something like:

import { GUI, Controller } from 'dat.gui';

class FooController extends Controller {
  // ...
}

var gui = new GUI();
gui.add( new FooController( object, 'property' ) );

/cc @MacroMan

[anhr]

Is it possible to do this without creating a new method (addCustomController) or class (CustomController)?

Currently I try to do it

[MacroMan]

Thanks for the CC @donmccurdy.

@anhr If you want any input or assistance with coding it, let me know.
After completed I will merge into a couple of my pull requests that will need updating.

[MacroMan]

Would it be a good idea to expose ColorController to use via this new method and depreciate addColor?
Otherwise, we have an odd controller in dat.gui

[donmccurdy]

Let's keep addColor as-is for now; maybe later!

[anhr]

See my new pull reuest.
Now you can use gui.add(...) for adding of custom controller.
Using:

var gui = new dat.GUI();
gui.add( new dat.GUI.CustomController( {
  constructor: function ( controller ) {
    //Add your custom elements into controller.domElement
},} ) );

Extension version of using. The NumberControllerSlider was added also.

var gui = new dat.GUI();

//gui.add returns a NumberControllerSlider
var controllerPlayRate = gui.add( new dat.GUI.CustomController( {

	constructor: function ( controller ) {

		//Add your custom elements into controller.domElement

	},

} ), {

	playRate: 1,

}, 'playRate', 1, 25, 1 ).onChange( function ( value ) {

	//User has changed the NumberControllerSlider value

} );
//controllerPlayRate is NumberControllerSlider

Example of using.

[donmccurdy]

Thanks! Added a review on the PR.

This example doesn't look quite right to me:

new dat.GUI.CustomController( {
  constructor: function ( controller ) {
    //Add your custom elements into controller.domElement
}} 

We shouldn't be passing the prototype into the constructor. Instead, we want developers to use it this way:

import { GUI, controllers } from 'dat.gui';

class KnobController extends controllers.CustomController {
  constructor ( object, property, a, b ) {
    super(  object, property );
    this.a = a;
    this.b = b;
  }
  // ...
}

const ctrl = new KnobController( ... );