CS 112 Assignment 6

Due: Friday, April 1, by 5:00pm

Because of our extended spring break this year, this assignment will not be due until Friday of the week following break. You can turn in your assignment up until 5:00pm on 4/1/11 without penalty. Your hardcopy submission should include a cover sheet, printouts of two code files: drawGUI.m and musicGUI.m, and a hardcopy of a picture created with the GUI sketchpad that you construct for Problem 1. Your electronic submission is described in the section Uploading your saved work

Reading

Getting Started: Download assign6_programs from cs112d

Uploading your saved work

• Browse through your directory and find the drop/assign06 folder
• Upload your assign6_programs folder into your drop/assign06 folder
• When done uploading, be sure to delete your assign6_programs folder from the Desktop by dragging it to the trash can, and then empty the trash (Finder--> Empty Trash).
• Be sure to Exit out of MATLAB when you are done

When you are done with this assignment, you should have ten files stored in your assign6_programs folder: two .fig files, drawGUI.fig and musicGUI.fig, and eight M-Files, drawGUI.m, musicGUI.m, testMusic.m, emptySong.m, addNote.m, displayNotes.m, displaySignal.m, and playSong.m.

Problem 1: Create a GUI sketchpad

In this problem, you will build a GUI sketchpad that might look something like this when complete:

Part A: Using the Layout Editor to lay out your GUI

To begin, enter guide in the Command Window to start the Layout Editor for the MATLAB Graphical User Interface Development Environment. A GUIDE Quick Start window will appear with Blank GUI (Default) selected. Click the OK button. A Layout Editor window will appear (image shown below), titled untitled.fig (when you save your GUI for the first time, name it drawGUI). Select Preferences... from the File menu, and in the Preferences window, check the box labeled Show names in component palette and click the OK button. You are now ready to create your first GUI!

First, you're going to design the physical layout of your sketchpad, using the components listed below. The GUI image above is just a sample -- you are free to layout your own GUI as you wish.

• Axes: drawing window
• Popup Menu: menu to select square, circle or triangle
• Edit Text: text boxes with labels where the user can enter the following information:
  
  • x coordinate of position of new figure
  • y coordinate of position of new figure
  • size of new figure
  • line style for new figure, e.g. g:*
  • name of picture
• Static Text: text label for picture name
• Checkbox: to set linewidth to 1 (if not checked) or 2 (if checked)
• Toggle Button: to specify hold on or hold off
• Push Button: buttons for each of these actions:
  
  1. plot the new figure
  2. undo the last plot
  3. close the GUI

• drag and resize the component to the desired location and size
• double-click on the component to open the Property Inspector to set the following properties for each component:
  • the String property specifies the text string that will appear on the component
  • the Tag property specifies a name that will be used to refer to this component in your GUI code
  • (optional) ForegroundColor, BackgroundColor, FontSize

Part B: Writing MATLAB code to add functionality to your GUI components

Once you have your GUI components laid out, you can then modify the drawGUI.m code file to perform actions in response to each of the GUI components. Recall that MATLAB automatically generates code for each GUI component in your drawGUI.m file. First, modify the drawGUI_OpeningFcn function (executed when the GUI is first created) by constructing fields of the handles structure that store all of the information that needs to be shared across the GUI components:

• vectors of x and y coordinates for a square with side length 1
• vectors of x and y coordinates for a circle of diameter 1
• vectors of x and y coordinates for an equilateral triangle with side length 1
• vector to store the plots drawn so far (to support the undo operation)

Your next step is to modify the Callback functions for the components that have an immediate visual effect in your GUI. For example, the plot button has an immediate effect when pressed in the GUI. For the other GUI components that do not have an immediate visual effect (e.g., x position, y position, etc), MATLAB automatically keeps track of the current values of the user-entered strings.

• Edit Text component for picture name: modify the Static Text string that appears below the drawing area, using the text that the user entered in the Edit Text box. Remember that you have access to all of the GUI components through the input handles structure and can read and modify the state of these components with the set and get functions.
• Toggle Button: set hold on or hold off, depending on the state of this button, and also adjust the text string that appears on this button in the GUI display
• Push Button components: for the plot button, call the plot function to plot the selected figure (square, circle or triangle) in the drawing window, using the current settings for the x and y position, size, line style and linewidth. Also modify the field of the handles structure that stores the vector of plots in the current display, in order to support the undo operation. For the undo button, delete the last plot drawn and update the handles structure appropriately. For the close button, execute the following statement: delete(handles.figure1)

1. Remember that every function that modifies the value of a field of the handles structure must include the following statement at the end:
       guidata(hObject,handles)
2. Many Callback functions will remain empty, that is, no action will be performed when the GUI components are used. The GUI component information (e.g. x position) is accessed by using the handles structure from within the Callback function for the plot button.
3. You can also include printing statements by omitting the semi-colon at the end of any statement that produces a value, or adding calls to the disp function. These values will be printed in the Command Window.

Part C: I think my GUI is done, now what do I do?

Nothing to undo?

View the whole drawing from the beginning

Design a picture and print a hardcopy

How to print a hard copy of your final picture in your sketchpad

• On a Mac
• On a PC

Electronic submission

Problem 2: Making Music with MATLAB   

In this problem, you'll create a GUI for a program that allows you to create, display and play a simple song in MATLAB. Much of the code for this program is provided for you. Your task is to create the GUI, which will contain some new GUI components: a listbox, radio buttons and a slider. Here is a sample GUI layout for the program:

You're welcome to add your own style to the appearance of the GUI, which should contain the following components:

• a Listbox that contains a list of notes for the user to select the next note to add to the song
• Radio Buttons for the user to select a loudness and duration for each note, given three choices
• two graphing Axes to display the note sequence and sound waveform for the user's song
• a Slider that allows the user to shift the sound waveform to the left or right, to view different parts of the waveform
• various Push Buttons to perform the following actions:
  • add a note to the song
  • clear the song
  • display the song (both the notes and waveform)
  • play the song
  • zoom in to see the waveform at a higher resolution
  • zoom out to see the waveform at a lower resolution
  • exit the program

There are six code files in the assign6_programs folder: a script file named testMusic.m and five function files, playSong.m, displaySong.m, displaySignal.m, addNote.m and emptySong.m. You do not need to make any changes to these files. The functions assume that the song is stored in a cell array that contains three vectors: the first vector stores the notes (integers from 1 to 13 that represent the 13 notes listed on the GUI), the second vector stores the loudness of each note (an integer from 1 to 3, representing soft, medium and loud) and the third vector stores the duration of each note (an integer from 1 to 3, representing short, medium and long). You do not need to write any code that refers to this cell array of vectors. Your GUI code will just call the five functions, described below:

function song = emptySong
% returns an initial empty song

function newsong = addNote (oldsong, note, loudness, duration)
% given an input song and input note (integer between 1 and 13), loudness
% and duration (both integers between 1 and 3), returns a new song with
% the new note added to the end of the old song

function displayNotes (song)
% displays the notes of the input song - time is shown on the horizontal
% axis and the notes (integers between 1 and 13) are shown on the vertical
% axis. Each note is displayed as a short segment whose length is the
% duration and width is the loudness of the note

function displaySignal (song, zoom, slider)
% displays the sound waveform for the input song, given an input zoom factor
% (integer greater than or equal to zero) that controls how stretched out the
% signal is on the horizontal time axis, and input slider value (number between
% 0 and 1) that controls which segment of the sound waveform is shown

function playSong (song)
% plays the input song

To illustrate how these functions are called, the script testMusic.m creates a song that consists of the 13 notes of the scale in ascending order with varying loudness and durations, displays the notes and the sound waveform for two different zoom factors 0 and 10, and then plays the song.

Tips on creating the GUI layout with GUIDE

• Multiple strings for a Listbox can be entered in the Property Inspector in the same way as strings for a Pop-up Menu.
• To create the radio buttons, first drag a Button Group onto the GUI and then drag the individual Radio Buttons to their location inside the Button Group box on the GUI. The Title property for the Button Group controls the string that appears at the top of the box on the GUI (e.g. "Select loudness" on the GUI displayed above). The radio buttons each have a Value property that is 0 or 1 depending on whether the button is selected. Be sure to specify a unique Tag name for each radio button.
• A Slider has a Position property that is a vector of four values that specify (1) distance from the left edge of the GUI window, (2) distance from the bottom of the window, (3) width and (4) height. If the width is greater than the height, the slider will be oriented horizontally. The Slider has a Value property that is a number between 0 and 1, which can be provided directly as an input to the displaySignal function.
• You do not need to create labels for the two graphing areas - these labels are displayed by the displayNotes and displaySignal functions using the title function.

In the GUI opening function, create variables in the handles structure to store the current song (this can be initialized to the emptySong) and the zoom factor (initialized to 0).

Guidelines on the GUI behavior

• When the "add note" button is pressed, a new note should be added to the current song using the user's selected note, loudness and duration. The displays of the notes and sound waveform do not need to be updated at this point.
• When the "display song" button is pressed, both the notes and sound waveform should be displayed.
• When the "zoom in" button is pressed, the zoom factor should be incremented, and when the "zoom out" button is pressed, the zoom factor should be decremented (make sure the zoom factor does not become negative). When the "zoom in" or "zoom out" buttons are pressed or the slider is modified, the display of the sound waveform should be updated. Note that when the sound waveform is displayed for a zoom factor of 0, the full waveform is displayed and the slider does not shift the waveform.
• When the "play song" button is pressed, the user should hear their song played.
• When the "clear song" button is pressed, the current song should be reset to an initial empty song.
• Clicking on the "close" button should close the GUI window and terminate the program.