# Need help with p5GUI in instance mode

**URL:** <https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [April 24, 2021, 9:24am UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599 "2021-04-24T09:24:38Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [April 24, 2021, 9:24am UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/1 "2021-04-24T09:24:38Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

I need to put in instance mode this code:

> **[p5GUI - Richard Bourne - OpenProcessing](https://openprocessing.org/sketch/743365/)**
>
> This is a library to create interface objects (buttons, etc.) that are much more sophisticated than the standard p5.js objects. Thanks to Sinan for helping me to get the library installed. It requires an addition library called Quicksettings.

( sample of different p5gui examples)

but i got an error of creategui…

Here is my code:

> **[p5.js Web Editor](https://editor.p5js.org/egutie9/sketches/HyzXIUozP)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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/examples/instance-mode-1/sketch.js at master · bitcraftlab/p5.gui · GitHub](https://github.com/bitcraftlab/p5.gui/blob/master/examples/instance-mode-1/sketch.js)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 24, 2021, 10:57am UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/2 "2021-04-24T10:57:57Z")

</div>

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:

> **[p5.gui](https://bitcraftlab.github.io/p5.gui/#pass-your-sketch-in-instance-mode)**
>
> p5.gui magically generates a graphical user interface for your p5.js sketches

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](https://editor.p5js.org/micuat/sketches/z4-W18Ksr)

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [April 24, 2021, 11:52am UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/3 "2021-04-24T11:52:59Z")

</div>

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

 ![imagen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cb3c96fc90d3522eb632df2aca45d0acb45df19d.png)

The desired result is something like:

 ![imagen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9afd1bf69c5f468bb63ed26f0fadbb072cb0a86c.png)

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 😉

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 24, 2021, 12:44pm UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/4 "2021-04-24T12:44:30Z")

</div>

Thanks for the update, I fixed `formContainer.js` in this version:

> **[p5.js Web Editor](https://editor.p5js.org/micuat/sketches/FK8F8fXtB)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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`](https://bitcraftlab.github.io/p5.gui/#pass-params-as-objects) 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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer)).

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [April 24, 2021, 3:22pm UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/5 "2021-04-24T15:22:29Z")

</div>

Thanks…

If i use addObject it doesnt work…

[https://editor.p5js.org/egutie9/sketches/DW2XivdQd](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

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 24, 2021, 3:30pm UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/6 "2021-04-24T15:30:55Z")

</div>

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](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)

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [April 24, 2021, 3:40pm UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/7 "2021-04-24T15:40:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 24, 2021, 4:28pm UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/8 "2021-04-24T16:28:38Z")

</div>

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](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`

> <https://github.com/bitcraftlab/p5.gui/blob/master/libraries/p5.gui.js#L113>

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

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

```

[https://editor.p5js.org/micuat/sketches/Y11IACWvQ](https://editor.p5js.org/micuat/sketches/Y11IACWvQ)

---

<div class="post-metadata">

**Author:** ![edufissure](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@edufissure](https://discourse.processing.org/u/edufissure)\
**Post date:** [April 26, 2021, 9:04am UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/9 "2021-04-26T09:04:39Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 27, 2021, 7:45pm UTC](https://discourse.processing.org/t/need-help-with-p5gui-in-instance-mode/29599/10 "2021-04-27T19:45:47Z")

</div>

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

```javascript
gui.prototype.setDraggable(false)

```

to make it not draggable, but the mouse pointer still changes to the hand.

Disabling seems possible like this

```javascript
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…