How do I display an image on a GUI component (eg. pushbutton)?

How do I display an image on a GUI component such as a push button or axes?

Answer 1

[MathWorks Support Team]

To display an image on a GUI component, try these four steps:

1. Read in the image you want displayed on the component.

2. Make sure that it is a True Color Image.

3. Resize the image to fit on the component.

4. Create the component and set the 'cdata' property to be the image.

Below is an quick example of how to display an image on a pushbutton:

[x,map]=imread('ngc6543a.jpg');
I2=imresize(x, [42 113]);
h=uicontrol('style','pushbutton',...
            'units','pixels',...
            'position',[20 20 113+10 42+10],...
            'cdata',I2)

The following longer example walks through all four steps:

1. Load the image into MATLAB with the IMREAD command:

[x,map]=imread('ngc6543a.jpg');

2. Use the WHOS command to check the dimensions of the IMAGE to make sure it is a True color image. True color images, once loaded into MATLAB, will be MxNx3 in size.

whos

 

   Name      Size         Bytes  Class
   map       0x0              0  double array
   x       128x128x3      49152  uint8 array

If it is not a True color image, then you can use one of the conversion functions in the Image Processing Toolbox to convert it.

     ind2rgb    - Convert indexed image to RGB image.
     isrgb      - Return true for RGB image.
     rgb2gray   - Convert RGB image or colormap to grayscale.
     rgb2ind    - Convert RGB image to indexed image.

3. Resize the image to fit the UICONTROL. To do this, you can use the IMRESIZE function from the Image Processing Toolbox, or you can capture a scaled

version of the image. To resize the image using IMRESIZE, try:

I2=imresize(x, [42 113]);

To capture a scaled version of the image, display the image in a new figure window with the IMAGESC function:

f=figure;
imagesc(x);

Then make the new figure and axis the correct size:

set(gca,'units','normalized','position',[0 0 1 1]);
set(gcf,'units','pixels','position',[100 100 113 42]);

Then capture the image you want:

I2=getframe(gca);
I2=I2.cdata;

4. Create a component the size of your image and set its CDATA property to the image data. The following uses UICONTROL to do this:

close(f)
h=uicontrol('units','pixels','position',[20 20 113 42],'cdata',I2)

If you are using a GUIDE GUI and wish to modify an existing component that exists in the 'handles' structure, use the SET command to set the 'CDATA' property as shown below:

set(handles.pushbutton1,'cdata',I2);