How to use "DropdownList bringToFront()" in ControlP5?

Processing Libraries
1

I am adding many drop down lists and when they are open, they overlap. But the one that is open stays behind the other ones. On the example code there is this line, but I cannot find out how to use it :frowning:

controlP5.Controller : DropdownList bringToFront()

And here is a piece of my code:

d1 = cp5.addDropdownList("Bank")
    .setPosition(160, 48)
    .setSize(35, 64)
    .setBarHeight(16)
    .setHeight(64)
    .setItemHeight(16)


   // .setFont(font3)
    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .setColorValueLabel(color(0, 0, 0))
    .setColorCaptionLabel(color(0, 0, 0))    
    .setOpen(false);    
  ;
  for (int i=0; i < NumberOfBanks; i++) {
      d1.addItem(""+i, i); //add the items in the list
    }
 
d1.getCaptionLabel().set("---"); //set PORT before anything is selected

d2 = cp5.addDropdownList("BpPC1")
    .setPosition(160, 108)
    .setSize(35, 64)
    .setBarHeight(16)
    .setHeight(64)
    .setItemHeight(16)

   // .setFont(font3)
    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .setColorValueLabel(color(0, 0, 0))
    .setColorCaptionLabel(color(0, 0, 0))

    .setOpen(false);
  ;
 
  for (int i=0; i < 128; i++) {
      d2.addItem(""+i, i); //add the items in the list
  }

d2.getCaptionLabel().set("---"); //set PORT before anything is selected

Thank you…

2

Hi @jhsa,

Since I hadn’t your full code to test, I used the example available on the cp5 library.
The dropdownlist is deprecated so you should try to switch to scrollablelist instead.
Nevertheless, in the code below I placed a simple condition inside draw to detect the mouse hovering which one of the CP5 dropdowns and bring it to front :slight_smile:
hope it helps!

Best regards

/**
 *
 * DEPRECATED, use ScrollableList instead.
 * 
 * Control5 DropdownList
 */

import controlP5.*;

ControlP5 cp5;

DropdownList d1, d2;

int cnt = 0;

void setup() {
  size(700, 400 );
  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(150, 100)
          .setSize(200,200)
          ;
  
  customize(d2); // customize the second list

}


void customize(DropdownList ddl) {
  // a convenience function to customize a DropdownList
  ddl.setBackgroundColor(color(190));
  ddl.setItemHeight(20);
  ddl.setBarHeight(15);
  ddl.getCaptionLabel().set("dropdown");
  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);
  
  if(d1.isMouseOver()){
   d1.bringToFront(); 
  }
  
  
  if(d2.isMouseOver()){
   d2.bringToFront(); 
  }
}
2 Likes
3

Thanks, simple and good idea.