Excuse the SEO-friendly title, but I want to ensure that everyone can access the issue I'm currently working on. For those interested in customizing the appearance of dat.gui, you will need to download the source and include it using require.js following the instructions provided here: https://code.google.com/p/dat-gui/.
Now, onto my question. I'm tackling a project that involves creating a UI with extensive real-time integration with JavaScript (specifically three.js). My approach is to modify dat.gui to develop this UI, with an aim to integrate it soon with backbone.js as a set of views.
I intend to switch to utilizing the dat.gui source files for editing the styling.
To get started, I transitioned from the concatenated dat.gui.min.js to the source by following the guidelines outlined in the link above. I placed the entire source in its designated folder within my libraries directory, and inserted the main.js file which require.js requires into the "src" folder. This was done to address linking dependencies within dat.gui's "GUI.js".
Everything seems to be properly linked, and I'm essentially utilizing the same code I had before to create my dat.guis. However, I keep encountering undefined errors when altering the gui variable either in my original code or in main.js. My comprehension of require.js is limited, and I sense that it plays a crucial role in how everything functions (potentially being one of those seemingly simple issues for someone with expertise).
Here's my main.js file located at /libraries/dat-gui/src (this directory also includes text.js)
//This is main.js for using require.js
require([
'dat/gui/GUI'
], function(GUI) {
// No namespace required
var gui = new GUI();
});
And here is the essential part of my original dat.gui definition code:
//////////////////////////////////////////////////////DatGui////////////////////////////////////////////////////
var stageConfigData = function() {
this.scaleX = params.stageWidth;
this.scaleZ = params.stageDepth;
this.spinTheCamera = false;
this.lightIntensity = 1;
this.lightDistance = 0;
this.lightFrontColour = "#ffb752";
this.lightRearColour = "#3535fa";
this.lockCameraToScene = true;
this.tooltype = 3;
this.objectSelect = 'Man';
this.saveJSON = function(){
saveJSON();
};
};
var stageConfig = new stageConfigData( );
var moveConfig = new moveConfigData( );
///The problem may be related to defining this variable:
//var gui = new dat.GUI();//works for the minified version
var gui = new dat.GUI();//for non-concatenated
var fstage = gui.addFolder('Stage');
var fcamera = gui.addFolder('Camera');
var ffhouselts = gui.addFolder('Front of House Lights');
var fRearlts = gui.addFolder('Rear Lights');
var sandl = gui.addFolder('Saving and Loading');
fstage.add( stageConfig, 'scaleX', 1, 100, 5).name('Width of stage').onChange( function(){
stage.scale.x = ( stageConfig.scaleX );
});
fstage.add( stageConfig, 'scaleZ', 1, 100, 5).name('Depth of stage').onChange( function(){
stage.scale.z = ( stageConfig.scaleZ );
});
... //more code follows but it may not be relevant
The errors I encounter are either:
Uncaught ReferenceError: dat is not defined
or
Uncaught ReferenceError: GUI is not defined
depending on my adjustments to those variables and the section in main.js under //No namespace necessary. Given my novice understanding of namespaces in JavaScript, any insights would be greatly appreciated.
Any suggestions? While I suspect this might be a simple fix, your assistance would be invaluable nonetheless.
Thank you!