I get started and can’t seem to get past the basic GUI set up. mainly having problems after you.
I get started and can't seem to get past the basic GUI set up. mainly having problems after you have to start making Icons.
Objective
You will implement a minimalist photo browser. The photo browser will display thumbnails
for every image in a directory. When a thumbnail is clicked, the selected photo will be
enlarged for viewing.
Getting Started
Download the ImagePanel.java and ScaledIcon.java source files and add those to
your Eclipse project. You may also want to download the photo browser screen shot for
reference as you work on your user interface.
Requirements
Graphical User Interface Layout (20 pts)
Create a class called PhotoGUI. All of your GUI code should be contained within this class.Layout your GUI like the screen shot. Your GUI can have a differentcolors and such, but itshould be organized in the same way. There should be a viewing area, which will display the enlarged picture, and a thumbnail browser areaat the bottom, which will display the thumbnails. Use an ImagePanel as the component for displaying the large image in the viewing area.You will need a JScrollPanefor creating the thumbnail area since the row of thumbnailsmay be wider than the width of the window. You will need to place a JPanel inside theJScrollPane so youcan add a ImageButton for each thumbnail image. Use aFlowLayout, not a BorderLayout, so as you add each thumbnail button, they will beadded to the right of theprevious thumbnail buttons.
Opening the Directory and Launching the GUI (10 pts)
Create a class called PhotoBrowser. This must contain your main method (and nothing
else.) When the program is first run, it must open a dialog box which prompts the user to choose a directory to view. Use a JFileChooser for the dialog box. Youwill need to make sure to set the chooser to only allow directories. Here is example code for setting the title and the directory filter for theJFileChooser.
JFileChooser chooser = newJFileChooser(); chooser.setDialogTitle(“Select image directory”);
chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
The GUI should not be displayed until after the user selects a directory. The thumbnail
browser should be populated with all the images from the chosen directory.
Finding the Images (15 pts)
Images should be limited to files with the following file extensions: “.jpg”, “.jpeg” or “.bmp”.You may also support other extensions such as “.png” or “.gif”, butthey are not required.File extension may be upper case or lower case or a combination of both. For example,“fish.jpg”, “fish.JPG” and “fish.Jpeg” should all berecognized as image files. Do not displaythumbnails for non-image files found in the directory. (Hint: Think about how could youcould account for the case of afile name before checking the extension.)
You can get a list of files in a directory by calling the listFiles method on a File object.
You should filter that list of files using the the above criteria. For each file that matches thecriteria, you should add a thumbnail button into the browserarea.
Creating an ImageButton (15 pts)Create an ImageButton class which extends the JButton class. This class will be used tocreate buttons which display an imagethumbnail on the face of the button. There should onlybe one constructor for this class:
public ImageButton(File image)Rather than using the ImageIcon class for setting the Icon on the button face, use theScaledIcon class provided with the assignment.Look at the source file for ScaledImagefor its documentation.Additionally, the ImageButton class should provide the following method:public String getPath()
This method should return a string which contains the absolute path to the image file beingdisplayed on the icon.
Creating the Thumbnail Buttons (15pts)
Thumbnails for all the valid images in the chosen directory should be displayed at the bottomof the window. Each of these thumbnails should be an ImageButton. Whena thumbnail ispressed, that image should be displayed in the viewing area (see below.) In order to create anImageButton, you must find a way to pass each of theFile objects you get from the“Finding the Images” step to the ImageButton constructor.
Selecting an Image (15 pts)
When the GUI first opens, no image should be displayed in the viewing area. When the userclicks on one of the thumbnail buttons, the image associated with thatthumbnail should bedisplayed in the viewing area.You must only use one ActionListener for all of the buttons. Within your singleActionListener, use the getSourcemethod on the ActionEvent to get a reference tothe ImageButton that was pressed. You must call the getPath method on thatImageButton to get the file path to sendto the setImage method of ImagePanel.
Included classes:
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JPanel;
public class ImagePanel extends JPanel {
private Image img;
private int width, height;
public ImagePanel() {
super();
setBackground(Color.black);
}
public ImagePanel(String filename) {
super();
setBackground(Color.black);
loadImage(filename);
if (img != null) {
// By default, we'll set the dimensions of the panel to match the
// actual size of the image.
setSize(width, height);
}
}
public void paintComponent(Graphics g) {
// Do any panel-specific painting first
super.paintComponent(g);
// Make sure the scaling is smooth
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
if (img != null) {
// Calculate the amount the width and the height must be scaled. The
// smallest scale factor is the one that is used. Also, an offset
// amount is calculated for the vertical and horizontal centering.
double scale_width = (double) getWidth() / width;
double scale_height = (double) getHeight() / height;
double scale = scale_width;
int x_offset = 0;
int y_offset = (int) ((getHeight() – height * scale) / 2);
if (scale_height
scale = scale_height;
x_offset = (int) ((getWidth() – width * scale) / 2);
y_offset = 0;
}
// Draw the scaled image.
g.drawImage(img, x_offset, y_offset, (int) (width * scale), (int) (height * scale), null);
}
}
public void setImage(String filename) {
loadImage(filename);
repaint();
}
private void loadImage(String filename) {
// Allow the called to “blank out” the image.
if ( filename.equals(“”) ) {
img = null;
width = 0;
height = 0;
return;
}
// Try to load the image file. For simplicity, exceptions are simply
// logged and not passed back to the caller.
File file = new File(filename);
try {
img = ImageIO.read(file);
if ( img != null ) {
width = img.getWidth(null);
height = img.getHeight(null);
} else {
System.err.println(“Error: Not an image file: “+ file.getPath());
}
} catch (IOException e) {
System.err.println(“Error loading image: “+ file.getPath() +” “+ e.getMessage());
e.printStackTrace();
}
}
}
Second included class:
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
public class ScaledIcon extends ImageIcon {
public ScaledIcon(String path, int size) {
// Call the parent's constructor
super(path);
try {
// Get the unscaled image and calculate the scale factors.
Image img = ImageIO.read(new File(path));
if ( img != null ) {
double width_scale = (double) size / img.getWidth(null);
double height_scale = (double) size / img.getHeight(null);
double scale = width_scale;
if (height_scale
scale = height_scale;
}
int new_width = (int) (img.getWidth(null) * scale);
int new_height = (int) (img.getHeight(null) * scale);
// Create a scaled version of the image in memory
BufferedImage scaled = new BufferedImage(new_width, new_height, BufferedImage.TYPE_INT_RGB);
Graphics2D g2 = scaled.createGraphics();
g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g2.drawImage(img, 0, 0, new_width, new_height, null);
g2.dispose();
// Replace the current image with the scaled image.
setImage(scaled);
} else {
System.err.println(“Error: Not an image file: “+ path);
}
} catch (IOException e) {
System.err.println(“Error loading image: “+ path +” “+ e.getMessage());
e.printStackTrace();
}
}
}
