Help with clickable "buttons"?

junefish

As part of a larger project I'm trying to add a clickable text. The way I'm doing it is to write the text normally and then to say if the mouse is pressed when mouseX is between (coordinates) and mouseY is between coordinates, then [display a class].

Here's the code (edited for length--I don't think I've cut out anything that would be affecting the problem but there might be some stray variables):

    //initialise strings & variables

    float maxW, lastX, barW, barH;
    float x1, x2, y1;
    boolean overClick = false;
    boolean overAfrica = false;

    //define set colors
    color purple = color(111, 10, 255);
    color black = color(0);
    color red = color(200, 0, 0);
    color grey = color(100);

    void setup() {
      //create and setup canvas
      size(1300, 478);
      noStroke();
      smooth();
      noLoop();

      //define variables
      maxW = width/(4+data.length);
      lastX = 0;
      barW = maxW*0.4;
    } //setup()

    void draw() {
      background(white);

      //add menu options
      String regionOption = "Click on a region to see its data, or";
      String fullGraphOption = "Click here for complete graph of country data";
      textSize(16);
      fill(black);
      textAlign(LEFT, TOP);
      text(regionOption, 10, 325);
      text(fullGraphOption, 10, 350);
      noFill();
      stroke(black);
      rect(8, 348, 73, 15);//to define clickable regions
      rect(565, 117, 275, 315);//define clickable regions

      legend();
    } //draw()

    void update(int locx, int locy) {
      if ( overRegion(8, 348, 73, 15) ) {
        overClick = true;
      } else if ( overRegion(565, 117, 275, 315) ) {
        overClick = false;
        overAfrica = true;
      } else {
        overAfrica = overClick = false;
      }
    }

    void mousePressed() {
      if (overClick) {
        text("You have just clicked to see all country data", 100, 200);
      }
      if (overAfrica) {
        text("You have just clicked on Africa", 100, 200);
      }
    }

    boolean overRegion(int locx, int locy, int locw, int loch)  {
      if (mouseX >= locx && mouseX <= locx+locw && 
          mouseY >= locy && mouseY <= locy+loch) {
        return true;
      } else {
        return false;
      }
    } //overRegion()

GoToLoop

Your example isn't runnable! Anyways, i've got an example online somewhat similar:

http://studio.processingtogether.com/sp/pad/export/ro.9eDRvB4LRmLrr/latest

Chrisir

these lines are a bit confusing (especially line 8; this works of course):

void update(int locx, int locy) {
  if ( overRegion(8, 348, 73, 15) ) {
    overClick = true;
  } else if ( overRegion(565, 117, 275, 315) ) {
    overClick = false;
    overAfrica = true;
  } else {
    overAfrica = overClick = false;
  }
}

anyway

• Don't use noLoop() when using mouse or having any animation / activity / interactivity . These functionality relies on the permanent looping of draw().

• also no use to use text() in mousePressed, better handle a var message1 there that gets drawn with text() on the screen in draw(). A text() in mousePressed just flashes briefly.

• you must call update() of course to run it. You forgot that. Functions only run when you call them (except the build-in functions like mousePressed()).

here...

//initialise strings & variables

float maxW, lastX, barW, barH;
float x1, x2, y1;
boolean overClick = false;
boolean overAfrica = false;

//define set colors
color purple = color(111, 10, 255);
color black = color(0);
color red = color(200, 0, 0);
color grey = color(100);

String message1="";

void setup() {
  //create and setup canvas
  size(1300, 478);
  noStroke();
  smooth();
  //noLoop();

  //define variables
  //maxW = width/(4+data.length);
  lastX = 0;
  barW = maxW*0.4;
} //setup()

void draw() {
  background(255);

  //add menu options
  String regionOption = "Click on a region to see its data, or";
  String fullGraphOption = "Click here for complete graph of country data";
  textSize(16);
  fill(black);
  textAlign(LEFT, TOP);
  text(regionOption, 10, 325);
  text(fullGraphOption, 10, 350);

  noFill();
  stroke(black);
  rect(8, 348, 273, 15);//to define clickable regions
  rect(565, 117, 275, 315);//define clickable regions

  fill(0);
  text(message1, 20, 20);
  //legend();
} //draw()

void update() {
  overClick = false;
  overAfrica = false;
  if ( overRegion(8, 348, 273, 15) ) {
    overClick = true;
  } 
  else if ( overRegion(565, 117, 275, 315) ) {
    overAfrica = true;
  } 
  println (overClick + " and "+overAfrica);
}

void mousePressed() {
  update();
  if (overClick) {
    //text("You have just clicked to see all country data", 100, 200);
    message1="You have just clicked to see all country data";
  }
  if (overAfrica) {
    //text("You have just clicked on Africa", 100, 200);
    message1="You have just clicked on Africa";
  }
}

boolean overRegion(int locx, int locy, int locw, int loch) {
  if (mouseX >= locx && mouseX <= locx+locw && 
    mouseY >= locy && mouseY <= locy+loch) {
    return true;
  } 
  else {
    return false;
  }
} //overRegion()

Chrisir

please ask again if you need more help...

junefish

Thanks so much, this really helps!

Chrisir

that's great to hear!