MATLAB GUI (Graphical User Interface)

From: http://blinkda er!com/matlab/matlab" #i" raphical"#ser"interface"t#torial"for"be inners/

Why use a GUI in MATLAB? The main reason GUIs are used is because it makes things simple for the end users of the program! If GUIs "ere not used# people "ould ha$e to "ork from the command line interface# "hich can be e%tremely difficult and fustrating! Imagine if you had to input te%t commands to operate your "eb bro"ser &yes# your "eb bro"ser is a GUI too'(! It "ouldn)t be $ery practical "ould it? In this tutorial# "e "ill create a simple GUI that "ill add together t"o numbers# displaying the ans"er in a designated te%t field!

This tutorial is "ritten for those "ith little or no e%perience creating a MATLAB GUI &Graphical User Interface(! Basic kno"ledge of MATLAB is not re*uired# but recommended! MATLAB $ersion +,,-a is used in "riting this tutorial! Both earlier $ersions and ne" $ersions should be compatible as "ell &as long as it isn)t too outdated(! Lets get started'

Initiali$in GUI%& (GUI 'reator)

.! /irst# open up MATLAB! Go to the command "indo" and type in guide!

+! 0ou should see the follo"ing screen appear! 1hoose the first option Blank GUI (Default)!

2! 0ou should no" see the follo"ing screen &or something similar depending on "hat $ersion of MATLAB you are using and "hat the predesignated settings are(3

4! Before adding components blindly# it is good to ha$e a rough idea about ho" you "ant the graphical part of the GUI to look like so that it)ll be easier to lay it out! Belo" is a sample of "hat the finished GUI might look like!

'reatin the (is#al Aspect of the GUI: )art *

.! /or the adder GUI# "e "ill need the follo"ing components o T"o 5dit Te%t components
o o

Three 6tatic Te%t component 7ne 8ushbutton component

Add in all these components to the GUI by clicking on the icon and placing it onto the grid! At this point# your GUI should look similar to the figure belo" 3

+! 9e%t# its time to edit the properties of these components! Let)s start "ith the static te%t! :ouble click one of the Static Text components! 0ou should see the follo"ing table

appear! It is called the Property Inspector and allo"s you to modify the properties of a component!

2! We)re interested in changing the String parameter! Go ahead and edit this te%t to +!

Let)s also change the font si;e from 8 to 20!

After modifying these properties# the component may not be fully $isible on the GUI editor! This can be fi%ed if you resi;e the component# i!e! use your mouse cursor and stretch the component to make it larger! 4! 9o"# do the same for the ne%t Static Text component# but instead of changing the String parameter to +# change it to =! <! /or the third Static Text component# change the String parameter to "hate$er you "ant as the title to your GUI! I kept it simple and named it MyAdderGUI! 0ou can also e%periment around "ith the different font options as "ell!

=! /or the final Static Text component# "e "ant to set the String 8arameter to 0! In addition# "e "ant to modify the Tag parameter for this component! The Tag parameter is basically the $ariable name of this component! Let)s call it answer stati!"e#t! This component "ill be used to display our ans"er# as you ha$e probably already ha$e guessed!

-! 6o no"# you should ha$e something that looks like the follo"ing3

'reatin the (is#al Aspect of the GUI: )art +

.! 9e%t# lets modify the Edit Text components! :ouble click on the first Edit Text component! We "ant to set the String parameter to 0 and "e also "ant to change the Tag parameter to in$ut% edit"e#t# as sho"n belo"! This component "ill store the first of

t"o numbers that "ill be added together!

+! /or the second Edit Text component# set the String parameter to 0 BUT set the Tag parameter in$ut2 edit"e#t! This component "ill store the second of t"o numbers that "ill be added together! 2! /inally# "e need to modify the pushbutton component! 1hange the String parameter to Add& and change the Tag parameter to add $us'(utton! 8ushing this button "ill display the sum of the t"o input numbers!

4! 6o no"# you should ha$e something like this3

>earrange your components accordingly! 0ou should ha$e something like this "hen you are done3

<! 9o"# sa$e your GUI under any file name you please! I chose to name mine )yAdder! When you sa$e this file# MATLAB automatically generates t"o files3 myAdder.fig and myAdder.m! The !fig file contains the graphics of your interface! The !m file contains all the code for the GUI!

,ritin the 'ode for the GUI 'allbacks

MATLAB automatically generates an !m file to go along "ith the figure that you ?ust put together! The !m file is "here "e attach the appropriate code to the callback of each component!

/or the purposes of this tutorial# "e are primarily concerned only "ith the callback functions! 0ou don)t ha$e to "orry about any of the other function types! .! 7pen up the !m file that "as automatically generated "hen you sa$ed your GUI! In the MATLAB editor# click on the icon# "hich "ill bring up a list of the functions "ithin the !m file! 6elect input1_editText_ allback!

+! The cursor should take you to the follo"ing code block3

*+ 1+ 3+ 6+ 7+ 8+

fun!tion in$ut% edit"e#t ,all(a!k('-(.e!t/ e0entdata/ 'andles) 2 '-(.e!t 'andle to in$ut% edit"e#t (see G,B-) 2 e0entdata reser0ed 4 to (e defined in a future 0ersion of MA"5AB 2 'andles stru!ture wit' 'andles and user data (see GUIDA"A)

2 8int9 get('-(.e!t/:;tring:) returns !ontents of in$ut% edit"e#t as te#t <+ 2 str2dou(le(get('-(.e!t/:;tring:)) returns !ontents of %0+ 2 in$ut% edit"e#t as a dou(le

Add the follo"ing code to the bottom of that code block3

2store t'e !ontents of in$ut% edit"e#t as a string+ if t'e string 2is not a nu)(er t'en in$ut will (e e)$ty in$ut = str2nu)(get('-(.e!t/:;tring:))= 2!'e!ks to see if in$ut is e)$ty+ if so/ default in$ut% edit"e#t to >ero if (ise)$ty(in$ut)) set('-(.e!t/:;tring:/:0:) end guidata('-(.e!t/ 'andles)=

This piece of code simply makes sure that the input is "ell defined! We don)t "ant the user to put in inputs that aren)t numbers' The last line of code tells the gui to update the handles structure after the callback is complete! The handles stores all the rele$ant data related to the GUI! This topic "ill be discussed in depth in a different tutorial! /or no"# you should take it at face $alue that it)s a good idea to end each callback function "ith guidata('-(.e!t/ 'andles)= so that the handles are al"ays updated after each callback! This can sa$e you from potential headaches later on! ..! Add the same block of code to input!_editText_ allback! .+! 9o" "e need to edit the add_pushbutton_ allback! 1lick on the icon and select add_pushbutton_ allback! The follo"ing code block is "hat you should see in the !m file!
%*+ %1+ %3+ %6+ %7+ 2 444 ?#e!utes on (utton $ress in add $us'(utton+ fun!tion add $us'(utton ,all(a!k('-(.e!t/ e0entdata/ 'andles) 2 '-(.e!t 'andle to add $us'(utton (see G,B-) 2 e0entdata reser0ed 4 to (e defined in a future 0ersion of MA"5AB 2 'andles stru!ture wit' 'andles and user data (see GUIDA"A)

@ere is the code that "e "ill add to this callback3

a ( 2 2 = get('andles+in$ut% edit"e#t/:;tring:)= = get('andles+in$ut2 edit"e#t/:;tring:)= a and ( are 0aria(les of ;trings ty$e/ and need to (e !on0erted to 0aria(les of @u)(er ty$e (efore t'ey !an (e added toget'er

total = str2nu)(a) + str2nu)(()= ! = nu)2str(total)= 2 need to !on0ert t'e answer (a!k into ;tring ty$e to dis$lay it set('andles+answer stati!"e#t/:;tring:/!)= guidata('-(.e!t/ 'andles)=

.A! Let)s discuss ho" the code "e ?ust added "orks3
%<+ a = get('andles+in$ut% edit"e#t/:;tring:)= 20+ ( = get('andles+in$ut2 edit"e#t/:;tring:)=

The t"o lines of code abo$e take the strings "ithin the Edit Text components# and stores them into the $ariables a and b! 6ince they are $ariables of String type# and not "umber type# "e cannot simply add them together! Thus# "e must con$ert a and b to "umber type before MATLAB can add them together! +.! We can con$ert $ariables of String type to "umber type using the MATLAB command str2nu)(;tring argu)ent)! 6imilarly# "e can do the opposite using nu)2str(@u)(er argu)ent)! The follo"ing line of code is used to add the t"o inputs together!
22+ total= (str2nu)(a) + str2nu)(())=

The ne%t line of code con$erts the sum $ariable to String type and stores it into the $ariable c!
! = nu)2str(total)=

The reason "e con$ert the final ans"er back into String type is because the Static Text component does not display $ariables of "umber type! If you did not con$ert it back into a String type# the GUI "ould run into an error "hen it tries to display the ans"er! +2! 9o" "e ?ust need to send the sum of the t"o inputs to the ans"er bo% that "e created! This is done using the follo"ing line of code! This line of code populates the Static Text component "ith the $ariable c!
21+ set('andles+answer stati!"e#t/:;tring:/!)=

The last line of code updates the handles structures as "as pre$iously mentioned!
guidata('-(.e!t/ 'andles)=

1ongratulations# "e)re finished coding the GUI! :on)t forget to sa$e your m file! It is no" time to launch the GUI' +<! If you don)t "ant MATLAB to automatically generate all those comments for each of the callbacks# there is a "ay to disable this feature! /rom the GUI editor# go to File# then to Preferences!

La#nchin the GUI

.! There are t"o "ays to launch your GUI! o The first "ay is through the GUI:5 editor! 6imply press the GUI:5 editor as sho"n in the figure belo"3 icon on the

The second method is to launch the GUI from the MATLAB command prompt! /irst# set the MATLAB current directory to "here$er you sa$ed your !fig and !m

file!

9e%t# type in the name of the GUI at the command prompt &you don)t need to type the !fig or !m e%tension(3

+! The GUI should start running immediately3

Try to input some numbers to test out the GUI! 'on rat#lations on creating your first GUI'

Tro#bleshootin and )otential )roblems

6o your GUI doesn)t "ork and you don)t kno" "hy! @ere are a couple of tips that might help you find your bug3 .! If you can)t figure out "here you error is# it might be a good idea to *uickly go through this tutorial again! +! The command line can gi$e you many hints on "here e%actly the problem resides! If your GUI is not "orking for any reason# the error "ill be outputted to the command prompt! The line number of the faulty code and a short description of the error is gi$en! This is al"ays a good place to start in$estigating! 2! Make sure all your $ariable names are consistent in the code! In addition# make sure your component Tags are consistent bet"een the !fig and the !m file! /or e%ample# if you)re trying to e%tract the string from the Edit Text component# make sure that your get statement uses the right tag' More specifically# if you ha$e the follo"ing line in your code# make sure that you named the Edit Text component accordingly'

1+ a = get('andles+in$ut% edit"e#t/:;tring:)=