8000 how do i service "change in gui" events? · Issue #29 · bitcraftlab/p5.gui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

how do i service "change in gui" events? #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
dan-reznik opened this issue Jan 1, 2021 · 2 comments
Open

how do i service "change in gui" events? #29

dan-reznik opened this issue Jan 1, 2021 · 2 comments

Comments

@dan-reznik
Copy link

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
Copy link
jaredleekatzman commented Jan 8, 2021 •
edited
Loading

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
Copy link
6B7E

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jaredleekatzman @marcedavi @dan-reznik
0