processingcontrol-p5

Control-P5 - Slider values not displaying correctly

I have a processing sketch which includes a slider. The code that generates this slider is below:

ControlP5 gui;
gui = new ControlP5(this);
gui.addSlider("Tolerance").setPosition(40, height-60).setSize(400, 20).setRange(0.00, 0.10).setValue(0.05).setNumberOfTickMarks(11).setSliderMode(Slider.FLEXIBLE);
gui.getController("Tolerance").getValueLabel().align(ControlP5.RIGHT, ControlP5.TOP_OUTSIDE).setPaddingX(0).setFont(font);
gui.getController("Tolerance").setCaptionLabel("Comparison Tolerance");
gui.getController("Tolerance").getCaptionLabel().align(ControlP5.LEFT, ControlP5.TOP_OUTSIDE).setPaddingX(0).setFont(font);

The problem I have is that the value 0.08 is displayed when the slider is at both the 0.08 TickMark and the 0.09 TickMark. 0.09 is the only value which displays incorrectly - see the below pictures:

Image1

Image2

Image3

Image4

The slider is actually selecting the correct value of 0.09 in the third image above, when the position of the slider is printed to the console, but this display error is confusing and not ideal. Any help would be much appreciated.

UPDATE: I have since discovered that the value displayed to the top right of the slider is always rounded down. When outputting the slider value to the console, the values are usually minutely different to what is intended - i.e. at the center position, the actual slider value printed to the console is 0.0500003. From looking at the true value for each slider position, the 0.09 position is the only one with a value under the intended value - 0.0899996. Therefore, it appears this is rounded down to 0.08 to display the value. So the question still stands - is there a way to display the correct value of 0.09, given this information?

Solution

  • Well spotted! Perhaps you should post an issue for the developer. In the meantime, what you can do is subclass the Slider class and use Java's DecimalFormat class to fix the label:

    import java.text.DecimalFormat;
import controlP5.*;

ControlP5 gui;

void setup(){
  size(640,480);
  gui = new ControlP5(this);
  CustomSlider slider = new CustomSlider(gui,"Tolerance");

  slider.setPosition(40, height-60).setSize(400, 20).setRange(0.00, 0.10).setValue(0.05);
  slider.setFont(createFont("Verdana",12));
  slider.setNumberOfTickMarks(11).setSliderMode(Slider.FLEXIBLE);
  slider.getValueLabel().align(ControlP5.RIGHT, ControlP5.TOP_OUTSIDE).setPaddingX(0);
  slider.setCaptionLabel("Comparison Tolerance");
  slider.getCaptionLabel().align(ControlP5.LEFT, ControlP5.TOP_OUTSIDE).setPaddingX(0);
}
void draw(){
  background(0);
}

//subclass slider
public class CustomSlider extends Slider{

  //decimal format reference
  DecimalFormat df;

  //constructor
  public CustomSlider( ControlP5 cp5 , String name ) {
    super(cp5,name);
    //setup decimal format proof of concept - hardcoded fractional digits for now (this can be nicer)
    df = new DecimalFormat();
    df.setMaximumFractionDigits(2);
  }

  @Override public Slider setValue( float theValue ) {
    super.setValue(theValue);
    //this can be improved, follow the CP5 component lifecycle to determine when an instance initialised in the constructor is ready
    if(df != null){
      _myValueLabel.set( df.format(getValue( )));
    }else{
      _myValueLabel.set( getValue( ) +"" );
    }
    return this;
  }

}

    preview