Scribd
Upload
1K views

Matlab GUI Tutorial

This document provides a 10 step tutorial for creating a GUI in Matlab: 1. Open the GUI designer tool by typing "guide" in the command window to start building the visual interface. 2. Add interactive components like buttons, edit boxes, and menus from the left panel and place them on the layout. 3. After designing the visual interface, save the files which generates code to attach functionality. 4. Add code to each component's callback to define its behavior like calculating inputs and displaying outputs.

Uploaded by

Baher Mawlawi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

Matlab GUI Tutorial

This document provides a 10 step tutorial for creating a GUI in Matlab: 1. Open the GUI designer tool by typing "guide" in the command window to start building the visual interface. 2. Add interactive components like buttons, edit boxes, and menus from the left panel and place them on the layout. 3. After designing the visual interface, save the files which generates code to attach functionality. 4. Add code to each component's callback to define its behavior like calculating inputs and displaying outputs.

Uploaded by

Baher Mawlawi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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)

FIGURE 1

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)
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 bedisplayed on the GUI once it is executed.
In FIGURE 3 a push button was added to the layout.

FIGURE 3

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.

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'

FIGURE 4

6. The designer will notice instant changes to the GUI layout. (FIGURE 5)
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.
FIGURE 6

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


FIGURE 7

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

Execute the GUI


1. Locate the directory of the GUI files (m-file and fig file). If neccesary 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

FIGURE 8

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)
FIGURE 9

You might also like