Lay Out the Simple Programmatic GUI

Create a Figure for a Programmatic GUI

In MATLAB software, a GUI is a figure. This first step creates the figure and positions it on the screen. It also makes the GUI invisible so that the GUI user cannot see the components being added or initialized. When the GUI has all its components and is initialized, the example makes it visible.

%  Initialize and hide the GUI as it is being constructed.
f = figure('Visible','off','Position',[360,500,450,285]);

The call to the figure function uses two property/value pairs. The Position property is a four-element vector that specifies the location of the GUI on the screen and its size: [distance from left, distance from bottom, width, height]. Default units are pixels.

The next topic, Add Components to a Programmatic GUI, shows you how to add the push buttons, axes, and other components to the GUI.

Back to Top

Add Components to a Programmatic GUI

The example GUI has six components: three push buttons, one static text, one pop-up menu, and one axes. Start by writing statements that add these components to the GUI. Create the push buttons, static text, and pop-up menu with the uicontrol function. Use the axes function to create the axes.

1. Add the three push buttons to your GUI by adding these statements to your code file following the call to figure.

   % Construct the components.
   hsurf    = uicontrol('Style','pushbutton',...
                'String','Surf','Position',[315,220,70,25]);
   hmesh    = uicontrol('Style','pushbutton',...
                'String','Mesh','Position',[315,180,70,25]);
   hcontour = uicontrol('Style','pushbutton',...
                'String','Countour','Position',[315,135,70,25]);

   These statements use the uicontrol function to create the push buttons. Each statement uses a series of property/value pairs to define a push button.

   Property	Description
   Style	In the example, pushbutton specifies the component as a push button.
   String	Specifies the label that appears on each push button. Here, there are three types of plots: Surf, Mesh, Contour.
   Position	Uses a four-element vector to specify the location of each push button within the GUI and its size: [distance from left, distance from bottom, width, height]. Default units for push buttons are pixels.

   Each call returns the handle of the component that is created.

2. Add the pop-up menu and its label to your GUI by adding these statements to the code file following the push button definitions.

   hpopup = uicontrol('Style','popupmenu',...
              'String',{'Peaks','Membrane','Sinc'},...
              'Position',[300,50,100,25]);
   htext  = uicontrol('Style','text','String','Select Data',...
              'Position',[325,90,60,15]);

   For the pop-up menu, the String property uses a cell array to specify the three items in the pop-up menu: Peaks, Membrane, Sinc. The static text component serves as a label for the pop-up menu. Its String property tells the GUI user to Select Data. Default units for these components are pixels.

3. Add the axes to the GUI by adding this statement to the code file. Set the Units property to pixels so that it has the same units as the other components.

   ha = axes('Units','pixels','Position',[50,60,200,185]);

4. Align all components except the axes along their centers with the following statement. Add it to the code file following all the component definitions.

   align([hsurf,hmesh,hcontour,htext,hpopup],'Center','None');

5. Make your GUI visible by adding this command following the align command.

   set(f,'Visible','on')

6. This is what your code file should now look like:

   function simple_gui2
   % SIMPLE_GUI2 Select a data set from the pop-up menu, then
   % click one of the plot-type push buttons. Clicking the button
   % plots the selected data in the axes.
   
      %  Create and hide the GUI as it is being constructed.
      f = figure('Visible','off','Position',[360,500,450,285]);
      
      %  Construct the components.
      hsurf = uicontrol('Style','pushbutton','String','Surf',...
              'Position',[315,220,70,25]);
      hmesh = uicontrol('Style','pushbutton','String','Mesh',...
              'Position',[315,180,70,25]);
      hcontour = uicontrol('Style','pushbutton',...
              'String','Countour',...
              'Position',[315,135,70,25]); 
      htext = uicontrol('Style','text','String','Select Data',...
              'Position',[325,90,60,15]);
      hpopup = uicontrol('Style','popupmenu',...
              'String',{'Peaks','Membrane','Sinc'},...
              'Position',[300,50,100,25]);
      ha = axes('Units','Pixels','Position',[50,60,200,185]); 
      align([hsurf,hmesh,hcontour,htext,hpopup],'Center','None');
      
      %Make the GUI visible.
      set(f,'Visible','on')
   
   end

7. Run your code by typing simple_gui2 at the command line. This is what your GUI now looks like. Note that you can select a data set in the pop-up menu and click the push buttons. But nothing happens. This is because there is no code in the file to service the pop-up menu or the buttons.

   

8. Type help simple_gui2 at the command line. MATLAB software displays this help text.

   help simple_gui2
     SIMPLE_GUI2 Select a data set from the pop-up menu, then
     click one of the plot-type push buttons. Clicking the button
     plots the selected data in the axes.

The next topic, Code the Simple Programmatic GUI, shows you how to initialize the GUI.

Back to Top

Create the Simple Programmatic GUI Code File

Code the Simple Programmatic GUI

Recommended Products

• MATLAB
• Signal Processing Toolbox
• Optimization Toolbox
• Statistics Toolbox
• Control System Toolbox

Get MATLAB trial software

Includes the most popular MATLAB recorded presentations with Q&A sessions led by MATLAB experts.

Get the Interactive Kit