Creating An Alias For Property Name In dat.gui

Question

I'm trying to use dat.gui in a three.js project to allow the visible property of various elements in the scene to be toggled on and off. Functionally, this works fine. However, the issue that I am having is because I am creating a checkbox for the visible property of each child in the scene, I end up with a long list of check boxes all labeled 'visible'.

Basically, this:

var visFolder = gui.addFolder('Components');                
for (var comp in scene.children[i].children){
   visFolder.add(scene.children[i].children[comp],'visible');
}

Results in something like this:

{'visible' : true,
 'visible' : true,
 'visible' : true,
 'visible' : true,
 ...
}

With all the gui elements correctly referenced to each child's visible property, but not very helpful to the user.

Is there anyway to provide an alias that will be displayed to the user instead of the property name (I want to use the name or id of the element)?

Answer 1

@Mikhail

Thanks! Unfortunately the API documentation isn't clear that this method/assignment will set the display name of a controller as well as a folder. It states:

gui.name : String

The name of GUI. Used for folders. i.e a folder's name

Kind: instance property of GUI

Correction (edited after original posting): '.name' is a property for folders. '.name()' is part of the new GUI constructor as detailed here: https://github.com/dataarts/dat.gui/blob/master/API.md#new_GUI_new

I built a quick codepen to illustrate the use of the 'name()' assignment when dynamically creating folders from a data object with the same property found in multiple folders. It also dynamically assigns the folder name, just to demonstrate the difference between name assignments for folders vs controllers:

Code:

var datGui = new dat.GUI();
var data = {Folder_1: {setting:true},
            Folder_2: {setting:false}
           } //data
 var datController ={};          
 for (var folder in data){
        var newFolder = datGui.addFolder(folder.replace("_"," "))
    for (var setting in data[folder]){
        var datUniqueProperty = folder + "_" + setting;
        datController[datUniqueProperty] = data[folder][setting];
        var test = newFolder.add(datController,datUniqueProperty).name(setting);
    } //for setting 
 } //for folder 

for folder

Answer 2

Maybe you mean something like this:

gui.add(properties, "x").min(10).max(20).name("X coord");
gui.add(properties, "visible").name("Show image A");