Use controlP5 listBox to select string

Contributed Library Questions

piergiu

Use controlP5 listBox to select string

in Contributed Library Questions • 3 years ago

I've this listbox (the file list.txt is a list of about 1000 names):

import controlP5.*;

ControlP5 controlP5;

ListBox l;
ArrayList testoA = new ArrayList();

void setup( ) {

size(470, 295);

controlP5 = new ControlP5(this);
l = controlP5.addListBox("myList",20,40,80,240);
l.setItemHeight(15);
l.setBarHeight(15);

l.captionLabel().toUpperCase(true);
l.captionLabel().set("SELECT A NAME");
l.captionLabel().style().marginTop = 3;
l.valueLabel().style().marginTop = 3; // the +/- sign
//l.setBackgroundColor(color(100,0,0));

l.setColorBackground(color(255,128));
l.setColorActive(color(255,0,0,128));

String[] lines = loadStrings("list.txt");
for( int i = 0; i < lines.length; i++){
    String[] tokens = lines[i].toLowerCase().split(" ");
    for (int k = 0; k < tokens.length; k++){
      testoA.add(tokens[k]);
      l.addItem(tokens[k], k);
    }
}
}

void controlEvent(ControlEvent theEvent) {

if (theEvent.isGroup()) {
    // an event from a group e.g. scrollList
    println(theEvent.group().value() +" from "+theEvent.group());
}
}

void draw(){
background(0);
text (tokens[ceil(theEvent.group().value())]);
}

there's a way to use the "label" of the listbox as text in void draw?

thanks

Replies(3)

andreas.s..

Re: Use controlP5 listBox to select string

3 years ago

hi, i modified your code a bit and added comments to the source. each item in the listbox corresponds to an item inside your tokens String-array. the value of variable myCurrentIndex corresponds to the currently active item of the listBox. inside draw(), myCurrentIndex is used to display the currently active item from your tokens array.

import controlP5.*;
ControlP5 controlP5;
// add an int variable which will store the
// id of the latest selected listbox item.
int myCurrentIndex = 0;
// make the list of tokens global, then it is
// accessible in both setup and draw
String[] tokens;
void setup( ) {
size(470, 295);
controlP5 = new ControlP5(this);
ListBox l = controlP5.addListBox("myList",20,40,80,200);
// creating an arbitrary String array, add values
// to the array and add new items to the listbox
// at the same time. value of each item added to the listbox
// corresponds to the token in the string array 'tokens'.
tokens = new String[1000];
for (int k = 0; k < tokens.length; k++){
tokens[k] = k+"-item";
l.addItem(tokens[k], k);
}
}
void controlEvent(ControlEvent theEvent) {
if (theEvent.isGroup()) {
// an event from a group e.g. scrollList
println(theEvent.group().value() +" from "+theEvent.group());
// controlEvent is called when a listbox-item
// has been activated, hence update the value
// of myCurrentIndex accordingly
myCurrentIndex = int(theEvent.group().value());
}
}
void draw(){
background(0);
fill(255);
// display and draw a token as text
text(tokens[myCurrentIndex],200,40);
}

andreas schlegel, www.sojamo.de

piergiu

Re: Use controlP5 listBox to select string

3 years ago

thaks man... this works great!!!

only another question: if I want the text "deactivated" by default wen I run the sketch in order to have non text until I click on the name, how I can do? Is it possible?

andreas.s..

Re: Use controlP5 listBox to select string

3 years ago

more a quick hack than a proper solution:

in line 7 change int myCurrentIndex = 0; to int myCurrentIndex = -1;

inside draw(), surround text(tokens[myCurrentIndex],200,40); with a condition to check if myCurrentIndex is -1 or not

if(myCurrentIndex>-1) {
text(tokens[myCurrentIndex],200,40);
}

by default myCurrentIndex now is -1, after an item of your listBox has been activated, myCurrentIndex will change to a value higher than -1 and text will be displayed accordingly during draw().

andreas schlegel, www.sojamo.de

Top Reply