Cp5 slider progressbar

Processing Libraries
1

Hello, how to use slider as progressbar?

If I have 10 lines in array and if for 1 line took 1 second, that means that slider should come to 100% in 10 seconds.

B.R
Tom

2

Hi @HITman,

Please find an example below.
Also, I would you like to use a slider as a progress bar? It is easier to overlap two rectangles, one being the background and the other being the progress rectangle

import controlP5.*;

ControlP5 cp5;

int line = 1;
int numOfLines = 10;
int timePerLine = 1000 ; //1 second
int start;

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

     
  cp5.addSlider("slider")
     .setPosition(100,height/2)
     .setSize(500,20)
     .setRange(0,100)
     .setValue(0)
     ;
  
  // reposition the Label for controller 'slider'
  cp5.getController("slider").getValueLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
  cp5.getController("slider").getCaptionLabel().align(ControlP5.RIGHT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
  
  start = millis();
}

void draw() {
  background(0);
  fill(255);
  
  
  float percentageProgress = map(line, 1 , numOfLines, 0 , 100);
  cp5.getController("slider").setValue(percentageProgress);
  delay(1000);
  if(line <= numOfLines){
    text("time ellapsed (s) = " + nf(((millis() - start) /1000),0), 50, 50);
    line++;
  }

Hope it helps

3

Thank you.

Regards,
Tom