switching screens between setup and play in an application

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?

Answers

  • could you post your code here?

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

  • edited March 2018 Answer ✓

    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

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

  • Answer ✓

    Look at the g4p reference please it’s all there

    Summoning @quark

  • Answer ✓

    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

    Screen Shot 2018-03-21 at 09.35.12

    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.

  • 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"); }

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

  • edited March 2018 Answer ✓

    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

  • edited March 2018 Answer ✓

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

  • Answer ✓

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

  • edited March 2018 Answer ✓

    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 
    //
    
  • Ok..got it Thanks

  • Answer ✓

    ;-)

Sign In or Register to comment.