controlP5: Return sliders to specified position upon mouse release?

vmln8r

Hello,

I'm attempting some simple simulations of analogue control systems like sliders, and controlP5 looks great!

At the moment, I have a slider that controls the rotation speed of an object. I would like it if the slider would return to a specified position upon releasing the mouse button. I have tried this as a quick hack to see what happens:

  if (mousePressed == true) {
    sliderValue = sliderValue;
  } else {
    sliderValue = 0;
  } 

sliderValue does indeed return to 0 when the mouse is released (and the object stops spinning). However, the slider position remains at wherever it was until the mouse was released. Is it possible to have the slider position also return to 0? (it would also be ideal if the return to 0 was smooth, as if it were a sprung-loaded lever). Thanks in advance.

amnon

Don't set the variable, set the slider.

Post a small runnable example, if you want us to show you how.

vmln8r

Thank you. I looked through the various methods at the end of the example and haven't identified how to do it. I've now got sliderValue slowly going back to 0, but the slider position issue still persists. I would be grateful for any help (as small as I could get it, sorry):

float r = 0;
import controlP5.*;

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

float sliderValue = 0;
int sliderValue2 = 100;
int sliderTicks1 = 100;
int sliderTicks2 = 30;
int tut = 250;
Slider abc;

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

  // add a horizontal sliders, the value of this slider will be linked
  // to variable 'sliderValue' 
  cp5.addSlider("sliderValue")
     .setPosition(100,50)
     .setNumberOfTickMarks(15) 
     .setRange(-7,7)
     .snapToTickMarks(true);
     ;
}

void draw() {
  background(sliderTicks1);

  fill(0);
  rect(0,0,width,height);

//  

  if (mousePressed == true) {
    sliderValue = sliderValue;
  } else {
    sliderValue = sliderValue/1.065;
  }

  fill(255);
  rect(100,75,sliderValue,10);

  float sliderValuex2;
  sliderValuex2 = sliderValue*14;

  fill(255);
  rect(100,90,sliderValuex2,10);

  float sliderValueremap0to1 = map(sliderValue, -7, 7, -0.1, 0.1);
  println(sliderValue);


  translate(140, 200);
  rotate(r);
  rectMode(CENTER);
  rect(0,0,80,80);
  rectMode(CORNER);

  resetMatrix();

  r = (r + sliderValueremap0to1);

//

  fill(myColor);
  rect(0,280,width,70);

  fill(sliderTicks2);
  rect(0,350,width,50);
}

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

amnon

Ok, some pointers:

• Connect the added slider to the slider variable abc.
• You can't use ticks as it rounds of values, which doesn't work when you slightly change the value, then you really need higher precision.
• You can set the slider, instead of the variable. Then the slider will in turn set the variable.
• To prevent problems, once the slider nears 0, it is just set to 0.
• Half of the if code is unneeded, because controlP5 automatically registers mouse events on the sliders. The other half has been changed (see comment above) to set the slider instead of the variable.
• To get the value you could either use sliderValue or abc.getValue(), to show this in practice, both are used in the example below.

Adapted Code

import controlP5.*;
ControlP5 cp5;

int myColor = color(0,0,0);
float r = 0;
float sliderValue = 0;
int sliderValue2 = 100;
int sliderTicks1 = 100;
int sliderTicks2 = 30;
int tut = 250;
Slider abc;

void setup() {
  size(700,400);
  cp5 = new ControlP5(this);
  abc = cp5.addSlider("sliderValue").setPosition(100,50).setRange(-7,7);
  noStroke();
}

void draw() {
  background(sliderTicks1);

  fill(0);
  rect(0,0,width,height);

  if (abs(abc.getValue()) > 0.01) {  
    abc.setValue(sliderValue/1.065);
  } else {
    abc.setValue(0);
  }

  fill(255);
  rect(100,75,sliderValue,10);

  float sliderValuex2;
  sliderValuex2 = sliderValue*14;

  fill(255);
  rect(100,90,sliderValuex2,10);

  float sliderValueremap0to1 = map(sliderValue, -7, 7, -0.1, 0.1);
  println(sliderValue);


  translate(140, 200);
  rotate(r);
  rectMode(CENTER);
  rect(0,0,80,80);
  rectMode(CORNER);

  resetMatrix();

  r = (r + sliderValueremap0to1);

  fill(myColor);
  rect(0,280,width,70);

  fill(sliderTicks2);
  rect(0,350,width,50);
}

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

vmln8r

Thank you for both the improved code and the explanation, very useful. :)