controlP5 depth

remcomagi..

in Contributed Library Questions • 1 years ago

Hi All,

I have been using the controlP5 library for a little while now, and I think it is a great addition to Processing.
However, I have stumbled upon a problem that I haven't been able to deal with yet.

I have placed two dropdownlists above each other. Whenever I click the top dropdownlist, it disappears behind the lower one. This happens because I initiate the upper one first and the lower one second. When I switch this is ok.

The problem is that I make the position of the second dropdownlist dependent on the first dropdownlist, so I have to initialize this first. The question is:

Is there a way in controlP5 to set the order in which objects are drawn?

This would make it possible to place a clicked element always on top.

Any help/advice or even answers are greatly appreciated!

Replies(6)

jeff_g

Re: controlP5 depth

1 year ago

Sure, define these as two separate ControlP5 controls and

setAutoDraw(false)
Then draw the controls in the order you wish.
control1.draw()
control2.draw()

That way you can initialize them however you want and draw them in whatever order you want.

remcomagi..

Re: controlP5 depth

1 year ago

Thank you very much Jeff. Greatly appreciated!

remcomagi..

Re: controlP5 depth

1 year ago

Coming back to this again.
The solution proposed does not seem to work.

I have placed two dropdownlists in one group. When I redraw the lists manually, they are placed outside the groups.

Guess this could be a nice addition for a next release, to give elements a Z-index, such that you can layer them in any order.

My solution for now is to initialize the elements in the order I want and then place them where I want on the screen using
element.setPosition( int x, int y );

jeff_g

Re: controlP5 depth

1 year ago

Could you provide a small example?

remcomagi..

Re: controlP5 depth

1 year ago

This an example of the issues I encounter:

import controlP5.*;

ControlP5 gui;
DropdownList list1;
DropdownList list2;
DropdownList list3;

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

/** Initialize the controlP5 GUI and attach it to this sketch **/
gui = new ControlP5(this);

list1    = gui.addDropdownList("Upper List", 10, height/4, width-20, 100);
list2    = gui.addDropdownList("Middle List", 10, height/2, width-20, 100);
list3    = gui.addDropdownList("Bottom List", 10, height-(height/4), width-20, 100);

for( int i=0; i<10; i++ )
{
    list1.addItem("Item "+i, i);
    list2.addItem("Item "+i, i);
    list3.addItem("Item "+i, i);
}
}

void draw()
{
background(0);
}

As you run this example, you will see that when you click the top list, it is behind the other lists, making some elements impossible (or very difficult) to select.

When you reverse the order in which you initiate the lists, this 'solves' the problem.

import controlP5.*;

ControlP5 gui;
DropdownList list1;
DropdownList list2;
DropdownList list3;

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

/** Initialize the controlP5 GUI and attach it to this sketch **/
gui = new ControlP5(this);

list3    = gui.addDropdownList("Bottom List", 10, height-(height/4), width-20, 100);
list2    = gui.addDropdownList("Middle List", 10, height/2, width-20, 100);
list1    = gui.addDropdownList("Upper List", 10, height/4, width-20, 100);

for( int i=0; i<10; i++ )
{
    list1.addItem("Item "+i, i);
    list2.addItem("Item "+i, i);
    list3.addItem("Item "+i, i);
}
}

void draw()
{
background(0);
}

Now, what would be nice to do is to be able to change this order with a function. For example to bring the element that was clicked to the front in the event handler. Something like this:

public void controlEvent( ControlEvent e )
{
e.group().bringToFront();
}

jeff_g

Re: controlP5 depth

1 year ago

Here is what I was mentioning above, where you could draw them independently of each other in whatever order you wished.

import controlP5.*;
ControlP5 guilist1;
ControlP5 guilist2;
ControlP5 guilist3;
void setup() {
size( 200, 200 ); /** Initialize the controlP5 GUI and attach it to this sketch **/
guilist1 = new ControlP5(this);
guilist2 = new ControlP5(this);
guilist3 = new ControlP5(this);
guilist1.setAutoDraw(false);
guilist2.setAutoDraw(false);
guilist3.setAutoDraw(false);
DropdownList list3 = guilist3.addDropdownList("Bottom List", 10, height-(height/4), width-20, 100);
DropdownList list2 = guilist2.addDropdownList("Middle List", 10, height/2, width-20, 100);
DropdownList list1 = guilist1.addDropdownList("Upper List", 10, height/4, width-20, 100);
for ( int i=0; i<10; i++ ) {
list1.addItem("Item "+i, i);
list2.addItem("Item "+i, i);
list3.addItem("Item "+i, i);
}
}
void draw() {
background(0);
guilist3.draw();
guilist2.draw();
guilist1.draw();
}

However, you might want to consider just hiding the lists below the dropdown, so you don't see it at all. Maybe something like this...

import controlP5.*;
ControlP5 gui;
DropdownList list1;
DropdownList list2;
DropdownList list3;
void setup() {
size( 200, 200 ); /** Initialize the controlP5 GUI and attach it to this sketch **/
gui = new ControlP5(this);
list1 = gui.addDropdownList("Upper List", 10, height/4, width-20, 132);
list2 = gui.addDropdownList("Middle List", 10, height/4+16, width-20, 116);
list3 = gui.addDropdownList("Bottom List", 10, height/4+32, width-20, 100);
list1.setBarHeight(15);
list1.getCaptionLabel().getStyle().marginTop = 3;
list1.getCaptionLabel().getStyle().marginLeft = 3;
list2.setBarHeight(15);
list2.getCaptionLabel().getStyle().marginTop = 3;
list2.getCaptionLabel().getStyle().marginLeft = 3;
list3.setBarHeight(15);
list3.getCaptionLabel().getStyle().marginTop = 3;
list3.getCaptionLabel().getStyle().marginLeft = 3;
for ( int i=0; i<10; i++ ) {
list1.addItem("Item "+i, i);
list2.addItem("Item "+i, i);
list3.addItem("Item "+i, i);
}
}
void draw() {
background(0);
if (list1.isOpen()) {
list2.hide();
list3.hide();
}
else if (list2.isOpen()) {
list3.hide();
}
else {
list1.show();
list2.show();
list3.show();
}
}

Another method would be to reposition them so they move together.

import controlP5.*;
ControlP5 gui;
DropdownList list1;
DropdownList list2;
DropdownList list3;
void setup() {
size( 200, 200 ); /** Initialize the controlP5 GUI and attach it to this sketch **/
gui = new ControlP5(this);
list1 = gui.addDropdownList("Upper List", 10, height/4, width-20, 100);
list2 = gui.addDropdownList("Middle List", 10, height/4+16, width-20, 100);
list3 = gui.addDropdownList("Bottom List", 10, height/4+32, width-20, 100);
list1.setBarHeight(15);
list1.getCaptionLabel().getStyle().marginTop = 3;
list1.getCaptionLabel().getStyle().marginLeft = 3;
list2.setBarHeight(15);
list2.getCaptionLabel().getStyle().marginTop = 3;
list2.getCaptionLabel().getStyle().marginLeft = 3;
list3.setBarHeight(15);
list3.getCaptionLabel().getStyle().marginTop = 3;
list3.getCaptionLabel().getStyle().marginLeft = 3;
for ( int i=0; i<10; i++ ) {
list1.addItem("Item "+i, i);
list2.addItem("Item "+i, i);
list3.addItem("Item "+i, i);
}
}
void draw() {
background(0);
if (list1.isOpen()) {
list2.setPosition(10, height/4+114);
list3.setPosition(10, height/4+130);
}
else if (list2.isOpen()) {
list3.setPosition(10, height/4+130);
}
else {
list2.setPosition(10, height/4+16);
list3.setPosition(10, height/4+32);
}
}

Top Reply

controlP5 depth

Replies(6)

Re: controlP5 depth

Re: controlP5 depth

Re: controlP5 depth

Re: controlP5 depth

Re: controlP5 depth

Re: controlP5 depth

Statistics

Tags

Actions

Related Posts