1

TCSS 305 Programming Practicum
Assignment 5: SnapShop
Value: 10% of the course grade
Due: Tuesday, 10 March 2020, 23:59:00

Program Description:

This assignment is designed to test your understanding of graphical user interface components in Java using
Swing. You will write the graphical user interface (GUI) for an application that displays and manipulates
images. The classes for image-processing have already been given to you. You will need to only write a class
named SnapShopGUI based on the below guidelines.
Overview:
You will write a class named SnapShopGUI in the gui package that should contain the implementation of your
graphical user interface. SnapShopGUI should:
• Allow to load, save and close the image. Sample images are given under the folder sample_images.
• Allow to apply different filters to the images. The frame should re-size based on the image that is being
displayed.
• The SnapShopGUI class should use the PixelImage and XXXFilter classes that have already
been provided
The class diagram for this assignment is shown below.


uses
uses
This is the class you
will write.
2


Provided Files:
The following classes and interfaces are provided for your use. You must not modify these files when writing
your program. The classes have other methods beyond what is listed, but the listed methods are all you need.

Interface Filter:
public interface Filter {
// Applies this filter to the given image.
public void filter(PixelImage theImage);

// Returns a text description of this filter, such as "Edge Highlight".
public String getDescription();
}

The following classes implement the Filter interface. Each has a no-argument constructor.
public class EdgeDetectFilter implements Filter
public class EdgeHighlightFilter implements Filter
public class FlipHorizontalFilter implements Filter
public class FlipVerticalFilter implements Filter
public class GrayscaleFilter implements Filter
public class SharpenFilter implements Filter
public class SoftenFilter implements Filter

Class Pixel:
public class Pixel {
public Pixel() // constructs a black pixel
public Pixel(int theRed, int theGreen, int theBlue) // RGB values, 0-255
public int getRed(), getGreen(), getBlue()
public void setRed(int theRed), setGreen(int theGreen), setBlue(int theBlue)
}

Class PixelImage:
public class PixelImage {
// Loads an image from the given file and returns it.
// Throws an exception if the file cannot be read.
public static PixelImage load(File theFile) throws IOException

// Saves this image to the given file.
// Throws an exception if the file cannot be written.
public void save(File theFile) throws IOException

// Methods to get and set the 2D grid of pixels that comprise this image.
// The first dimension is the rows (y), the second is the columns (x).
public Pixel[][] getPixelData()
public void setPixelData(Pixel[][] theData)
}

Class SnapShopMain:
public class SnapShopMain {
// Runs your program by constructing a SnapShopGUI object.
// (You must write the SnapShopGUI class.)
public static void main(String... theArgs)
}

3

Implementation Guidelines:
1. SnapShopGUI should have a parameterless constructor and must not have code to display the GUI on
the screen; instead, you should create a start() method that performs all necessary work to create and
show the GUI. Note that this does not mean that all the work should be performed in the start() method
itself; the start() method should call other methods to create various parts of the user interface (buttons,
panels), setup event handlers, etc. The main method in the SnapShopMain class calls the SnapShopGUI
constructor and then calls start().
2. When the program initially loads, it should have the following appearance. The window title should be
“TCSS 305 – Assignment 5”. [The snapshot is from a windows machine]


3. The frame icon, as shown above should be set to smile.jpg which is present under the icons folder
4. Buttons should be centered along the top of the window and they should be labeled "Edge Detect",
"Edge Highlight", "Flip Horizontal", "Flip Vertical", "Grayscale", "Sharpen",
"Soften", "Open...", and "Save As..." (each with 3 dots called an ellipses) and a button labeled
"Close Image".
5. All buttons except "Open..." should be initially disabled. You can use the setEnabled()method of
the JButton class to implement this.
6. When the user clicks "Open...", a file selection dialog appears to let the user load an image. The file
selection dialog should open the current directory as shown below (use relative addressing). Use
showOpenDialog from JFileChooser for displaying the file selection dialog. You can retrieve the
file selected by calling the getSelectedFile method. Your program should create only one
JFileChooser object and reuse it repeatedly.


4


7. Once the file selection is successful, the system loads image data from that file using the PixelImage
class. PixelImage image = PixelImage.load(new File("apple.jpg"));

8. The loaded image should be displayed on the screen. For displaying the image, create a JLabel and set
the icon of JLabel as the image you want to display. A JLabel's icon is set by calling its setIcon
method. The setIcon method accepts an ImageIcon object as a parameter. An ImageIcon object can
be constructed by passing a PixelImage as the parameter. Here is an example that creates a new label
and sets its icon (note that you should not create a new Jlabel every time you change the image, but
instead should change the icon of the label you already have).

PixelImage image = PixelImage.load(new File("apple.jpg"));
JLabel label = new JLabel();
label.setIcon(new ImageIcon(image));
9. The JFrame, i.e., the GUI that is displayed should be centered relative to your system window.
10. The JFrame should be resized to display the loaded image and the buttons as shown below. The loaded
image should remain centered both horizontally and vertically.


When an image is selected and loaded, call the pack() method on your JFrame to make it resize itself
to fit the image and buttons. After packing the JFrame, set the minimum size of the JFrame to be the
current size of the JFrame (so that it cannot be resized too small to display the image or the buttons).
If the image is too large, pack() may make your window larger than the screen; that’s OK .
11. If the image is too large some of the buttons may appear outside the screen area (this is expected
behavior, and you do not need to handle it in any special way).
12. When an image is loaded, all buttons become enabled, as shown above.
13. If the user later pushes the "Open..." or "Save As..." button again, it should open the same folder
where the file chooser was left previously. If the user cancels the file chooser, the contents of the
window are left unchanged.
14. If image loading (PixelImage.load) fails, catch the IOException and use a JOptionPane to
display an error message dialog like the one shown below.
5


15. Clicking each filter button causes a modification of the image: flipping, sharpening, softening, etc.
Applying more than one filter to an image has a cumulative effect. These operations do not modify the
original image file, they just change the onscreen appearance.
Example: On clicking the Edge Detect button, the filter() method of the EdgeDetectFilter class
should be called. Note that the filter method takes as parameter the PixelImage

Try to design and implement an efficient way of creating filter class objects and their corresponding
buttons. Ideally, it should take you exactly one line of code to create each filter and its corresponding
button and the button's ActionListener (7 such lines of code for the 7 filter/button/listener combinations).
The goal is to make it possible to easily add (or remove) a filter and its corresponding button without
making changes to other parts of the project code. Note that a single filter object can (and should) be
used multiple times; you must not create more than one of each type of filter object.
16. After applying filter on the image, again use label.setIcon(new ImageIcon (image)) or call
label.repaint().
17. When "Save As..." button is clicked the image displayed on the screen should be saved to a file. For
this, a save dialog should be shown by calling showSaveDialog on a JFileChooser object. The save
dialog should open the same folder where the file chooser was left previously. Use the save(File
theFile) method of the PixelImage class for saving the file.
18. If the user chooses "Close Image", the image should close, all buttons should disable except the
"Open..." button, and the GUI should resize to its initial size and appearance. If the "Open..."
button is used while an image is already open, a new image may be selected to replace the current
image. Only one image can be open and displayed for editing at a time. When the GUI window is
closed, the program should exit.
6

19. Included with the project are some image files (under the folder sample_images) you can use for
testing and some icon files (under the folder icons) which you could add to the buttons at the bottom
of the GUI if you choose.

Submitting your assignment:
Download username-snapshop.zip file from the Assignment 5 page on Canvas, import it into your
workspace and using “Refactor” to change “username” in the project name to your UWNetID. Use Step4 under
“Using Previous Code” of hw1.pdf to rename you project, make changes and submit it to the SVN repository.
Submitting your executive summary:
The executive summary template will be provided to you in canvas. Download the file. Rename the executive
summary “executivesummary-username-snapshop”, where username is your UWNetID. Fill and
upload the executive summary to canvas as the same WORD format. The grader will grade your submission
based on the executive summary as well as the project you submit to the SVN repository. If you do not submit
either of them, you will receive no grades.

Grading Rubric (Total 100 points):
Task Max Score
Possible
Executive Summary -Submission on canvas with correct version number 2
Source Code – Submission to SVN 2
SnapShopGui - Correct implementation of Parameterless Constructor and Start() Method 2
Initial Appearance: Correct Title and Icon 5
Initial Appearance: GUI centered to the system window 5
Initial Appearance: Correct number and name of buttons, correct layout followed 5
Initial Appearance: Correct buttons disabled and enabled 2
Initial Appearance: Frame size is the same as shown in the program output 3
Open Button: Shows the FileChooser dialog when clicked 2
Open Button: The current directory is displayed 2
Open Button: An image file under sample_images can be selected 2
Open Button: The selected file is displayed on the screen 5
Image Load: The frame is properly resized when the selected file is displayed on the screen 7
Image Load: The pack() method is called properly. The minimum size of the frame is
correctly set.
3
Image Load: The JLabel’s setIcon method is used to display the image 2
Image Load: Once the image is loaded successfully, the other buttons are enabled 2
Image Load: When a .java file is selected instead of an image and loaded on the screen, a
dialog box with an error message should be shown
3
Open Button/Save Button: When these buttons are clicked again, the it should open the same
folder where the file chooser was left previously. If the user cancels the file chooser, the
contents of the window are left unchanged.
2
Filter: Clicking each filter button causes a modification of the image 7
Filter: Applying more than one filter to an image has a cumulative effect. These operations
do not modify the original image file
2
Filter: No more than one of each type of filter object is created 2
7

Filter: After applying the filter, the modified image is displayed correctly on the screen 3
SaveAs: A JFileChooser is displayed. The same folder where the file chooser was left
previously is displayed
2
SaveAs: The displayed image is saved properly 2
Close Image: The image is closed 5
Close Image: all buttons should disable except the "Open..." 2
Close Image: the GUI should resize to its initial size and appearance 5
When the GUI window is closed, the program should exit.
2
Correct Project Name and Executive summary name 2
No Errors and Warnings (except reasonable ones which should be clearly explained in
executive summary)
5
Proper Java docs and Header comments 5


Total


100