Creating Graphical User Interfaces

Axes

Axes enable your GUI to display graphics (e.g., graphs and images). Like all graphics objects, axes have properties that you can set to control many aspects of its behavior and appearance. See Axes Properties" in the MATLAB documentation for general information on axes objects.

Axes Callbacks

Axes can be programmed to execute a callback when users click a mouse button in the axes. Use the axes ButtonDownFcn property to define the callback.

Plotting to Axes in GUIs

If your GUI contains axes, you should make sure that the Command-line accessibility option in the GUI Options dialog is set to Callback (the default). If your GUI contains only one axes, this enables you to issue plotting commands from callbacks without explicitly specifying the target axes. See Command-Line Accessibility for more information about how this option works.

Note    If your GUI is opened as the result of another GUI's callback, you might need to explicitly specify the target axes. See GUIs with Multiple Axes.

Displaying an Image on an Axes

This example shows how to display an image on an axes in a GUIDE-generated GUI. The example

• Displays an image file on an axes.
• Resizes the axes to fit the image.
• Resizes the GUI so that its width and height are 100 pixels larger than the image file.

To build the example:

1. Open a blank template in the Layout Editor.
2. Drag an axes into the layout area.
3. Select M-file editor from the View menu.
4. Add the following code to the opening function:

• set(hObject, 'Units', 'pixels');
  handles.banner = imread([matlabroot filesep 'demos' filesep 
  'banner.jpg']); % Read the image file banner.jpg
  info = imfinfo([matlabroot filesep 'demos' filesep 
  'banner.jpg']); % Determine the size of the image file
  position = get(hObject, 'Position');
  set(hObject, 'Position', [position(1:2) info.Width + 100 
  info.Height + 100]);
  axes(handles.axes1);
  image(handles.banner)
  set(handles.axes1, ...
      'Visible', 'off', ...
      'Units', 'pixels', ...
      'Position', [50 50 info.Width info.Height]);
  

When you run the GUI, it appears as in the following figure.

The preceding code performs the following operations:

• Reads the image file banner.jpg using the command imread.
• Determines the size of the image file in pixels using the command imfinfo.
• Sets the width and height of the GUI to be 100 pixels greater than the corresponding dimensions of the image file, which are stored as info.Width and info.Height, respectively. The width and height of the GUI are the third and fourth entries of the vector position.
• Displays the image in the axes using the command image(handles.banner).
• Makes the following changes to the axes properties:
• Sets 'Visible' to 'off' so that the axes are invisible
• Sets 'Units' to 'pixels' to match the units of the vector position
• Sets 'Position' to [50, 50, info.Width info.Height] to set the size of the axes equal to that of the image file, and center the image file on the GUI.

Displaying Plots in a Separate Figure

This code for this example is appropriate for a programatically generated GUI.

1. Create a figure.
2. Create an axes, save its handle, and set its Parent property to the figure handle.
3. Create the plot, save its handles, and set the plot Parent property to the handle of the axes.

Note    To prevent a figure from becoming the target of plotting commands issued at the command line or by other GUIs, you can set the HandleVisibility and IntegerHandle properties to off. However, this means the figure is also hidden from plotting commands issued by your GUI. To issue plotting commands from your GUI,

The following code illustrates these steps:

• fHandle = 
  figure('HandleVisibility','off','IntegerHandle','off',...
      'Visible','off');
  aHandle = axes('Parent',fHandle);
  pHandles = plot(PlotData,'Parent',aHandle);
  set(fHandle,'Visible','on')
  

Note that not all plotting commands accept property name/property value specifications as arguments. Consult the reference page for the specific command to see what arguments you can specify.

GUIs with Multiple Axes

If a GUI has multiple axes, you should explicitly specify which axes you want to target when you issue plotting commands. You can do this using the axes command and the handles structure. For example,

• axes(handles.axes1)
  

makes the axes whose Tag property is axes1 the current axes, and therefore the target for plotting commands. You can switch the current axes whenever you want to target a different axes. See GUI with Multiple Axes for an example that uses two axes.

Button Groups

ActiveX Controls

© 1994-2005 The MathWorks, Inc.