61
MATLAB GUI (Graphical User Interface) Tutorial for Beginners 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 were not used, people would have to work from the command line interface, which can be extremely difficult and frustrating. Imagine if you had to input text commands to operate your web browser (yes, your web browser is a GUI too!). It wouldn’t be very practical would it? In this tutorial, we will create a simple GUI that will add together two numbers, displaying the answer in a designated text field. This tutorial is written for those with little or no experience creating a MATLAB GUI (Graphical User Interface). Basic knowledge of MATLAB is not required, but recommended. MATLAB version 2007a is used in writing this tutorial. Both earlier versions and new versions should be compatible as well (as long as it isn’t too outdated). Lets get started! Contents  Initializing GUIDE (GUI Creator)  Creating the Visual Aspect of the GUI: Part 1  Creating the Visual Aspect of the GUI: Part 2  Writing the Code for the GUI Callbacks   Launching the GUI   Troubleshooting and Potential Problems  Related Posts and Other Links Initializing GUIDE (GUI Creator) 1. First, open up MATLAB. Go to the command window and type in guide.

Matlab Gui

Embed Size (px)

DESCRIPTION

MATLAB GUI

Citation preview

MATLAB GUI (Graphical User Interface) Tutorial for Beginners

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 were not used, people would have to work from the command line interface, which can be extremely difficult and frustrating. Imagine if you had to input text commands to operate your web browser (yes, your web browser is a GUI too!). It wouldnt be very practical would it? In this tutorial, we will create a simple GUI that will add together two numbers, displaying the answer in a designated text field.

This tutorial is written for those with little or no experience creating a MATLAB GUI (Graphical User Interface). Basic knowledge of MATLAB is not required, but recommended. MATLAB version 2007a is used in writing this tutorial. Both earlier versions and new versions should be compatible as well (as long as it isnt too outdated). Lets get started!

Contents Initializing GUIDE (GUI Creator) Creating the Visual Aspect of the GUI: Part 1 Creating the Visual Aspect of the GUI: Part 2 Writing the Code for the GUI Callbacks Launching the GUI Troubleshooting and Potential Problems Related Posts and Other Links Initializing GUIDE (GUI Creator)1. First, open up MATLAB. Go to the command window and type in guide.

2. You should see the following screen appear. Choose the first option Blank GUI (Default).

3. You should now see the following screen (or something similar depending on what version of MATLAB you are using and what the predesignated settings are):

4. Before adding components blindly, it is good to have a rough idea about how you want the graphical part of the GUI to look like so that itll be easier to lay it out. Below is a sample of what the finished GUI might look like.

Creating the Visual Aspect of the GUI: Part 11. For the adder GUI, we will need the following components Two Edit Text components Three Static Text component One Pushbutton componentAdd 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 below :

2. Next, its time to edit the properties of these components. Lets start with the static text. Double click one of the Static Text components. You should see the following table appear. It is called the Property Inspector and allows you to modify the properties of a component.

3. Were interested in changing the String parameter. Go ahead and edit this text to +.

Lets also change the font size from 8 to 20.

After modifying these properties, the component may not be fully visible on the GUI editor. This can be fixed if you resize the component, i.e. use your mouse cursor and stretch the component to make it larger. 4. Now, do the same for the next Static Text component, but instead of changing the String parameter to +, change it to =. 5. For the third Static Text component, change the String parameter to whatever you want as the title to your GUI. I kept it simple and named it MyAdderGUI. You can also experiment around with the different font options as well. 6. For the final Static Text component, we want to set the String Parameter to 0. In addition, we want to modify the Tag parameter for this component. The Tag parameter is basically the variable name of this component. Lets call it answer_staticText. This component will be used to display our answer, as you have probably already have guessed.

7. So now, you should have something that looks like the following:

Creating the Visual Aspect of the GUI: Part 21. Next, lets modify the Edit Text components. Double click on the first Edit Text component. We want to set the String parameter to 0 and we also want to change the Tag parameter to input1_editText, as shown below. This component will store the first of two numbers that will be added together.

2. For the second Edit Text component, set the String parameter to 0 BUT set the Tag parameter input2_editText. This component will store the second of two numbers that will be added together. 3. Finally, we need to modify the pushbutton component. Change the String parameter to Add! and change the Tag parameter to add_pushbutton. Pushing this button will display the sum of the two input numbers.

4. So now, you should have something like this:

Rearrange your components accordingly. You should have something like this when you are done:

5. Now, save your GUI under any file name you please. I chose to name mine myAdder. When you save this file, MATLAB automatically generates two files: myAdder.fig and myAdder.m. The .fig file contains the graphics of your interface. The .m file contains all the code for the GUI. Writing the Code for the GUI CallbacksMATLAB automatically generates an .m file to go along with the figure that you just put together. The .m file is where we attach the appropriate code to the callback of each component. For the purposes of this tutorial, we are primarily concerned only with the callback functions. You dont have to worry about any of the other function types. 1. Open up the .m file that was automatically generated when you saved your GUI. In the MATLAB editor, click on the icon, which will bring up a list of the functions within the .m file. Select input1_editText_Callback.

2. The cursor should take you to the following code block:3. function input1_editText_Callback(hObject, eventdata, handles)4. % hObject handle to input1_editText (see GCBO)5. % eventdata reserved - to be defined in a future version of MATLAB6. % handles structure with handles and user data (see GUIDATA)7. 8. % Hint: get(hObject,'String') returns contents of input1_editText as text9. % str2double(get(hObject,'String')) returns contents of10. % input1_editText as a doubleAdd the following code to the bottom of that code block:%store the contents of input1_editText as a string. if the string%is not a number then input will be emptyinput = str2num(get(hObject,'String'));

%checks to see if input is empty. if so, default input1_editText to zeroif (isempty(input)) set(hObject,'String','0')endguidata(hObject, handles);This piece of code simply makes sure that the input is well defined. We dont want the user to put in inputs that arent numbers! The last line of code tells the gui to update the handles structure after the callback is complete. The handles stores all the relevant data related to the GUI. This topic will be discussed in depth in a different tutorial. For now, you should take it at face value that its a good idea to end each callback function with guidata(hObject, handles); so that the handles are always updated after each callback. This can save you from potential headaches later on. 11. Add the same block of code to input2_editText_Callback. 12. Now we need to edit the add_pushbutton_Callback. Click on the icon and select add_pushbutton_Callback. The following code block is what you should see in the .m file.13. % --- Executes on button press in add_pushbutton.14. function add_pushbutton_Callback(hObject, eventdata, handles)15. % hObject handle to add_pushbutton (see GCBO)16. % eventdata reserved - to be defined in a future version of MATLAB17. % handles structure with handles and user data (see GUIDATA)Here is the code that we will add to this callback:a = get(handles.input1_editText,'String');b = get(handles.input2_editText,'String');% a and b are variables of Strings type, and need to be converted% to variables of Number type before they can be added together

total = str2num(a) + str2num(b);c = num2str(total);% need to convert the answer back into String type to display itset(handles.answer_staticText,'String',c);guidata(hObject, handles);18. Lets discuss how the code we just added works:19. a = get(handles.input1_editText,'String');20. b = get(handles.input2_editText,'String');The two lines of code above take the strings within the Edit Text components, and stores them into the variables a and b. Since they are variables of String type, and not Number type, we cannot simply add them together. Thus, we must convert a and b to Number type before MATLAB can add them together. 21. We can convert variables of String type to Number type using the MATLAB command str2num(String argument). Similarly, we can do the opposite using num2str(Number argument). The following line of code is used to add the two inputs together. 22. total= (str2num(a) + str2num(b));The next line of code converts the sum variable to String type and stores it into the variable c.c = num2str(total);The reason we convert the final answer back into String type is because the Static Text component does not display variables of Number type. If you did not convert it back into a String type, the GUI would run into an error when it tries to display the answer. 23. Now we just need to send the sum of the two inputs to the answer box that we created. This is done using the following line of code. This line of code populates the Static Text component with the variable c. 24. set(handles.answer_staticText,'String',c);The last line of code updates the handles structures as was previously mentioned. guidata(hObject, handles);Congratulations, were finished coding the GUI. Dont forget to save your m-file. It is now time to launch the GUI!

MATLAB GUI Tutorial - Slider 28 Oct 2007 Quan Quach 108 comments 20,071 views IntroductionIn this Matlab GUI tutorial, you will learn how to create and use the slider component. Sliders are useful controls for choosing a value in a range of values. Common uses are volume controls, seekers for movie and sound files as well as color pickers. An example of a slider is shown below.

This tutorial is written for those with little or no experience creating a Matlab GUI (Graphical User Interface). If youre new to creating GUIs in Matlab, you should visit this tutorial first. Basic knowledge of Matlab is not required, but recommended. Matlab version 2007a is used in writing this tutorial. Both earlier versions and new versions should be compatible as well (as long as it isnt too outdated). Lets get started!Create the Visual Aspect of the GUI1. Start up Matlab, and type guide in the command line.

2. Choose to create a new GUI using the Blank GUI(Default) option.

3. Click on and add an Edit Text component to the GUI figure. Next, click on and add a Slider component onto the GUI figure. 4. Double click the Edit Text component to bring up the Property Inspector. Change the String property to 0, and change the Tag property to sliderValue_editText as shown in the figure below:

5. Next, lets modify the properties of the Slider component. First lets sit the Min property to 0, and the Max property to 100. Next, change the Tag property to slider1.

6. Heres what your figure should look like after you add the components and modify them.

7. At this point, you also might want to add some Static Text components to specify the min and max values of the slider. You can modify their text by double clicking on the component and changing the String property. Its not required, but I highly recommend it.

8. Save your GUI wherever you please with your desired filename. Writing the Code for the GUIMatlab automatically generates an .m file to go along with the figure that you just put together. The .m file is where we attach the appropriate code to the callback of each component. For the purposes of this tutorial, we are primarily concerned only with the callback functions. You dont have to worry about any of the other function types.1. Open up the .m file that was automatically generated when you saved your GUI. In the Matlab editor, click on the icon, which will bring up a list of the functions within the .m file. Select slider1_Callback.

Add the following code to the function:%obtains the slider value from the slider componentsliderValue = get(handles.slider1,'Value');%puts the slider value into the edit text componentset(handles.slider_editText,'String', num2str(sliderValue));% Update handles structureguidata(hObject, handles);2. Now, lets add the following code to the slider_editText_Callback function:%get the string for the editText componentsliderValue = get(handles.slider_editText,'String');%convert from string to number if possible, otherwise returns emptysliderValue = str2num(sliderValue);%if user inputs something is not a number, or if the input is less than 0%or greater than 100, then the slider value defaults to 0if (isempty(sliderValue) || sliderValue < 0 || sliderValue > 100) set(handles.slider1,'Value',0); set(handles.slider_editText,'String','0');else set(handles.slider1,'Value',sliderValue);end3. Save your m-file!Run and Test the GUINow that weve completed both the visual and code aspects of the GUI, its time to run the GUI to make sure it works.1. From the m-file editor, you can click on the icon to save and run the GUI. Alternatively, from the GUIDE editor, you can click on the to launch the GUI. The following GUI should appear once you click the icon:

2. Now, try to put in different types of inputs to test the GUI. Any input that is not a number, less than zero, or greater than 100 should default the slider to a value of zero. 3. And thats it. Those are the basics of using a Slider component. You can explore the other options that the slider has to offer through the Property Inspector. For instance, you can use the SliderStep property to customize how far you want the slider to move when you press the left and right arrow, or when you click on the scroll bar. This is the end of the tutorial.

MATLAB GUI Tutorial - Plotting Data to Axes 31 Oct 2007 Quan Quach 144 comments 25,632 views IntroductionIn this Matlab GUI tutorial, you will learn how to create and use the Axes component. The Axes component allows you to display graphics, such as graphs and images on your GUI. In this tutorial, we will create two axes on the GUI and plot some simple data onto it. In addition, we will include a reset button to clear the axes and we will also add the standard toolbar to allow the user to zoom, pan, and query the plot.

This tutorial is written for those with little or no experience creating a Matlab GUI (Graphical User Interface). If youre new to creating GUIs in Matlab, you should visit this tutorial first. Basic knowledge of Matlab is recommended. Matlab version 2007a is used in writing this tutorial. Both earlier versions and new versions should be compatible as well (as long as it isant too outdated). Lets get started!Create the Visual Aspect of the GUI1. First, open up Matlab. Go to the command window and type in guide.

2. You should see the following screen appear. Choose the first option Blank GUI (Default).

3. Click on and add two Axes components to the GUI figure. Next, click on and add three Pushbutton components onto the GUI figure. 4. Double click the Axes component to bring up the Property Inspector. Change the Tag property to axes1, which should already be the default name. Additionally, make sure the other Axes components Tag property is named axes2.

5. Next, lets modify the properties of the Pushbutton components. Double click on one of the Pushbutton components. Change the String property to Plot Axes 1, and the Tag property to plotAxes1_pushbutton, as shown below.

Similarly, double click on the next pushbutton and change the String property to Plot Axes 2 and change the Tag property to plotAxes2_pushbutton. Finally, double click on the final pushbutton and change the String property to Clear Axes and change the Tag property to clearAxes_pushbutton. 6. Heres what your figure should look like after you add the components and modify them.

7. Save your GUI wherever you please with your desired filename. Writing the Code for the GUIMatlab automatically generates an .m file to go along with the figure that you just put together. The .m file is where we attach the appropriate code to the callback of each component. For the purposes of this tutorial, we are primarily concerned only with the callback functions. You dont have to worry about any of the other function types.1. Open up the .m file that was automatically generated when you saved your GUI. In the Matlab editor, click on the icon, which will bring up a list of the functions within the .m file. Select plot1_pushbutton_Callback.

Add the following code to the function:%selects axes1 as the current axes, so that %Matlab knows where to plot the dataaxes(handles.axes1)%creates a vector from 0 to 10, [0 1 2 3 . . . 10]x = 0:10;%creates a vector from 0 to 10, [0 1 2 3 . . . 10]y = 0:10;%plots the x and y dataplot(x,y);%adds a title, x-axis description, and y-axis descriptiontitle('Axes 1');xlabel('X data');ylabel('Y data');guidata(hObject, handles); %updates the handles2. Similarly, we want to put the following code into the plot2_pushbutton_Callback:3. %selects axes2 as the current axes, so that 4. %Matlab knows where to plot the data5. axes(handles.axes2)6. 7. %creates a vector from 0 to 10, [0 1 2 3 . . . 10]8. x = 0:10;9. %creates a vector [0 1 4 9 . . . 100]10. y = x.^211. 12. %plots the x and y data13. plot(x,y);14. %adds a title, x-axis description, and y-axis description15. title('Axes 2');16. xlabel('X data');17. ylabel('Y data');guidata(hObject, handles); %updates the handles18. Next, we need to add some code to the clearPlots_pushbutton_Callback:19. %these two lines of code clears both axes20. cla(handles.axes1,'reset')21. cla(handles.axes2,'reset')guidata(hObject, handles); %updates the handles22. And finally, we need to add the following line of code to axes_tutorial_OpeningFcn:set(hObject,'toolbar','figure');This line of code should be placed right before:guidata(hObject, handles);This line of code effectively adds the standard toolbar to the GUI, allowing the user to zoom, pan, query the plot, and more. The standard toolbar and a brief description of the icons are shown below:

23. Save your m-file!Run and Test the GUINow that weve completed both the visual and code aspects of the GUI, its time to run the GUI to make sure it works.1. From the m-file editor, you can click on the icon to save and run the GUI. Alternatively, from the GUIDE editor, you can click on the to launch the GUI. The following GUI should appear once you click the icon:

2. Go ahead and try pressing all of the buttons to make sure they work. If everything was done correctly, you should see the following plots. Also, you can use the icons that are within the red box to test out the other functions.

3. And thats it. Those are the basics of using the Axes component. You can explore the other options that the axes has to offer through the Property Inspector. This is the end of the tutorial.

Matlab GUI Tutorial - Integrating Simulink Model into a GUI

IntroductionThis tutorial will show you how to easily interface a Simulink Model with GUIDE using two different methods. In this tutorial, you will learn how to pass parameters to a Simulink model without using the set_param command and without having the Simulink Model open (which is how the Matlab Help does it). Since Simulink can be used to easily model a variety of systems using an intuitive block diagram format, it would be advantageous to use it in conjunction with GUIs. Interfacing the Simulink Model with GUIDE will makes it easier for end-users to change key parameters and to view simulations without having to deal directly with Simulink. This tutorial is written for those with some experience creating a Matlab GUI and with some experience using Simulink. If youre new to creating GUIs in Matlab, you should visit this tutorial first. Basic knowledge of Matlab is highly recommended. Matlab version 2007a is used in writing this tutorial. Both earlier versions and new versions should be compatible as well (as long as it isant too outdated). Lets get started!The Simulink Model In this part of the tutorial, we will quickly go over the Simulink Model. The Simulink Model is of a mass-spring-damper system, which is a simple 2nd order system. The following is a free body diagram of the mass-spring-damper system.

It is assumed here that you know how to use Simulink and understand the basic theory of the mass-spring-damper system, so I will not go into any detail on how the model was generated or how equations were derived. If you are clueless on using Simulink, this is a good place to visit.1. First, download the sample files provided here. Unzip the files and place them wherever you please. The zip file includes 4 files: simulink_gui.fig, simulink_gui.m, simulateButton.m, and mass_spring.mdl.2. The following is a diagram of the Simulink Model for the above system.

3. Notice that the Gain blocks use variables instead of number values: 1/m, c/m, and k/m. To simulate this system from the command line, we use the sim command. Since the Simulink Model is linked to the main workspace by default, the parameters m,c and k must be defined within the main workspace in order for the sim command to work properly. Otherwise, an error will result. There are ways to get around this using the command simset, and we will discuss this in the next section.4. Thus, if the variables m,c, and k are not defined in the main workspace and we try to use a function like the one listed below, an error would result! 5. function runSimulinkModel(m,c,k)sim('mass_spring');6. This can be especially troublesome if you are trying to interface your Simulink Model into a GUI because GUIs store all their information outside from the main workspace. In the next section, we will discuss two ways to resolve this problem.In this part of the tutorial, we are going to code the GUI so that it can call the Simulink Model. The GUI portion Method 1: using simsetThe simset command allows you to define which workspace to run your simulink model from. By default, the simulink model is run from is the main workspace. 1. Type guide at the command prompt.

2. Choose to open the sample GUI by clicking on Open Existing GUI. Click on Browse to locate where you saved the GUI files.

3. Here is what the GUI should look like when you open it:

4. The following is the code for the simulate_pushbutton_Callback functon. 5. axes(handles.axes1) %set the axes6. m=str2num(get(handles.mass_editText,'String')); %fetch the mass value7. c=str2num(get(handles.damping_editText,'String')); %fetch the damping value8. k=str2num(get(handles.spring_editText,'String')); %fetch the spring constant9. 10. %configure the options so that the current 11. %workspace is used in simulating the model12. options = simset('SrcWorkspace','current');13. 14. %the sim command simulates the simulink model15. %the first argument is the model name16. %the second argument is an array containing the start and stop time17. %if [] is used, then the value from within the simulink model is used18. %the third argument is the options configured from simset19. sim('mass_spring',[],options);20. %plot the data21. plot(tout,yout)22. xlabel('Time')23. ylabel('Displacement')24. Title('2nd Order Mass Spring System')grid on25. Now, we are ready to run the GUI. You should see the following GUI appear. Try inputting different parameters and simulating the system response. Be sure the parameters are well defined (no letters, no symbols, no negative numbers, etc) or an error will result.

The GUI portion Method 2This method is not as elegant as the previous method, but it is how I first learned how to run simulink models within GUIs.1. Type guide at the command prompt.

2. Choose to open the sample GUI by clicking on Open Existing GUI. Click on Browse to locate where you saved the GUI files.

3. Here is what the GUI should look like when you open it:

4. Double click on the Simulate Button to bring up the Property Inspector. Change the Callback property to simulateButton. Now, each time the Simulate button is pressed, the callback is mapped to the simulateButton m-file instead of the normal callback.

5. The following is the code for simulateButton.m. This file is included in the zip folder you downloaded earlier. Notice that this m-file is NOT in function format. Instead, all of these commands are being executed in the main workspace area! Since all the parameters are defined in the main workspace, when we use the sim command to simulate the model, the variables m,c,and f are defined!! This would not have been possible if a normal callback was used. 6. %notice that this m-file is NOT a function because simulink models7. %only allows you to use variables that are within the main workspace8. clear all9. 10. %make the handles structures available to the main workspace11. h =gcf;12. handles = guidata(h);13. 14. %set the axes to which the data will be plotted to15. axes(handles.axes1);16. 17. % get the parameters from the edit text fields18. m=str2num(get(handles.mass_editText,'String'));19. c=str2num(get(handles.damping_editText,'String'));20. k=str2num(get(handles.spring_editText,'String'));21. 22. %simulate the system 23. sim('mass_spring');24. 25. 26. %plot the data27. plot(tout,yout)28. xlabel('Time')29. ylabel('Displacement')30. Title('2nd Order Mass Spring System')grid on31. Now, we are ready to run the GUI. You should see the following GUI appear. Try inputting different parameters and simulating the system response. Be sure the parameters are well defined (no letters, no symbols, no negative numbers, etc) or an error will result.

The next section will discuss how to configure other Simulink parameters such as the sources, sinks, time steps, simulation time, and some other things.How to specify other Simulink Parameters through the GUISpecifying other Simulink Parameters through the GUI is not a difficult task. In this section of the tutorial, I will provide an example on how to do this. You can download the source files here if you do not want to read through the tutorial. Lets say that we want to add the following capabilities to our GUI: set simulation time set sample time set the time when the unit step occurs designate the output parameter names 1. First, lets make it so the user can specify the simulation time through the GUI. It is possible to specify the start and stop time as an argument to the sim command.For example, if I wanted to simulate the model for a specific period of time, I would use the following command:sim('mass_spring',[0 simTime]);If no time argument is given, then the value specified within the Simulink Model is used.Another way of doing this is through the Simulink Model itself. To do this, we need to set the simulation time parameter to a variable. As can be seen in the image, I changed it to simTime.

2. Next, double click on the Step block. Change the Step time field to stepTime and the Sample time field to sampleTime as shown in the image below.

3. Finally, lets change the output block. Previously, the output was called yout by default. But suppose you want to give your output a more descriptive name, like displacement. Instead of using the Out1 sink, we would instead use the To Workspace sink. So go ahead and replace the old output sink with the new one.

4. Finally, we need to modify the properties of the output sink that we just added. Double click on the component and change the Variable name field to displacement and change the Save format field to Array.

5. The Simulink model should now look like this:

6. Another thing you might want to do is to NOT limit the number of data points that result from your simulation. You can deactivate this by going to Simulation => Configuration Parameters from the Simulink Model.

7. Now, lets move on to the GUI changes. I wont go over each step. But all we have to do is add on three Static Text Components and three Edit Text Components and to rename their Tag property appropriately. I renamed the Tag property for each of the Edit Text components to: stepTime_editText, sampleTime_editText, and simTime_editText. Heres what your GUIDE figure should look like after you make the edits:

8. Finally, I made some minor edits to the simulate_pushbutton_Calback function. 9. function simulate_pushbutton_Callback(hObject, eventdata, handles)10. 11. axes(handles.axes1)12. % get the parameters from the edit text fields13. m=str2num(get(handles.mass_editText,'String'));14. c=str2num(get(handles.damping_editText,'String'));15. k=str2num(get(handles.spring_editText,'String'));16. stepTime=str2num(get(handles.stepTime_editText,'String'));17. sampleTime=str2num(get(handles.sampleTime_editText,'String'));18. simTime=str2num(get(handles.simTime_editText,'String'));19. 20. options = simset('SrcWorkspace','current');21. sim('mass_spring',[],options);22. %plot the data23. plot(tout,displacement)24. xlabel('Time')25. ylabel('Displacement')26. title('2nd Order Mass Spring System')grid on27. After you make all of these changes, you can finally test and run your GUI! Try inputting in different input parameters to test it out.

If you are unable to get your GUI/Simulink Model to work, you can download the source files here .We encourage you explore and to play around with some of the other features within Simulink. There are a myriad of features that were not discussed, and we hope this tutorial has given you a better idea on how to use a GUI in conjunction with Simulink.This is the end of the tutorial.

Matlab GUI Tutorial - Mapping a Keyboard Button to Execute a GUI Callback IntroductionThis tutorial will teach you how to map a keyboard press to execute a GUI callback. We will start with a basic adder GUI. Originally, the GUI adds the two numbers together when the user clicks on the add button. We will modify the GUI so that the two numbers will add when the user presses the enter key. For more information on this topic, visit this post on Adding Shortcut keys / Hot keys to a GUI.

Example: Modifying the Adder GUI 1. First, download the Adder GUI source files here. 2. Next, we want to add the following line in the opening function: 3. %we must define the KeyPressFcn for the edit text boxes or else the4. %enter key will not register while the edit text box is active5. 6. set(handles.figure1,'KeyPressFcn',@myFunction); 7. set(handles.input1_editText,'KeyPressFcn',@myFunction);set(handles.input2_editText,'KeyPressFcn',@myFunction);8. Next, we want to add the following code at the end of the m-file9. function myFunction(src,evnt)10. %keyPressFcn automatically takes in two inputs11. %src is the object that was active when the keypress occurred12. %evnt stores the data for the key pressed13. 14. %brings in the handles structure in to the function15. handles = guidata(src);16. 17. k= evnt.Key; %k is the key that is pressed18. 19. if strcmp(k,'return') %if enter was pressed20. pause(0.01) %allows time to update21. 22. %define hObject as the object of the callback that we are going to use23. %in this case, we are mapping the enter key to the add_pushbutton24. %therefore, we define hObject as the add pushbutton25. %this is done mostly as an error precaution26. hObject = handles.add_pushbutton; 27. 28. %call the add pushbutton callback. 29. %the middle argument is not used for this callback30. add_pushbutton_Callback(hObject, [], handles);end31. And thats it. Run the GUI and verifies that it works. Matlab GUI - Adding a Custom Menu Bar 04 Feb 2008 Quan Quach 15 comments 4,151 views IntroductionA menu bar can add a lot of functionality to a GUI without taking up much space. If we used a pushbutton to assign each individual callback, then the GUI would look crowded and confusing. The default menu bar can be added to a GUI quite easily, and looks like this:

Unfortunately, many of the features in the default menu bar might not apply to your GUI. Thus, the next best thing is to define your own custom menu bar. I prefer to use a custom menu bar to lump together functions that while important, are not used often enough to warrant its own pushbutton. Creating a custom menu bar is quite easy using GUIDE, and we shall illustrate this in the upcoming example.The Default MenubarThere are two different ways you can use to add the default menu bar to your GUI. 1. Add the following line of code to the opening function:set(handles.figure1,'MenuBar','figure');2. Double click on the background of the GUIDE figure to bring up the Property Inspector. Set the MenuBar property to figure.

Adding your own Custom Menu Bar: A Simple Example1. In this example, we will create a GUI that can adjust the size of the text using the menu items created in the custom menu bar. I have provided a skeleton GUI to get you started, which you can download here.2. Now, type guide at the command prompt.

3. Choose to open the sample GUI by clicking on Open Existing GUI. Click on Browse to locate where you saved the GUI files.

4. Here is what the GUI should look like when you open it:

5. Next, go to Tools => Menu Editor as shown in the figure

6. You should see the following window appear. Click on the upper left icon to create a new menu.

7. Now, you can change the Label and Tag properties. I recommend you use the same names that I used in the image below.

8. Next, we need to add menu items. Click on the second icon twice to create two new menu items.

9. Lets designate the first menu item as the option that will increase the font. Fill out the Label, Tag, and Accelerator accordingly. Note: The accelerator is basically used as a hotkey within the GUI. This means you can press Control + Q to execute the Callback associated with this menu item.

10. Lets do the same for the second item and make it the option that will decrease the font. After youre done with this, press the OK button

11. Next, we need to add some code to the callbacks, which were automatically generated for us when we configured the menu items. Go to the m-file and you should see three callbacks that were added. We dont need any code for the fontMenu_Callback. For the increaseFont_Callback, we want to add the following code:currentFontSize = get(handles.blinkdagger,'FontSize');set(handles.blinkdagger,'FontSize',currentFontSize+2);Next, we want to add code to the decreaseFont_Callback:currentFontSize = get(handles.blinkdagger,'FontSize');set(handles.blinkdagger,'FontSize',currentFontSize-2);12. Now we are ready to run the GUI. You should see the following GUI appear

13. Notice the menu that you just configured! You can either manually click on the menu items to increase/decrease the font size, or use the accelerator to increase (control + Q) and decease (control + W) the font size. Go ahead and give it a try!

Default + Custom Menu BarIf you enable the default menu bar and also define a custom menu bar, the custom menu bar will show up at the end of the default menu bar. See the image below.

Download the Source FilesYou can download the source files here.This is the end of the tutorial.

IntroductionIn this tutorial, you will learn how to save data from your GUI, and how to load it back in. This is a useful feature when you want your GUI to remember a group of settings. In addition, this gives you the chance to go back to previous states. The example we will use in this tutorial involves the slider GUI that was created in the Slider Tutorial. Here is a quick look at the finished GUI.

The Example Files and Code1. First, download the GUI skeleton here. Unzip the files and place them wherever you please. 2. Now, type guide at the command prompt.

3. Choose to open the sample GUI by clicking on Open Existing GUI. Click on Browse to locate where you saved the GUI files.

4. Here is what the GUI should look like when you open it:

5. Click on the icon on the GUI figure to bring up the accompanying .m file.6. Lets add some code to each of the pushbuttons. First, lets add the code for the save button.Find the save_pushbutton_Callback and add the following code %allow the user to specify where to save the settings file[filename,pathname] = uiputfile('default','Save your GUI settings');if pathname == 0 %if the user pressed cancelled, then we exit this callback returnend%construct the path name of the save locationsaveDataName = fullfile(pathname,filename); %saves the gui datahgsave(saveDataName);7. Next, we want to add the following code to the load_pushbutton_Callback:8. %allow the user to choose which settings to load9. [filename, pathname] = uigetfile('*.fig', 'Choose the GUI settings file to load');10. 11. %construct the path name of the file to be loaded12. loadDataName = fullfile(pathname,filename);13. 14. %this is the gui that will be closed once we load the new settings15. theCurrentGUI = gcf; 16. 17. %load the settings, which creates a new gui18. hgload(loadDataName); 19. 20. %closes the old guiclose(theCurrentGUI);21. You might have noticed there were more callbacks, but you can ignore those for now. Lets run the GUI! You should see the following GUI appear when you run it:

22. Now, lets move the slider all the way to the right, like this:

23. Now, lets save the GUIs current state. Press the Save GUI Settings button. The following window should appear, asking where to save the GUI data.

24. Next, move the slider to any arbitrary location. Now, click on the Load GUI Settings. Choose the same file that you just saved.

25. You should see a brief flicker, and the GUI should be restored to exactly how you just saved it seconds ago. If you moved the GUI to another location on the screen after the save, it will be sent back to the position it was at when you saved it!26. You probably noticed the menu on the upper left of the GUI. If you dont know how to create a custom menu, I suggest you visit this tutorial first. Anyhow, we can go back to the m-file and add in some code for the menu item callbacks. I prefer to use menu items sometimes because they help keep the GUI looking clean and uncluttered.

Copy the same code from the save_pushbutton_Callback to the saveSettings_Callback.Similarly, do the same for load_pushbutton_Callback and loadSettings_Callback. 27. Now run the GUI again, and try using the menu instead. It should work exactly the same! In addition, you can even try the hotkeys, (Control + S) to save, and (Control + L) to load.

Matlab GUI - Using msgbox to Create a Better GUI 18 Feb 2008 Quan Quach 19 comments 5,346 views IntroductionThe msgbox command in Matlab can provide valuable information to the user of your GUI. It can warn the user, inform the user of an error, and also provide help. In this example, we will use a GUI (shown below) consisting of a simple edit text component.

The GUI takes in inputs between 0 to 100. If the user tries to input a numerical value that is not within 0-100, then the GUI will spit out an error message.

If you user tries to set the value to 100, the user will give off a warning message.

If you try to input something that is not a number, the user will get a help message.

The Example1. First, download the GUI skeleton here. Unzip the files and place them wherever you please. 2. Now, type guide at the command prompt.

3. Choose to open the sample GUI by clicking on Open Existing GUI. Click on Browse to locate where you saved the GUI files.

4. Here is what the GUI should look like when you open it:

5. Click on the icon on the GUI figure to bring up the accompanying .m file.6. Now, we want to add the following code to edit1_Callback.7. input = get(handles.edit1,'String'); %get the input from the edit text field8. input = str2num(input); %change from string to number9. 10. if isempty(input) %if the input is not a number11. 12. %this is the first line of the msgbox13. msgboxText{1} = 'You have tried to input something that is NOT a number.'; 14. %this is the second line15. msgboxText{2} = 'Try an input between 0 and 100 instead.';16. 17. %notice that msgboxText is a Cell array!18. 19. %this command creates the actual message box20. msgbox(msgboxText,'Input not a number', 'help');21. 22. elseif input == 100 %if the input is exactly 10023. msgboxText{1} = 'You have chosen the highest possible input!';24. msgboxText{2} = 'You cannot go any higher than this or it will result in an error.';25. msgbox(msgboxText,'Maximum input chosen', 'warn');26. 27. elseif input < 0 || input > 100 %if the input is less than 0 or greater than 10028. msgboxText{1} = 'You have chosen a value outside the range of 0-100!';29. msgbox(msgboxText,'Input not allowed', 'error');end30. And thats it! Run the GUI to make sure that it does what you expect it too.Other tipsThe msgbox command can be replaced with the errordlg, warndlg, and helpdlg commands. Its purely a matter of preference. For example:msgbox('hello world', 'hello world','error');%an equivalent commanderrordlg('hello world','hello world')

MATLAB GUI - How to Easily Share Data Between Two Separate GUIs IntroductionOftentimes, we need to share data between two separate GUIs. This tutorial will show you how to do just that. While there are many ways to share data between two GUIs, this tutorial will present the most simple method (in our opinion). Below are two simple GUIs that were created as an example for this tutorial. Quans GUI and Daniels GUI each take in an input. Quans GUI is able to extract the input from Daniels GUI, and vice versa. How is this accomplished? Lets run through the example and find out.Note: If you want to use a sub GUI to change settings parameters on a main GUI, check out this tutorial instead!

The Example1. First, download the GUI skeletons here. Unzip the files and place them wherever you please. 2. Now, type guide at the command prompt.

3. Choose to open the sample GUIs by clicking on Open Existing GUI. Click on Browse to locate where you saved the GUI files.

4. The two GUIs should look like this when you open them:

5. Click on the icon on the GUI figure to bring up the accompanying .m file.6. First, lets add the following code to pushbutton1_Callback for Quans GUI.7. danielFigureHandle = daniel; %stores the figure handle of Daniel's GUI here8. 9. %stores the GUI data from Daniel's GUI here10. %now we can access any of the data from Daniel's GUI!!!!11. danielData = guidata(danielFigureHandle); 12. 13. %store the input text from Daniel's GUI 14. %into the variable daniel_input15. daniel_input = get(danielData.editText_Daniel,'String');16. 17. %set the static text on Quan's GUI to match the18. %input text from Daniel's GUI19. set(handles.display_daniel_input,'String',daniel_input);20. 21. %notice that danielData is the structure containing the data from Daniel's GUI22. %notice that handles is the structure containing data from Quan's GUI,%which is the local GUI (i.e., the GUI that this function is running from)23. Second, lets add the following code to pushbutton1_Callback for Daniels GUI.24. quanFigureHandle = quan; %stores the figure handle of Quan's GUI here25. 26. %stores the GUI data from Quan's GUI here27. %now we can access any of the data from Quan's GUI!!!!28. quanData = guidata(quanFigureHandle); 29. 30. %store the input text from Quan's GUI 31. %into the variable quan_input32. quan_input = get(quanData.editText_Quan,'String');33. 34. %set the static text on Daniel's GUI to match the35. %input text from Quan's GUI36. set(handles.display_quan_input,'String',quan_input);37. 38. %notice that quanData is the structure containing the data from Quan's GUI39. %notice that handles is the structure containing data from Daniel's GUI,%which is the local GUI (i.e., the GUI that this function is running from)40. And thats it! Run the two GUIs simultaneously side by side. Enter in any input you choose for the two GUIs and test it to make sure that it does what you expect it too.

Matlab - A Simple but Powerful Command: questdlg 14 Mar 2008 Quan Quach 15 comments 3,127 views IntroductionSometimes, the simplest of things can prove to be quite useful. I want to promote the questdlg command within Matlab because I think its a very useful command that people either 1) overlook, or 2) does not know that it even exists! With this command, you can create a pop-up window that will ask you a question, and will allow you to choose one of the options. For instance, if we use the following code, we can create a window that queries the user for their favorite color. Go ahead and copy and paste the following code into the Matlab command prompt.%this example comes directly from the Matlab helpButtonName = questdlg('What is your favorite color?', ... 'Color Question', ... 'Red', 'Green', 'Blue', 'Green');

Once you click on any of the buttons, it will return the appropriate argument into the variable ButtonName. Read the rest of this tutorial for some practical examples on how to use the questdlg command.

Close GUI ConfirmationI already covered a very good use of questdlg in a previous tutorial: Close confirmation for GUI. Using the questdlg command, you can confirm if the user really wants to exit the GUI.

Save Data ConfirmationAlong the same lines, you can program a GUI to ask for confirmation when the user is performing a particular action. For instance, maybe the user did not save their data and tries to perform another operation that would wipe out the current data.ButtonName = questdlg('Do you want to save current data first?', ... 'Save Data', ... 'Yes', 'No', 'Yes');%perform the following operation depending on the option chosenswitch ButtonName, case 'Yes', %add code here for saving data case 'No', %add code here when data is not savedend % switch

Warn User of Excessive Processing TimePerhaps the user is trying to process a data file that is very large and will take a long time. We can warn the user with the following use of questdlg, allowing them to either continuing with the data processing, or to abort it.ButtonName = questdlg('Processing this file may take up to 30 minutes.', ... 'Process Data', ... 'Continue', 'Abort', 'Continue');%perform the following operation depending on the option chosenswitch ButtonName, case 'Continue', %continue the current operation case 'Abort', %abort the current operationend % switch

Versatile and FlexibleThe questdlg command is very flexible and versatile and can be used in a variety of situations. There are many situations wherein this command is useful which I did not discuss in this tutorial. After reading this tutorial, I hope you are able to apply this knowledge and use it to create better interfaces!