ControlP5 dropdown list

sueapeek

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

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.

// controlP5 stuff
import controlP5.*;
ControlP5 controlP5;
DropdownList p1;
// define an array of images and the variable to select between them
PImage[] images = new PImage[2]; // array of images
int selectedImage; // the variable used to select the image to show on screen
void setup() {
size(400,400);
// create the controlP5dropdownlist and give it the name you will use later, in this case ImageSelect
controlP5 = new ControlP5(this);
p1 = controlP5.addDropdownList("ImageSelect",width/2-50,100,100,120);
customize(p1);
// load images in setup
images[0] = loadImage("image1.jpg"); // note: arrays start at zero!
images[1] = loadImage("image2.jpg");
}
void draw() {
background(128);
image(images[selectedImage],0,0); // show the selected image
}
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("Image One",0); // give each item a value, in this example starting from zero
ddl.addItem("Image Two",1);
ddl.setColorBackground(color(60));
ddl.setColorActive(color(255,128));
}
// this functions listens to events and can act upon it
void controlEvent(ControlEvent theEvent) {
// if the event is from a group, which is the case with the dropdownlist
if (theEvent.isGroup()) {
// if the name of the event is equal to ImageSelect (aka the name of our dropdownlist)
if (theEvent.group().name() == "ImageSelect") {
// then do stuff, in this case: set the variable selectedImage to the value associated
// with the item from the dropdownlist (which in this case is either 0 or 1)
selectedImage = int(theEvent.group().value());
}
} else if(theEvent.isController()) {
// not used in this sketch, but has to be included
}
}

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.

import controlP5.*;
ControlP5 controlP5;
DropdownList dropdown;
int cnt = 0;
void setup() {
size(400,400);
frameRate(30);
controlP5 = new ControlP5(this);
dropdown = controlP5.addDropdownList("aDropdownList",100,100,100,120);
customize(dropdown);
}
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;
for(int i=0;i<80;i++) {
ddl.addItem("item "+i,i);
}
ddl.setColorBackground(color(60));
ddl.setColorActive(color(255,128));
}
void controlEvent(ControlEvent theEvent) {
if (theEvent.isGroup()) {
// check if the Event was triggered from a ControlGroup
println(theEvent.group().value()+" from "+theEvent.group());
if(theEvent.group().name().equals("aDropdownList")){
ListBoxItem selectedItem = dropdown.getItem((int)theEvent.value());
if(selectedItem.getName().equals("item 3")){
println("item 3 clicked... do something here!");
}
else if(selectedItem.getName().equals("item 4")){
println("item 4 clicked... do something here!");
}
}
} else if(theEvent.isController()) {
println(theEvent.controller().value()+" from "+theEvent.controller());
}
}
void draw() {
background(128);
}

Top Reply