2

I want to add a few new property controller types to a DAT.GUI instance.

I've spent ages hacking around in the source code getting nowhere, nor can I find any information on the web regarding the minimal path to create a new controller type.

Specifically, I'd like DAT.GUI to use one of my new controllers whenever the controlled property is an Object which has a "flag" property (to denote a custom control be used, and which specific variety of custom control the object requires.)

My previous approaches have been to use code for an existing controller as the basis for my new custom controller, copying & modifying where I can see is applicable. I copied all references to the Boolean type (for its simplicity) but ended up copy-pasting swathes of code and poking around hopelessly making patches I don't really understand just trying to get my objects not to cause the whole thing to break. And so far without success.

Then I tried to piggy-back off the Color controller functions, as it occurred to me that they are already set up to detect 'Object'-type properties, but the complexity of the Color functions was overwhelming, so now I've come here as my last resort.

I can understand how all the events and updates are handled in the controllers themselves, it's just the steps required to properly define a new controller and register it with DAT.GUI that are confounding me.

Can anyone offer, if not a solution, even some advice on the approach to take? Or perhaps someone knows of an online resource that provides more detail about the API, and how to extend it.

isvforall
  • 8,768
  • 6
  • 35
  • 50
Bumpy
  • 1,290
  • 1
  • 22
  • 32
  • why don't you try to make custom element of DOM and make the interaction ( like onChange property) it will be easy and more control. DAT.GUI i know give you good interaction for start but if you want lot of customization like back color of slider (like as increase the color change ) you have to make your own Visualization file. Tell me if this help or else place any snippet which you want to add to dat.gui I might help ( i have done customization regarding my project long back) – Ajit kohir Mar 25 '16 at 13:38
  • Ah, yes... I did think at one point that it might just be easier to "tack on" my own controller in my own way, but for some reason I determined it had to be done the "right" way, lol! Thanks for the advice, I see the wisdom of it, and I think that's what I'll do. ( FWIW, the type of custom property I want a controller for is a "collection" of images. The user should drag one or more thumbnails from other palettes within my application and drop them on the dat gui control to populate the image collection. Thanks again, I'll accept yr answer if nobody has a more definitive one soon. :-) – Bumpy Mar 25 '16 at 13:48
  • okay seems you problem statement is very specific to your scenario you can do custom controller logic instead of banging head on the predefined library lol happy coding – Ajit kohir Mar 25 '16 at 13:50

1 Answers1

2

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 }

Also 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

See an example of using. Currently I am request to merge of my code to dat.gui

Andrej
  • 679
  • 5
  • 14