About GUI Builder in Processing

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

1 Like

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.


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 :grinning:

3 Likes

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.

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

2 Likes

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

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
Could you please have a look at it? Thank you very much.

1 Like

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.

1 Like

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

1 Like

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.

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(...) or int(...) to convert it to a number

1 Like

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

First, in the G4P_NumericInput example, I think you use

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:

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

1 Like

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.

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

and

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

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.

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

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.

2 Likes

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

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:

……
int countStep;
……
public void setup(){
……
}
public void draw(){
……
public void customGUI(){
  textfield1.setNumeric(1, 8, 0);
}

The following are in gui :

public void buttonClick(GButton source, GEvent event) { 
  println(countStep);
}
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.

Just tried it out and it worked for me.

Note that the instruction

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.

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. :slightly_smiling_face:

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.

I use this code:

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:

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.