Processing Resize Window and have buttons dynamically take up available space

Question

I am using processing to display a number of buttons with the ControlP5 API. At the moment I can get the buttons to display in the window of the sketch but when I resize the frame the button positions do not update, Is there a simple way to redraw the buttons in order to re-position them automatically when a window is resized or am I wasting my time?

Here is the code:

package controlp5userinterface;

import java.awt.event.*;
import java.util.ArrayList;
import processing.core.PApplet;
import processing.core.PImage;
import controlP5.*;


public class ControlP5UserInterface extends PApplet {

ControlP5 controlP5;
PImage bg;
Controller b;

@SuppressWarnings("deprecation")
public void setup() {
    size(1000,1000);
    smooth();

    if (frame != null) {
        frame.setResizable(true);
    }

    bg = loadImage("StockBackground1.jpg");

    /*
     * 
     * BEGIN CONTROL P5 MENU GENERATION
     *  buttons will spread out to fit available screen space
     */

    controlP5 = new ControlP5(this);
    ArrayList<Button> buttons = new ArrayList<Button>();
    Group MainMenu = controlP5.addGroup("MainMenu");
    MainMenu.setSize(100, 100);
    //controlP5.addGroup("MainMenu");
    controlP5.addButton("SIMON").setGroup("MainMenu").setSize(80, 50);

    controlP5.addButton("ACN").setGroup("MainMenu").setSize(80, 50);
    controlP5.addButton("GOOG").setGroup("MainMenu").setSize(80, 50);
    //buttons.add(controlP5.addButton("AAPL").setGroup("MainMenu"));
    //buttons.add(controlP5.addButton("ACN").setGroup("MainMenu"));
    //controlP5.getGroup("MainMenu").setSize(300, 300);

}

/*
 * 
 * SCREEN RESIZE CONTROLLER HERE??(non-Javadoc)
 * @see processing.core.PApplet#draw()
 * 
 */

public void draw() {
    background(0);  // background black
    controlP5.getGroup("MainMenu").update();

}

public int sketchWidth(){
    return displayWidth;
}

public int sketchHeight(){
    return displayHeight;
}

public static void main(String _args[]) {
    PApplet.main(new String[] { controlp5userinterface.ControlP5UserInterface.class.getName() });
}

}

You need to draw relative to the size to get things resized along the frame. eg: `setSize(width*0.02, height*0.13);` — v.k., Feb 19 '15 at 12:55
I have tried that but since all of the setup takes place inside the setup() method it is only called once, and trying to update the sizes in the draw() loop does not seem to work — Simon Hillary, Feb 24 '15 at 17:01

score 2 · Answer 1 · answered Sep 28 '15 at 17:28

2

I had a similar problem and though I am quite new to Processing I find a way to make it work. What I did to make it work was that I put my GUI elements into a controlGroup and before updating it (which I did using my custom function setGUI()) due to a change of a window size I hid the controlGroup using function hide() and after the update I displayed it again using show() function. Hopefully that can somehow help you.

answered Sep 28 '15 at 17:28

KristinaZ

41
4

in processing you can use frame.setSize(x,y) to resize your frame. It works great. found the solution here https://stackoverflow.com/a/396306/1141395 – Alex Cio Aug 10 '22 at 20:08

score 0 · Answer 2 · answered Aug 10 '22 at 20:21

I would always outsource values like button width and height to variables in the header and using numbers like @1690199 mentioned in his comment of your question:

float buttonWidth = 0.02;
float buttonHeight = 0.13;

Button button0, button1, button2, button3;

boolean didSizeChange = false;

and then update your values inside the draw() function. Maybe you have to save the single button inside another variable to be able to update it later on, only if the screen size changed.

if( didSizeChange == true ){
    buttonP0 = controlP5.addButton("P0", 1, 490, 5, 20, 20);
    buttonP0.setColorBackground(gray_);
}

Found the example with the buttons inside this repo

https://java.hotexamples.com/examples/processing.data/ControlP5/addButton/java-controlp5-addbutton-method-examples.html

The buttons got defined within this class

https://github.com/ranqingfa/Firmware/blob/master/GUI/EvvGC_GUI_v0_4/EvvGC_GUI_v0_4.pde

Processing Resize Window and have buttons dynamically take up available space

2 Answers2