Matlab GUI Tutorial - Custom Background Images and Custom Buttons

28 Nov 2007 Quan Quach 36 comments 21,192 views

Introduction

Changing the way your GUI is presented can make your GUI more appealing to the eye. This tutorial will show you how to add a background image to your GUI. In addition, it will also show you how to modify your buttons to display custom images too.

GUI with Background Image

This tutorial is written for those with some experience creating a Matlab GUI. If you’re new to creating GUIs in Matlab, you should visit this tutorial first. Basic knowledge of Matlab is highly recommended. Matlab version 2007a is used in writing this tutorial. Both earlier versions and new versions should be compatible as well (as long as it isan’t too outdated). Let’s get started!

Pages: 1 2 3

36 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

Include MATLAB code in your comment by doing the following:

<pre lang="MATLAB">

%insert code here

</pre>

blinkdagger