On window resize, variable current value evaporates

Processing Coding Questions
1

My project will involve multiple text input boxes which must move and adjust position dynamically when I resize the window.

This bare-to-basics code only includes two boxes, when the mouse is over a box, the box is highlighted in Red.

If I were to initialise the class in the void setup() as is the norm, it all works, but naturally the boxes will be static, they will not adjust position. So I tried initialising the class in draw(), it won’t work properly as the highlighted box is redrawn and it must keep the current highlighted condition ON whilst the window is resized.

I also tried using this “registerMethod” that Quarks posted a while ago to detect the window resize, and execute something. It almost works, but when the window is resized, and the box is currently highlighted, the highlight in red is lost. In other words, the value of the Boolean boxStroke variable reverts to default (false), highlight OFF.

I also tried a similar test using text input (variable=variable + key), and unfortunately the String variable holding the text also loses value when resizing the screen, i.e. the text disappears.

Is there a way to solve this?

Many thanks.

Test myTest, myTest2 ;

int wid, high;


void setup() {

  size(600, 400); 
  surface.setResizable(true);
  registerMethod("pre", this);
}


void pre() {//Detect window resize

  if (wid != width || high != height) {
    wid = width;
    high = height;

    myTest = new Test(wid*2/3-30, high*1/3, 60, 20);
    myTest2 = new Test(wid*1/3-30, high*1/3, 60, 20);
  }
}


void draw() {

  background(255);

  myTest.display();
  myTest2.display();

}

class Test {

  String digits = "";

  int x; 
  int y;
  int w;
  int h;

  boolean boxStroke=false;

  Test(int x, int y, int w, int h ) {

    this.x=x;  
    this.y=y; 
    this.w=w; 
    this.h=h;
  }



  void display() {

    stroke(0);
    strokeWeight(1);
    noFill();

    if (boxStroke) {
      stroke(255, 0, 0);
      strokeWeight(2);
    }

    rect(x, y, w, h);
    
  }//end display




  void pressMouse() {

    if (mouseX<x+w && mouseX>x && mouseY>y && mouseY<y+h) {  

      boxStroke=true;
    } else {
      boxStroke=false;
    }
  }//end presMouse
}//end Class


void mousePressed() {
  myTest.pressMouse();
  myTest2.pressMouse();
}
1 Like
2

Just make all displays dynamic. Instead of hard coding in values when you want items to move around the screen when resized, use ratios. Like this:

Test myTest, myTest2 ;

void setup() {

  size(600, 400); 
  surface.setResizable(true);

  myTest = new Test(2/3f,1/3f, 60, 20);
  myTest2 = new Test(1/3f, 1/3f, 60, 20);
}

void draw() {

  background(255);

  myTest.display();
  myTest2.display();
}

class Test {

  String digits = "";

  float xOffset; 
  float yOffset;
  int w;
  int h;

  boolean boxStroke=false;

  Test(float x, float y, int w, int h ) {

    this.xOffset=x;  
    this.yOffset=y; 
    this.w=w; 
    this.h=h;
  }



  void display() {

    stroke(0);
    strokeWeight(1);
    noFill();

    if (boxStroke) {
      stroke(255, 0, 0);
      strokeWeight(2);
    }

    rect(width*xOffset, height*yOffset, 60, 20);
  }//end display




  void pressMouse() {
    if (mouseX<xOffset*width+w && mouseX>xOffset*width && mouseY>yOffset*height && mouseY<yOffset*height+h) {  
      boxStroke=true;
    } else {
      boxStroke=false;
    }
  }//end presMouse
}//end Class


void mousePressed() {
  myTest.pressMouse();
  myTest2.pressMouse();
}

Notice how in your example I took out the hard coded x and y values you defined when initializing the class and changed them to ratios that now scale with the screen using the current width and height for each display calculation.

2 Likes
3

Wonderful answer. Yes it now works. Thank you so much for taking the time to help.
Edward

1 Like
4

If you have time, looking at your changes again, I notice in the setup() 2/3f,1/3f.

Does the “f” refer to the float as defined in the class? Does it in effect mean 2/3 of xOffset, 1/3 of yOffset? Ooops, I’ve just realised f is for the floating point, sorry.

Many thanks.

1 Like
5

No problem, yep the f is for floating point because otherwise it would treat it as integer division and truncate 2/3 and 1/3 to 0.

1 Like
6

PDE’s pre-processor suffixes any non-integer literal value (w/o a suffix) w/ f already. :face_with_monocle:

And Java considers any literal value w/ a . or an e in it as non-integer: :coffee:

So 2/3f can be typed as 2.0/3, 2/3.0, 2/3., 2./3, 2/3e0, 2e0/3, etc. They all work the same! :crazy_face:

1 Like
7

Thank you, yes, I’m making a note of this for the future. The only thing I don’t understand is the “e” with a lower case, as in 2e0 or 2/3e0. I guess it means exponential, when you are likely to have a long line of decimal digits ins the result?

1 Like
8

Indeed. println(1000. == 1e3, .001 == 1e-3); :wink: