A useful wrapper of dat.GUI with
defaults support. The provided DatGuiDefaults
class makes it easy to
write a demo app that requires default configuration handling.
Installation
$ npm install dat-gui-defaults
- First, subclass
DatGuiDefaults
and implementinitGui(gui, data, params)
. For example, here we createDemoGui
class.
class DemoGui extends DatGuiDefaults {
// override
initGui(gui, data, params) {
//-------- begin sample --------
let controller = gui.add(params, 'wireframe').name('Wireframe');
controller.onChange((value) => {
data.wireframe = value;
});
controller = gui.add(params, 'reset').name("Restore Defaults");
controller.onChange((value) => {
this.applyDefaults(); // API to restore defaults for dat.GUI
Object.assign(data, params); // reflect the change in the app
});
//-------- end sample --------
}
}
- Use the custom class with an application data object.
const data = { // app data
wireframe: true,
};
const dg = new DemoGui(data); // instantiate with data
dg.setDefaults({ // defaults passed to dat.GUI
wireframe: data.wireframe,
reset: () => {},
});
-
new DatGuiDefaults(data)
data (Object): app data object to be manipulated.
-
datGuiDefaults.setDefaults(params)
params (Object): the params object for dat.GUI.
Set the default parameters.
-
datGuiDefaults.applyDefaults()
Restore the default parameters for dat.GUI.
-
datGuiDefaults.gui
The underlying dat.GUI object can be accessed this way.
References
Live demo (examples/demo-script-tag/index.html)
$ npm install # set up build tools
$ npm run build