CODEWITHSUNDEEP
arduinoprocessing
noobie
noobie

Reputation: 361

Making a button inside of a button in Processing IDE

I want the "pick_one" and "pick_all" buttons to be inside another general button (like a file - or a new page in the interface) called "configuration" button. I've tried this code below but I get unexpected token: void error.

Is there a way to put the buttons inside of another button?

import controlP5.*; //import ControlP5 library
import processing.serial.*;

Serial port;

ControlP5 cp5; //create ControlP5 object
PFont font;

void setup(){ //Same as setup in arduino
  
  size(900, 900);                         
  port = new Serial(this, "COM4", 9600);   //Change this to your port
  
  cp5 = new ControlP5(this);
  
  font = createFont ("Georgia Bold", 20);
  
  cp5.addButton("PICK_ALL")  //The button
    .setPosition(100, 100)  //x and y coordinates of upper left corner of button
    .setSize(160, 150)      //(width, height)
    .setFont(font)
  ;     
  
  cp5.addButton("PICK_ONE")  //The button
    .setPosition(100, 400)  //x and y coordinates of upper left corner of button
    .setSize(160, 150)      //(width, height)
    .setFont(font) 
  ;      
  
    cp5.addButton("CONFIGURATION")  //The button
    .setPosition(100, 400)  //x and y coordinates of upper left corner of button
    .setSize(160, 150)      //(width, height)
    .setFont(font) 
  ;      
}

void draw(){  //Same as loop in arduino

  background(150, 0 , 150); //Background colour of window (r, g, b) or (0 to 255)
    
}       
void CONFIGURATION() {

void PICK_ALL(){
  
  port.write('t')     
}

void PICK_ONE(){
  
  port.write('l');
  
}}

Upvotes: 2

Views: 133

Answers (1)

Cadin
Cadin

Reputation: 4649

Error:
It looks like you are nesting the button click handler functions. These are the actions that get triggered when your buttons are clicked. They don't control the layout or nesting of the buttons on screen.

Also, nested functions are not allowed in Processing, which is why you're getting the error.

Make sure the braces for your CONFIGURATION function don't contain any other functions:

void CONFIGURATION() {
} // close this function before starting any others

void PICK_ALL(){
  port.write('t')     
}

void PICK_ONE(){
  port.write('l');
}

Overall problem:
What would it mean to have a button inside another button? I'm not sure I understand what you're trying to achieve.

I think you might be looking for something like Groups or Tabs, which both allow you to group multiple controls together.

For your project that might look something like this:

  Group configGroup = cp5.addGroup("CONFIGURATION")
    .setPosition(100,100)
    .setBackgroundHeight(400)
    .setWidth(180)
    .setBackgroundColor(color(255,50))
  ;
  
  cp5.addButton("PICK_ALL")  // The button
    .setPosition(10, 10)     // x and y relative to the group
    .setSize(160, 150)       // (width, height)
    .setFont(font)
    .setGroup(configGroup)   // add it to the group
  ;     
  
  
  cp5.addButton("PICK_ONE")  // The button
    .setPosition(10, 200)    // x and y relative to the group
    .setSize(160, 150)       // (width, height)
    .setFont(font) 
    .setGroup(configGroup)   // add it to the group
  ;

You can click the group's title bar to hide and show the contents.
Note that the positions of the buttons are now relative to the group container.

Upvotes: 2

Related Questions