1. ControlP5 has a lot of different controllers, a lot of examples, clear javadocs and a large user-base so a lot of people will be able to help you should you run into problems. ControlP5 has DropdownList controller and many examples. Libraries are to make it easier for you, because you can use existing code. With controlP5 you have a DropdownList in seconds by just copying the example, otherwise you have to code everything yourself (of course this is also very possible). I would say libraries support fast code development and make it easier to try things. If you want to reduce the size of the jar or run into problems with exporting it, you can at any time decide to write some code yourself instead.

2. To use a library you have to copy it in the libraries directory. If if went ok, you will see the contributed libraries appear under Sketch > Import Library and you will see the examples under File > Examples > Contributed Libraries. Check this page for detailed instructions about where to place the library files exactly. It's basically a simple drag and drop. You don't install it in every sketch, but rather for the whole of Processing. When you want to use it, you need an import statement, just like with the core libraries such as import processing.opengl.* etc. The best way to learn how to use a library is to check out the examples (and for more advanced users, read the javadocs or check out the source code).

Thanks! Super helpful. I've imported the library. Now what I'm not sure about is how to use an individual component from the library (such as a drop down menu). in the Control p5 website I clicked on the drop down menu and found a bunch of code - do I just paste that into my sketch? I would think there's a more streamlined way to reference that module in the library vs. pasting in all the code.  thanks again!

If you click on: Sketch > Import Library > controlP5

The following import statement will be added to your sketch: import controlP5.*;

It's not possible to import just a single class here, since there are interdependencies. For example DropdownList contains ListBoxItem's and the controlP5 base class is always required for things to run smoothly. Long story short there are interdependencies within the code of the library. The good news is this is not your problem. You just need one simple import statement (see above) and you have access to everything. You can use all the classes from the controlP5 library.

Check out: File > Examples > Contributed Libraries > controlP5 > controllers

Then you will see what kind of code you need for different controllers. Some need more, some need less. All allow a large degree of customization. Indeed, the DropdownList example contains a bunch of code. This is mainly to show of the different options, not the minimum required code. Below is a more concise example.

Code Example

1. import controlP5.*;
2. ControlP5 cp5; // you always need the main class
3.  
4. void setup() {
5.   size(300, 300);
6.   cp5 = new ControlP5(this);
7.  
8.   // add a dropdownlist at position (100,100)
   
9.   DropdownList droplist = cp5.addDropdownList("mySuperList").setPosition(100, 100);
10.  
11.   // add items to the dropdownlist
12.   for (int i=0; i<5; i++) {
13.     droplist.addItem("myItem " + i, i);
14.   }
15. }
16.  
17. void draw() {
18.   background(128);
19.   // controlp5 autodraw is on by default (if you use the default JAVA2D renderer)
    
20.   // this means the gui is automatically drawn at the end
21. }
22.  
23. // controlEvent monitors clicks on the gui
24. void controlEvent(ControlEvent theEvent) {
25.   if (theEvent.isGroup()) {
26.     println(theEvent.getGroup() + " => " + theEvent.getGroup().getValue());
27.   }
28. }

Hi  Thanks for this. I'll try this out. Some other questions:

I am hoping that data (a list of several hundred names) can be pulled (from a .txt file) can be used in the drop down menu. In other words, if the user wants to select / identify someone, I thought it would be better for them to choose from a drop down menu rather than type it in themselves. I can't figure out where I would insert the data element into the drop down menu.  Any thoughts?  Thanks

That would be line 13:

1.     droplist.addItem("myItem " + i, i);

Notice how that is the actual name that you see on the list. Try changing it and see what happens. Since it's already expecting a String, you can just replace the first parameter by the respective names from your list. So it would be something like...

1.   String[] listOfNames = getAllTheNames();
   
2.   for (int i=0; i<listOfNames.length; i++) {
3.     droplist.addItem(listOfNames[i], i);
4.   }

hi.  Here's my code. A lot of it is stuff I got from ControlP5 and don't fully understand it. Anyway I tried to integrate your suggestions into the code. But when I run this I get an error that says ArrayIndexOutofBoundsException: 71 and seems to be flagging the line that says String[] name = splitTokens(lines[i+1]);. Any thoughts as to why this doesn't work?  thanks!  kevin



    import controlP5.*;
    ControlP5 cp5; // you always need the main class
    
    void setup() {
      size(300, 300);
      cp5 = new ControlP5(this);
    
        String[] lines;

    
     lines = loadStrings("rankometerdata.txt"); // parsing data from external file (column [0] is list of names, column [1] is ranks, column [2] is abbreviated team name)
 
      // add a dropdownlist at position (100,100)
      DropdownList droplist = cp5.addDropdownList("PLAYERS").setPosition(100, 100);
  

for (int i=0; i<lines.length; i++) {   //looping through each row of the data file
       
String[] name = splitTokens(lines[i+1]);

droplist.addItem(name[2], i);

}
  
  

    }
    
    void draw() {
      background(128);
      // controlp5 autodraw is on by default (if you use the default JAVA2D renderer)
      // this means the gui is automatically drawn at the end
    }
    
    // controlEvent monitors clicks on the gui
    void controlEvent(ControlEvent theEvent) {
      if (theEvent.isGroup()) {
        println(theEvent.getGroup() + " => " + theEvent.getGroup().getValue());
      }
    }

You go one above the number of entries in your array. I guess you could say you are going out-of-the-bounds of your array. So the problem is i+1. The first solution is to just use i. That should fix the problem. However I'm assuming there is a reason you did this in the first place. If it's because you want to skip the first line which holds the column names, then instead start from 1 onwards (example 1). If there is some other reason really you need/want i+1, that's fine, but make sure you don't go out-of-bounds by stopping 1 earlier (example 2).

Example 1 + 2

1.   for (int i=1; i<lines.length; i++) {
2.     String[] name = splitTokens(lines[i]);
3.     droplist.addItem(name[2], i);
4.   }
5. 
   
6.   // ...OR...
   
7. 
   
8.   for (int i=0; i<lines.length-1; i++) {
9.     String[] name = splitTokens(lines[i+1]);
10.     droplist.addItem(name[2], i);
11.   }

since you i+1 in that line (why??)
I assume you read over the end of the array (forbidden)

you can test this hypotheses via

1. println(name[2]);

I guess

anyway
to avoid this consider

1. for (int i=0; i<lines.length - 1; i++) {   //looping through each row of the data file

oups, same time posting..... 

thanks for the advice!  I made that simple change (got rid of the +1) and the error stops. Another question: can I change the size (and font) of the drop down menu? It's pretty small / hard to read. kd

actually it's not working. My data .txt file is a single column of 30 rows each containing an abbreviated city (BOS, NYY). The code below works but the drop down menu only shows the first letter - C - for example, and then has the next 2 lines blank. I think it's parsing these 3 letter abreviations and that's causing the problem. Since it's a single column I am probably not using the right commands below, right?  PS - I don't know how to "insert code" in these posts...


import controlP5.*;
ControlP5 cp5; // you always need the main class

void setup() {
  size(300, 300);
  cp5 = new ControlP5(this);

  String[] lines;


  lines = loadStrings("MLBteams.txt"); // parsing data from external file (column [0] is list of names, column [1] is ranks, column [2] is abbreviated team name)

  // add a dropdownlist at position (100,100)
  DropdownList droplist = cp5.addDropdownList("PLAYERS").setPosition(100, 100);


  for (int i=0; i<lines.length; i++) {   //looping through each row of the data file

    String[] name = splitTokens(lines[i]);

    droplist.addItem(lines[i], i);
  }
}

void draw() {
  background(128);
  // controlp5 autodraw is on by default (if you use the default JAVA2D renderer)
  // this means the gui is automatically drawn at the end
}

// controlEvent monitors clicks on the gui
void controlEvent(ControlEvent theEvent) {
  if (theEvent.isGroup()) {
    println(theEvent.getGroup() + " => " + theEvent.getGroup().getValue());
  }
}

Yes, you can change the font and the size of things. There are many things you can change. See the examples that come with controlP5 and read the javadocs to see all the possibilities.

To solve problems it is often very effective to use println() to see what's happening in your program. Apparantly there is a problem in the transfer from file into processing. Customize the parsing from your data file. Also check out: File > Examples > Topics > File IO

Once you actually have a list of names, it shouldn't be a problem. See the example below.

Code Example

1. import controlP5.*;
2. ControlP5 cp5; // you always need the main class
3.  
4. void setup() {
5.   size(300, 300);
6.   cp5 = new ControlP5(this);
7.  
8.   // add a dropdownlist at position (100,100)
9.   DropdownList droplist = cp5.addDropdownList("mySuperList").setPosition(100, 100);
10.  
11.   String[] lines = new String[5];
12.   lines[0] = "BOS";
13.   lines[1] = "NYY";
14.   lines[2] = "AAA";
15.   lines[3] = "BBB";
16.   lines[4] = "A very long name";
17. 
    
18.   // add items to the dropdownlist
19.   for (int i=0; i<lines.length; i++) {
20.     droplist.addItem(lines[i], i);
21.   }
22. }
23.  
24. void draw() {
25.   background(128);
26.   // controlp5 autodraw is on by default (if you use the default JAVA2D renderer)
27.   // this means the gui is automatically drawn at the end
28. }
29.  
30. // controlEvent monitors clicks on the gui
31. void controlEvent(ControlEvent theEvent) {
32.   if (theEvent.isGroup()) {
33.     println(theEvent.getGroup() + " => " + theEvent.getGroup().getValue());
34.   }
35. }

I took your advice and entered the data into the code and everything worked right. Not sure why it's not working with the data file. Your point about making changes to the drop down list design. Maybe I still don't understand how libraries work. I imported the library. And then pasted some code into my sketch. I don't see any lines in the code I pasted that address the size / font of the drop down menu. So, I suppose it's somewhere in the library, being accessed by my code, right? So then my question is: where / how do I modify the size & fonts? Do I paste more code into my sketch? I tried to read the java doc you suggested but it didn't make much sense to me. thanks for the help. kevin

OK. I found an example from Control P5 and made some modifications (to style / size). Code is below.  Some questions:

- How do I modify the font?
- How do I limit the length of the entries? I can't find where in the code it defines the list length as 39

Thanks!

1. import controlP5.*;
   
   ControlP5 cp5;
   
   DropdownList d1, d2;
   
   int cnt = 0;
   
   void setup() {
     size(1400, 800);
    
     cp5 = new ControlP5(this);
     // create a DropdownList
     d1 = cp5.addDropdownList("myList-d1")
             .setPosition(100, 100)
             .setSize(200,1200)
   
             ;
            
     customize(d1); // customize the first list
    
     // create a second DropdownList
     d2 = cp5.addDropdownList("myList-d2")
             .setPosition(400, 100)
             .setSize(200,1200)
             ;
    
     customize(d2); // customize the second list
     d2.setIndex(10);
   }
   
   
   void customize(DropdownList ddl) {
     // a convenience function to customize a DropdownList
     ddl.setBackgroundColor(color(190));
     ddl.setItemHeight(40);
     ddl.setBarHeight(30);
     ddl.captionLabel().set("dropdown");
     ddl.captionLabel().style().marginTop = 3;
     ddl.captionLabel().style().marginLeft = 3;
     ddl.valueLabel().style().marginTop = 3;
     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 draw() {
     background(128);
   }
   
   
   

To change the font add this line:

1.   cp5.setControlFont(new ControlFont(createFont("Arial", 20), 20));

In the code you show, 40 items are added to the list (0 to 39).

1.   for (int i=0;i<40;i++) {
2.     ddl.addItem("item "+i, i);
3.   }

Thanks for all the help. I've got some code working (see below) and have a few questions about how to proceed:

1. I've got this drop down menu configured but want to add another one that's called League with 2 menu items - AL and NL.  In the example provided by ControlP5 they show 2 menus - d1 and d2. But it was confusing to me how each of these 2 menus was customized. There is a section of code called void customize(DropdownList ddl) which seems to do all of the customization but I don't see anything in that code that would indicate WHICH menu it's customizing. If I add a second menu - called d2 - how do customize that? Do I do a separate void customize section of code? If so, where do I place it in my existing code?

2. When the user selects something in either menu - let's say for example they select "BOS" from my menu - I want this to be assigned to a variable so that other things can be accomplished (namely some data to be pulled for the user). In my existing code, it doesn't seem like there's anything that gets officially assigned once the user selects it. Is it in my code and I'm just not seeing it or do I need to add something?

Thanks again!  (code below)

1. import controlP5.*;
   
   ControlP5 cp5;
   
   DropdownList d1;
   
   int cnt = 0;
   
   void setup() {
     size(1400, 800);
   
     cp5 = new ControlP5(this);
   
     cp5.setControlFont(new ControlFont(createFont("CenturyGothic", 12), 12));
   
     // create a DropdownList
   
     DropdownList d1 = cp5.addDropdownList("TeamList").setPosition(100, 100).setSize(100, 600);
   
     customize(d1); // customize the first list
   }
   
   void customize(DropdownList ddl) {
     // a convenience function to customize a DropdownList
     ddl.setBackgroundColor(color(190));
     ddl.setItemHeight(30);
     ddl.setBarHeight(30);
     ddl.captionLabel().set("TEAM");
     ddl.captionLabel().style().marginTop = 3;
     ddl.captionLabel().style().marginLeft = 3;
     ddl.valueLabel().style().marginTop = 3;
   
   
     String[] lines = new String[14];
   
     lines[0]="BAL";
     lines[1]="BOS";
     lines[2]="CHW";
     lines[3]="CLE";
     lines[4]="DET";
     lines[5]="KAN";
     lines[6]="LAA";
     lines[7]="MIN";
     lines[8]="NYY";
     lines[9]="OAK";
     lines[10]="SEA";
     lines[11]="TAM";
     lines[12]="TEX";
     lines[13]="TOR";
   
     for (int i=0;i<14;i++) { // number of items in lists
       ddl.addItem(lines[i], i);
     }
     //ddl.scroll(0);
     ddl.setColorBackground(color(60));
     ddl.setColorActive(color(255, 128));
   }
   
   void draw() {
     background(128);
   }
   
   

All right. Here are the answers to your questions, the list of adaptations and the adapted code.

First a reminder, the reason your copy-pasted code only shows a 1, is because you first pressed the "Insert Code" button and then pasted your code. It should be done the other way around. First post your code, then select it and finally press the "Insert Code" button. If it's done like that it'll be clearer and easier to copy.

Answers

1. The customize(DropdownList ddl) function accepts as input any DropdownList. To customize a list you just add a line such as customize(myList); It will then customize that list. This is efficient coding when you want to customize 2 or more lists in the same way. You only want to put things in this function that apply to all the lists. Therefore do not put add items code here! This was done in the original controlP5 example, because it efficiently created two generic lists with 40 items. But in the real world you usually don't want identical lists.
2. In your code there is indeed no action attached to clicking on the gui. As I showed in my example above you need a controlEvent function for this. The controlEvent function captures all the clicks on every single gui element. It's like a control center that monitors all activities. You will want to add a controlEvent function and customize it so it will receive your list events and act upon them. I suppose this is a bit tricky for a beginner, so see below for the correct code.

Adaptations

• Moved the non-generic code outside the customize function
• Removed unused global variables: DropdownList d1, int cnt
  
• Renamed some objects for clarity: team, teamNames
• Shortened the code for initializing the teamNames String array
• Added a second DropdownList (list, items, customize)
  
• Added currentTeam and currentLeague variables
• Add textFont and text displays for the current team and league
  
• Added controlEvent method to receive events from the lists
  

Adapted Code

1. import controlP5.*;
2. ControlP5 cp5;
3.  
4. String currentTeam = "";
5. String currentLeague = "";
6.  
7. void setup() {
8.   size(1400, 800);
9.   textFont(createFont("CenturyGothic", 30));
10.  
11.   cp5 = new ControlP5(this);
12.  
13.   cp5.setControlFont(new ControlFont(createFont("CenturyGothic", 12), 12));
14.  
15.   DropdownList team = cp5.addDropdownList("Team").setPosition(100, 100).setSize(100, 600);
16.   DropdownList league = cp5.addDropdownList("League").setPosition(300, 100).setSize(100, 600);
17.  
18.   String[] teamNames = {
19.     "BAL", "BOS", "CHW", "CLE", "DET", "KAN", "LAA",
20.     "MIN", "NYY", "OAK", "SEA", "TAM", "TEX", "TOR"
21.   };
22.  
23.   for (int i=0; i<teamNames.length; i++) {
24.     team.addItem(teamNames[i], i);
25.   }
26.  
27.   league.addItem("AL", 0);
28.   league.addItem("NL", 1);
29.  
30.   customize(team);
31.   customize(league);
32. }
33.  
34. void draw() {
35.   background(128);
36.   text("currentTeam: " + currentTeam, 700, 100);
37.   text("currentLeague: " + currentLeague, 700, 300);
38. }
39.  
40. void controlEvent(ControlEvent theEvent) {
41.   if (theEvent.isGroup()) {
42.     String listName = theEvent.getName();
43.     String itemName = theEvent.getGroup().captionLabel().getText();
44.     if (listName.equals("Team")) {
45.       currentTeam = itemName;
46.     } else if (listName.equals("League")) {
47.       currentLeague = itemName;
48.     }
49.   }
50. }
51.  
52. void customize(DropdownList ddl) {
53.   ddl.setBackgroundColor(color(190));
54.   ddl.setItemHeight(30);
55.   ddl.setBarHeight(30);
56.   ddl.captionLabel().style().marginTop = 3;
57.   ddl.captionLabel().style().marginLeft = 3;
58.   ddl.valueLabel().style().marginTop = 3;
59.   ddl.setColorBackground(color(60));
60.   ddl.setColorActive(color(255, 128));
61. }

This is great - thanks. Geez, every time I try to do another iteration I get myself into trouble again. So, my next challenge / goal is to have the AL / NL selection drive which teams show up under the TEAM drop down. There are certain teams in the AL and certain teams in the NL. I added that content and an if statement, but it doesn't seem to work. Is this even possible - to have a drop down menu entry dictate what appears in another drop down? Code below.  kevin  PS - when you say "post code" before inserting, how do I do that? 

import controlP5.*;
ControlP5 cp5;
 
String currentTeam = "";
String currentLeague = "";
 
void setup() {
  size(1400, 800);
  textFont(createFont("CenturyGothic", 30));
 
  cp5 = new ControlP5(this);
 
  cp5.setControlFont(new ControlFont(createFont("CenturyGothic", 12), 12));
 
 
  DropdownList team = cp5.addDropdownList("Team").setPosition(100, 100).setSize(100, 600);
  DropdownList league = cp5.addDropdownList("League").setPosition(300, 100).setSize(100, 600);
 
  String[] ALteamNames = {
    "BAL", "BOS", "CHW", "CLE", "DET", "KAN", "LAA",
    "MIN", "NYY", "OAK", "SEA", "TAM", "TEX", "TOR"
  };
 

  String[] NLteamNames = {
    "ATL", "XXX", "XXX", "XXX", "XXX", "XXX", "XXX",
    "XXX", "XXX", "XXX", "XXX", "XXX", "XXX", "XXX"
  };
 
 
    // if AL Chosen
 
  if (currentLeague == "AL") {
     
  for (int i=0; i<ALteamNames.length; i++) {
    team.addItem(ALteamNames[i], i);
  }
 
  //league.addItem("AL", 0);
  //league.addItem("NL", 1);
 
  //customize(team);
  //customize(league);
}

 // If NL Chosen

else  {
 
  for (int i=0; i<NLteamNames.length; i++) {
    team.addItem(NLteamNames[i], i);
  }

} 
  league.addItem("AL", 0);
  league.addItem("NL", 1);
 
  customize(team);
  customize(league);
}
 
 
 
 
 
 
void draw() {
  background(128);
 
    text("currentLeague: " + currentLeague, 700, 300);
  text("currentTeam: " + currentTeam, 700, 100);
}
 
void controlEvent(ControlEvent theEvent) {
  if (theEvent.isGroup()) {
    String listName = theEvent.getName();
    String itemName = theEvent.getGroup().captionLabel().getText();
    if (listName.equals("Team")) {
      currentTeam = itemName;
    } else if (listName.equals("League")) {
      currentLeague = itemName;
    }
  }
}
 
void customize(DropdownList ddl) {
  ddl.setBackgroundColor(color(190));
  ddl.setItemHeight(30);
  ddl.setBarHeight(30);
  ddl.captionLabel().style().marginTop = 3;
  ddl.captionLabel().style().marginLeft = 3;
  ddl.valueLabel().style().marginTop = 3;
  ddl.setColorBackground(color(60));
  ddl.setColorActive(color(255, 128));
}

You cannot use an if statement to conditionally create 'two' different dropdownlists. An option would be to create both lists, but use the hide() /  display() methods to conditionally display one. Also check out the multilist example for an alternative. Finally look at the tab example. Each league could be a different tab. Then you would have two tabs and two teamLists. Switching between tabs would display those respectively. The last option is probably the easiest.

when you say "post code" before inserting, how do I do that?

That just means copy-pasting the text. Then you can select the text. Then press the button. Try selecting a few lines of text and pressing the "Insert Code" button, you will see what it does yourself.

every time I try to do another iteration I get myself into trouble again

Everyone runs into trouble. This can't be evaded. But you can counteract with problem-solving ability and in time self-relience. Of course this includes using all the resources you have at your disposal such as the information from all the forums, openprocessing, examples, javadocs. But if you tried and can't solve it, feel free to ask. That's what the forum is for.

Hi. Thanks for the suggestions. I checked out some of the examples you mentioned. The tabs one seemed interesting but to be honest I spent a lot of time trying to figure out how it worked and how to incorporate it into my code but had some trouble. I think perhaps I get confused because some of the functionality is in the code and some is in the library itself (no?).  Anyway, I'd like to try the hide() / display() idea but couldn't figure out  which statements to hide and display. Can you take a look at my code and suggest where to use these statements?  Thanks a lot!!!!!  Kevin

 

The tabs option is the easiest. It does the hiding and displaying for you. See the example below and let me know if it works out for you.

You are right that controlP5 allows you to quickly set up the basics with a few lines. With those 'default settings' everything already runs in the background. But it also allows you to customize many things. The point of a library is that you don't have to worry about what's in the underlying code, you just use it. Much like Processing itself, it is a free ferrari. You don't really care what parts are in the engine and how it works exactly. You just know that it drives and so that's what you use it for: getting somewhere you need to go, but faster. The steering wheel (and brakes!) in this analogy are the commands you use to create gui elements, customize them, monitor their changes, etc. All those commands are on the surface and are explained in examples and the javadocs. Of course it still takes a while until you are familiar with them. But it you take it for a testdrive now and then, you'll be, ehm, smooth sailing in no time.

Of course you are free to walk (aka use your own code) or take apart the whole car (aka read the source code) at any time. It's all about options and choosing the one that works best for you.

Adapted Code

1. import controlP5.*;
2. ControlP5 cp5;
3.  
4. String currentTeam = "";
5.  
6. void setup() {
7.   size(1400, 800);
8.   textFont(createFont("CenturyGothic", 30));
9.  
10.   cp5 = new ControlP5(this);
11.  
12.   cp5.setControlFont(new ControlFont(createFont("CenturyGothic", 12), 12));
13.  
14.   cp5.getTab("default").setHeight(30).setLabel("League-AL");
15.   cp5.addTab("League-NL").setHeight(30);
16.  
17.   DropdownList teamAL = cp5.addDropdownList("TeamAL").setPosition(0, 70).setSize(150, 600);
18.   DropdownList teamNL = cp5.addDropdownList("TeamNL").setPosition(0, 70).setSize(150, 600).moveTo("League-NL");
19.  
20.   String[] ALteamNames = {
21.     "BAL", "BOS", "CHW", "CLE", "DET", "KAN", "LAA",
22.     "MIN", "NYY", "OAK", "SEA", "TAM", "TEX", "TOR"
23.   };
24.  
25.   String[] NLteamNames = {
26.     "ATL", "XXX", "XXX", "XXX", "XXX", "XXX", "XXX",
27.     "XXX", "XXX", "XXX", "XXX", "XXX", "XXX", "XXX"
28.   };
29.  
30.   for (int i=0; i<ALteamNames.length; i++) {
31.     teamAL.addItem(ALteamNames[i], i);
32.     teamNL.addItem(NLteamNames[i], i);
33.   }
34.  
35.   customize(teamAL);
36.   customize(teamNL);
37. }
38.  
39. void draw() {
40.   background(128);
41.   text("currentTeam: " + currentTeam, 700, 100);
42. }
43.  
44. void controlEvent(ControlEvent theEvent) {
45.   if (theEvent.isGroup()) {
46.     String listName = theEvent.getName();
47.     String itemName = theEvent.getGroup().captionLabel().getText();
48.     if (listName.equals("TeamAL") || listName.equals("TeamNL")) {
49.       currentTeam = itemName;
50.     }
51.   }
52. }
53.  
54. void customize(DropdownList ddl) {
55.   ddl.setBackgroundColor(color(190));
56.   ddl.setItemHeight(30);
57.   ddl.setBarHeight(30);
58.   ddl.captionLabel().style().marginTop = 3;
59.   ddl.captionLabel().style().marginLeft = 3;
60.   ddl.valueLabel().style().marginTop = 3;
61.   ddl.setColorBackground(color(60));
62.   ddl.setColorActive(color(255, 128));
63. }

thanks a ton!  I made some adjustments and it's working great but I can't figure out how to change the location of the two tabs.  Where in the code can I do that?  Kevin

That is indeed a tricky one. You can use the following line...

1.   cp5.getWindow().setPositionOfTabs(400, 400);

...where the two parameters are the top-left starting point of the tabs (by default 0,0).

Thanks!  I'll give it a try.  Also, another baffling thing: how do I change the color of these tabs (which are blue) and how do I change the color of the chosen fields from the drop down menu (which turn blue when you select them)?

Check out: http://www.sojamo.de/libraries/controlP5/reference/

Go to the class you are using to see all it's own and inherited methods.

The color settings have been implemented pretty uniformly in controlP5 for almost all the controllers.

For the dropdownlists in this example you can add/replace the following lines in the customize function:

1.   ddl.setColorBackground(color(255,0,0)); // not selected
2.   ddl.setColorForeground(color(0,255,0)); // selected
3.   ddl.setColorActive(color(255,0,255)); // active

You can add the same commends after the tab to set it's colors:

1.   cp5.addTab("League-NL")
2.     .setHeight(30)
3.     .setColorBackground(color(255,0,0))
4.     .setColorForeground(color(0,255,0))
5.     .setColorActive(color(255,0,255));

See the javadocs for the color-related methods and all other methods that are available.