switching screens between setup and play in an application

JBradley

I used g4p and the g4p builder tool to create a simple checkbox application for a setup screen. i can get it to run, but how do you exit the setup screen to go to another screen such as play?

VisualNation

could you post your code here?

you could probably do it with a switch/ case statement and an event

Chrisir

Normally use a variable int state=0;

in draw() use switch(state) { to distinguish between the states. Nothing is allowed in draw outside the switch() statement.

Now with state=1; you move on to the play screen

JBradley

Thanks. But I really need to be more specific in what I am looking for. I understand using states, however, I was looking for code statements. For example; what is the syntax for making the checkbox1 control invisible/visible, and do I need to declare a function for this to be used? The G4P builder tool doesn't provide much help here.

Chrisir

Look at the g4p reference please it’s all there

Summoning @quark

quark

As @Chrisir points out the first place to look is the online-reference.

If you look at the reference for GCheckbox you will see this

If you scroll down you will see the methods available to this control. Also the diagram at the top shows the inheritance tree for this control. So

GCheckbox inherits from GToggleControl
GToggleControl inherits from GTextIconBase
GTextIconBase inherits from GTextBase
GTextBase inherits from GAbstractControl

The public methods from these classes also work for GCheckbox so if you click on GAbstractControl and scroll down you will find a method called setVisible(boolean) which is used for all G4P controls. I suggest you explore the reference pages to get an idea of what is available.

JBradley

Thank you Chrisir and quark. Chrisir, your comment about nothing being in draw() except the switch(0 statements was very critical. And quark, for the explanation of using the reference was very helpful.

I did get my very simple code working, and have posted it here.

I don't fully understand why the part of no other code in draw(0 except the switch statements is critical. I initially tried to make the switchbox1 control invisible with a statement that tested for the state set up by the switchbox1 control clicking. It did not work!

`import g4p_controls.*;

GCheckbox checkbox1;

int state; void setup(){ size(400,400); state=0; fill(0); background(200);

createGUI();

}

void draw(){

switch(state){ case 0:
background(200); checkbox1.setVisible(true); text("Settings state", 50,50);

  break;

  case 1:  


  background(200);
    checkbox1.setVisible(false);
    text("Play state",50,50);

}

}

public void checkbox1_clicked1(GCheckbox source, GEvent event) { 

println("checkbox1 - GCheckbox >> GEvent." + event + " @ " + millis());

{ state=1; }

}

public void createGUI()

{ G4P.messagesEnabled(false); G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME); G4P.setCursor(ARROW); surface.setTitle("Sketch Window"); checkbox1 = new GCheckbox(this, 166, 150, 120, 20); checkbox1.setIconAlign(GAlign.LEFT, GAlign.MIDDLE); checkbox1.setTextAlign(GAlign.CENTER, GAlign.MIDDLE); checkbox1.setText("BEND"); checkbox1.setOpaque(false); checkbox1.addEventHandler(this, "checkbox1_clicked1"); }

`

JBradley

I am sorry that my code posting looks so messy. My original code was full of delineated comments, and this sort of messed things up.

Chrisir

Nothing in draw outside the switch is just my rule of thumb. Of course you can have whatever you want.

Having nothing outside switch means that nothing is flowing around not belonging to a state. It just makes a clear program. Same switch in mousePressed and keyPressed by the way because the inputs mean different things in the different states.

But as said not obligatory.

To format code: empty lines before and after the code; select code with mouse; hit ctrl-o OR use the C in the small command bar.

Chrisir

Chrisir

I didn’t mean to be critical or harsh in my comment, sorry for that!

quark

Here is an example of using G4P with states. For clarity I have used G4P with GUI Builder but combined the 2 tabs into one removing some of the comments. Simply copy and paste the who;e code into the main tab.

import g4p_controls.*;

int state = 0;
int selectedState = 0;

public void setup() {
  size(400, 240, JAVA2D);
  createGUI();
  customGUI();
  // Place your setup code here
  textSize(40);
  gotoState(0);
}

void gotoState(int s) {
  changeGUI(state, false);
  state = s;
  changeGUI(state, true);
}

void changeGUI(int s, boolean v) {
  switch(s) {
  case 0:
    option1.setVisible(v);
    option2.setVisible(v);
    btnGo.setVisible(v);
    break;
  case 1:
    btnBack1.setVisible(v);
    break;
  case 2:
    btnBack2.setVisible(v);
    break;
  }
}

public void draw() {
  background(60, 60, 220);
  fill(0);
  text(state, width/2 - 10, height/2 + 10);
}

// Use this method to add additional statements
// to customise the GUI controls
public void customGUI() {
  // Make all controls invisible here because
  // it is not an option in GUI Builder
  option1.setVisible(false);
  option2.setVisible(false);
  btnGo.setVisible(false);
  btnBack1.setVisible(false);
  btnBack2.setVisible(false);
}

// From the gui tab

public void opt1_click(GOption source, GEvent event) { //_CODE_:option1:965250:
  selectedState = 1;
} //_CODE_:option1:965250:

public void opt2_click(GOption source, GEvent event) { //_CODE_:option2:491595:
  selectedState = 2;
} //_CODE_:option2:491595:

public void btnGo_click(GButton source, GEvent event) { //_CODE_:btnGo:741736:
  gotoState(selectedState);
} //_CODE_:btnGo:741736:

public void btnBack1_click(GButton source, GEvent event) { //_CODE_:btnBack1:362009:
  gotoState(0);
} //_CODE_:btnBack1:362009:

public void btnBack2_click(GButton source, GEvent event) { //_CODE_:btnBack2:431048:
  gotoState(0);
} //_CODE_:btnBack2:431048:



// Create all the GUI controls. 
// autogenerated do not edit
public void createGUI(){
  G4P.messagesEnabled(false);
  G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
  G4P.setCursor(ARROW);
  surface.setTitle("Sketch Window");
  optGroupState = new GToggleGroup();
  option1 = new GOption(this, 10, 10, 120, 20);
  option1.setIconAlign(GAlign.LEFT, GAlign.MIDDLE);
  option1.setText("Select State 1");
  option1.setOpaque(true);
  option1.addEventHandler(this, "opt1_click");
  option2 = new GOption(this, 10, 40, 120, 20);
  option2.setIconAlign(GAlign.LEFT, GAlign.MIDDLE);
  option2.setText("Select State 2");
  option2.setOpaque(true);
  option2.addEventHandler(this, "opt2_click");
  optGroupState.addControl(option1);
  option1.setSelected(true);
  optGroupState.addControl(option2);
  btnGo = new GButton(this, 10, 70, 120, 20);
  btnGo.setText("Goto State");
  btnGo.addEventHandler(this, "btnGo_click");
  btnBack1 = new GButton(this, 10, 210, 120, 20);
  btnBack1.setText("Back to Menu");
  btnBack1.addEventHandler(this, "btnBack1_click");
  btnBack2 = new GButton(this, 270, 210, 120, 20);
  btnBack2.setText("Back to Menu");
  btnBack2.addEventHandler(this, "btnBack2_click");
}

// Variable declarations 
// autogenerated do not edit
GToggleGroup optGroupState; 
GOption option1; 
GOption option2; 
GButton btnGo; 
GButton btnBack1; 
GButton btnBack2; 

JBradley

Again, thank you both for all of the help that you have given me on this topic. The example was a good one of putting the switch method in a procedure, rather than the draw(0) method, which, with your help, worked for me also.

I am not the first one who had problems with this particular issue, and I am sure that i won't be the last one. quark, would you consider putting this example in G4P the next time you revise it? I think that it would be very helpful.

Chrisir

putting the switch method in a procedure, rather than the draw() method

That's not quite correct.

First of all switch() is a general command and only a shorter form of

if(state==0) {
    ...
    } 
    else if (state==1) {
    ...
    } 
    else if (state==2) {
    ...................
    }

You can have many switch() in your program.

2nd: quark is using switch() in changeGUI() but only to change the gui not to show the different screens for setup and play. Instead of this, quark is just saying text(state, width/2 - 10, height/2 + 10);. So you still would need a switch() in draw().

Example without GUI: just press any key:

//
// states
final int stateGame  = 0;  // consts
final int statePause = 1;
int state = stateGame;    // current state

// -----------------------------------------

void setup() {
  // init (runs only once)
  size(800, 600);
  textSize(33);
  fill(244, 3, 3); // red
} // func 

void draw() {
  // draw() runs on and on 
  switch (state) {

  case stateGame: 
    // Game
    // Game
    background(11);
    text ("Game....", 210, 313);
    break; 

  case statePause:
    // Pause
    background(255);
    fill(244, 3, 3); // red 
    text ("Pause.... ", 210, 313);
    break;
  }
  //
} // func 

// ----------------------------------------
// keyboard input 

void keyPressed() {
  // go to next state
  state++;
  if (state>statePause)
    state=stateGame;
} // func 
//

JBradley

Ok..got it Thanks

Chrisir

;-)