ControlP5 Dropdownlist overlap

alejandro

with this example, if you open the list first and then the second, the second overlaps the first, as you can put them on the same level, without having to build before the latest import controlP5.*;

ControlP5 cp5;

DropdownList d1, d2;

int cnt = 0;

void setup() {
  size(700, 400,P3D);

  cp5 = new ControlP5(this);
  // create a DropdownList
  d1 = cp5.addDropdownList("myList-d1")
          .setPosition(100, 100)
          ;

  customize(d1); // customize the first list

  // create a second DropdownList
  d2 = cp5.addDropdownList("myList-d2")
          .setPosition(100, 150)
          .setSize(200,200)
          ;

  customize(d2); // customize the second list
  d2.setIndex(10);
}


void customize(DropdownList ddl) {
  // a convenience function to customize a DropdownList
  ddl.setBackgroundColor(color(190));
  ddl.setItemHeight(20);
  ddl.setBarHeight(15);
  ddl.captionLabel().set("dropdown");
  ddl.captionLabel().style().marginTop = 3;
  ddl.captionLabel().style().marginLeft = 3;
  ddl.valueLabel().style().marginTop = 3;
  for (int i=0;i<40;i++) {
    ddl.addItem("item "+i, i);
  }
  //ddl.scroll(0);
  ddl.setColorBackground(color(60));
  ddl.setColorActive(color(255, 128));
}



void keyPressed() {
  // some key events to change the properties of DropdownList d1
  if (key=='1') {
    // set the height of a pulldown menu, should always be a multiple of itemHeight
    d1.setHeight(210);
  } 
  else if (key=='2') {
    // set the height of a pulldown menu, should always be a multiple of itemHeight
    d1.setHeight(120);
  }
  else if (key=='3') {
    // set the height of a pulldown menu item, should always be a fraction of the pulldown menu
    d1.setItemHeight(30);
  } 
  else if (key=='4') {
    // set the height of a pulldown menu item, should always be a fraction of the pulldown menu
    d1.setItemHeight(12);
    d1.setBackgroundColor(color(255));
  } 
  else if (key=='5') {
    // add new items to the pulldown menu
    int n = (int)(random(100000));
    d1.addItem("item "+n, n);
  } 
  else if (key=='6') {
    // remove items from the pulldown menu  by name
    d1.removeItem("item "+cnt);
    cnt++;
  }
  else if (key=='7') {
    d1.clear();
  }
}

void controlEvent(ControlEvent theEvent) {
  // DropdownList is of type ControlGroup.
  // A controlEvent will be triggered from inside the ControlGroup class.
  // therefore you need to check the originator of the Event with
  // if (theEvent.isGroup())
  // to avoid an error message thrown by controlP5.

  if (theEvent.isGroup()) {
    // check if the Event was triggered from a ControlGroup
    println("event from group : "+theEvent.getGroup().getValue()+" from "+theEvent.getGroup());
  } 
  else if (theEvent.isController()) {
    println("event from controller : "+theEvent.getController().getValue()+" from "+theEvent.getController());
  }
}

void draw() {
  background(128);
}

clankill3r

Yeah this is kind of shit of cp5. What you can do is create the 2nd dropdown before the first dropdown. That will fix your problem.

alejandro

yes i know but in my program i have 30 dropdown XD so its a little dificult, do you know others GUI better or different?

amnon

What is the desired behavior?

alejandro

I have more than 10 or dropdownbox listbox on the same level, along with many textfield, checkbutton, all on the same level if you can, otherwise I have to use controlP5 and build the entire interface to the contrary. I should get the data for listbox textfiel, and checkbutton and save them, another thing I found strange with controlP5 is that you can not easily get selected in the Label dropdownbox. if you have suggestions are well accepted

quark

as you can put them on the same level

I am not very familiar with ControlP5 ;) but the statement above seems to suggest that you can change the order that ControlP5 draws the control by setting some 'level'. If that is the case it should be simple to set the level so that controls further down the screen (higher y positional values) are drawn first irrespective of the order they were created.

If I am wrong then can I suggest the G4P library, it handles overlapping drop list boxes without user intervention. The other advantage of using G4P is the GUI Builder tool which enables you to design the GUI layout visually. Both the G4P library and the GUI Builder tool can be installed from the Processing menus. To find out more then visit my website at G4P and GUI Builder. :)

I should point out that G4P is NOT compatible with JavaScript mode 8-X

alejandro

well fantastic, i will try, my application is for win linux and mac os , so javascript it isnt a problem XD thanks