Changing the Background Image

In this part of the tutorial, we will learn how to add this image to the background of a GUI.

GUI with Background Image

  1. First, download the sample GUI provided here. Unzip the files and place them wherever you please. The zip file includes 4 files: customImage.fig, customImage.m, sunset-beach.jpg, and smiley.jpg.

  2. Now, type guide at the command prompt.

    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.

    GUIDE Screen

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

    GUI Figure

    If you look closely, you’ll notice that it’s the same GUI used in the Slider Tutorial.

  5. You might have noticed that the background image and the GUI size are not exactly the same size. If you try to put an image that is too large or too small over the GUI, it won’t quite look right. So we should make sure that GUI and the picture are the correct size. In this instance, I’m going to change the GUI size to conform to the background image. The background image has dimension of 448 by 336 pixels, so lets make the GUI figure the same size. Double click on the GUI grid to bring up the property inspector and change the Units property to pixels.

    GUI Figure

  6. Next, go to the Position Property and click on the +. Change the Width field to 448 and the Height field to 336 as shown below.

    GUI Figure

  7. Next, we need to add an axes component onto the GUI figure. This is where the background image will be place. Make sure the axes component covers the entire GUI figure, and change the Tag property to axes1. Remember to save your GUI. Your GUI figure should now look like this:

    GUI Figure with Axes Component

  8. Click on the mfile icon icon on the GUI figure to bring up the accompanying .m file.

  9. Now, add the following code to customImage_OpeningFcn.

    %load the background image into Matlab
%if image is not in the same directory as the GUI files, you must use the 
%full path name of the iamge file
backgroundImage = importdata('sunset-beach.jpg');
%select the axes
axes(handles.axes1);
%place image onto the axes
image(backgroundImage);
%remove the axis tick marks
axis off

  10. Now, save your .m file and run the GUI. You should see the following GUI appear

    GUI with Background

Pages: 1 2 3