CS 112

Assignment 6

Due: Friday, April 10, at 10:00am

You can turn in your assignment up until 10:00am on 4/10/15. You should hand in both a hardcopy and electronic copy of your solutions (it is ok to hand in your hardcopy during your lab on Friday, but the electronic copy should be submitted by 10:00am). Your hardcopy submission should include 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. (If you'd like to save paper, you can cut and paste all of your code files into one file, but your electronic submission should contain the two separate files.)


The following material is especially useful to review for this assignment: notes and examples from Lectures #13-16 and Lab #8. There is also extensive online documentation on the creation of graphical user interfaces with the GUIDE program available through the MATLAB Help facility.

Getting Started: Download assign6_problems from cs112d

Use Fetch or WinSCP to connect to the CS server using the cs112d account and download a copy of the assign6_problems folder from the cs112d directory onto your Desktop. The assign6_problems folder contains one code file for Problem 1, setupCoords.m and six code files for Problem 2: testMusic.m, emptySong.m, addNote.m, displayNotes.m, displaySignal.m, and playSong.m.

Uploading your completed work

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

Use Fetch or WinSCP to connect to your personal account on the CS file server and navigate to your cs112/drop/assign6 folder. Drag your assign6_problems folder to this drop folder. More details about this process can be found on the webpage on Managing Assignment Work.

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!

Guide layout window

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.

For each component, do the following:
General tips for working with GUIs

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 information that needs to be shared across GUI components:

To assist you with the matrices of coordinates for the three shapes, the function setupCoords is provided in the setupCoords.m file. This function returns three matrices that contain x,y coordinates for the square, circle, and triangle. The first row of each matrix contains the x coordinates and the second row contains the y coordinates. Examine the coordinates to understand how the user's specified position and size will affect their appearance. In the drawGUI_OpeningFcn function, the matrices returned by setupCoords can be placed directly into the handles structure, similar to the setup of variables in the energyGUI program discussed in lecture.

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.

  1. Remember that every function that modifies the value of a field of the handles structure must include the following statement at the end:

  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?

Thoroughly test your GUI to make sure it really works.

Nothing to undo?

Check your GUI in the following scenario. If your hold on button is clicked and you plot something, and then click undo, what you just drew should go away. Now, if you click undo again, but there is nothing to undo, a well-designed GUI would handle this scenario gracefully (i.e. without generating MATLAB error messages). Your GUI should handle this scenario gracefully.

View the whole drawing from the beginning

MATLAB's tendency is to show just what you plot and no more. When drawing in a sketchpad, it is often desirable to view the entire drawing canvas for the session. One way to do this is to create a rectangle that has the dimensions of your desired drawing (e.g. 12.5 x 9.25 in the above GUI), and draw that rectangle in white so it is invisible. This will initialize the plotting area to the specified dimensions. Of course, if the user plots something out of that canvas, (e.g. a bird at coordinates (20,20)), then MATLAB will automatically expand the canvas to include the new object.

Design a picture and print a hardcopy

Fully test your GUI by experimenting with many settings. When testing, remember that you should hit the return key after editing any text field of your GUI. When you are convinced your GUI is working well, construct a final picture to submit with your assignment. Print a hard copy of your final picture (see instructions below) to turn in with your assignment.

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

Electronic submission

Be sure to include both the drawGUI.m and drawGUI.fig files in the assign6_programs folder that you submit electronically.

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:

music GUI layout

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

There are six code files in the assign6_problems 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

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

Guidelines on the GUI behavior