You are on page 1of 9

Matlab Gui Tutorial

Matlab GUI Tutorial

By: Charltez James

Create the GUI (visually)

1. The first step to creating a Matlab GUI is to type 'guide' in the Matlab command window:

>> guide
2. This will activate a blank GUI frame to allow the user to visually design the GUI as he desires. (FIGURE 1)


Matlab Gui Tutorial

3. The user can now add as many code activating devices (i.e. buttons, edit boxes, popup menus, etc.) as he wishes. These items are located on the left panel on the GUI frame: (FIGURE 2)


4. To add a device, left-click on that device to select it and place it anywhere on the layout. This is where it will be displayed on the GUI once it is executed. In FIGURE 3 a push button was added to the layout.

5. If needed, the GUI-designer can manipulate the size, color, and label of the button. To change the size of the button, simply click and hold any of the corners of the button using the cursor until the button reaches the desired size. Most of the property changes of the button will take place using the the button's Property Inspector. Each component has its own Property Inspector that is activated by double-clicking on that device.

Matlab Gui Tutorial

To change the color of the button, the designer must first activate the Property Inspector and then double-click on the colorwheelicon. This will open a color-editing window where changes are made. To change the button's label, scroll down on the button's Property Inspector and type in the desired information next to 'String'.The Property Inspector in FIGURE 4 displays the properties of the button after a some changes were made:

BackgroundColor = 'green' FontSize = '12.0' FontWeight = 'bold' String = 'GET ANSWER'


Matlab Gui Tutorial

6. The designer will notice instant changes to the GUI layout. (FIGURE 5)


7. Now, the designer can add as many components to the GUI layout as he wishes. In the below example (FIGURE 6),some more components were added: two edit boxes (white) and six static text boxes ("Charltez's", "ADDITION", "GUI", "+" , " _______ " and the blue answer box). Using the Property Inspector, the components were manipulated such thatthey now appear as shown below. It is important to note that the static text boxes are components has will not have an applied function, therefore once the code attaching process takes place, these devices will not receive any code.

Matlab Gui Tutorial


8. Once the GUI is 'physically' designed, code will be attached to each component to complete the process. To get to the code-attachment section, the GUI must be saved. The saving process will produce two files; a .fig file (the recently designedGUI frame) and an m-file (newly created for code attachment). The m-file will pop up and it will contain as many subfunctionsin the m-file as components (not including static text boxes and frames) on the GUI layout. Each subfunction in the m-file will begin with 'function varargout = ...'.

To verify that you are adding code to the subfunction that corresponds will the correct GUI component, activate the Property Inspector in the GUI figure file (layout frame) and view theCallback line of each device. Each component's Property Inspector should display the callback label in single quotes next to the line 'Callback'. This callback should be the same as the callback label in the m-file after the words 'function varargout = '. For example: m-file: "function varargout = edit2_Callback(h, eventdata, handles, varargin)" matches with .fig file: "ADDER('edit2_Callback',gcbo,[],guidata(gcbo))"

9. Add code to the subfunctions/components. Under the 'function varargout = ...' line is where the matlab code will beadded to each component. In this example, there are three subfunctions and FIGURE 7 displays the added code to all three parts in the m-file.

Matlab Gui Tutorial

Analyzing the code: (FIGURE 7)

line 77 and 78: 'grabs' the values from edit2_Callback and edit3_Callback (or the numbers entered in the text box on the launched GUI). The GUI uses structures to pass info from one subfunction to another, therefore it doesn't matter that the subfunctions that generated the values (stored in handles.edit2 and handles.edit3) took place after (code-wise) the subfunction that called those values. line 80: is the sum of the values stored in handles.edit2 and handles.edit3 line 81: puts the result of the variable 'ANSWER' in the blue edit box (Callback text2) on the launched GUI line 86: gets the string value entered in the edit box by the user. line 87: converts the string value to a number line 88: adds that converted number to the 'handles' structure variable. Therefore, if we entered a '4' into the edit box on the GUI, the new 'handles' structure would display the following in the Command Window: figure1: 101 text8: 12.001 text7: 11.001 text4: 10.001 text2: 9.0006 text1: 8.0006 edit3: 7.0006 edit2: 4 pushbutton1: 5.0009 text3: 102 line 89: updates the 'handles' structure variable so that the other subfunctions can access this stored information line 94-97: function exactly like line 86-89 respectively.

Matlab Gui Tutorial


10. After the code has been added, save the m-file. The GUI creation process is over.

Matlab Gui Tutorial

Execute the GUI

1. Locate the directory of the GUI files (m-file and fig file). If necessary change matlab's directory in the Command window, so that it reflects the directory where the GUI files are located.

>> cd C:charltezProgramsGUI
2. To execute the GUI, type the GUI's filename in the Command Window:

>> adder


3. Once the GUI is launched, the user can enter values (in this example the user can enter values, because this GUI has edit boxes, in other cases the user may produce values via popup windows, radial buttons, etc.). Then, by pressing the'GET ANSWER' button, the GUI will display the result. (FIGURE 9)

Matlab Gui Tutorial