We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Programs › Enlarging a thumbnail image.
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Enlarging a thumbnail image. (Read 1352 times)
Stavros
Enlarging a thumbnail image.
Apr 17th, 2010, 11:59pm  

Hey everyone, I'm new to processing and am trying to create an Image gallery. I'm having trouble getting my thumbnail images to enlarge upon a mouse click. Also, This may be a stupid question but I have two other images that I drew using processing itself. Is there any way I could export them as a .gif so that I could treat them the same way I do the .jpg images ? Or is there another way to make them a thumbnail that I can then enlarge ?

my basic code for the thumbnail gallery is this. (nothing fancy at all )
PImage bat;
PImage Mask;

void setup() {
size (500,500);
background(0,80,80);

bat = loadImage("Bat_face.jpg");
Mask= loadImage("Mask.jpg");
noLoop();

}

void draw() {
//image (bat,0,0);
image(bat, 10,380, bat.width/2, bat.height/2);
image(Mask,130,380, Mask.width/2, Mask.height/2);
}

Thanks for any help!
Back to top
 
 
PhiLho 
Re: Enlarging a thumbnail image.
Reply #1 - Apr 18th, 2010, 1:51am  
I am getting the feeling that you make two different, unrelated questions.

About exporting images (avoid Gif format, prefer PNG for example): use the save() function.

About making a thumbnail: you are doing it the right way. Load the full image and display it reduced. The other way would look ugly (enlarged small images often look fuzzy).

Mouse click: use mousePressed() for example. Upon this event, set a variable (boolean) to true (reset it on false on mouseReleased() or another click) and in draw(), use this variable to know if the image must be displayed reduced or full size.
Back to top
 
WWW  
Stavros
Re: Enlarging a thumbnail image.
Reply #2 - Apr 18th, 2010, 9:37am  
ok, so the save() function actually allows me to save the sketch as a pde?

And as for entering the draw() you mention using the variable to know what size the image would be displayed at, I'm a little confussed with this.

Appreciate the help, seems like user input has been my biggest issue with what I'm trying to do right now.
Back to top
 
 
Stavros
Re: Enlarging a thumbnail image.
Reply #3 - Apr 18th, 2010, 9:54am  
Meant save the sketch as a .png, my mistake.
Back to top
 
 
Stavros
Re: Enlarging a thumbnail image.
Reply #4 - Apr 18th, 2010, 9:40pm  
Could any one give me an example of what the code to enlarge a thumbnail would look like, its late and I'm getting frustrated with the constant errors lol.
Back to top
 
 
PhiLho 
Re: Enlarging a thumbnail image.
Reply #5 - Apr 18th, 2010, 9:45pm  
OK, here is a quick sketch trying to illustrate the idea:
Code:
int THUMB_SIZE = 100;
int FULL_SIZE = 200;
boolean bDrawFullSize;

PImage img;

void setup()
{
  size(500, 300);
  img = loadImage("D:/_PhiLhoSoft/images/Engine.png");
}

void draw()
{
  background(0);
  if (bDrawFullSize)
  {
    image(img, 10, 10, FULL_SIZE, FULL_SIZE);
  }
  else
  {
    image(img, 10, 10, THUMB_SIZE, THUMB_SIZE);
  }
}

void mousePressed()
{
  bDrawFullSize = true;
}

void mouseReleased()
{
  bDrawFullSize = false;
}

You have to refine the idea, like having a boolean per image, finding out which image is clicked, perhaps handling toggle click, etc.
Back to top
 
WWW  
Stavros
Re: Enlarging a thumbnail image.
Reply #6 - Apr 18th, 2010, 9:56pm  
Thanks so much for that! Now that I can at least visualize it, I can see where I was going wrong.
Back to top
 
 
Stavros
Re: Enlarging a thumbnail image.
Reply #7 - Apr 19th, 2010, 10:18am  
Ok so far I have put this together (Its not meant to be attractive lol)

boolean makeLarge;
PImage bat;
PImage Mask;
PImage jpg_bat;
PImage jpg_mask;

void setup()
{
 size(500, 500);
 smooth();
 fill(255,255,255);
 textFont(createFont("sansSerif",32));
 textAlign(CENTER);

 bat = loadImage("Bat_face.jpg");

 Mask = loadImage("Mask.jpg");

 jpg_bat = loadImage("bat.jpg");

 jpg_mask = loadImage("tribal.jpg");

}

void draw() {
 background(0);
 text("Click On An Image!", width/2, height/2);

 image(bat, 10,419, 70, 70);

 image(jpg_bat, 380,380, 140, 140);
 
 image(jpg_mask,415,10, 70,70);

 if (makeLarge)
 {
   image(Mask, 10, 10, 210, 210);

 }
 else
 {
   image(Mask, 10, 10, 70, 70);

 }



}
void mousePressed()
{
 makeLarge = true;

}

void mouseReleased()
{
 makeLarge = false;


}


The code example was a huge help and I feel like I am almost done with what I am looking to do. But how would I get to where the pic you click on is the one that enlarges? I tried using If() statements that correspond to each image with in the draw() but then seem to get mixed up with how to implement the boolean statement to them. It seems like its something that should be able to be done in only a few lines of code using the mouse coordinates.
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›