We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Syntax Questions › how to change button position in controlP5
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
how to change button position in controlP5 (Read 919 times)
adnil
how to change button position in controlP5
Nov 17th, 2009, 2:33pm  
hi,

Does somebody know how to change the positions of buttons in ControlP5 after the buttons are set up.
I have tried this bit of code but it doesn't work and i don't know why.
Thanks. (sorry for posting in the libraries bit before)

ControlP5 controlP5;
controlP5.Button tower, tryOwn, about, makeUp;

int colorActive =100;
int greyLight = 0;
int buttonPosX ;
int buttonPoxY;

void setup()
{
size(500, 500);
buttonPosX =5;   ///marginXleft+500+65;
buttonPoxY = height -60;

controlP5 = new ControlP5(this);
controlP5.Button tower  = controlP5.addButton("Load a Story",1,buttonPosX,buttonPoxY,80,20);
tower.setColorBackground(greyLight);
tower.setColorActive(colorActive);
tower.setId(100);

controlP5.Button tryOwn  = controlP5.addButton("Type Words",2,buttonPosX+90,buttonPoxY,80,20);
tryOwn.setColorBackground(greyLight);
tryOwn.setColorActive(colorActive);
tryOwn.setId(200);  

controlP5.Button about  = controlP5.addButton("Background",3,buttonPosX+(90*2),buttonPoxY,80,20);
about.setColorBackground(greyLight);
//about.setColorForeground (grey );
about.setColorActive(colorActive);
about.setId(300);  

controlP5.Button makeUp  = controlP5.addButton("About the Visual",4,buttonPosX+(90*3),buttonPoxY,85,20);
makeUp.setColorBackground(greyLight);
makeUp.setColorActive(colorActive);
makeUp.setId(400);  


}
void controlEvent(ControlEvent theEvent)
{
//MAIN NAV BUTTONS
if( theEvent.controller().id() == 100)
{
  println("controller : "+theEvent.controller().id());
  moveButtons();
}
else if( theEvent.controller().id() == 200)
{
  println("controller : "+theEvent.controller().id());
 moveButtons();
}
else if( theEvent.controller().id() == 300)
{
  println("controller : "+theEvent.controller().id());
 moveButtons();
}
else if( theEvent.controller().id() == 400)
{
  println("controller : "+theEvent.controller().id());
  moveButtons();

}
}

void moveButtons()
{
// buttonPosX =100;  
// buttonPoxY = height -60;
// tower.setPosition(buttonPosX, buttonPoxY);  

tower.position().x = 10;
tower.position().y = 10;
}
Back to top
 
 
blindfish
Re: how to change button position in controlP5
Reply #1 - Nov 17th, 2009, 3:43pm  
You might want to add a draw() loop if you haven't already - you'll see that your buttons will become a little more interactive (e.g. rollover effects).

As for moving a button, check the controlP5 reference.  There's a handy setPosition(x,y) method that will do what you want...

The position() method you used doesn't set the position but instead returns the current position of the control...
Back to top
 
Where is the what if the what is in why?
 
adnil
Re: how to change button position in controlP5
Reply #2 - Nov 18th, 2009, 12:06pm  
I tried that before but commented it out in the moveButtons() code. It didn't work either. I thought the controlP5 buttons don't need any code written in draw()?
So tried to put this into draw or the moveButtons() function and neither of them works.
buttonPosX =100;  
buttonPoxY = height -60;
tower.setPosition(buttonPosX, buttonPoxY);

It just says that:

ControlP5 0.3.14 infos, comments, questions at http://www.sojamo.de/libraries/controlP5
ERROR. an error occured while forwarding a Controller value
to a method in your program. please check your code for any
possible errors that might occur in this method .

Is there a specific point in the code where i have to call setPosition()?
Back to top
 
 
blindfish
Re: how to change button position in controlP5
Reply #3 - Nov 18th, 2009, 2:59pm  
OK - I've figured out your problem.  It's threefold.

First:

Quote:
import controlP5.*;
ControlP5 controlP5;
controlP5.Button tower, tryOwn, about, makeUp;
//<snip>
void setup() {
//<snip>
controlP5.Button tower  = controlP5.addButton("Load a Story",1,buttonPosX,buttonPoxY,80,20);


You declare your Buttons globally, but then declare and instantiate them locally in setup(), meaning that to all intents and purposes they are local to setup.  i.e. in setup() you should only refer to them by the declared name:

Code:
void setup() {
//<snip>
tower  = controlP5.addButton("Load a Story",1,buttonPosX,buttonPoxY,80,20);


Next: you omit draw().  It's more important than you think.  If you want to give the impression that your button has moved you'll need to clear the background each frame so add the following after setup:

Code:
void draw() {
  background(255);
}


Finally: it looks like you 'move' your button to the same position as one of the other buttons, which just makes it disappear: an issue to do with the order things have been registered to draw when the buttons were set up.  You may need to do more work, e.g. hiding buttons as necessary.  As I said before position() isn't intended to move things so remove this from your code...
Back to top
 
Where is the what if the what is in why?
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›