Dual sided controlP5 Slider

enderappel

in Contributed Library Questions • 11 months ago

Hi! Any help is GREATLY appreciated! I am using the controlP5 slider and I want to be able to move both sides of the slider so that I can allow the user to manipulate a RANGE.

(i.e. Slider is 1-10 and I want user to be able to manipulate slider so that range is 3-6.)

Here is the code.... it is just the stuff from CP5. Thank you!

///////////////////////////////////////////////////////

import controlP5.*;

ControlP5 cp5;
int myColor = color(0,0,0);

void setup() {
size(700,200);
noStroke();
cp5 = new ControlP5(this);

// add a vertical slider
cp5.addSlider("slider")
     .setPosition(100,25)
     .setSize(200,20)
     .setRange(0,200)
     .setValue(128)
     ;
}

void draw() {
fill(myColor);
rect(0,100,width,70);

}

void slider(float theColor) {
myColor = color(theColor);
println("a slider event. setting background to "+theColor);
}

Replies(2)

amnon.owed

Re: Dual sided controlP5 Slider

11 months ago

See ControlP5 Range example.

enderappel

Re: Dual sided controlP5 Slider

11 months ago

Thank you so much for your help. SO USEFUL. I have one follow up question about accessing the Min and Max value.

It says you get the values through a ‘controlEvent’ function. I however need the Max and Min values of the slider so I can update my draw function. How do I either: 1. Get the ‘controlEvent’ to broadcast the value of the sliderMax and sliderMin so I can use those variables in my draw function or 2. Integrate the controlEvent into my draw function so the sliderMax and sliderMin variables are available for my draw-updates? I pasted my the CP5 Range code and my draw code below. “sliderMax” is already inputted but I can’t figure out how to link the "sliderMax" value to the slider. Thank you a ton!

The portion from the ControlCP5 Range example:

Copy code

void controlEvent(ControlEvent theControlEvent) {
if(theControlEvent.isFrom("rangeController")) {
// min and max values are stored in an array.
// access this array with controller().arrayValue().
// min is at index 0, max is at index 1.
sliderMin = int(theControlEvent.getController().getArrayValue(0));
sliderMax = int(theControlEvent.getController().getArrayValue(1));
print ("range update, done." + sliderMax);
}
}

My Draw code:

////

Copy code

void draw() {
background(#dfdfdf);
//Draw the map
carte.draw();
textFont(titleFont);
textAlign(CENTER);
text("Arnold Arboretum Acquistions", width/2, 750);
textFont(labelFont);
textAlign(LEFT);
for (Flower s : flowerList) {
if (s.yearPlanted < sliderMax && s.yearPlanted > 2) {
float xy[] = carte.getScreenPositionFromLocation(s.position);
fill(133, 165, 98);
ellipse(xy[0], xy[1], 2, 2);
}
if (s.yearPlanted < 2) {
float xy[] = carte.getScreenPositionFromLocation(s.position);
fill(102, 102, 102);
ellipse(xy[0], xy[1], 2, 2);
}
}
Family_count = Histogram.make(Histogram.filterByYear(flowerList, sliderMax));
//////////////////////////DISPLAY BAR GRAPH WITH TEXT/////////////////
int y = 0;
for (String p : familyNames){
Integer value = Family_count.get(p);
if (value == null) {
value = 0;
}
if (y < 48) {
textFont (labelFont);
textAlign(RIGHT);
text (p, 130,28 + (y*14));
rect(140,20 + (y*14),(value / 10),10);
y += 1;
}
else {
textFont (labelFont);
textAlign(RIGHT);
text (p, 440,8 + (y*14)-636);
rect(450,(y*14)-636,(value / 10),10);
y += 1;
}
}
}

Top Reply