Show button by selecting item from dropdown list

Contributed Library Questions

asnota

Show button by selecting item from dropdown list

in Contributed Library Questions • 3 months ago

I tryed to set Id to each item and then use this Id to show the button, but probably I'm doing something very wrong...

Here is the code:

import controlP5.*;

ControlP5 cp5;

DropdownList d1, d2, d3;

// define an array of images and the variable to select between them

PImage[] images1 = new PImage[3];

PImage[] images2 = new PImage[3];

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

int selectedImage1;

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

int selectedImage3;

String selectedGroup = "ImageSelect1";

int selectedImage;

int selectedItem;

Button b1, b2;

int cnt = 0;

void setup() {

size(775, 500);

// create the controlP5dropdownlist and give it the name you will use later, in this case ImageSelect

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;

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

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

d1.addItem("3rd layer", 2) .setId(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 l", 0); // give each item a value, in this example starting from zero

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

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

d2.setColorBackground(color(60));

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

d3 = cp5.addDropdownList("ImageSelect3", width/2-50, 00, 100, 120).setPosition(204, 22);

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

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

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

//d2.setBackgroundColor(color(250));

d3.setItemHeight(20);

d3.setLabel("Bind layers");

d3.setBarHeight(20);

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

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

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

d3.addItem("1st l", 0);

d3.addItem("2nd l", 1);

d3.addItem("3rd l", 2);

d3.setColorBackground(color(60));

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

b1 = cp5.addButton("1")

.setValue(0)

.setPosition(20, 200)

.setSize(20, 20);

b1.hide();

b2 = cp5.addButton("2")

.setValue(0)

.setPosition(20, 300)

.setSize(20, 20);

b2.hide();

}

void draw() {

background(128);

if (selectedGroup.equals("ImageSelect1")) {

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

if (selectedItem.equals(Id(0))) {

b1.show();

}

if (selectedItem.equals(Id(1))) {

b2.show();

}

else if (selectedGroup.equals("ImageSelect2")) {

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

}

else if (selectedGroup.equals("ImageSelect3")) {

image(images3[selectedImage], 0, 0);

}

void controlEvent(ControlEvent theEvent) {

if (theEvent.isGroup()) {

selectedGroup = theEvent.group().name();

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

selectedItem = int(theEvent.group().getId());

}

else if (theEvent.isController()) {

}

Replies(3)

andreas.s..

Re: Show button by selecting item from dropdown list

3 months ago

Hi,

here a cleaned up version of your code with comments briefly describing the changes made. (when posting code, it is a good practice to format the code you are posting -- see code icon in the menu bar when writing a post. I had to remove all references to external (image) files to make your code work which sometimes can be frustrating when copying the provided code into processing to find a solution to the posted problem. therefore it would be a good practice to remove all external references and sliming down the code before posting ).

import controlP5.*;
ControlP5 cp5;
DropdownList d1, d2, d3;
Button b1, b2;
int selectedImage1;
int selectedImage2;
int selectedImage3;
String selectedGroup = "ImageSelect1";
int selectedImage;
int selectedItem;
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); // remove .setId(0); we can use the value 0 as identifier
d1.addItem("2nd layer", 1); // remove .setId(1); we can use the value 1 as identifier
d1.addItem("3rd layer", 2); // remove .setId(2); we can use the value 2 as identifier
d1.setColorBackground(color(60));
d1.setColorActive(color(255, 128));
d2 = cp5.addDropdownList("ImageSelect2", width/2-50, 00, 100, 120).setPosition(102, 22);
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 l", 0);
d2.addItem("2nd l", 1);
d2.addItem("3rd l", 2);
d2.setColorBackground(color(60));
d2.setColorActive(color(255, 128));
d3 = cp5.addDropdownList("ImageSelect3", width/2-50, 00, 100, 120).setPosition(204, 22);
d3.setItemHeight(20);
d3.setLabel("Bind layers");
d3.setBarHeight(20);
d3.captionLabel().style().marginTop = 5;
d3.captionLabel().style().marginLeft = 5;
d3.valueLabel().style().marginTop = 5;
d3.addItem("1st l", 0);
d3.addItem("2nd l", 1);
d3.addItem("3rd l", 2);
d3.setColorBackground(color(60));
d3.setColorActive(color(255, 128));
b1 = cp5.addButton("1").setValue(0).setPosition(20, 200).setSize(20, 20).hide();
b2 = cp5.addButton("2").setValue(0).setPosition(20, 300).setSize(20, 20).hide();
}
void draw() {
background(0);
}
void controlEvent(ControlEvent theEvent) {
if (theEvent.isGroup()) {
selectedGroup = theEvent.getGroup().getName();
selectedImage = int(theEvent.getGroup().getValue());
// selectedItem = int(theEvent.getGroup().getId()); // remove this line and replace with line below
selectedItem = int( theEvent.getGroup( ).getValue( ) );
// for debugging purposes we print the controlEvent
// results into the console
println( String.format("selectedGroup: %s selectedImage: %d selectedItem: %d", selectedGroup, selectedImage, selectedItem) );
// moved from draw into controlEvent
if ( selectedGroup.equals( "ImageSelect1" ) ) {
if ( selectedItem == 0 ) { // removed equals(Id(0)) and replaced with == 0
b1.show();
}
if ( selectedItem == 1 ) { // removed equals(Id(1)) and replaced with == 1
b2.show();
}
}
}
else if (theEvent.isController()) {
}
}

andreas schlegel, http://www.sojamo.de

asnota

Re: Show button by selecting item from dropdown list

3 months ago

Dear Mr. Schlegel, I thank you very much for the cleaned and perfectly working code !!! I'll prepare my codes for posting in a way as you have said in future (just now I saw this function for code posting here) and I'm sorry for your frustration related to external links.

I'd like to thank you also for your great contribution with controlp5 and modern looking objects in it - I'm not a programmer (I have only 3 weeks of online Processing course for beginners) and what you've done it's like white magic for me ! You are great !

andreas.s..

Re: Show button by selecting item from dropdown list

3 months ago

glad to hear it worked, I included my 'good practice' comments only since it is more likely to get a positive and quick response if the code that is giving you trouble is well compressed and clearly highlights the issues you are encountering. So I hope this helped as well.

Top Reply