How to Upload a New Image?

lindsayhickson

I want to be able to upload a new image into my code after I already have an image in there. I can do this, but it won't refresh the screen until I click a different effect. It also works if I upload two photos back to back without applying an effect. I want the new photo to upload without an effect AND replace the old effected photo. Any ideas?

/**   DM Filter Project Starter Code
/*    v.20131126
/*    Bradley Beth
**/

boolean PicLoaded = false;
boolean Grayscale = false;
boolean Effect1 = false;
boolean Effect2 = false;
boolean Effect3 = false;
int picWidth = 0;
int picHeight = 0;
int d = 1;
PImage img;
/***********************************/

void setup() 
{
  size(800, 480);
  background(185);
  textAlign(LEFT);
  textSize(16); 
}

void draw()
{

  background(185);
  noStroke();
  int picStart = 0;
  int picEnd = 0;
  int i = picStart;

  /* draw buttons */

  strokeWeight(1);
  stroke(0);
  fill(0);
  textSize(16);
  text("File Operations",665,30);
  line(650,0,650,480);
  noStroke();

  fill(255);
  rect(660, 50, 130, 40, 10);
  fill(55);
  text("Load Picture", 675, 75);

  fill(255);
  rect(660, 100, 130, 40, 10);
  fill(55);
  text("Save Picture", 675, 125);

  stroke(0);
  line(650,150,800,150);
  noStroke();

  stroke(0);
  fill(0);
  textSize(16);
  text("Filter Effects",675,180);
  line(650,0,650,480);
  noStroke();

  if (Grayscale)
    fill(#FFFF7D);    //Effect on means a yellow lighted button
  else
    fill(255);
  rect(660, 200, 130, 40, 10);
  fill(55);
  text("Grayscale", 680, 225);

  if (Effect1)
    fill(#FFFF7D);    //Effect on means a yellow lighted button
  else
    fill(255);
  rect(660, 250, 130, 40, 10);
  fill(55);
  text("Effect One", 680, 275);

  if (Effect2)
    fill (#FFFF7D);     //Effect on means a yellow lighted button 
  else
    fill(255); 
  rect(660, 300, 130, 40, 10);
  fill(55);
  text("Effect Two", 680, 325);

  if (Effect3)
    fill (#FFFF7D);    //Effect on means a yellow lighted button
  else
    fill(255);   
  rect(660, 350, 130, 40, 10);
  fill(55);
  text("Effect Three", 680, 375);

  noStroke();
  textSize(16);

  //The following loads and displays an image file.
  //The image is resized to best fit in a 640x480 frame.
  if (PicLoaded)
  {     
    picWidth = img.width;
    picHeight = img.height;

    if (picWidth > 640)
    {
      picHeight = (int)(picHeight*(640.0/picWidth));
      picWidth = 640;
    }
    if (picHeight > 480)
    {
      picWidth = (int)(picWidth*(480.0/picHeight));
      picHeight = 480;
    }
    image(img, 0, 0, picWidth, picHeight);

    picStart = 0;
    picEnd = picStart+width*picHeight;

    /***** Effects Code *****/

    /* This sample grayscale code may serve as an example */
    if (Grayscale)
    {
      redraw();
      loadPixels();
      while (i < picEnd) 
      {
        color c = pixels[i];
        float gray = (red(c)+green(c)+blue(c))/3.0;  //average the RGB colors
        pixels[i] = color(gray, gray, gray);
        i = i + 1;
        if (i % width >= picWidth)        // This will ignore anything on the line that 
        i = i + width - picWidth;       // after the image (such as buttons)
      }
    }

    if (Effect1)
    {
      redraw();
      loadPixels();
     {
      image(img,0,0);
      tint(255,200);     
      i = i + 1;
      if (i % width >= picWidth)
        i = i + width - picWidth;
     }
    }

    if (Effect2)
    {
      redraw();
      for (d = 0;  (picHeight/15)*d < picHeight; d = d + 1)
      {
      stroke(255);
      strokeWeight(2);
      line(0, (picHeight/15)*d, picWidth-1, (picHeight/15)*d);   
      } 
      loadPixels();
      while (i < picEnd) 
      {
        color c = pixels[i];
        float r = (red(6*c)); 
        float g = (green(8*c));
        float b = (blue(7*c));
        pixels[i] = color(r, g, b);     
        i = i + 1;        
        if (i % width >= picWidth)        
        i = i + width - picWidth;       
      }
    }

    if (Effect3)
    {
     redraw();
     loadPixels();
      while (i < picEnd) 
      {
        color c = pixels[i];
        float r = (red(c)); 
        float g = (green(c));
        float b = (blue(c));
        pixels[i] = color(r, b, g);     
        i = i + 1;        
        if (i % width >= picWidth)        
        i = i + width - picWidth;       
      }
    }   
    updatePixels(); 
    redraw();   
  }
  fill(255);
  noStroke();
}

void mouseClicked() {

  redraw();
}

void mousePressed()
{
  //The following define the clickable bounding boxes for any buttons used.
  //Note that these boundaries should match those drawn in the draw() function.

  if (mouseX>660 && mouseX<790 && mouseY>50 && mouseY<90)
  {
    selectInput("Select a file to process:", "infileSelected");
  }

  if (mouseX>660 && mouseX<790 && mouseY>100 && mouseY<140)
  {
    selectOutput("Select a file to write to:", "outfileSelected");
  }

  if (mouseX>660 && mouseX<790 && mouseY>200 && mouseY<240 && PicLoaded)
  {
    Grayscale = true;
    Effect1 = false;
    Effect2 = false;
    Effect3 = false;
    tint(255,255,255,255);
  }   

  if (mouseX>660 && mouseX<790 && mouseY>250 && mouseY<290 && PicLoaded)
  {
    Effect1 = true;
    Grayscale = false;
    Effect2 = false;
    Effect3 = false;
  } 

  if (mouseX>660 && mouseX<790 && mouseY>300 && mouseY<340 && PicLoaded)
  {
    tint(255,255,255,255);
    Effect2 = true;
    Grayscale = false;
    Effect1 = false;
    Effect3 = false;
  }  

  if (mouseX>660 && mouseX<790 && mouseY>350 && mouseY<390 && PicLoaded)
  {
    Effect3 = true;
    Grayscale = false;
    Effect1 = false;
    Effect2 = false;
  } 

  redraw();
}

void infileSelected(File selection) 
{
  if (selection == null) 
  {
    println("IMAGE NOT LOADED: Window was closed or the user hit cancel.");
  } 
  else 
  {
    println("IMAGE LOADED: User selected " + selection.getAbsolutePath());
    img = loadImage(selection.getAbsolutePath());
    PicLoaded = true;
    Grayscale = false;
    Effect1 = false;
    Effect2 = false;
    Effect3 = false;
    redraw();
  }
}

void outfileSelected(File selection) 
{
  if (selection == null) 
  {
    println("IMAGE NOT SAVED: Window was closed or the user hit cancel.");
  } 
  else 
  {
    println("IMAGE SAVED: User selected " + selection.getAbsolutePath());
    updatePixels();
    redraw();
    save(selection.getAbsolutePath());
    redraw();
  }
}

lindsayhickson

Update: My save button is also COMPLETELY not working.

Eeyorelife

I am a little confused by your code, you should put the effects in separate functions, i think, so you can just say if(Grayscale) grayscale(); in draw which is nicer to look at and easier to work with, because you are isolating the problems. And I would take a look at TfGuy44, or GoToLoop's way of coding buttons, as that has helped me a lot when it comes to structure.

I noticed that if I load an image and then load a new one without selecting an effect, it works perfectly. So my instinct tells me that it's because you are loading pixels from the previous image. I also noticed you are using redraw(); a lot why? it workes perfectly fine without it..

Your result is neat though! I really liked it!

lindsayhickson

Yeah, all of the things you mentioned were what was given to me in the starter code. Regardless, I will definitely use your suggestions. I totally agree! Maybe if I reorganize it I will be able to see my issues better. Thanks!

koogs

adding brackets around single-line blocks aids readability. especially important when posting to forums that can mangle whitespace... (lines 172, 189...)

koogs

continued here

https://forum.processing.org/two/discussion/15166/saving-errors

closing...