Saving parameters with dat.gui seems broken? [closed]

Question

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.

Answer 1

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 ...

Answer 2

The error only happens for me when using the minified version. When I use the debug version then it works without errors for me.

As for the x property not appearing, that's also the case for me. I've found that I need to click the gear icon once, close the popup, click revert and then click the gear icon again before the popup shows the correct data.

The same is the case when using their FizzyText example code.

However, if you use what you see in the popup as the load parameter in the dat.gui constructor, even without the x property in it, it will work as expected on page load:

var gui = new dat.GUI({load:
{
  "preset": "Default",
  "closed": false,
  "remembered": {
    "Default": {
      "0": {"x": 8}
    }
  },
  "folders": {}
}
});

So I suggest doing that, which is technically also their instruction in the popup, although I must say that that's very unclear.