CODEWITHSUNDEEP
javascriptdat.gui
Adi Shavit
Adi Shavit

Reputation: 17265

Map dat.GUI Dropdown Menu Strings to Values

When generating a dat.GUI dropdown menu, I give an array of strings that will be the dropdown menu entries. Upon a user selection, the corresponding data property is updated to be the selected menu string.

Is there a way to separate the strings in the menu from the corresponding values (which could be of any type)?
For example, say my menu is ['King', 'Queen', 'Rook'], I'd like my property to get the values resp. ['A','B','C'] or [-1, 9, 5].

Upvotes: 2

Views: 9691

Answers (1)

Djuro Mirkovic
Djuro Mirkovic

Reputation: 303

Yes.

Imagine the example below,

gui = new dat.GUI();
var text =
{
    speed: 'someName'
}
gui.add(text, 'speed', { King: 'A', Queen: 'B', Rook: 'C' } );

The first thing to do is to determine if it is a controller (above) or a folder. If it's the former, then the location of the dropdown menu can be found in the gui.__controllers (otherwise, if it is the latter, then the location can be found in the gui.__folders. If you have multiple controllers you will have to determine the appropriate controller for the dropdown menu - it will be along the lines of dat.controllers.OptionController.e.

Assuming it's your only controller, then you can access it by, gui.__controllers[0].

The next step is to figure out what the user has selected. Each controller with a dropdown menu will have a __select option. Inside each __select option, there is a selectedOptions, which details what the user has chosen.

This will be in the form of, gui.__controllers[0].__select.selectedOptions[0].value.

If King is selected the value that is returned is A.

Upvotes: 9

Related Questions