There seems to be a problem with saving parameters in dat.gui, or I'm missing something really obvious..
The problem shows when clicking the gear icon which should open a popup with the JSON to be saved. Also saving to local storage does not work for me. Here are two JSFiddles:
http://jsfiddle.net/navFooh/XZcde/ with dat.gui.min.js, clicking the gear throws an error in the console: Uncaught TypeError: Cannot read property 'forEach' of undefined dat.gui.min.js:3
http://jsfiddle.net/navFooh/8Hek6/ with dat.gui.js, clicking the gear icon does show the popup with JSON, but the parameter x does not show
The sample they have online works fine (see comment for link). But they have minimized all their sample code, including the lib itself. So I can't even resolve if they're even using the latest build.
Any help would be greatly appreciated.
I made the error of calling gui.remember(obj); and gui.add(obj, 'x'); in the wrong order.
So this is the solution:
var obj = { x: 5 };
var gui = new dat.GUI();
gui.remember(obj);
gui.add(obj, 'x');
What happens is that dat.gui makes an internal map of objects to be remembered when calling the gui.add() function. This map, gui.__rememberedObjectIndecesToControllers[], is used in the internal getCurrentPreset() function when saving values.
However it will only add object to this map if they have been stored in gui.__rememberedObjects[] which is why the order is so important.
The reason the minified version threw an error is that when it tried to get the mapped value from gui.__rememberedObjectIndecesToControllers[], it tries to loop over an undefined value.
The sample on http://workshop.chromeexperiments.com/examples/gui/#5--Saving-Values actually shows this proper order, I just overlooked it:
var fizzyText = new FizzyText();
var gui = new dat.GUI();
gui.remember(fizzyText);
// Add controllers ...