how do i service "change in gui" events?

[dan-reznik]

Could some kind soul help me with this? In a p5.js.gui I would like to tell the gui there is a specific callback to service changes in any of the controls. Is this possible? How do I do it? It would be similar to the following call on Quicksettings:

qs.setGlobalChangeHandler(callback);

However, I don't seem to have access to this after I create a gui with

let gui = createGui('p5.gui');
gui.addObject(glob.ui);
gui.setPosition(20, 60);

I would like to do something like

gui.setGlobalChangeHandler(callback);

[jaredleekatzman]

Hey @dan-reznik,
I don't know if you still could use this. But I just tried to hack something together, and found you could create an object with custom setters and getters and allow the gui to modify the object through built-in .addObject() functionality.

For example:

var colors = {};
Object.defineProperty(colors, 'color', {
  get: function() {
			if (this._color) { return this._color;}
			else { return [255, 0 , 0] ;}
	},
  set: function(newValue) {
		this._color = newValue;
		callback(newValue);
	},
  enumerable: true,
  configurable: true
});

gui = createGui('Params');
gui.addObject(colors);

print('Current color', colors.color);

Definitely not the most elegant solution, but gets the job done! open to feedback from anyone who knows more

[marcedavi]

Hello @dan-reznik @jaredleekatzman,

I just needed this and found out you can access Quicksettings by calling gui.prototype.
This way you can have different callbacks for different GUI elements, for example with an Input Slider:

function myCallback(sliderValue) {
    console.log("New value: " + value)
}

// gui.prototype.addRange(title, min, max, value, step, callback)
gui.prototype.addRange('My slider', 0, 100, 50, 1, myCallback)

You can find all the available methods in the quicksettings.js file.