call a method from a Rectangle class in the main class

I am trying to retrieve a method from the Rectangle Class in the Main Class, but it is not working. The goal would be that the user clicks on the Rectangle button and then a Rectangle appears. However, the rectangle must not disappear again. Additionally, the user should be able to change the properties (like size and position).

I am not sure if I should try the callback function? I would really appreciate your help!

Thanks a lot in advance!

import controlP5.*;
import de.bezier.data.sql.*;

Rectangle rect;
Button rc;


int posX = 50; 
int posY = 60; 
int w = 100;
int h = 150;

//Rectangle r = new Rectangle(posX, posY, w, h);

public void drawButton() {
   fill(230, 230, 255);
   stroke(0);
   rect(50, 60, 100, 150);
   
  

}
public boolean isMouseInsideRectangleButton() {
   return mouseX > posX && mouseX < posX + w
           && mouseY > posY && mouseY < posY + h;
}


ControlP5 cp5;

SQLite db;

void setup(){
  size(1000, 1000);
  //background(255);
  PFont font = createFont("Calibri", 15);
  
  rect = new Rectangle(250, 500, 100, 100);

  
  cp5 = new ControlP5(this);
  
  cp5.addButton("Save").
  setPosition(770, 20).
  setSize(100, 30).
  setFont(font).
  setColorBackground(color(52, 55, 76));
  
  cp5.addButton("erase").
  setPosition(890, 20).
  setSize(100, 30).
  setFont(font).
  setColorBackground(color(52, 55, 76));
  
  cp5.addButton("Upload").
  setPosition(650, 20).
  setSize(100, 30).
  setFont(font).
  setColorBackground(color(52, 55, 76));
  
  
  rc = cp5.addButton("Rectangle").
  setPosition(5,4).
  setSize(100, 20).
  setFont(font).
  setColorBackground(color(52, 55, 76));
   
   rc.onRelease(new CallbackListener() {
     public void controlEvent(CallbackEvent theEvent)
     
     {
       rect.draw();
     }
     
   
}
   );
   
}
  
  
  
  
  //cp5.addButton("Triangle").
  //setPosition(5,42).
  //setSize(100, 20).
  //setFont(font).
  //setColorBackground(color(52, 55, 76));
  
  //cp5.addButton("Ellipse").
  //setPosition(165, 4).
  //setSize(100, 20).
  //setFont(font).
  //setColorBackground(color(52, 55, 76));
  
  //cp5.addButton("circle").
  //setPosition(165,42).
  //setSize(100, 20).
  //setFont(font).
  //setColorBackground(color(52, 55, 76));







void draw(){
  
  background(255);
  fill(246, 246, 246);
  stroke(246, 246, 246);
  rect(0,0, 1000, 80);
  
 

  
 


//public void mousePressed() {
//  if (isMouseInsideRectangleButton()) {
//      //r.setDrawColorful(!r.getDrawColorful());
//      r.draw();
//  }
  
}


public class Rectangle
{
  private int posX, posY, w, h;
  
  
  private boolean drawColorful = false;
  
  
  //constructor
  
  public Rectangle(int posX, int posY, int w, int h) {
    this.posX = posX;
    this.posY = posY;
    this.w = w;
    this.h = h;
  
}

public boolean getDrawColoful(){
  return this.drawColorful;
}

public void setDrawColorful(boolean flag) {
    this.drawColorful = flag;
  }
  
  
  public void setPosX(int posX){
    this.posX = posX;
  }
  
  public int getPosX(){
    return posX;
  }
  
   public void setPosY(int posY){
    this.posY = posY;
  }
  
  public int getPosY(){
    return posY;
  }
  
   public void setW(int w){
    this.w = w;
  }
  
  public int getW() {
    return w;
  }
  
  public void setH(int h) {
    this.h = h;
  }
  
  public int getH() {
    return h;
  }

    
  
  
  
  

public void draw() {

 if (this.drawColorful) {
      fill(255,255,0);
      stroke(0,0,255);
      
      
      
    } else {
      fill(255,255,255);
      stroke(0,0,0);
    }

rect(posX, posY, w, h) ;




}

}

Answer

It is in fact working (the rect.draw() function fires when you click the button). You can verify this by placing a print statement in the callback function:

rc.onRelease(new CallbackListener() {
  public void controlEvent(CallbackEvent theEvent)
  {
    println("rect.draw() fired!");
    rect.draw();
  }   
});

Your problem is that the rectangle is only drawn for that single instant when the button is clicked. Your main draw() loop keeps looping without any call to rect.draw() so you never see it again.

There are many ways you could restructure your code to keep the rectangle on screen. One option would be to not instantiate the rectangle until the button is clicked.

Then, in your main draw loop you can check to see if the rectangle exists and if so draw it to the screen. Since this will happen every loop, you will always see it on screen (once it’s created), and you can update the dimensions of the rectangle and see it update on screen.

Here’s an abbreviated example to show what I mean (Rectangle class not shown):

import controlP5.*;

Rectangle rect; // rect begins as null
Button rc;

ControlP5 cp5;

void setup(){
  size(1000, 1000);

  PFont font = createFont("Calibri", 15);
  
  // don't create the rectangle here!
  //rect = new Rectangle(250, 500, 100, 100);

  cp5 = new ControlP5(this);
 
  // ... setup other controls here
  
  rc = cp5.addButton("Rectangle").
  setPosition(5,4).
  setSize(100, 20).
  setFont(font).
  setColorBackground(color(52, 55, 76));
   
  rc.onRelease(new CallbackListener() {
    public void controlEvent(CallbackEvent theEvent)
    {
      // only create the rectangle when the button is clicked
      rect = new Rectangle(250, 500, 100, 100);
    }
  });

}
  
void draw(){
  background(255);
  fill(246, 246, 246);
  stroke(246, 246, 246);
  rect(0,0, 1000, 80);
  
  // if the rect exists, draw it on the screen
  if(rect != null) {
     rect.draw(); 
  }
}