Hi! First of all, the topic category is set to “Processing” but since it is for the Java based environment, I suggest you to change it to “p5.js” (plus “homework” tag if it is for an assignment). Also the topic title is quite vague (surprisingly, a lot of people come here to ask for help on their code ) so I recommend you to add a bit more context - like “Need help with p5GUI in instance mode”, for example, which helps other people identify the topic easily.
I took a look at your code and first I found that index.html had some issues like missing tags. For using p5gui in instance mode, the example page shows you how to do it:
Thanks for your help…Its not homework as im the teacher ;), i put in libraries because as far as i know pgui is a library as p5.play. So the problem was not related to p5 but to p5gui.
It doesnt work because it doesnt load the globals, it doenst appear any gui or anything like the code in global mode.
About index.html it could be, but i read it many times, and i put the p5.gui and quicksettings.js just under the p5.js library
The question is vague because i dont know the problem, i have other sketches in instance mode (no using p5gui) and they all work fine
Thanks for the update, I fixed formContainer.js in this version:
The problem is that addGlobals looks for global values. The parameters you defined are inside const sketchForm = (p) => {...} and not global. So the quick fix is to move all the variables outside and expose to global. But a better solution would be to use addObject so you can keep variables inside the instance’s scope.
By the way in the index, why did you put scripts inside body, shouldnt be better to put in the head, so you dont start game till its loaded … ??
I usually list libraries in <head> and the rest at the bottom of <body> because if you work with DOM, it may become problematic that the script is loaded before DOM elements are parsed (I think p5.js waits loading the script till all the elements are loaded, so it is not a problem but it’s more of a habit for me. You can also add defer).
Also to finish two questions:
1 - Is there a way to put for example drawfill and drawstroke as radio button, you can choose one or another, but only one of them…
2 - A a comment here is the few code that resets canvas with p.clear() as mentioned in other post, if it was a good practice in order to freeing memory and avoid possible performance falls, and maintain the memory and cache clean.
3 - Also seem keyPressed doesnt work…in theory if you press p, it should show,/hide the gui…
however, p5.gui did something wrong with inheritance and addButton function is in a bit weird place. They simply assigned qs to prototype
but I think this is wrong and you need to copy every member variables and functions to prototype… if I’m correct. Nevertheless you can access like this
you may have misunderstanding - the GUI panel is not “inside” canvas. It’s a separate DOM element - just like webpage header, menu and content, the GUI panel exists separately from the canvas. You can do
gui.prototype.setDraggable(false)
to make it not draggable, but the mouse pointer still changes to the hand.
Disabling seems possible like this
gui.prototype.disableControl("shape")
and enableControl to make it active again. However it doesn’t grey out the interface, which is not great. But it’s a small open source project so that’s what you can get…
) so I recommend you to add a bit more context - like “Need help with p5GUI in instance mode”, for example, which helps other people identify the topic easily.
