Tuesday, January 24, 2012

MATLAB GUI: inserting background image to push/toggle button

This is a brief tutorial on how to insert background image to push button and toggle button in MATLAB GUI. The idea is simple, read in the background image as a matrix, and then assign the matrix to CData property to the buttons.

1. Create a new GUI in MATLAB using GUIDE, and save the file.
2. Add uicontrols push button (or toggle button), rename their tag as pb (or tb).
3. In the OpeningFcn in the corresponding m-file, copy and paste the following code:

bg_image = imread('button.jpg');
set(handles.pb_with_bg, 'CData', bg_image);

Note, you may want to set pixel as the figure's unit so that you can easily figure out the size of the button that will show you the entire background image. In other words, the size of the button and the size of the background image should match.  


Video


Files
Source files can be download here.

3 comments:

  1. Hello, I place the image(containing a small icon with text) that covers the complete button. But when I maximize my GUI(developed in GUIDE) the image is not resetting to the size of the button(The image size remains the same but the size of button is increased) and when I reduce the size of GUI I cannot see the complete image. Would be great if you provide solution for this.

    ReplyDelete
  2. A couple thing come into mind:

    1. have you check the unit settings on the uicontrols? that may be one of the places to look at
    http://www.mathworks.com/help/matlab/creating_guis/designing-programmatic-guis-for-cross-platform-compatibility.html

    2. if everything fails, I would just re-import the image again in the resizeFcn. If something can't be fix, let's do it again. :) .


    Good luck.


    ReplyDelete
  3. Thank you so much. It was so helpful

    ReplyDelete