Need help with p5GUI in instance mode

please format code with </> button * homework policy * asking questions

I need to put in instance mode this code:

( sample of different p5gui examples)

but i got an error of creategui…

Here is my code:
https://editor.p5js.org/egutie9/sketches/HyzXIUozP

In basics i want to put three sketch in same row, one for player settings, one for game ( tennis/pong) and the other to set the score and time.

Ive spent many hours trying to get it work…but i think i need some help

Thanks in advance
p.s: i was somehow using this p5.gui/sketch.js at master · bitcraftlab/p5.gui · GitHub

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 :slight_smile: ) 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:

To put these 2 things together I have this, which successfully loads the gui. I hope you can take it to the next step from here!
https://editor.p5js.org/micuat/sketches/z4-W18Ksr

1 Like

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

The desired result is something like:

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 … ??

ps: as a good student i took in consideration your recommendations, and updated the title and tags of the question :wink:

Thanks for the update, I fixed formContainer.js in this version:
https://editor.p5js.org/micuat/sketches/FK8F8fXtB

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).

1 Like

Thanks…

If i use addObject it doesnt work…

https://editor.p5js.org/egutie9/sketches/DW2XivdQd

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…

Thanks for your work and effort

because you cannot pass a variable name to addObject. You need to wrap it around by another object, and pass the object to addObject:

https://editor.p5js.org/micuat/sketches/B-FKdzlQJ

(for demonstration I added only numShapes but of course if you add other parameters to param they will show up in gui)

And the last one is possible to add a button, and a function like onclickButton ???

I dug into the code and found there is a bug. The original library QuickSettings has a function to add a button:

http://bit101.github.io/quicksettings/demos/demo.html

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

    gui.prototype.addButton("say hi", function() {
      console.log("hi!!")
    })

https://editor.p5js.org/micuat/sketches/Y11IACWvQ

1 Like

Thanks for your help…

Two questions:
1 - Seems that gui appear like floating in the Canvas, is possible to put gui inside Canvas…without the floating effect ?

2 - Is possible to enable/disable t he button or other elements of the gui ?

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…