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
