Lab 8
Get started now
## [__Intro Video__](lectures/1021lab8.mp4) ## __Update: `.gif` support is not required__ ## Objectives * Employ text file input and output to read and write image files. * Research and make use of a number of classes in the [javafx.scene.image](http://javadoc.taylorial.com/javafx.graphics/scene/image/package-summary.html) package. * Construct a non-trivial interactive graphical user interface * Handle exceptions in a robust and meaningful fashion. ## Resources * [`ImageUtil` Documentation](ImageUtil.html) * [`ImageUtil.jar`](ImageUtil.jar) ## Overview In this assignment you will be developing an image manipulation program. The remaining laboratory assignments will build on this one, allowing you to improve your initial submission based on feedback from your instructor. The program itself will be capable of reading and writing multiple image formats including `.jpg`, `.png`, `.tiff`, and a custom format: `.msoe` files. The program will also be able to apply simple transformations to the image like: * Converting the image to grayscale * Producing the negative of the original image The transformations are applied to the image that appears on the screen (rather than the image originally loaded from the file) so that multiple transformations can be applied. For example, the user should be able to create a negative grayscale image by clicking both buttons. ## Assignment This assignment has been designed to provide numerous ways in which the program may be expanded. Students are encouraged to use their creativity to implement additional functionality beyond the requirements of the assignment; however, it is important to complete the required functionality before getting too carried away. <figure>[![User Interface](lab8.png)](lab8.png)<figcaption>Figure 1: User Interface<sup><a href="#fn__1" name="fnt__1" id="fnt__1" class="fn_top">1)</a></sup></figcaption></figure> In short you must implement the following functionality: * Load and reload images stored in the following image file formats: `.jpg`, `.png`, `.tiff`, and `.msoe`. * Note that "large" `.msoe` images will be slow to load and save. * Display the image that has been loaded * Use a [`FileChooser`](http://javadoc.taylorial.com/javafx.graphics/stage/FileChooser.html) to select the image file to load and save. * Convert an image to a grayscale version * Convert an image to a negative version of the image * Save images in the following image file formats: `.jpg`, `.png`, `.tiff`, and `.msoe`. The format written must match the file extension. For example, if the current picture was loaded from a `.jpg` file and the user enters **`image.png`**, the image must be saved in the `.png` file format. * The appropriate graphical user interface to support the operations listed above. * Handle the appropriate exceptions for the operations above. All of your classes should be placed in a package whose name matches your MSOE username. ## Details ### Handler Methods Your user interface does not need to match Figure 1 but does need to facilitate all of the functionality in an intuitive way. You must incorporate the following methods into your design: * **`void load(ActionEvent event)`** &mdash; Handler for loading an image. * **`void reload(ActionEvent event)`** &mdash; Handler for re-loading an image. This reloads the most recently loaded image (does not show the file chooser dialog). * **`void save(ActionEvent event)`** &mdash; Handler for saving an image. * **`void grayscale(ActionEvent event)`** &mdash; Handler for converting an image to grayscale. * **`void negative(ActionEvent event)`** &mdash; Handler for converting an image to its photo negative. You may use FXML but are not required to do so. ### `.msoe` File Format The custom `.msoe` file format is a text based file format for storing images. It is designed to be easy to load and save, but results in comparatively large file sizes. The contents of a very small image of a white-on-black `+` symbol is shown below: <pre> MSOE 3 3 #000000 #FFFFFF #000000 #FFFFFF #FFFFFF #FFFFFF #000000 #FFFFFF #000000 </pre> * The first line specifies that the file contains an `.msoe` image. * The second line specifies, in order, the width and height of the image. * Each remain line specifies the colors of the pixels for one row of the image. * Line 3 specifies pixel colors for the first row in the image. * Line 4 specifies pixel colors for the second row in the image. * Line `k` specifies pixel colors for the `k-2` row in the image. Your program should be able to load [this `.msoe` image](hamburger.msoe). ### Loading and Saving Images The program must support loading and saving `.jpg`, `.png`, `.tiff`, and `.msoe` image file formats. The load button will open a `FileChooser` dialog that will allow the user to select the file to be loaded (`showOpenDialog()`). The program will use the extension to determine the format of the file and load the image. If the file extension is not supported or the file contents does not match the file extension, the program will display an error message. Pressing the reload button will reload the most recently loaded image. The save button will open a `FileChooser` dialog box that will allow the user to select the destination folder and type in the filename and extension (`showSaveDialog()`). The program will then write the image to that file using the file format that matches the file extension. If an unsupported file extension is entered, the program will display an error message without attempting to save the image. You should write your own `ImageIO` class is responsible for loading and saving images. The class must have the following public **class** methods: * **`read(Path path)`** &mdash; Reads in the specified image file and returns a `javafx.scene.image.Image` object containing the image. * **`write(Image image, Path path)`** &mdash; Writes the specified image to the specified path. If the extension on the file passed to either of these methods is `.msoe` then the appropriate private class method below is called to do the actual work. * **`readMSOE(Path path)`** &mdash; Reads an image file in `.msoe` format. * **`writeMSOE(Image image, Path path)`** &mdash; Writes an image file in `.msoe` format. Both `read()` and `write()` must throw an `IllegalArgumentException` if the `path` passed in has a file extension that specifies an unsupported image format. You may use the [`ImageUtil`](ImageUtil.html) class [`ImageUtil.jar`](ImageUtil.jar) to read and write files in the `.jpg`, `.png`, and `.tiff` formats. You must implement your own code to read and write `.msoe` files. ### Grayscale This transformation converts the image into a grayscale image. If the image is already grayscale, the transformation has no affect. In this transformation, the RGB components of each pixel are replaced with a single value. The replacement value can be calculated as: *gray = 0.2126R + 0.7152G + 0.0722B* [more info](http://en.wikipedia.org/wiki/Grayscale). <figure>[![Grayscale](lab8grayscale.png)](lab8grayscale.png)<figcaption>Grayscale Example</figcaption></figure> ### Negative This transformation converts the image into a photo negative of the original image. In this transform, each RGB component is replaced with *1.0 - original value*. Thus, an RGB value of (1.0, 1.0, 0.0) would become (0.0, 0.0, 1.0). [more info](http://en.wikipedia.org/wiki/Negative_%28photography%29). <figure>[![Negative](lab8negative.png)](lab8negative.png)<figcaption>Negative Example</figcaption></figure> ### Exception Handling There are a number of situations that could cause your program to throw an exception. For example, if the file is not found, cannot be opened, or contains incorrectly formatted data, it is likely that an exception will be thrown. In these cases, the program should display an useful message. ## Just For Fun There are many additional enhancements that could build on the required functionality. You are encouraged to enhance this application using your creativity. A number of potential enhancements are included below; however, you should not feel limited to these suggestions. * Display the color of the pixel under the mouse (shown in screenshots) * Add a menu to the main window to replace (or in addition to) the buttons * Apply a transform to only a selected region of the image * Display the original and transformed images side-by-side * Toggle between original and transformed images when mouse button is pressed on the image * Create a meme generator by adding styled text on the image * Tonal adjustment (e.g., adding a red hue to the region of the image underneath the mouse) * Provide undo functionality * Implement additional transformations, e.g. * Brighten * Darken * Decrease color saturation * Increase color saturation ## Lab Deliverables > See your professor's instructions for details on submission guidelines and due dates. > * Dr. Taylor's students: See below > * All other students should refer to Blackboard > >If you have any questions, consult your instructor. ## Acknowledgment This laboratory assignment was developed by [Dr. Chris Taylor](/taylor/). <div class="footnote"> <sup><a href="#fnt__1" id="fn__1" name="fn__1" class="fn_bot">1)</a></sup> The label at the bottom center of the window is not required but is the first enhancement suggested in the Just for Fun section. <br /> </div>

Monday, 04-Feb-2019 12:05:20 EST