CS 103 Project 2 by cuiliqing


									                   CS 103 Project 2 -- Spring 2008


        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.


        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.

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.

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.


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, abe.b.see@vanderbilt.edu
  % Dee E. Eff, Section 2, dee.e.eff@vanderbilt.edu
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, gordon.a.eye@vanderbilt.edu
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 matthew.d.calderwood@vanderbilt.edu.

        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
2. Adjust Image’s Contrast

   The +/- buttons for Contrast adjustment increase and decrease the image’s contrast,

   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,

   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,

   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:
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.

To top