[SOLVED] dat.GUI and Complex Variables

dat.GUI and Complex Variables

I'm fairly new to dat.GUI and I'm having problems getting it to work with a more complex variable.

I have the following:

let complexVariable= {
    topLayer:
        {
            deeperLayer:
                {
                    deepestLayer: 20,
                    //Other stuff                    
                }
        }
}

let gui = new dat.GUI();
gui.add(complexVariable, "topLayer.deeperLayer.deepestLayer", 10, 40);

This gives me the following error:

Uncaught Error: Object "[object Object]" has no property "topLayer.deeperLayer.deepestLayer"

Any help here would be appreciated.

Solution

It currently doesn't seem possible by looking at the source code. They use bracket notation with the single property you pass in on the object.

function add(gui, object, property, params) {
  if (object[property] === undefined) {
    throw new Error(`Object "${object}" has no property "${property}"`);
  }
...

So what you are telling dat.GUI to do is find a top level property "topLayer.deeperLayer.deepestLayer" and that obviously does not exist on your object. It seems like more code would have to be written to support nested properties.

dat.gui would have to do something like if (object[property1][property2][...] === undefined) or in your case - complexVariable["topLayer"]["deeperLayer"]["deepestLayer"];