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,
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.)
assign6_problemsfolder from the cs112d directory onto your Desktop. The
assign6_problemsfolder contains one code file for Problem 1,
setupCoords.mand six code files for Problem 2:
testMusic.m, emptySong.m, addNote.m, displayNotes.m, displaySignal.m, and
When you are done with this assignment, you should have 11 files stored in
assign6_problems folder: two
musicGUI.fig, and eight M-Files,
drawGUI.m, setupCoords.m, musicGUI.m, testMusic.m, emptySong.m, addNote.m, displayNotes.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
folder to this drop folder. More details about this process
can be found on the webpage on Managing Assignment Work.
In this problem, you will build a GUI sketchpad that might look something like this when complete:
To begin, enter
guide in the Command Window to start the Layout Editor
for the MATLAB Graphical User Interface Development Environment. A
Start window will appear with
Blank GUI (Default) selected. Click
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, 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.
Popup Menu: menu to select square, circle or triangle
Edit Text: text boxes with labels where the user can enter the following information:
Static Text: text label for picture name
Checkbox: to set linewidth to 1 (if not checked) or 2 (if checked)
Toggle Button: to specify
Push Button: buttons for each of these actions:
Stringproperty specifies the text string that will appear on the component
Tagproperty specifies a name that will be used to refer to this component in your GUI code
ForegroundColor, BackgroundColor, FontSize
.figfiles are intertwined:
.mis automatically updated to include the new component.
drawGUIas the file name. MATLAB will also save the Layout Editor figure as a
drawGUIin the Command Window, or selecting Run from the Tools menu.
guide drawGUI.figin the Command Window
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
structure that store information that needs to be shared across GUI components:
setupCoordsis provided in the
setupCoords.mfile. 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_OpeningFcnfunction, the matrices returned by
setupCoordscan be placed directly into the
handlesstructure, similar to the setup of variables in the
energyGUIprogram 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.
Edit Textcomponent for picture name: modify the
Static Textstring that appears below the drawing area, using the text that the user entered in the
Edit Textbox. Remember that you have access to all of the GUI components through the input
handlesstructure and can read and modify the state of these components with the
Toggle Button: set
hold off, depending on the state of this button, and also adjust the text string that appears on this button in the GUI display (similar to the
Push Buttoncomponents: for the plot button, call the
plotfunction 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. Note that the
Valueproperty for a checkbox is 0 when not checked and 1 when checked (the same is true of a toggle button). Also modify the field of the
handlesstructure 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
handlesstructure appropriately. For the close button, execute the following statement:
handlesstructure must include the following statement at the end:
handlesstructure from within the Callback function for the
dispfunction. These values will be printed in the Command Window.
drawGUI.figfiles in the
assign6_programsfolder that you submit electronically.
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:
Listboxthat contains a list of notes for the user to select the next note to add to the song
Radio Buttonsfor the user to select a loudness and duration for each note, given three choices
Axesto display the note sequence and sound waveform for the user's song
Sliderthat allows the user to shift the sound waveform to the left or right, to view different parts of the waveform
Push Buttonsto perform the following actions:
There are six code files in the
assign6_problems folder: a script file
testMusic.m and five function files,
displaySignal.m, addNote.m and
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,
% 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
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
Listboxcan be entered in the Property Inspector in the same way as strings for a
Button Grouponto the GUI and then drag the individual
Radio Buttonsto their location inside the
Button Groupbox on the GUI. The
Titleproperty for the
Button Groupcontrols 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
Valueproperty that is 0 or 1 depending on whether the button is selected. Be sure to specify a unique
Tagname for each radio button.
Positionproperty 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
Valueproperty that is a number between 0 and 1, which can be provided directly as an input to the
displaySignalfunctions using the
In the GUI opening function, create two variables in the
to store the current song (this can be initialized to the empty song that is returned by
emptySong function) and the zoom factor (initialized to 0).
Guidelines on the GUI behavior
addNotefunction can be called to add the new note. The displays of the notes and sound waveform do not need to be updated at this point.
axesfunction can be used to specify where to display the notes and signal.
displaySignalfunction. 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.