cp5 Slider is not working

jenlie

Hi,
I am working currently on a program for school, where a filter is being put on an image that the user selects. After that the user can change a little the filter by using a slider (or more). Im working with the cp5 library and my slider is not working. Im a total beginner in processing and I have no idea where the problem could be. I know that there are some other bugs in the code but at the moment that is my biggest problem and I hope that any of you have an answer to it. :(

Here is my Code:

import controlP5.*;
PImage bild;
PImage bildGefiltert;
int pixelgroesse = 1;

ControlP5 cp5;
int farbe = color(0,0,0);
float theColor = farbe;


void setup() {
  size(600, 800);
  createGUI();
  bildGefiltert = loadImage("background.jpg");
  cp5.getController("farbe").setVisible(false);
  cp5.getController("save").setVisible(false);

}

void draw() {
  noStroke();
  noSmooth();
  image(bildGefiltert, 0, 0);
}

// SLIDER
void farbe(float theColor) {
    farbe = color(theColor);
  println("a slider event. setting color to "+theColor);
} 

// EFFEKT
void filtern() {
  print("Starting to filter...");
  PGraphics offscreen = createGraphics(width,height);
  offscreen.beginDraw();
  offscreen.background(255);
  for (int i=0; i<bild.width; i=i+pixelgroesse) {
    for (int j=0; j<bild.height; j=j+pixelgroesse) {
      color farbpixel = bild.get(i, j);
      if  (brightness(farbpixel) < 50) {
        offscreen.fill(20 + farbe);
      } else if (brightness(farbpixel) < 100) {
        offscreen.fill(70 + farbe);
      } else if (brightness(farbpixel) < 150) {
        offscreen.fill(180);
      } else if (brightness(farbpixel) < 200) {
        offscreen.fill(210);
      } else if (brightness(farbpixel) < 220) {
        offscreen.fill(240);
      } else {
        offscreen.fill(255);
      } 
      offscreen.rectMode(CENTER);
      offscreen.noStroke();
      offscreen.rect(i, j, pixelgroesse, pixelgroesse);
    }

  }
  offscreen.endDraw();
  bildGefiltert = offscreen.get();
  println("...done.");

}


void createGUI() {
  cp5 = new ControlP5(this);
  cp5.addSlider("farbe")
    .setPosition(460, 70)
      .setSize(100, 15)
        .setRange(0, 255)
          .setColorCaptionLabel(0)
          .getCaptionLabel().align(ControlP5.BOTTOM, ControlP5.TOP_OUTSIDE);; 
  cp5.addBang("save")
    .setPosition(460, 160)
      .setCaptionLabel("Save")
        .setColorForeground(color(0,147,146))
          .setColorBackground(color(2,246,255))
            .setColorActive(color(0,198,197))
              .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER);
  cp5.addBang("load")
    .setPosition(460, 120)
      .setCaptionLabel("Select")
        .setColorForeground(color(0,147,146))
          .setColorBackground(color(2,246,255))
            .setColorActive(color(0,198,197))
              .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER);
}

void save() {
  selectOutput("Save as...", "fileSelected");
  PImage bild = get(0, 0, width, height);
    cp5.getController("farbe").setVisible(false);
    cp5.getController("save").setVisible(false);
    cp5.getController("load").setVisible(false);

}


    void fileSelected(File selection) {
      if (selection == null) {
        println("Window was closed or the user hit cancel.");
      } else {
        save(selection.getAbsolutePath()+".jpg");
      }
    }

    void load() {
      selectInput("Select a file to process:", "bildLaden");
    }


    void bildLaden(File datei) {
      println(datei.getPath());
      if (datei!=null) {
        bild = loadImage(datei.getPath());
        cp5.getController("farbe").setVisible(true);
        cp5.getController("save").setVisible(true);
        cp5.getController("load").setVisible(false);
      }
      filtern();
    }

amnon

You make the slider invisible in line 15.

Remove the line, then the slider is visible and working.

Also, moved thread to the correct section: Library Questions

jenlie

No that's correct the way it is. When you start the program, you have only a "load" button and as soon as you have selected an image and it has been loaded, the slider and other buttons are visible. And I can interact with the slider but it is just doing nothing. It is supposed to change the color of the image. But thank you for your fast answer and moving it to the correct section.

colouredmirrorball

I think the problem is that you just set the value farbe with the slider but don't use it anywhere, once you loaded in the image. I suspect you need to call the filtern() function inside the farbe() function otherwise it won't have an effect.

amnon

Oh right, I assumed you meant "slider is not working" literally, but instead it referred to the effect the slider should have on the image. Indeed, like colouredmirrorball said, just put the filtern() call inside the farbe() method. Then whenever you change the slider, the filter is called.

jenlie

Yes that was it! Thank you so much :)