CS 103 Project 2 -- Spring 2008 Overview This assignment will demonstrate your ability to create a functional Graphical User Interface (GUI) that will perform the various image processing task that were used in the first project. A p-code solution will not be available for this project, but demonstrations of the working project can be seen in class and upon request during help sessions, TA office hours, etc. Details For this project, your team will build upon the first programming assignment. Your team will need to produce a Graphical User Interface (GUI) that will allow the user to: 1. Open an image 2. Adjust image’s contrast 3. Adjust image’s brightness 4. Adjust image’s gamma 5. Display a single color band (Red, Green, Blue) 6. Grayscale the image 7. Blur the image 8. Sharpen the image 9. Save the image 10. Undo changes to the image (NEW) 11. Extra credit image adjustment (NEW) When your program is run, it will open a GUI in which all the user interaction will be performed. While the program is running, the left image (original image) will stay the same. Each image adjustment will be made to only the right image. The effects from these changes will compound on the right image. Your team’s GUI will need to look similar to, and function the same way as, the version described in this document. You may re-use any of the functions from your first assignment, but you will find it necessary to make several additions and some minor modifications. There are many different image file formats: JPG, BMP, GIF, TIF, PNG, etc. A popular method of representing color is as a single byte for each Red, Green, and Blue value. This allows for 256 different color intensity levels for each color (values 0-255), which gives 16,777,216 (2563) different colors. Many of the popular image formats use this one-byte-per-color-channel representation for color data, but not all of them. For this reason, we will restrict image support to the JPG image format. Other image formats may, and probably will, work correctly with your code, but just be sure that JPG works. Warning! You are NOT allowed to use any of the Matlab Image Processing Toolbox functions. The student version of Matlab, which came with the laptops purchased through Vanderbilt by the majority of students, does not include the Image Processing Toolbox. Therefore in the interest of fairness, you are not allowed to use any of the functions that are part of Matlab’s Image Processing Toolbox. The complete lists of these functions are listed at http://www.mathworks.com/access/helpdesk/help/toolbox/images/f3- 23960.html. This means that you can use the functions imread() and imwrite(). Also, erroneously listed on that page are data type conversion functions, e.g. double(), uint8(), etc. These functions are also allowed and encouraged to be used. The “look” Every GUI has a “look and feel”. The look is what the user sees; the feel is the functionality. The look that you are striving for is shown below. Your GUI should look like this, but it does not have to look exactly like this. For example, you would want to change the label “Extra Credit” to something more descriptive (see the end of this document for more about extra credit). You may choose different colors, for example, but you should leave the required objects in approximately the same position to make it easier on us to find them when we are grading your submission. Matlab provides a wonderful program called “guide” to help you produce the look you want. You should begin reading (on your own!) Chapter 11 of your textbook, “ Graphical User Interfaces”, to learn how to use guide. You can run it anytime, however, merely by typing guide in the Command Window and hitting Enter. With this program you can layout buttons, boxes, and other interactive objects in your GUI, much as you would draw boxes and place arrows in a drawing in Microsoft Word. After you have gotten things looking right, you will have a GUI that looks beautiful, and when the user clicks on something, it will do—Nothing! In order to make something happen when the user clicks in your GUI, you must write some functions. The functions will all go into one M-file. That M-file is produced automatically by guide when you set up the GUI lay out, and it will contain most of the functions that you need. Guide also produces a second file, called a “Fig-file”, meaning figure file, and its file name will have the extension “.fig”. Together this pair of functions implements your GUI, and the reason your GUI does nothing is that the functions in the M-file do nothing. It is up to you to add code to these functions to cause them to do what you want your GUI to do. Functions All functions must be in the same, single m-file. Except for the first function, all functions will be subfunctions. The functions in this file that are written automatically by guide are special functions called “callback” functions. A callback function is called automatically when a user clicks on a specific object in the GUI. As written by guide, the function will have a set of arguments but little else. You will need to decide what you want to happen when the user clicks in an object, and you will make that happen by adding code to that object’s callback function. We require you to write additional functions (i.e., in addition to the callback functions) to implement any operations that you may need to repeat many times in the program, such as displaying the input and output images in the figure. If you find that more than one callback function needs to do the same operation, then it may make sense to have that operation done in a subfunction. You should add all such functions add at the end of the file after all the callback functions. The same variables are passed to each callback function, namely hObject, eventdata, and handles. As you begin to program, you will begin to wonder how your callback function can get access to all the data it needs, and you will be tempted to resort of global variables (i.e., by setting that attribute with the “global” declaration). Using global variables is a bad idea, it is not necessary, and we will penalized you for doing it! Instead, you must make use of the built-in function guidata, as explained on page 28 of Chapter 11 in the textbook. Notes Make sure that you go through the program description below in detail. You will be graded on the ability of your program to replicate the behavior listed in this document and demonstrated by the professor. There will be a penalty for every capability that your program does not replicate. Procedure for turning in your work Your team is required to submit the programming assignment in two ways: (1) the M-file file and the Fig-file file via OAK and (2) a printout of the M-file. You should upload your two files to OAK and print out a hard copy of your M-file to submit during the next class period (Friday, in general). The names of these files should be as follows: proj2_team#.fig and proj2_team#.m, where ‘#’ is your team’s number. The first function in the file, should not be changed from the form written by guide, except that you should add a header comment after the function line as follows. Suppose you are on team 5 and the names of your team members are Abe B See, Dee E. Eff, and G. Aich Eye. The first two are in Section 2 and the second is in section 1. Then your file would begin like this: function varargout = proj2_team5(varargin) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% % CS 103: Programming Project 2 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% % Authors, Sections, Email addresses % Abe B. See, Section 2, firstname.lastname@example.org % Dee E. Eff, Section 2, email@example.com You do not list variables in this header, and you do not list the callback functions. You list only the % G. Aich Eye, Section 1, firstname.lastname@example.org %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% additional subfunctions. Within each subfunction (including the callback functions) you must list every % Purpose: use must be images variable that youTo process included in a “Define variables” section, except for the arguments to %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% % Subfunctions defined (other and loop counters. You must introduce each major step of the subfunctions (which are always the same) than callback functions: % in each subfunction with comment explaining what it does (Excluding the guidata function call.) codefee, fie, foo, fum, abie, bee, boo, bar, sam %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Each function should have a header comment giving abasic explanation for what the function does. A function’s comment block should look like this: function open_button_Callback(hObject, eventdata, handles) % opens the image file. Watch the Project-2 webpage for further information about this program and its submission. Questions and Errors If you find any errors or contradictions in this description or have any questions about the program, please notify Matt Calderwood at email@example.com. Each of the tasks will now be explained in more detail: 1. Open an Image When the user chooses to open an image (which is necessary before the user can perform any of the other tasks, except for Quit), a window will pop up asking the user to select a file to open. The file selection window will only display files of type ‘.jpg’. (Figure 2) If the user cancels or closes this file browser window, then no changes will be made. If the user selects a file, then it is displayed in both figures in the GUI. If the user attempts to perform another task before an image has been opened, then an error dialog box will display an error to the user saying that an image must be opened from a file first. The filename box will also turn red to reflect that the problem is regarding the file. 2. Adjust Image’s Contrast The +/- buttons for Contrast adjustment increase and decrease the image’s contrast, respectively. To adjust an image’s contrast, use the following method: For each pixel of the image, calculate the output pixel to be: where P is the input pixel, P’ is the new pixel, α is the amount of contrast change, and β is the middle color intensity level for the image. Use a value of ±20% for the amount of contrast change. Caution: Color values less than 0 and greater than 255 will cause problems. Check for any values that are less than 0 or greater than 255, and set them to their respective boundary. 3. Adjust Image’s Brightness The +/- buttons for Brightness adjustment increase and decrease the image’s brightness, respectively. To adjust an image’s brightness, simply add or subtract a constant amount from each pixel of the image. For this project, use a constant amount of 10. Caution: Color values less than 0 and greater than 255 will cause problems. Check for any values that are less than 0 or greater than 255, and set them to their respective boundary. 4. Adjust Image’s Gamma The +/- buttons for Gamma adjustment increase and decrease the image’s gamma, respectively. To adjust an image’s gamma, use the following revised method: For each pixel of the image, calculate the output pixel to be: where P is the input pixel, P’ is the new pixel, and γ is the amount of gamma change. Use a value of 10% for the amount of gamma change. 5. Display a Single Color Band This option is selected by choosing one of the options in the Visible Color Band(s) field. This can be thought of as toggling between different views of the current image. It does not affect the current image, only how it is displayed. Note: Whenever the visible color band is changed, this change is not inserted into the Undo history for the image. Images are represented by a 3-dimensional matrix: rows x columns x color bands/channels. Display only the selected color band(s) in the figures. 6. Grayscale the Image To convert an image to grayscale, you average the red, green, and blue color bands and use that average to replace each of the bands’ value. In this assignment, we will use the weighted average approach for computing luminance that is used by many digital video formats: 7. Blur the Image Blurring an image will be done using a technique called convolution. There are more advanced, faster ways of performing convolution, but we will do it using a simple method. Instead of a 3x3 matrix of weighted values, this assignment will use a variable sized matrix of size MxM, where M = odd integer larger than 1. Using an MxM matrix of weighted values, each pixel on the new, blurred image will be calculated by using a percentage of the corresponding pixel of the old image and the pixels surrounding that corresponding pixel. The size of the weight matrix will be input into the Blur/Sharpen Amount textbox. The MxM weight matrix to be used will be a Gaussian matrix. This can be created by Matlab by the command fspecial(). To create a 3x3 Gaussian matrix, use the command: fspecial(‘gaussian’, 3, 3). Now, since this approach uses all the pixels around a given pixel to calculate the blurred corresponding pixel, this will cause problems around the edge of the image. For pixels on the edge, simply copy the pixel values from the original image. For more information or examples on this topic, see Dr Alan Peters’ Lecture 7 on Convolution at: http://www.archive.org/download/Lectures_on_Image_Processing/EECE253_07_Convolution.ppt If the Blur/Sharpen Amount is not a number, then display an error like below and make the background of the Blur/Sharpen Amount colored red. If the Blur/Sharpen Amount is not a valid odd integer larger than one, report an error the same way, but make the error message say something like “Blur/Sharpen amount must be an odd integer greater than 1.” 8. Sharpen the Image Sharpening an image has the opposite effect of blurring. This can be performed with convolution using an unsharp filter (weight matrix). However, the approach used in this project is unsharp masking. The unsharp masking technique is made up of three steps: 1) Blurring the image, using the technique above. 2) Subtract the blurred image from the original image, leaving a difference called a mask 3) Add the mask to the original image NOTE: Use the same Blur/Sharpen Amount validation as above. 9. Save the Image to a File When this button is clicked, the user will see another file browser window. It will only display other .jpg’s in that folder and will prompt the user for a file name. If the user cancels or closes the window, then no change will occur. If the user inputs a file name and clicks ‘Save’, then the currently modified image will be saved in the supplied filename. Write the image in the current figure to the requested file name by using the Matlab function imwrite and display a success or error message. 10. Undo Changes to the Image The assignment introduces the concept of keeping a history of changes to the image. Each time the image is changed, save a copy of the image. When the Undo button is clicked, it will change the image on the right back to the version before the most recent change. The user can continue to undo changes all the way back to its original when the image was first opened. Thus, your program will be saving a lot of images—an additional one each time the user’s action causes a change to the image. (NOTE: There is no change to the image when the displayed color band is changed.) 11. Extra Credit This is the area of the assignment where you can be as creative as you wish. For up to 5 bonus points, you can implement any image manipulation function that you can think of. You are welcome to alter the GUI to accommodate your new function to add additional UI elements such as a slider, edit box, etc., as long as we can still easily find the required elements. In our example, we show one button called “Extra Credit”. You should use a more descriptive name! 12. Quit Closes the GUI and returns the user to Matlab’s command prompt.
Pages to are hidden for
"CS 103 Project 2"Please download to view full document