How to create multiple screens from clicking a button!!!?!?:)

angpalmer

Im making a "guestbook" data visualization for a project im working on. I have the home screen where users can choose a colour and sign their name but im looking to create a button to change the screen into the next stage of the guestbook which will ask the user questions. Im stuck on creating a new screen and a simple button to click and change the screens. PLS HELP

PImage bg;
PImage refresh;
int y;

int shade1;
int shade2;
int shade3;
int shade4;
int shade5;
int shade6;
int shade7;

color currentColor;
boolean typeIsRect;

void setup() {
  size(900, 600);  
  background(255);
  bg = loadImage("test.png");
  image(bg, 0, height-150, width, 150);

  refresh = loadImage("refresh.png");
  image(refresh, 10, 10, 50, 50);

  frameRate(60);

  shade1 = color(#CBEBF4);
  shade2 = color( #7B8EC4);
  shade3=  color( #394C9F);
  shade4= color( #59426E);
  shade5= color( #72312F);
  shade6= color(#A04647 );
  shade7= color(#E1B9D7);
  currentColor = color(255);
  typeIsRect = true;
}


void draw() {
  smooth();

  //Light Blue
  stroke(150);
  strokeWeight(1.2);
  fill(shade1);
  rect(100, 30, 90, 50, 2); 

  //Pale blue
  stroke(150);
  strokeWeight(1.2);
  fill(#7B8EC4);
  rect(200, 30, 90, 50, 2);

  ////////////////////////////
  //Dark Blue
  stroke(150);
  strokeWeight(1.2);
  fill(#394C9F);
  rect(300, 30, 90, 50, 2); 

  ////////////////////////////
  //purple
  stroke(150);
  strokeWeight(1.2);
  fill(#59426E); 
  rect(400, 30, 90, 50, 2); 

  ////////////////////////////
  //purply red 
  stroke(150);
  strokeWeight(1.2);
  fill(#72312F);
  rect(500, 30, 90, 50, 2); 

  ////////////////////////////
  //pale red
  stroke(150);
  strokeWeight(1.2);
  fill(#A04647);
  rect(600, 30, 90, 50, 2); 

  ////////////////////////////
  //light pink
  stroke(150);
  strokeWeight(1.2);
  fill(#E1B9D7);
  rect(700, 30, 90, 50, 2);


  if (mousePressed) {
    stroke(currentColor);
    strokeWeight(2);
    line(pmouseX, pmouseY, mouseX, mouseY);
    println("Previous mouse postion x: " + pmouseX + " y; " + 
      pmouseY + " current mouse postion x : " + mouseX  + " y " + mouseY);
  }
}


void mousePressed() {
  //REFRESH THE BACKGROUND TO WHITE
  if ((mouseX>0) && (mouseY>0) && (mouseX<60) && (mouseY<60))
  {
    background(255);
    currentColor=(255);
    image(bg, 0, height-150, width, 150);
    image(refresh, 10, 10, 50, 50);
  }

  //SHADE 1
  if ((mouseX>100) && (mouseY>20) && (mouseX<190) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade1);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }

  //SHADE 2
  if ((mouseX>200) && (mouseY>20) && (mouseX<290) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade2);
  }

  //SHADE 3
  if ((mouseX>300) && (mouseY>20) && (mouseX<390) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade3);
  }

  //SHADE 4
  if ((mouseX>400) && (mouseY>20) && (mouseX<490) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade4);
  }

  //SHADE 5
  if ((mouseX>500) && (mouseY>20) && (mouseX<590) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade5);
  }

  //SHADE 6
  if ((mouseX>600) && (mouseY>20) && (mouseX<690) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade6);
  }

  //SHADE 7
  if ((mouseX>700) && (mouseY>20) && (mouseX<790) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade7);
  }
}

Chrisir

Have a new variable state or page of type int defined before setup()

In draw() use

switch(state) { 

    case 0: 
       ....
       break;

to evaluate state.

state tells you on which page you are

RULE: Outside this switch() nothing is allowed in draw(). This means, everything that happens in your sketch must happen in a defined state. So for a help page just create a new state.

Now when user presses enter or mouse just say state = 1; or state=2...

Chrisir

you can also name the states, so instead of 0 you can write stateGame.

The switch code of draw() must also be applied in mousePressed and keyPressed, because the mouse and key inputs mean different things on different pages of your sketch.

example:

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

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

void setup() {
  // init (runs only once)
  size(800, 600);
} // func 

void draw() {

  // draw() runs on and on 

  switch (state) {

  case stateGame: 
    // Game
    handleStateGame();
    break; 

  case statePause:
    // Pause
    handleStatePause(); 
    break;

  default:
    // error
    println("Error number 939; unknown state : " 
      + state 
      + ".");
    exit();
    break;
  } // switch
  //
} // func 

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

// functions for states - called from draw() 

void handleStateGame() {
  // Game
  background(11);
  fill(244, 3, 3); // red 
  text ("Game....", 210, 313);
  signHome(10, 100);
} // func 

void handleStatePause() {
  // Pause
  background(255);
  fill(244, 3, 3); // red 
  text ("Pause.... ", 210, 313);
  text ("Hit p to start ", 210, 385);
  signHome(width-70, 100);
} // func 

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

void keyPressed() {

  switch (state) {

  case stateGame: 
    // Game
    keyPressedForStateGame();
    break; 

  case statePause:
    // Pause
    keyPressedForStatePause(); 
    break;

  default:
    // error
    println("Error number 1039; unknown state : "
      + state 
      + ".");
    exit();
    break;
  } // switch
} // func 

// ----

void keyPressedForStateGame() { 
  if (key == CODED) 
  {
    if (keyCode == UP) {
      //
    } else if (keyCode == DOWN) {
      //
    }

    if (keyCode == LEFT) {
      //
    } else if (keyCode == RIGHT) {
      //
    } else {
      // do nothing
    } // else
  } //  if (key == CODED) {
  else 
  {
    // not CODED ---------------------- 
    if (key == 'p') {
      // Pause 
      state = statePause;
    } else {
      // do nothing
    } // else
  } // else not CODED
} // func

void keyPressedForStatePause() { 
  if (key == CODED) 
  {
    if (keyCode == UP) {
      //
    } else if (keyCode == DOWN) {
      // none
    }

    if (keyCode == LEFT) {
      //
    } else if (keyCode == RIGHT) {
      //
    } else {
      // do nothing
    } // else
  } //  if (key == CODED) {
  else 
  {
    // not CODED ---------------------- 
    if (key == 'p') {
      //
      state = stateGame;
    } else {
      // do nothing
    } // else
  } // else not CODED
} // func

// -------------------------------------------------------
// Mouse input

void mousePressed() {
  //
  switch (state) {

  case stateGame: 
    // Game
    mousePressedForStateGame();
    break; 

  case statePause:
    // Pause
    mousePressedForStatePause(); 
    break;

  default:
    // error
    println("Error number 1139; unknown state : " + state+".");
    exit();
    break;
  } // switch
} // func 

void mousePressedForStateGame() {
  if (dist(mouseX, mouseY, 10, 100) < 30 ) { 
    println ("Hit Game.");
  }
} // func 

void mousePressedForStatePause() {
  if (dist(mouseX, mouseY, width-70, 100) < 30 ) { 
    println ("Hit Pause.");
  }
} // func 

// -------------------------------------------------------
// Misc

void signHome(int x, int y) {
  // gives a sign for a house / home sign

  final int width1=6;
  final int height1=8;

  fill( 2, 255, 0 );
  strokeWeight(1);
  stroke ( 2, 255, 0 );
  noFill();
  x+=21;
  y+=14;
  triangle ( x-width1, y, 
    x, y-height1, 
    x+width1, y );
  rect(x-width1/2, y, width1, width1);
  rect(x-width1/4+1, y+height1/4+1, width1/4, width1/3);
  strokeWeight(1);
}

// =====================================================================

Chrisir

How to post in the processing forum.

Best is to hit ctrl-t in processing first before copy paste into the forum (https://forum.processing.org).

You can edit your post (click the small gear and the 'Edit').

How to format Code:

empty line before and after the code section

select (highlight) entire code with the mouse

hit ctrl-o OR click the small C in the command bar

koogs

Please don't start new questions for things that obviously follow on from previous code. Especially when you haven't responded once to the previous question.

koogs

So here's the place to pose your second question. Post the current code and say what else you want it to do (ie loop back to the beginning)

Chrisir

Go back edit your post

Format your code better

See above

koogs

(done)

Chrisir

Sorry, when my previous sketch was too long.

I made a shorter version now.

The idea is that you have a variable state that indicates which screen you are on. You can even give the states names such as stateGame or statePause.

By using a variable state you can

• evaluate the variable to know which screen must be shown in draw().

• You can do this evaluation with switch() or with if(state==stateGame) {...} else if (state==statePause ) {...} which is essentially the same.

• You can set state to whatever value you need - see function keyPressed below

• Since the information on which screen we are is stored in ONE variable, all parts of the program know the current screen.

Best, Chrisir ;-)

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

Chrisir

As a bonus I worked on with your sketch and have added a new screen where 2 questions are being asked.

I don't have you images (bg and refresh) so that's missing.

If you have questions do not hesitate to ask me.

Some parts are over my head, they are from gotoloop.

Chrisir ;-)

// https : // forum.processing.org/two/discussion/comment/119194#Comment_119194

// credits GoToLoop - see below for details 

// state tells which screen we are on 
// constants tell us the value state can have:  
final int stateDrawUserName     = 0; 
final int stateAskUserQuestions = 1;
// state is currently stateDrawUserName:
int state= stateDrawUserName;

PImage bg;
PImage refresh;

int y;

int shade1;
int shade2;
int shade3;
int shade4;
int shade5;
int shade6;
int shade7;

color currentColor;
boolean typeIsRect;

static final int NUM = 2;
final TextBox[] tboxes = new TextBox[NUM];
int idx;

// ---------------------------------------------------------------------
// processing core functions 

void setup() {

  size(900, 600);

  background(255);
  bg = loadImage("test.png");
  // image(bg, 0, height-150, width, 150);

  refresh = loadImage("refresh.png");
  // image(refresh, 10, 10, 50, 50);

  frameRate(60);

  shade1 = color(#CBEBF4);
  shade2 = color( #7B8EC4);
  shade3 = color( #394C9F);
  shade4 = color( #59426E);
  shade5 = color( #72312F);
  shade6 = color(#A04647 );
  shade7 = color(#E1B9D7);
  currentColor = color(255);
  typeIsRect = true;

  instantiateBoxes();
  idx = 0;
  tboxes[idx].isFocused = true;
}

void draw() {

  switch(state) {

  case stateDrawUserName: 
    userDrawsHisName(); 
    break;  // This belongs to case and closes the section for stateDrawUserName

  case stateAskUserQuestions:
    askQuestions(); 
    break;  // This belongs to case
    //
  } // end of switch
  //
}//func 

// ----------------------------------------------------------------------
// functions called from draw 

void userDrawsHisName() {
  // user draws his / her name 
  showButtons(); 
  // eval drawing 
  if (mousePressed) {
    stroke(currentColor);
    strokeWeight(2);
    line(pmouseX, pmouseY, mouseX, mouseY);
    println("Previous mouse postion x: " + pmouseX + " y; " + 
      pmouseY + " current mouse postion x : " + mouseX  + " y " + mouseY);
  }//if
}//func 

void askQuestions() {

  background(0); 

  rectMode(CORNER);
  textAlign(LEFT);
  strokeWeight(1.5);

  for (int i = 0; i < NUM; i++) {  
    tboxes[i].display();
  }
}

void showButtons() {
  smooth();

  //Light Blue
  stroke(150);
  strokeWeight(1.2);
  fill(shade1);
  rect(100, 30, 90, 50, 2); 

  //Pale blue
  stroke(150);
  strokeWeight(1.2);
  fill(#7B8EC4);
  rect(200, 30, 90, 50, 2);

  ////////////////////////////
  //Dark Blue
  stroke(150);
  strokeWeight(1.2);
  fill(#394C9F);
  rect(300, 30, 90, 50, 2); 

  ////////////////////////////
  //purple
  stroke(150);
  strokeWeight(1.2);
  fill(#59426E); 
  rect(400, 30, 90, 50, 2); 

  ////////////////////////////
  //purply red 
  stroke(150);
  strokeWeight(1.2);
  fill(#72312F);
  rect(500, 30, 90, 50, 2); 

  ////////////////////////////
  //pale red
  stroke(150);
  strokeWeight(1.2);
  fill(#A04647);
  rect(600, 30, 90, 50, 2); 

  ////////////////////////////
  //light pink
  stroke(150);
  strokeWeight(1.2);
  fill(#E1B9D7);
  rect(700, 30, 90, 50, 2);
  //
  fill(0);
  textSize(25);
  text("Go to \nGuestbook", width-210, height-110, 200, 100);
}

// ---------------------------------------------------------------
// INPUTS 

void mousePressed() {

  // different screens get different mouse evaluation

  switch(state) {

  case stateDrawUserName: 
    // mousePressed for state where user draws his / her name 
    mousePressedForStateDrawName();
    break;  // This belongs to case and closes the section for stateDrawUserName

  case stateAskUserQuestions:
    mousePressedForStateAskUserQuestions(); 
    break;  // This belongs to case
    //
  } // end of switch
  //
}// func 

// ----------------------------------------------------------------
// called from mousePressed() 

void mousePressedForStateAskUserQuestions() {

  int i = idx = 0;

  while (i < NUM) {  
    if (tboxes[i].checkFocus()) 
      idx = i;
    i++;
  }
}//

void mousePressedForStateDrawName() {
  // Guestbook?
  float distanceToButtonGuestbook = dist(mouseX, mouseY, 719, 537); 
  if (distanceToButtonGuestbook<120) {
    state=stateAskUserQuestions;
    return; // leave thisfunction the hard way
  }//if

  //REFRESH THE BACKGROUND TO WHITE
  if ((mouseX>0) && 
    (mouseY>0) && 
    (mouseX<60) && 
    (mouseY<60))
  {
    background(255);
    currentColor=(255);
    image(bg, 0, height-150, width, 150);
    image(refresh, 10, 10, 50, 50);
  }

  //SHADE 1
  if ((mouseX>100) && (mouseY>20) && (mouseX<190) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade1);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }

  //SHADE 2
  if ((mouseX>200) && (mouseY>20) && (mouseX<290) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade2);
  }

  //SHADE 3
  if ((mouseX>300) && (mouseY>20) && (mouseX<390) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade3);
  }

  //SHADE 4
  if ((mouseX>400) && (mouseY>20) && (mouseX<490) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade4);
  }

  //SHADE 5
  if ((mouseX>500) && (mouseY>20) && (mouseX<590) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade5);
  }

  //SHADE 6
  if ((mouseX>600) && (mouseY>20) && (mouseX<690) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade6);
  }

  //SHADE 7
  if ((mouseX>700) && (mouseY>20) && (mouseX<790) && (mouseY<70))
  {
    typeIsRect = false;
    currentColor = color(shade7);
  }
}

//--------------------------------------------------------------------------
// Inputs keyboard

void keyTyped() {
  final char k = key;
  if (k == CODED | idx < 0)  return;

  final TextBox tbox = tboxes[idx];
  final int len = tbox.txt.length();

  if (k == BACKSPACE)  tbox.txt = tbox.txt.substring(0, max(0, len-1));
  else if (len >= tbox.lim)  return;
  else if (k == ENTER | k == RETURN)     tbox.txt += "\n";
  else if (k == TAB & len < tbox.lim-3)  tbox.txt += "    ";
  else if (k == DELETE)  tbox.txt = "";
  else if (k >= ' ')     tbox.txt += str(k);
}

void keyPressed() {
  if (key != CODED | idx < 0)  return;
  final int k = keyCode;

  final TextBox tbox = tboxes[idx];
  final int len = tbox.txt.length();

  if (k == LEFT)  tbox.txt = tbox.txt.substring(0, max(0, len-1));
  else if (k == RIGHT & len < tbox.lim-3)  tbox.txt += "    ";
}

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

void instantiateBoxes() {
  tboxes[0] = new TextBox(
    "Enter your name again: ", 
    50, 130, // x, y
    width - 100, 90, // w, h
    215, // lim
    0300 << 030, color(-1, 040), // textC, baseC
    color(-1, 0100), color(#FF00FF, 0200)); // bordC, slctC

  tboxes[1] = new TextBox(
    "Enter your age please:", 
    50, 310, // x, y
    width - 100, 90, // w, h
    640, // lim
    0300 << 030, color(-1, 040), // textC, baseC
    color(-1, 0100), color(#FFFF00, 0200)); // bordC, slctC
}

// ==================================================================

/* built with Studio Sketchpad: 
 *   http://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   http://studio.sketchpad.cc/sp/pad/view/ro.s0xWbQ7L2BL/rev.31
 * 
 * authors: 
 *   GoToLoop

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   http://creativecommons.org/licenses/by-sa/3.0/ 
 *
 * TextBox Writer (v2.4)
 * by  Inarts (2013/Oct)
 * mod GoToLoop
 *
 * forum.processing.org/two/discussion/423/
 * how-to-write-a-class-for-text-area-without-using-any-library
 *
 * studio.processingtogether.com/sp/pad/export/ro.9Zo$UbIWYZEDR/latest
 */

class TextBox {

  // demands rectMode(CORNER)
  final color textC, baseC, bordC, slctC;
  final short x, y, w, h, xw, yh, lim;

  boolean isFocused;
  String txt = "";
  String askText; 

  boolean blinkIsOn=false; 

  // constr 
  TextBox(String askText_, 
    int xx, int yy, 
    int ww, int hh, 
    int li, 
    color te, color ba, color bo, color se) {

    askText =  askText_;

    x = (short) xx;
    y = (short) yy;
    w = (short) ww;
    h = (short) hh;

    lim = (short) li;

    xw = (short) (xx + ww);
    yh = (short) (yy + hh);

    textC = te;
    baseC = ba;
    bordC = bo;
    slctC = se;
  } // constr 

  void display() {
    stroke(isFocused? slctC : bordC);
    fill(baseC);
    rect(x, y, w, h);

    // fill(slctC); 
    fill(isFocused? slctC : bordC);
    text (askText, x, y-21); 

    fill(textC);
    text(txt + blinkChar(), 
      x, y, w, h);

    if (frameCount%12==0)
      blinkIsOn= !blinkIsOn; // toggle
  }

  String blinkChar() {
    return isFocused && blinkIsOn ? "_" : "";
  }

  boolean checkFocus() {
    // is mouse over?
    isFocused =
      mouseX > x & 
      mouseX < xw & 
      mouseY > y & 
      mouseY < yh;

    return isFocused;
  }
} // class 
//