Creating a Next Page button

squire

hi,Is there anyway to create a multi paged application in processing...like an application with a next page button where the user can click and move to the next page.Sort of like the hyperlink of web pages..Please help

GoToLoop

AFAIK, such GUIs can be made in any programming language! ;))
You just need to set a variable apart to keep track which page is currently active.
And of course, take diff. decisions based on it! :P

As for starts, take a look at this post below for something similar to what you want:
http://forum.processing.org/two/discussion/423/how-to-write-a-class-for-text-area-without-using-any-library

And here to test it online:
http://studio.processingtogether.com/sp/pad/export/ro.9Zo$UbIWYZEDR/latest

squire

@GoToLoop ....i don't quite get it ,this example in the link is about text boxes.I am not a really experienced programmer so i don't see the correlation.....Plus you said i should set a variable which will track active page.In processing , what is the active page ,there is one setup() and one draw().how do i make duplicates of these.Please be patient with me i know it might sound a bit stupid :) ....please could you just show me a snippet which has at least two pages where a user can click to the next...please.

GoToLoop

...could you just show me a snippet which has at least two pages where a user can click to the next...

I've got none! b-(

... what is the active page...

There's only 1. Although we can also make off-canvas w/ PGraphics. But you won't need such scheme.

But what makes a "page" diff. from each other is the content you display.
So for each value of "page", you draw a diff. GUI and check for diff. buttons and textboxes! [..]

GoToLoop

Some online examples on buttons: :-j
http://studio.processingtogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx/latest
http://studio.processingtogether.com/sp/pad/export/ro.9vAkI4JDuLs8s/latest

squire

@GoToLoop@calsin is there a method like clearScreen() to clean every thing from the screen and start the drawings for the next page?.I tried using background inside mousePressed() for specific coordinates of mouseX and mouseY to sort of create the Next Page button but it doesn't work

GoToLoop

Function background() is the common procedure to clear whole canvas! /:)
You just need to render the screen w/ a GUI corresponding to a "page" sorta variable! [-(

squire

@GotoLoop I am sorry, i don't quite get the second sentence. I tried something like this but it does not work

//i expect something like to wipe everything off and draw just a square on "mousePressed()"

void mousePressed() { if(((mouseX>20)&&(mouseX<60)) &&((mouseY>30)&&(mouseY<90))) { background(255); rect(20,20,60,60); }

GoToLoop

I've had no choice but implement a model to show ya! :(|)

You can check it online below:
http://Studio.ProcessingTogether.com/sp/pad/export/ro.9eDRvB4LRmLrr

Any doubts about the code, don't fret to ask here! ^:)^

/** 
 * Multi Page Buttons (v1.7)
 * by GoToLoop (2013/Oct)
 *
 * Forum.Processing.org/two/discussion/558/creating-a-next-page-button#Item_8
 * Studio.ProcessingTogether.com/sp/pad/export/ro.9eDRvB4LRmLrr
 */

static final int MAX = 2, GAP = 50, DIM = 120, RAD = DIM >> 1;
int page, cx, cy;

Button back, next;

void setup() {
  size(600, 400);

  noLoop();
  smooth();

  rectMode(CORNER);
  ellipseMode(CENTER);
  textAlign(CENTER, CENTER);

  stroke(0);
  strokeWeight(1.5);

  cx = width  >> 1;
  cy = height >> 1;

  back = new Button("BACK", GAP, height - Button.H - GAP);
  next = new Button("NEXT", width - Button.W - GAP, height - Button.H - GAP);
}

void draw() {
  background(0300);

  textSize(0100);
  fill(Button.TXTC);
  text("Page #" + page, cx, cy);

  textSize(Button.TXTSZ);
  if (page > 0)    back.display();
  if (page < MAX)  next.display();

  method("page" + page); // Works on Java Mode only!
  //pageSelector();        // Workaround for PJS. But works on Java Mode as well!
}

void mousePressed() {
  if      (page > 0   && back.isHovering)  --page;
  else if (page < MAX && next.isHovering)  ++page;

  redraw();
}

void mouseMoved() {
  back.isInside();
  next.isInside();

  redraw();
}

void page0() {
  fill(#FF00FF);
  ellipse(cx, GAP*2, DIM, DIM);
}

void page1() {
  fill(#FFFF00);
  rect(cx - RAD, GAP*2 - RAD, DIM, DIM);
}

void page2() {
  fill(#008000);
  triangle(cx, GAP*2 - RAD, cx - RAD, GAP*2 + RAD, cx + RAD, GAP*2 + RAD);
}

void pageSelector() { // Replaces method("") for PJS
  switch(page) {
  case 0: 
    page0();
    break;

  case 1: 
    page1();
    break;

  case 2: 
    page2();
  }
}

class Button {
  static final int W = 60, H = 40, TXTSZ = 020;
  static final color BTNC = #00A0A0, HOVC = #00FFFF, TXTC = 0;

  final String label;
  final int x, y, xW, yH;

  boolean isHovering;

  Button(String txt, int xx, int yy) {
    label = txt;

    x = xx;
    y = yy;

    xW = xx + W;
    yH = yy + H;
  }

  void display() {
    fill(isHovering? HOVC : BTNC);
    rect(x, y, W, H);

    fill(TXTC);
    text(label, x + W/2, y + H/2);
  }

  boolean isInside() {
    return isHovering = mouseX > x & mouseX < xW & mouseY > y & mouseY < yH;
  }
}

squire

@GoToLoop I finally get it...thanks a lot for your patience ,really thanks :)!

hanakimchi

what does this mean?

final static int MAX = 2, GAP = 50, DIM = 120, RAD = DIM >> 1;

 method("page" + page); // Java only!
  //pageSelector();        // For JS!
}

i dont understand what the case is for: :<

void pageSelector() {
  switch(page) {
  case 0:
    page0();
    break;

  case 1:
    page1();
    break;

  case 2:
    page2();
  }
}

** can you also let me understand how did you make the class?**

sorry im really noob at this.. and im making a maze game for our project... the concept is like The MAZE game in winterrowd.com

PhiLho

I let GoToLoop to explain why he uses >> 1...
Otherwise, it just creates a number of constants, numeric values with explicit (more or less) names.

case: see the Reference page on the switch statement.

GoToLoop

Hello @hanakimchi! Here comes the 1st part: :D

static final int MAX = 2, GAP = 50, DIM = 120, RAD = DIM >> 1;

Those are constant fields, representing values that are set once & can't be changed later.
In Java convention, they gotta be fully capitalized!
And if composed by more than 1 word, separated by underlines like this: MAX_INT, TWO_PI, etc.

The >> 1 is the same as an integer / 2: http://processing.org/reference/rightshift.html
Highest performance & gr8 at enforcing an integer division in JS Mode!

GoToLoop

method("page" + page); // Java only!

It's an undocumented Processing function which allows invoking a method as a String name!
It uses a "hackish" thing called reflection. There's also thread("") which does the same;
but asynchronously executes it by instantiating another Thread on-the-fly!

pageSelector(); // For JS!

Since JS Mode doesn't implement neither method("") nor thread(""),
I had to emulate the Java Mode's behavior via switch/case in a separate function:
http://processing.org/reference/switch.html

Actually, JS can emulate method("") via its "hackish" eval(""), call(), etc. functions:
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

However I decided not to in order to keep it more in line w/ Java Mode!

GoToLoop

Can you also let me understand how did you make the class?

You gotta be more specific in which part within Button class you don't understand well! 8-X

GameParticles

For GoToLoop

Can you talk more about method( ); ? I'm not sure to have understood and I can't find anything on the subject...

GoToLoop

Hey @GameParticles! In P3, they've finally decided to turn thread() an official API:
https://Processing.org/reference/thread_.html

Though method() is still "hidden" from public, its usage is the same as thread()'s, but it's synchronous instead. It doesn't create a separate Thread in order to invoke the method's name specified by the passed String parameter. :-B