georgealways/lil-gui

Question about referencing a menu controller

Pickleheaded opened this issue · 4 comments

Is it possible to set a value of an input box in lil-gui from an input box created when the page is first loaded?

I'm not quite sure what you're asking, but you might be looking for controller.setValue( v ).

Hi,
I added an eventlistener for the input box as below-

let theInput = document.getElementById('input_8'); theInput.addEventListener('blur', () => { gui.controller = theInput.value;});

With listen() added to the controller, this now updates the value of the controller perfectly.

Is there a way with the new value set of calling the lil-gui controllers onFinishedChange event?

Ok, so I partially solved my particular problem.

To prevent unwanted redraws to the scene, I use onFinishedChange within lil-gui which works perfectly.

However, I needed to create a multiple step form to guide newer users through the design process, but still allow advanced users to be able to access the hundreds of settings stored within lil-gui.

The target was to ensure both the step form values and lil-gui values remain synced and both update the three.js scene.

So my solution was to add a Boolean to the lil-gui onFinishedChange event and the blur eventListener of the form elements.

The renderer within my code then looks for this value and updates if this value is true.

Next challenge a better way to handle the eventListeners rather than have a listener per form element

Glad to hear you found a solution. Cheers -g