Matlab GUI Tutorial - Custom Background Images and Custom Buttons

28 Nov 2007 Quan Quach 46 comments 24,158 views

Changing the Button Image

In this part of the tutorial, we are going to place the smiley face image onto a button.

Using the previous GUI that we were working with, add a pushbutton component to the GUI figure. Change the Tag property to pushbutton1.
Since the smiley image has dimensions of 65 x 65 pixels, we want to make the pushbutton the same size. Similarly, f you want your pushbutton to be a specific size, you can resize the image to fit the button instead. First, change the Units property to pixels via the Property Inspector.

Next, change the Width field to 65 and change the Height field to 65.

Now, go to the m-file and add the following code to customImage_OpeningFcn:

%import the smiley image into matlab
%if image is not in the same directory as the GUI files, you must use the 
%full path name of the image file
smiley = importdata('smiley.jpg');
 
%set the smiley image as the button background
set(handles.pushbutton1,'CDATA',smiley);

Now, save and run the GUI. You should get something that looks like this:

This is the end of the tutorial.

Pages: 1 2 3

46 Responses to “Matlab GUI Tutorial - Custom Background Images and Custom Buttons”

on 28 Nov 2007 at 5:19 pm 1Daniel Sutoyo

Using this approach you can make your GUI like a Mac theme with glossy buttons! I have received a lot of comments when doing this. So I encourage you to do the same.
on 30 Nov 2007 at 1:29 pm 2gale

thanks for the encouragement, turtie! hope the coming holiday season treats you well
on 14 Jan 2008 at 6:44 am 3decypher

I’ve added an axes control on the figure, but I can’t seem to find the function for it in the m-file. I just want to load up a simple image on the figure when the program runs. Is there another way to do this?
on 14 Jan 2008 at 2:36 pm 4Quan Quach

decypher,

I don’t know of another way to do this.

The function you are looking for is the “opening function”. This function runs when the GUI is executed. Within this function, you set the code to display the image. Please try it again and come back if you are not able to get it to work.

Quan
on 20 Jan 2008 at 12:13 am 5priyanka

Hi,

This 3 page tutorial was very useful. When I include a background picture in the gui, the panels are disappearing. But I just want my panel border to be visible in the gui. How do I do this?

Bbye,
Priyanka.
on 08 Feb 2008 at 1:08 am 6nishna

hi.

interesting post….
however if 1 call the gui again.. the background image is not loaded….
any idea how to handle this prob…
thnks

regards,
nishna
on 10 Feb 2008 at 9:15 am 7Vishal

Hey guys thanks for all the wonderful tutorials youve created, really has helped with my final year project, ive used your tutorials to create several guis which i can launch from one main menu gui for various aspects. But i was wondering how to i set matlab, or gui properties so that everytime i press the button on the main menu to launch the gui, it runs in the exsisting figure windows instead of opening a new one each time?

Thank you
on 24 Feb 2008 at 11:19 am 8Ramya

hi

thanks a ton for ur tutorials its helped me lot. But i have a problem.. plz help me out. I am not able to display 2 dimension images in exact way it is in GUI axes of matlab. the colors and intensity varies a lot. Can you please let me know how to do it..
thank you
on 24 Feb 2008 at 12:49 pm 9Quan Quach

Hello Ramya,

What type of image are you trying to put in your background?

Quan
on 04 Mar 2008 at 4:31 am 10Ramya

no i am not trying to put in background. but i am trying to dispay an image which is not RGB image. the image type with two planes i want to display like suppose an image f i want to display f(:,:,1) in the axis. Can you please help me out?? is this possible?
on 01 Apr 2008 at 9:57 am 11Froggy007

Hi all,

Any idea how to put in a picture in a gui with Matlab being on the Linux platform?

I have a GUI design but would like to add a picture.

Cheers

Froggy007
on 17 Apr 2008 at 2:51 pm 12ABDUL WAHAB YOUNUS

THANX ALOT!!
on 14 May 2008 at 3:53 am 13Felipe Braga

Really nice post!
Thanks for the tutorial.
on 07 Jul 2008 at 8:39 am 14Wendelin Feiten

Like many noted before me: your explanations are concise, to the point, clear and complete. Thanks.
on 20 Oct 2008 at 7:02 am 15Richard Nathanael

Hey All,

I have one question here. I would like to insert an image to an existing GUI with these code:

%code
schematic = importdata(’buck_1.bmp’);
%select the axes
axes(handle.axes5);
%place image onto the axes
image(schematic);
%remove the axis tick mark
axis off

*I did follow the instructions you written above, but the picture is plot in a new figure window, not in axes5.
*I also had these error:
??? Undefined function or variable “handles”.
Error in ==> gui_02 at 94
axes(handles.axes5);
*Anyway, I am a new MATLAB user.

I look forward to hear any solution from you guys.

Thanks & Regards,

Richard N
on 25 Oct 2008 at 6:21 am 16Alex

Is it possible to set the axes to auto re-size so that any image that will be loaded will be able to fit in the given axes? pls reply asap
on 10 Nov 2008 at 1:41 pm 17Adrian

Hi,

Great tutorial. I am having a small problem when I display the image on the button. It appears to have a black background behind the image. I think it because there is some alpha value setting not being set correctly. Do you know how I can the regular button color display behind the image. I am using a png like one at the link below as the image on my button. Thanks.

http://www.iconarchive.com/icons/zakar/shining-z/Folder-Dossier-DL-SZ-48×48.png

Adrian

on 10 Nov 2008 at 9:35 pm 18Quan Quach

Adrian,

Try the following:

%sets the background image to white!
myImage = imread('button.png','Background',[1 1 1])
 
%changes the button graphic
set(handles.pushbutton1,'CDATA',myImage);

Quan

on 11 Nov 2008 at 7:56 am 19Adrian

Thank you, that worked. Never knew you could change the background on-the-fly on a imread. If you don’t mind I have two other GUI related questions:
Is there way to create round buttons (or other shapes) for Matlab GUIs?
How can you create nice “glossy” buttons?

Thanks!
on 01 Dec 2008 at 6:53 am 20zdsfgh

Hi,

Great tutorial
on 12 Feb 2009 at 11:46 am 21shazi

Hi,
i want to display a more than one images in a single axes.tell me the solution about this poblem.
on 15 Apr 2009 at 8:18 am 22Jeff

hopefully someone still reads these posts… I have a question.

I have been able to add a jpeg image to the button, however I cannot seem to do the same thing with a .bmp I have tried a few other posts regarding imread, and I still cannot get it to work.

here is the information on the image

Name Size Bytes Class Attributes

map 256×3 6144 double
x 80×192 15360 uint8

what would i need to do in order to place a .bmp image on a button? Hopefully someone answers considering the last post was a long time ago…
on 15 Apr 2009 at 9:31 am 23Quan

Jeff,

You can try converting the bmp to jpg using mspaint or any other kind of photo editor. I”ll have to get back to you on the actual question though.

Quan
on 16 Apr 2009 at 5:56 am 24Jeff

wow, Thanks Quan… I don’t know how I missed that. I have it working perfect now!
on 24 Apr 2009 at 9:43 pm 25qw

wqw
on 06 May 2009 at 12:41 am 26nadeeka

I want to insert a piture to GUI interface in static way.How can I cord it? pls give me a solution.
on 07 May 2009 at 2:42 am 27Leonardo Glavina

Hello Quan,

Nice tutorial!! But I still have problems, maybe you can help me.
I have my GUI, and I wanted to put a logo there. So I was using a gif file, created a secondary axes to hold my image, and made the code quite like you.
But the image is not appearing (and I’m pretty sure I’m refering to the right axes) and also the tick marks dont disappear.
I tried to use a jpg file to see if works, but it doesnt either.
```
 
function customImage_OpeningFcn
%load the logo image into Matlab
LogoImage = importdata('logo.jpg'); %I prefer to use the gif file, but jpg is alright
%select the axes
axes(handles.axes3);
%place image onto the axes
image(LogoImage);
%remove the axis tick marks
axis off
```
Regards,
Leonardo
on 14 May 2009 at 7:20 am 28osman

Hi Guys!
Thanks for the great tutorials. I have exactly the same problem at Priyanka above, the neat panels disappear when I insert the background image in my GUI and the whole things looks rather untidy!

Furthermore, is there a way for there to be a cool startup GUI (e.g. similar to Matlab start up GUI), just to show off a bit

PLEASE HELP!

Cheers,
Osman
on 17 May 2009 at 8:38 pm 29Ridhi

hi,
the 2nd page was really very useful to me. But i could not insert a grayscale image using this code. The image on the GUI appeared completely red if i tried to insert a grayscale image. So what can be done? Please help me out…its urgent

ridhi
on 01 Jun 2009 at 6:13 pm 30Eduardo

hello!
I´m facing a problem! I can put the picture inside the button. However, I´ve to maximize my gui window. In order to do this task I have to set the button units to ‘normalized’ instead of ‘pixels’.
So what should be the size of the picture in this units?
I’ve already emailed Quan

Regards
Eduardo
on 10 Jun 2009 at 6:09 pm 31Chris

Hi,

I have a bit of a problem. I have created axis to display an image in as you guys have done, however I have other axis that I use to display data that I want to be able to zoom and pan around. When I turn on either zoom or pan I am able to move around the images I have inserted which I don’t want. Is there a way that I can zoom around some axis but not around others?

Cheers,

Chris
on 11 Jun 2009 at 8:03 am 32Kuru

Hello

Thanks for the Tutorial.

I have a question. My GUI is displaying the background image when I run from m-file editor and guide window.But if I directly click on the .fig file it doesn’t. It doesn’t even go inside the opening_fcn. Did anyone come across this issue?

Thanks,
Kuru
on 11 Jun 2009 at 10:48 am 33kutzi

hi
i love what you did here, it is very helpful
on 20 Jun 2009 at 10:14 am 34Bashaer

H!, how to use two different pictures in different axes?
on 21 Oct 2009 at 12:56 pm 35gc001

Hello!!

Thanks for this tutorial… I have a small question…

How can we hide the smiley after a while?
What’s the function?

Thanks a lot!

on 29 Oct 2009 at 10:23 pm 36Chethan

Hi!
 
This tutorial has helped me in making my GUI very much attractive. I tried to enhance with further animation by trying to include GIF files. But unfortunetly it failed.
 
Do you have some solution for this. Or could you give me some hint on the same.
 
Thanks in advance,
Chethan

on 29 Nov 2009 at 3:50 am 37wissem

hey !!
I’m so gratefull to you for creating this blog.. it helped me very much everything is clear and explained well .. great job
on 02 Dec 2009 at 9:14 pm 38deepak

Hi!!

Really nice tutorial..
i having one problem with pushbuttons. wonder if ne1 can help me out regarding that.

how do we display push-button names textwrapped when they are long strings..

for e.g: “This is a really long string” comes in a single line how to display it on pushbutton like

This is a
really long
string.

Thanks in advance
on 03 Dec 2009 at 7:43 am 39Zane Montgomery

Hi Deepak,

I’ve never done it myself, but there is a function ‘textwrap’ you can use.

Try playing around with it and let us know if you have any issues:

http://www.mathworks.com/access/helpdesk/help/techdoc/ref/textwrap.html
on 29 Dec 2009 at 10:27 pm 40Squall

Hey,

What a wonderful toturial!

I have a question…..When I try to add a background image (739X614) to my whole GUI Figure (739X614) using the same axes code you used, and I try to run the program, the image does appear as a background, but does not reach the end top and end right of the interface. It only reaches the end left and end bottom of the interface! When I tried to change the dimensions into 560X420, the image appeared on all end sides of the program! It seems the more you increase the dimensions, the less you the image’s size becomes? Any solution to that?

Thanks
on 20 Jan 2010 at 12:40 pm 41gabytza2gaby

Where exactly do you insert this code:

%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

Anywhere?
At the and of the program ?
In a function?

Thank you
on 20 Jan 2010 at 12:45 pm 42gabytza2gaby

found it .:D
Sorry
on 03 Mar 2010 at 7:29 am 43sabon

Hi,

That was a nice tutorial. It’s very helpful and easy to follow.

I have a question. I have multiple axes and plots in the gui. When i run the gui, the background image is displayed. But when i try to plot on the other axes, the background image disappear. How to ensure the background image is always fix there regardless of what plot or button i press in the gui?

Any advice?

Thanks!
on 26 Mar 2010 at 5:22 pm 44anonymous

thanks, just what i needed
on 22 Apr 2010 at 4:03 am 45Steven

Hi,

thanks for the tutorial.

Im having problems with step 7 though.

>>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.

How do I add this component to my GUI?

thanks,
Steven
on 22 Apr 2010 at 12:06 pm 46Zane Montgomery

Steven,

You can find the Axes ‘button’ selection on the toolbar on the left side of the window. Same place where the pushbutton, slider bar, edit/static text, etc buttons are located.

good luck.

Include MATLAB code in your comment by doing the following:

<pre lang="MATLAB">

%insert code here

</pre>

blinkdagger

Matlab GUI Tutorial - Custom Background Images and Custom Buttons

Changing the Button Image

46 Responses to “Matlab GUI Tutorial - Custom Background Images and Custom Buttons”

Leave a Reply

Links

Recent Posts