How to play different files from different items in dropdown menu from controlp5 ?

asnota

How to play different files from different items in dropdown menu from controlp5 ?

in Contributed Library Questions • 3 months ago

Hi, I have created 3 sketches which play music, animate things and load background images.
I'd like to join all them together into one sketch by using dropdown menu from controlp5 library.
I've done the dropdown menu which displays different images when the different items have been choosen, but I need more fuctionality - music and animation, different for different items.

How can I make these items appear different objects, players, for example ?

Here is my code:

import controlP5.*;
ControlP5 cp5;
DropdownList d1;
PImage[] images = new PImage[3];
int selectedImage;
int cnt = 0;
void setup() {
size(775, 500);
cp5 = new ControlP5(this);
d1 = cp5.addDropdownList("ImageSelect",width/2-50,100,100,120).setPosition(0, 22);
customize(d1);
images[0] = loadImage("visuals_1.png");
images[1] = loadImage("visuals_2.png");
images[2] = loadImage("visuals_3.png");
}
void customize(DropdownList ddl) {
ddl.setBackgroundColor(color(250));
ddl.setItemHeight(20);
ddl.setBarHeight(20);
ddl.captionLabel().set("Interval view");
ddl.captionLabel().style().marginTop = 5;
ddl.captionLabel().style().marginLeft = 5;
ddl.valueLabel().style().marginTop = 5;
ddl.addItem("1st layer", 0);
ddl.addItem("2nd layer", 1);
ddl.addItem("3rd layer", 2);
ddl.setColorBackground(color(60));
ddl.setColorActive(color(255, 128));
}
void draw() {
background(128);
image(images[selectedImage],0,0);
}
void controlEvent(ControlEvent theEvent) {
if (theEvent.isGroup()) {
if (theEvent.group().name() == "ImageSelect") {
selectedImage = int(theEvent.group().value());
}
} else if(theEvent.isController()) {
}
}

Replies(8)

amnon.owed

Re: How to play different files from different items in dropdown menu from controlp5 ?

3 months ago

You set the variable selectedImage via a controlEvent. Then you display a specific image given the variable's value. You can do the same thing for any other drawing. Alternatively you can trigger something from inside the controlEvent based on the selected value. In both cases you can use if/else statements or a switch. See the reference for more information on these methods.

asnota

Re: How to play different files from different items in dropdown menu from controlp5 ?

3 months ago

Thank you for response! It clarified a bit for me the sence of this misterious controlEvent function and its functionality.

The problem is when I'm adding even the same dropdown menu, the first one stop to work... Could you, please look at what I'm doing wrong ? Here is the code:

import controlP5.*;

ControlP5 cp5;

DropdownList d1, d2;

PImage[] images1 = new PImage[3];

PImage[] images2 = new PImage[3];

int selectedImage1;

int selectedImage2;

int cnt = 0;

void setup() {

size(775, 500);

cp5 = new ControlP5(this);

d1 = cp5.addDropdownList("ImageSelect1",width/2-50,100,100,120).setPosition(0, 22);

d1.setBackgroundColor(color(250));

d1.setItemHeight(20);

d1.setBarHeight(20);

d1.setLabel("Interval view");

d1.captionLabel().style().marginTop = 5;

d1.captionLabel().style().marginLeft = 5;

d1.valueLabel().style().marginTop = 5;

d1.addItem("1st layer", 0); // give each item a value, in this example starting from zero

d1.addItem("2nd layer", 1);

d1.addItem("3rd layer", 2);

d1.setColorBackground(color(60));

d1.setColorActive(color(255, 128));

images1[0] = loadImage("visuals_1.png");

images1[1] = loadImage("visuals_2.png");

images1[2] = loadImage("visuals_3.png");

d2 = cp5.addDropdownList("ImageSelect2",width/2-50,00,100,120).setPosition(102, 22);

images2[0] = loadImage("1visuals_1.png");

images2[1] = loadImage("1visuals_2.png");

images2[2] = loadImage("1visuals_3.png");

d2.setBackgroundColor(color(250));

d2.setItemHeight(20);

d2.setLabel("Harmonic rythm view");

d2.setBarHeight(20);

d2.captionLabel().style().marginTop = 5;

d2.captionLabel().style().marginLeft = 5;

d2.valueLabel().style().marginTop = 5;

d2.addItem("1st layer", 0);

d2.addItem("2nd layer", 1);

d2.addItem("3rd layer", 2);

d2.setColorBackground(color(60));

d2.setColorActive(color(255, 128));

}

void draw() {

background(128);

image(images1[selectedImage1],0,0);

image(images2[selectedImage2],0,0);

}

void controlEvent(ControlEvent theEvent) {

if (theEvent.isGroup()) {

if (theEvent.group().name() == "ImageSelect1") {

selectedImage1 = int(theEvent.group().value());

}

if (theEvent.group().name() == "ImageSelect2") {

selectedImage2 = int(theEvent.group().value());

}

} else if(theEvent.isController()) {

}

I've tried even some other approach, without controlEvent function to make appear the button whem specific item is selected - the function .isOpen works for whole list, but not for my specified item:

import controlP5.*;

ControlP5 cp5;

DropdownList d1, d2;

ListBoxItem I1, I2, I3, I4, I5, I6;

Button b1;

void setup() {

size( 500, 500 ); /** Initialize the controlP5 GUI and attach it to this sketch **/

cp5 = new ControlP5(this);

d1 = cp5.addDropdownList("ImageSelect1",width/2-50,100,100,120).setPosition(0, 22);

//customize(d1);// customize the first list

d1.setBackgroundColor(color(250));

d1.setItemHeight(20);

d1.setBarHeight(20);

d1.setLabel("Interval view");

d1.captionLabel().style().marginTop = 5;

d1.captionLabel().style().marginLeft = 5;

d1.valueLabel().style().marginTop = 5;

I1 = d1.addItem("1st layer", 0); // give each item a value, in this example starting from zero

I2 = d1.addItem("2nd layer", 1);

I3 = d1.addItem("3rd layer", 2);

d1.setColorBackground(color(60));

d1.setColorActive(color(255, 128));

d2 = cp5.addDropdownList("ImageSelect2",width/2-50,00,100,120).setPosition(102, 22);

d2.setBackgroundColor(color(250));

d2.setItemHeight(20);

d2.setLabel("Harmonic rythm view");

d2.setBarHeight(20);

d2.captionLabel().style().marginTop = 5;

d2.captionLabel().style().marginLeft = 5;

d2.valueLabel().style().marginTop = 5;

I4 = d2.addItem("1st layer", 0); // give each item a value, in this example starting from zero

I5 = d2.addItem("2nd layer", 1);

I6 = d2.addItem("3rd layer", 2);

d1.setColorBackground(color(60));

d1.setColorActive(color(255, 128));

b1 = cp5.addButton("1")

.setValue(0)

.setPosition(20,200)

.setSize(20,20);

b1.hide();

}

void draw() {

background(0);

if (d1.isOpen()){

if(I1.isOpen()){

b1.show();

}

else if (d2.isOpen()) {

rect(200, 200, 20,20);

}

else {

background(20);

}

I don't know what to do...

amnon.owed

Re: How to play different files from different items in dropdown menu from controlp5 ?

3 months ago

I've tested your first code example (with the two dropdownmenus) and the controlP5 code in it works fine. You can add some println()'s to test this. I think the problem is in your draw() loop, where you draw both images on the same coordinates aka on top of each other. So you will always only see the last drawn image. Use different coordinates and you'll see that it works ok.

Note that there are some shorters ways to write what you coded. Take a look at the ControlP5 examples and methods for this.

asnota

Re: How to play different files from different items in dropdown menu from controlp5 ?

3 months ago

Unfortunatelly first dropdownlist stop to work when I add the second one... If I comment the second image() in draw function the first one begen to waork again:

void draw() {

background(128);

image(images1[selectedImage1],0,0); // show the selected image

// image(images2[selectedImage2],0,0); // show the selected image

}

I've tried to follow the example from ControlP5 library and this sketch didn't changed images at all neither in the first dropdownlist nor in the second:

import controlP5.*;

ControlP5 cp5;

DropdownList d1, d2;

PImage[] images1 = new PImage[3];

PImage[] images2 = new PImage[3];// array of images

int selectedImage1;

int selectedImage2;// the variable used to select the image to show on screen

int cnt = 0;

void setup() {

size(700, 400);

cp5 = new ControlP5(this);

d1 = cp5.addDropdownList("ImageSelect1")

.setPosition(100, 100)

;

customize(d1);

d1.captionLabel().set("Interval view");

d1.addItem("1st layer", 0);

d1.addItem("2nd layer", 1);

d1.addItem("3rd layer", 2);

images1[0] = loadImage("visuals_1.png");

images1[1] = loadImage("visuals_2.png");

images1[2] = loadImage("visuals_3.png");

d2 = cp5.addDropdownList("myList-d2")

.setPosition(400, 100)

.setSize(200,200)

;

customize(d2);

d2.setIndex(10);

d2.captionLabel().set("Harmonic view");

d2.addItem("1st layer", 0);

d2.addItem("2nd layer", 1);

d2.addItem("3rd layer", 2);

images2[0] = loadImage("1visuals_1.png");

images2[1] = loadImage("1visuals_2.png");

images2[2] = loadImage("1visuals_3.png");

}

void customize(DropdownList ddl) {

ddl.setBackgroundColor(color(190));

ddl.setItemHeight(20);

ddl.setBarHeight(15);

ddl.captionLabel().style().marginTop = 3;

ddl.captionLabel().style().marginLeft = 3;

ddl.valueLabel().style().marginTop = 3;

ddl.setColorBackground(color(60));

ddl.setColorActive(color(255, 128));

}

void controlEvent(ControlEvent theEvent) {

if (theEvent.isGroup()) {

println("event from group : "+theEvent.getGroup().getValue()+" from "+theEvent.getGroup());

if (theEvent.group().name() == "ImageSelect1") {

selectedImage1 = int(theEvent.group().value());

}

if (theEvent.group().name() == "ImageSelect2") {

selectedImage2 = int(theEvent.group().value());

}

else if (theEvent.isController()) {

println("event from controller : "+theEvent.getController().getValue()+" from "+theEvent.getController());

}

void draw() {

background(128);

image(images1[selectedImage1],0,0); // show the selected image

image(images2[selectedImage2],0,0); // show the selected image

}

amnon.owed

Re: How to play different files from different items in dropdown menu from controlp5 ?

3 months ago

I think you're still missing my point. You can draw 100 images. If you draw them on top of each other, you will only see the last one. Perhaps changing your draw() loop to this will enlighten you:

Adapted Code

void draw() {
background(128);
image(images1[selectedImage1], 0, 0, width/2, height);
image(images2[selectedImage2] ,width/2, 0, width/2, height);
}

asnota

Re: How to play different files from different items in dropdown menu from controlp5 ?

3 months ago

Dear amnon.owed, thank you for responses. I did understood what you've said about changing the points, I was trying it too. Only I dont want all the pictures in one, all I'm trying to do now is to make one item from dropdown list make appear one image, corresponding that item (item 1st layer = image of 1st layer, item 2nd layer = image of 2nd layer). The code of dropdown list makes this switch when it's one, when the other appear, the first dropdown list stop to do its work. The code you've written makes two images appear on the screen, but I need one, only that one corresponding to this or that item. I've even tried .setId and call in the controlerEvent funtcion, but without any result...

amnon.owed

Re: How to play different files from different items in dropdown menu from controlp5 ?

3 months ago

Ok, so if I understand you correctly, you want to display the selected image from the last used dropdownlist.

If so then you can use this code:

// global variables
String selectedGroup = "ImageSelect1";
int selectedImage;
// draw loop that shows an image depending on the last used dropdownlist
void draw() {
background(128);
if (selectedGroup.equals("ImageSelect1")) {
image(images1[selectedImage], 0, 0);
} else if (selectedGroup.equals("ImageSelect2")) {
image(images2[selectedImage], 0, 0);
}
}
// set both the last used dropdownlist and the selectedImage with a controlEvent
void controlEvent(ControlEvent theEvent) {
if (theEvent.isGroup()) {
selectedGroup = theEvent.group().name();
selectedImage = int(theEvent.group().value());
} else if (theEvent.isController()) {
// controller code
}
}

asnota

Re: How to play different files from different items in dropdown menu from controlp5 ?

3 months ago

It worked !!!!!!!!!!!!!!!!!!!

Thank you so much !!!!!!!!!!!!!!!!!!!!!!

You're awesome !!!!!!!!!!!!!!!!!!!!!!!!

Top Reply