# G4P GUI draw question

**URL:** <https://discourse.processing.org/t/g4p-gui-draw-question/1615>\
**Category:** Libraries\
**Created:** [July 9, 2018, 9:48am UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615 "2018-07-09T09:48:02Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)\
**Post date:** [July 9, 2018, 9:48am UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/1 "2018-07-09T09:48:02Z")

</div>

Hi,  
at which point of the program is the “draw” function of the GUI called?  
I ask because there is no obvious

```auto
drawGUI();

```

similar to the

```auto
createGUI();

```

which is used in the setup.

I’m drawing an image which partly overlaps a border and I want to clean that up by drawing over it with white squares.

Is the GUI drawn at the end of the draw loop?  
Maybe I’m just too stupid to read the description right…  
Max.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 9, 2018, 4:06pm UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/2 "2018-07-09T16:06:50Z")

</div>

All G4P controls are draw immediately after the draw() method so they appear on top of everything. This is done automatically by the library.

The `createGU()` method is created by **GUI Builder** and creates all the G4P controls, this method should only be executed once which is why it appears in `setup()`

---

<div class="post-metadata">

**Author:** ![madscientist](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@madscientist](https://discourse.processing.org/u/madscientist)\
**Post date:** [July 10, 2018, 5:30pm UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/3 "2018-07-10T17:30:27Z")

</div>

@quark Is there a way I could change that, e.g. make the gui update right before `draw();` ?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 10, 2018, 5:37pm UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/4 "2018-07-10T17:37:49Z")

</div>

The short answer is ‘No’. If that was possible G4P controls could be hidden under drawn graphics but still respond to mouse clicks - weird.

Perhaps you could explain more clearly what you are trying to do?

---

<div class="post-metadata">

**Author:** ![madscientist](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@madscientist](https://discourse.processing.org/u/madscientist)\
**Post date:** [July 10, 2018, 9:53pm UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/5 "2018-07-10T21:53:16Z")

</div>

@quark

> [@quark](#):
>
> Perhaps you could explain more clearly what you are trying to do?

I would like to be able to have graphics (say a gui widget of my own creation) be drawn above the G4P GUI,  
Like have the library update the gui _before_ the `draw()` loop executes, i.e. update gui then call `draw()`;  
as opposed to calling `draw()` and _then_ updating the gui.

> [@quark](#):
>
> If that was possible G4P controls could be hidden under drawn graphics but still respond to mouse clicks - weird.

I could have my program register a mouse handler that overrides the G4P library when there is graphics over the G4P widgets.

I see in the library that this is the `draw()` method.

```auto
public void draw() {
		app.pushMatrix();
		if(orgMatrix != null)
			app.setMatrix(orgMatrix);
		for(GAbstractControl control : windowControls){
			if( (control.registeredMethods & DRAW_METHOD) == DRAW_METHOD )
				control.draw();
		}		
		app.popMatrix();
	}

```

Would modifying it like so:

```auto
public void draw() {
		
		for(GAbstractControl control : windowControls){
			if( (control.registeredMethods & DRAW_METHOD) == DRAW_METHOD )
				control.draw();
		}	
                app.pushMatrix();
		if(orgMatrix != null)
			app.setMatrix(orgMatrix);	
		app.popMatrix();
	}

```

make it do what I want?

---

<div class="post-metadata">

**Author:** ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)\
**Post date:** [July 11, 2018, 5:20am UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/6 "2018-07-11T05:20:12Z")

</div>

> [@quark](#):
>
> All G4P controls are draw immediately after the draw() method so they appear on top of everything. This is done automatically by the library.

Thank you. That solves my problem.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 11, 2018, 3:08pm UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/7 "2018-07-11T15:08:01Z")

</div>

@madscientist  
The code you provide above will not change when the G4P controls are drawn. It also contains [redundant code](https://en.wikipedia.org/wiki/Redundant_code) and a [logic error](https://en.wikipedia.org/wiki/Logic_error) which will cause unpredictable results.

In fact the code inside the G4P `draw()` method does not and cannot determine when the method is executed. Rather G4P uses a Processing library callback to execute this method after its own `draw()` method.

---

<div class="post-metadata">

**Author:** ![madscientist](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@madscientist](https://discourse.processing.org/u/madscientist)\
**Post date:** [July 11, 2018, 7:56pm UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/8 "2018-07-11T19:56:45Z")

</div>

So how would I have to change it to make it execute afterwards?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 12, 2018, 10:18am UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/9 "2018-07-12T10:18:46Z")

</div>

> [@madscientist](#):
>
> I would like to be able to have graphics (say a gui widget of my own creation) be drawn above the G4P GUI,

You would create a class to represent your widget. The class would need a method to draw/render itself and that method would have to be ‘registered’ with processing (usually done in the widget’s constructor. Finally to make it appear over the G4P controls the widget would have to be created after the G4P controls.

Personally I have not tried this but it should work. 😃

---

<div class="post-metadata">

**Author:** ![madscientist](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@madscientist](https://discourse.processing.org/u/madscientist)\
**Post date:** [July 12, 2018, 5:22pm UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/10 "2018-07-12T17:22:46Z")

</div>

But if G4P updates _after_ the `draw()` loop, then if I update my widget _inside_ the `draw()` loop, then the G4P widgets will still be on top.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 12, 2018, 5:24pm UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/11 "2018-07-12T17:24:38Z")

</div>

Use **registerMethod()**: [https://Forum.Processing.org/two/discussions/tagged?Tag=registerMethod()](https://Forum.Processing.org/two/discussions/tagged?Tag=registerMethod%28%29)

---

<div class="post-metadata">

**Author:** ![madscientist](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@madscientist](https://discourse.processing.org/u/madscientist)\
**Post date:** [July 12, 2018, 5:32pm UTC](https://discourse.processing.org/t/g4p-gui-draw-question/1615/12 "2018-07-12T17:32:20Z")

</div>

Oh, so I can update my widget without having anything in the main `draw()` loop.

Thanks, @GoToLoop @quark 😌