Writing the Code for the GUI

Matlab 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 don’t 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 Function Icon icon, which will bring up a list of the functions within the .m file. Select plot1_pushbutton_Callback.

    Function Shortcut

    Add the following code to the function:

    %selects axes1 as the current axes, so that 
%Matlab knows where to plot the data
axes(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 data
plot(x,y);
%adds a title, x-axis description, and y-axis description
title('Axes 1');
xlabel('X data');
ylabel('Y data');
guidata(hObject, handles); %updates the handles

  2. Similarly, we want to put the following code into the plot2_pushbutton_Callback:

    %selects axes2 as the current axes, so that 
%Matlab knows where to plot the data
axes(handles.axes2)
 
%creates a vector from 0 to 10, [0 1 2 3 . . . 10]
x = 0:10;
%creates a vector  [0 1 4 9 . . . 100]
y = x.^2
 
%plots the x and y data
plot(x,y);
%adds a title, x-axis description, and y-axis description
title('Axes 2');
xlabel('X data');
ylabel('Y data');
guidata(hObject, handles); %updates the handles

  3. Next, we need to add some code to the clearPlots_pushbutton_Callback:

    %these two lines of code clears both axes
cla(handles.axes1,'reset')
cla(handles.axes2,'reset')
guidata(hObject, handles); %updates the handles

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

    Figure Toolbar

  5. Save your m-file!

Run and Test the GUI

Now that we’ve 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 Save and Run Icon icon to save and run the GUI. Alternatively, from the GUIDE editor, you can click on the play button to launch the GUI. The following GUI should appear once you click the icon:

    Axes GUI

  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.

    GUI verified

  3. And that’s 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.

Source files can be downloaded here.

Pages: 1 2