# About GUI Builder in Processing

**URL:** <https://discourse.processing.org/t/about-gui-builder-in-processing/20699>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [May 10, 2020, 4:59am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699 "2020-05-10T04:59:30Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 10, 2020, 4:59am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/1 "2020-05-10T04:59:30Z")

</div>

Hi everyone:

I have some problems in using GUI Builder in Processing, could someone can help me solve them? Thank you.

I have downlad the G4PTool V4.4.1.zip and put it in Procssing/tools folder, and I restart Procssing, after that what should I do to start use GUI Builder?

I have looked at the website [http://lagers.org.uk/index.html](http://lagers.org.uk/index.html) and watch the related video, I see that there will be a GUI Builder window for us to using GUI Builder. However, when I restart the Processing, I did not see any related GUI Builder window.

So what should I do next? Thank you for your reply.

---

<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:** [May 10, 2020, 8:28am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/2 "2020-05-10T08:28:37Z")

</div>

> [@wwave](#):
>
> I have downlad the G4PTool V4.4.1.zip and put it in Procssing/tools folder,

THat will work but there is a much easier way and the is to use the **Contribution Manager**.

In Processing simply select **Tool \> Add Tool** or **Sketch \> Import Library \> Add Library** from the menus and the Contribution Manager window will open.

 ![Screenshot 2020-05-10 at 09.16.58](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1ef7acf4060a9b118cba324b1a4b90718aa11a7e.png)  
At the top you can choose the type of thing you want to install, the most common being Libraries and Tools. As well as GUIBuilder you need to install the library G4P as shown in the window. You will also use CM to update your libraries and tools.

Just to explain, the G4P library provides all the controls, button, labels, textfields etc for your sketch and GUI Builder is just a tool to help you design and create your GUI.

Now start a new sketch and select **Tools \> G4P GUI builder** from the menus and the GUI design will open.

I strongly suggest that you just play with GUI Builder and G4P so you get an understanding of how to use them before you get down to creating a serious sketch with them.

BTW welcome to the forum 😀

---

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 10, 2020, 1:04pm UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/3 "2020-05-10T13:04:39Z")

</div>

Thank you very much for the author’s personal reply.

By the way, I would be grateful if you would allow me to have further private communication with you by email, because I am not familier with this and I am a green hand. I have contacted with you by the **Contact Me** window in your website, but there is nothing happening, I think there is something wrong about this module: )

If you think it’s inconvenient for me to contact you through email, that’s OK. But I still want to thank you very much.

---

<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:** [May 10, 2020, 3:21pm UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/4 "2020-05-10T15:21:20Z")

</div>

Do as I suggest and try out G4P and GUI Builder. If you have questions ask here since the answer may help others. I visit this forum virtually every day so I will help where I can. 🙂

---

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 10, 2020, 4:28pm UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/5 "2020-05-10T16:28:44Z")

</div>

Sure, thank you very much. How kind you are : )

I have tried to use GUI Builder, and I find it is a very very useful tool 🙂  
I have a question now. When I use GUI Builder, I create main window, window1, button1 in the main window, button2 in window 1. First, when I run Processing, I want only the main window showed. Second, when I click button1, window1 is showed; when I click button2, window1 is disappeared.

I have tried this code:

```auto
window1.setVisible(false);

```

But I can not implement the first function, I then tried to put all codes related gui to customGUI() method, I also can not implement the first function.

So how can I implement the first function?

I have put all related codes in my GitHub repository [https://github.com/mengyu666/Project-Visualization](https://github.com/mengyu666/Project-Visualization)  
Could you please have a look at it? Thank you very much.

---

<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:** [May 10, 2020, 4:46pm UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/6 "2020-05-10T16:46:26Z")

</div>

> [@wwave](#):
>
> `window1.setVisible(false);`

Put this inside the customGUI function.

IMPORTANT: In the gui tab the **ONLY** place you are allowed to type code is inside the event handlers.

---

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 11, 2020, 2:45am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/7 "2020-05-11T02:45:10Z")

</div>

Thank you very much. I have solved this problem now😀

---

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 15, 2020, 3:31am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/8 "2020-05-15T03:31:50Z")

</div>

Hi Sir,

I have a problem.In a window, when I use keyboard to type a number, then the number will be stored in an array in my program.That means I store the number, which component should I use? I can not find some suitable components. Could you please help me?

Thank you very much.

---

<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:** [May 15, 2020, 7:35am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/9 "2020-05-15T07:35:38Z")

</div>

Have a look at the G4P\_NumericInput example that comes with the library. The GTextField control now has a feature to validate numeric input.

You would use` getText()` to get the input as a String then either [`float(...)`](https://processing.org/reference/floatconvert_.html) or [`int(...)`](https://processing.org/reference/intconvert_.html) to convert it to a number

---

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 15, 2020, 8:31am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/10 "2020-05-15T08:31:42Z")

</div>

Thank you very much, I have tried it, However, I have few questions.

First, in the G4P\_NumericInput example, I think you use

```auto
void handleTextEvents(GEditableTextControl source, GEvent event) { 
  if (source == spn0) {
    println("Spinner on panel value: " + spn0.getValue());
  } else if (source == txf0) {
    int n =txf0.getValueI();
    println(n); //my add code
  } else if (source == txf1) {
    println("Float input: " + txf1.getValueF());
  }
}

```

to handle the textfield, so that when I print n, there will be numbers showed on the console.

However, when I use GUI Builder to automatically create a GTextField, I use this method:

```auto
public void textfield1_change1(GTextField source, GEvent event) { //_CODE_:textfield1:942738:
  float n = source.getValueF();
  println(n);
} //_CODE_:textfield1:942738:

```

When I type number in the TextField in my window, the console gives me all 0.0 0.0 0.0…That means it did not recognize my typing number. Did I make some mistakes?

Second, I want to implement this function. When I type a number, the program will stored the number util I click ‘‘Enter’’ key in my keyboard, not show the number in the console immediately. I think maybe I can implement this function by using the customGUI() method?

I am sorry that I ask more questions, I am a green hand in Processing. I think the more I ask, the more I will learn 🙂

---

<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:** [May 15, 2020, 10:34am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/11 "2020-05-15T10:34:57Z")

</div>

Both of these are called _event handlers_ so when the contents of the textfield1 changes an _event_ is _fired_ and these methods catch the event and process it.

```auto
void handleTextEvents(GEditableTextControl source, GEvent event) { 
  // ...
}

```

and

```auto
public void textfield1_change1(GTextField source, GEvent event) {
  // ...
}

```

The difference is the first one is will handle events from _all text controls_ so you have to test the `source` to decide what to do. The second one is associated with a particular control, in this case the `GTextField` object `textfield1` and is created by GUI Builder with the following statement which you can see in the gui tab.

`textfield1.addEventHandler(this, "textfield1_change1");`

So the user has the option of using the generic text event handler or _overriding_ it by adding an event handler specific to the control with `addEventHandler`.

OK so the above is just to explain the difference between the 2 event handlers so we come to this

> [@wwave](#):
>
> When I type number in the TextField in my window, the console gives me all 0.0 0.0 0.0…

To make a GTextField validate numeric input we need to do something extra, so in customGUI() add the line  
`textfield1.setNumeric(-100.0, 100.0, 0);`

this will make the control (created in GUI Builder) validate numeric input, in this case numbers between -100 and +100 starting value 0.

Unfortunately you can’t set this in GUI Builder itself since this and GSpinner are very new updates that are not shown in GUI Builder yet.

> [@wwave](#):
>
> When I type a number, the program will stored the number util I click ‘‘Enter’’ key in my keyboard, not show the number in the console immediately

There are different types of text event so we need to filter the event to get the one we want

```auto
public void textfield1_change1(GTextField source, GEvent event) {
  if (event == GEvent.ENTERED) { // Enter key has been typed
    float n = source.getValueF();
    println(n);
  }
}

```

I think that covers your question.

---

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 15, 2020, 10:54am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/12 "2020-05-15T10:54:37Z")

</div>

Thank you for helping me so much 😃You made me understand a lot at once, thank you for your kindness.

---

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 26, 2020, 8:45am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/13 "2020-05-26T08:45:05Z")

</div>

Hi Sir,  
When I use a global variable to record the number which I typed in the textfield, I this I can not print the number in another method:

```auto
……
int countStep;
……
public void setup(){
……
}
public void draw(){
……

```

```auto
public void customGUI(){
  textfield1.setNumeric(1, 8, 0);
}

```

The following are in gui :

```auto
public void buttonClick(GButton source, GEvent event) { 
  println(countStep);
}

```

```auto
public void textfield1_change1(GTextField source, GEvent event) { 
  if (event == GEvent.ENTERED) {
    countStep = source.getValueI();
  }
} 

```

When I type number in the textfield and click ‘Enrer’ key, I think the number will be stored in the global variable _countStep_, however, when I click button which calls buttonClick method, zero will be showed on the console .  
Could you please help me? Thank you very much.

---

<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:** [May 26, 2020, 9:11am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/14 "2020-05-26T09:11:45Z")

</div>

Just tried it out and it worked for me.

Note that the instruction

```auto
textfield1.setNumeric(1, 8, 0);

```

Says that integers in the range 1-8 inclusive are valid and all other numbers are invalid. The third parameter is the value to return for invalid numbers.

---

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 26, 2020, 9:29am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/15 "2020-05-26T09:29:09Z")

</div>

Thank you.

When I change the third parameter from 0 to -1, it works. However, when the third parameter is 0, I type the integer in the range 1-8 inclusive, it does not work. 🙂

---

<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:** [May 26, 2020, 9:48am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/16 "2020-05-26T09:48:05Z")

</div>

I have tried it with 0 and -1 and they both work for me. You need to explain what you mean by “it works” and “it does not work” and how you arrived at those decisions.

---

<div class="post-metadata">

**Author:** ![wwave](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@wwave](https://discourse.processing.org/u/wwave)\
**Post date:** [May 28, 2020, 7:46am UTC](https://discourse.processing.org/t/about-gui-builder-in-processing/20699/17 "2020-05-28T07:46:38Z")

</div>

I use this code:

```auto
textfield1.setNumeric(1, 8, 0);

```

When I type 4, 5, and all numbers range from 1- 8 in the textfield, zero will be showed on the console, nothing else. I think it give my wrong answer.

However, when I use this code:

```auto
textfield1.setNumeric(1, 8, -1);

```

When I type 4, 5, and all numbers range from 1- 8 in the textfield, the number which I typed will be showed on the console. For example, when I type 3, 3 will be showed on the console.

I think my Processing may have some problems, so I reinstall Procssing and GUI Builder, and I tried again. They both give me right answers–when I type all numbers range from 1- 8 in the textfield, the number which I typed will be showed on the console.