Loading...
Logo
Processing Forum
Contributed Library Questions
sueapeek
sueapeek

ControlP5 dropdown list

in Contributed Library Questions  •  2 years ago  
Hi, I'm a noob to these forums and to programming, so I hope I'm asking this in the right place. Anyways, I'm trying to use ControlP5's dropdown list, but I can't figure out where I actually make stuff happen when I click on the items.

Here's the code I have; basically, when I click on an item, I want it to load an image, and if another item in the same menu is clicked, it will change the image to a different one.

  /**
 * ControlP5dropdownList
 * A dropdownList controller, based on the ListBox controller.
 * the currently selected dropdownlist item is displayed inside
 * the menu bar of the DropdownList.
 
 * by andreas schlegel, 2010
 * www.sojamo.de/libraries/controlP5
 */

import controlP5.*;

ControlP5 controlP5;

DropdownList p1, p2;


//setting height, etc is a mess and spoiled. REPAIR


int cnt = 0;
void setup() {
  size(400,400);
  frameRate(30);
  controlP5 = new ControlP5(this);
  p1 = controlP5.addDropdownList("myList-p1",100,100,100,120);
  customize(p1);
  p2 = controlP5.addDropdownList("myList-p2",220,100,100,120);
  customize(p2);
}

void customize(DropdownList ddl) {
  ddl.setBackgroundColor(color(190));
  ddl.setItemHeight(20);
  ddl.setBarHeight(15);
  ddl.captionLabel().set("pulldown");
  ddl.captionLabel().style().marginTop = 3;
  ddl.captionLabel().style().marginLeft = 3;
  ddl.valueLabel().style().marginTop = 3;
   ddl.addItem("Accents",1);
   ddl.addItem("Peacock Spots",2);
  ddl.setColorBackground(color(60));
  ddl.setColorActive(color(255,128));
}

void keyPressed() {
  if(key=='1') {
    // set the height of a pulldown menu, should always be a multiple of itemHeight
    p1.setHeight(210);
  }
  else if(key=='2') {
    // set the height of a pulldown menu, should always be a multiple of itemHeight
    p1.setHeight(120);
  }
  else if(key=='i') {
    // set the height of a pulldown menu item, should always be a fraction of the pulldown menu
    p1.setItemHeight(30);
  }
  else if(key=='u') {
    // set the height of a pulldown menu item, should always be a fraction of the pulldown menu
    p1.setItemHeight(10);
    p1.setBackgroundColor(color(100,0,0));
  }
  else if(key=='a') {
    // add new items to the pulldown menu
    int n = (int)(random(100000));
    p1.addItem("item "+n, n);
  }
  else if(key=='d') {
    // remove items from the pulldown menu  by name
    p1.removeItem("item "+cnt);
    cnt++;
  }
  else if(key=='c') {
    p1.clear();
  }
}

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

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

void draw() {
  background(128);
}


Sorry if this is a stupid question, I'm really new to this.

Replies(2)

amnon.owed
amnon.owed

Re: ControlP5 dropdown list

2 years ago
The action happens in the controlEvent function. This function listens to what's going on and acts upon it. Check out the example below. You will need to put two images called image1.jpg and image2.jpg (jpg not jpeg) in the data subdirectory of your sketch to run the code below.

Copy code
  1. // controlP5 stuff
  2. import controlP5.*;
  3. ControlP5 controlP5;
  4. DropdownList p1;

  6. // define an array of images and the variable to select between them
  7. PImage[] images = new PImage[2]; // array of images
  8. int selectedImage; // the variable used to select the image to show on screen

  10. void setup() {
  11.   size(400,400);

  13.   // create the controlP5dropdownlist and give it the name you will use later, in this case ImageSelect
  14.   controlP5 = new ControlP5(this);
  15.   p1 = controlP5.addDropdownList("ImageSelect",width/2-50,100,100,120);
  16.   customize(p1);

  18.   // load images in setup
  19.   images[0] = loadImage("image1.jpg"); // note: arrays start at zero!
  20.   images[1] = loadImage("image2.jpg");
  21. }

  23. void draw() {
  24.   background(128);
  25.   image(images[selectedImage],0,0); // show the selected image
  26. }

  28. void customize(DropdownList ddl) {
  29.   ddl.setBackgroundColor(color(190));
  30.   ddl.setItemHeight(20);
  31.   ddl.setBarHeight(15);
  32.   ddl.captionLabel().set("Pulldown");
  33.   ddl.captionLabel().style().marginTop = 3;
  34.   ddl.captionLabel().style().marginLeft = 3;
  35.   ddl.valueLabel().style().marginTop = 3;
  36.   ddl.addItem("Image One",0); // give each item a value, in this example starting from zero
  37.   ddl.addItem("Image Two",1);
  38.   ddl.setColorBackground(color(60));
  39.   ddl.setColorActive(color(255,128));
  40. }

  42. // this functions listens to events and can act upon it
  43. void controlEvent(ControlEvent theEvent) {
  44.   // if the event is from a group, which is the case with the dropdownlist
  45.   if (theEvent.isGroup()) {
  46.     // if the name of the event is equal to ImageSelect (aka the name of our dropdownlist)
  47.     if (theEvent.group().name() == "ImageSelect") {
  48.       // then do stuff, in this case: set the variable selectedImage to the value associated
  49.       // with the item from the dropdownlist (which in this case is either 0 or 1)
  50.       selectedImage = int(theEvent.group().value());
  51.     }
  52.   } else if(theEvent.isController()) {
  53.     // not used in this sketch, but has to be included
  54.   }
  55. }

timpulver
timpulver

Re: ControlP5 dropdown list

11 months ago
For my project I needed the name of the selected item instead of the value. Maybe this is helpful for someone else. 

Copy code
  2. import controlP5.*;

  4. ControlP5 controlP5;
  5. DropdownList dropdown;

  7. int cnt = 0;
  8. void setup() {
  9.   size(400,400);
  10.   frameRate(30);
  11.   controlP5 = new ControlP5(this);
  12.   dropdown = controlP5.addDropdownList("aDropdownList",100,100,100,120);
  13.   customize(dropdown);
  14. }

  16. void customize(DropdownList ddl) {
  17.   ddl.setBackgroundColor(color(190));
  18.   ddl.setItemHeight(20);
  19.   ddl.setBarHeight(15);
  20.   ddl.captionLabel().set("pulldown");
  21.   ddl.captionLabel().style().marginTop = 3;
  22.   ddl.captionLabel().style().marginLeft = 3;
  23.   ddl.valueLabel().style().marginTop = 3;
  24.   for(int i=0;i<80;i++) {
  25.     ddl.addItem("item "+i,i);
  26.   }
  27.   ddl.setColorBackground(color(60));
  28.   ddl.setColorActive(color(255,128));
  29. }


  32. void controlEvent(ControlEvent theEvent) {
  33.   if (theEvent.isGroup()) {
  34.     // check if the Event was triggered from a ControlGroup
  35.     println(theEvent.group().value()+" from "+theEvent.group());
  36.     if(theEvent.group().name().equals("aDropdownList")){
  37.       ListBoxItem selectedItem = dropdown.getItem((int)theEvent.value());
  38.       if(selectedItem.getName().equals("item 3")){
  39.         println("item 3 clicked... do something here!");
  40.       }
  41.       else if(selectedItem.getName().equals("item 4")){
  42.         println("item 4 clicked... do something here!");
  43.       }
  44.     }
  45.   } else if(theEvent.isController()) {
  46.     println(theEvent.controller().value()+" from "+theEvent.controller()); 
  47.   }
  48. }

  50. void draw() {
  51.   background(128);
  52. }
Top Reply

Statistics

  • 2 Replies
  • 3319  Views
  • 1 Followers

Actions

Related Posts