MATLAB GUI TUTORIAL

Graphical user interface provides the user an  interactive enviornment.Once the GUI is created the user need not know anything about the coding section. Using GUI we can perform any computations, communicate with any other UI’s, plot graps,create tables etc. MATLAB GUI contains several user interface tools like radio buttons,axes,check box,tables.sliders,list box,pannels..etc. Adding appropriate components we can create a GUI design for any application. GUI interface is an event driven programming. Flow of the application is based on events. Events may be click,double click,key press etc. Callback functions will be executed once an event occurs. We can edit the properties of each  callback functions for making suitable response from the GUI as the user ineracts.

GUIDE generates two files for each GUI:

  • .fig file: it contains the layout of the GUI.
  • .m file: it contains the code that is needed to control GUI behavior.

HOW TO CREATE GUI?

1.  Open MATLAB .Type “guide “ in  Command Window .

open matlab

2.  Select the type of GUI: For that, choose “Blank GUI (Default)” option in the ‘GUIDE Quick Start’ dialogue box. Click “OK”. Following workspace will be displayed.

type of GUI

3.  Setting GUI window size:  By dragging the resize box on the layout area we can set the GUI dimension as per our requirement.

SET WINDOW SIZE

4.  Add components: Simply drag and drop items from the component pallete to layout area to create your GUI. To edit the properties of the components, right click on the component and select “Property Inspector”.

ADD COMPONENTS

For example to add a title to your GUI, drag static text box to the lay out area and right click on the text box. Now click on ‘property inspector’. Input your title name at the ‘String’ option in the property inspector window. Several other features such as font color, font size, background color can be applied to the components added by making corresponding changes in the property inspector window.

Matlab GUI DEMO:

Let’s create a simple image processing tool box using GUI. This tutorial helps you to perform image processing on image selected. Once if you enter the file location of the image to be loaded and click on the LOAD IMAGE  push button , selected image will be loaded on the ‘Axes ‘ box on the grid. Color space of the selected image can be varied by selecting any button (gray code or ycbcr) on the button group provided. Effect of different types of noise on the image can be analyzed using this GUI.  Image arithmetic operations are also included in this GUI using an Image Arithmetic panel window.

MATLAB GUI DEMO

To begin with image processing GUI,

1. First we need to have a title for our GUI. Drag a static text box to layout area. Static text is a text box which never changes while using the GUI. Properties associated with this text box such as background color, font size can be edited on its property inspector. Similarly add all the objects from the component palette to layout area as shown below. Edit the properties of each object in their corresponding property inspector.

EDIT

Although we have added the components to the layout area the text shown in GUI window is not appropriate. Correct the text shown in each component.

Adding pop up menu items:

Right click on the pop up menu and click on the button near to ‘String’. A string dialog box will open. Now edit the given string with different types of noise like salt and pepper, speckle.

In the same way add  items to list box in the panel window.

PANEL WINDOW

At last, final layout will be as shown in the figure:

FINAL LAYOUT

Now it’s time to save our GUI. Click on the save button on the figure window. Once you save GUI, as mentioned earlier two files will be created with ‘.fig’ and ‘.m’ extension. ‘.m file ‘contains the code which controls our GUI. A ‘.m’ file will be opened in default editor window of MATLAB. We can also open the editor window from View> Editor on the figure window.

PROGRAMMING GUI

Programming GUI:  

While saving the GUI layout, it will automatically create an callback function corresponding to each components which we added in our design. Callback functions controls the component behavior. By writing an appropriate callback functions we can make the components to respond to user interactions. Usually a callback function needs at least 3 input arguments (handles, event data, hobject).

Programming the edit text box (TYPE IMAGE LOCATION HERE):

PROGRAMMING EDIT TEXT

 Edit text box contains a call back function. Add a line to the call back function to access the file location entered in the edit text box.

str= get(hObject,'String');% file location entered in this text box will be assigned to a variable named  ‘str’.

Programming the push button (LOAD IMAGE):

PROGRAMMING PUSH BUTTON

For loading the image to our design once we press the pushbutton, we should edit the   pushbutton1 callback.

image_file = get(handles.edit1,'String'); %store the text entered in edit text box1 to  variable image_file.

imshow(image_file); % now display the image using imshow  function in matlab.

Programming slider movement for controlling the noise density:

SLIDER MOVEMENT

Various noises can be added to image. In popup menu, we have added speckle and salt and pepper noise. Noise density of the selected noise type can be controlled by adjusting the slider. While running GUI, select the noise type and adjust the slider to view the noisy image.

RUNNING GUI

Programming button group (color space):

GUIDE  won’t create callback functions for button group , panels etc. for creating callback functions for these components , right click on the component in figure window, then select View Callbacks ,from the drop down list select appropriate callback function. Here we select ‘selectionchangefcn’ callback function for the button group. Now on selecting the radio button1 selected image will be converted to gray scale image.  For ycbcr color space select the radio button2. Edit the callback function as follows.

Programming toggle button (IMAGE ARITHMETIC OPERATIONS):

Programming toggle button is easy. Our aim is to make the panel named IMAGE ARITHMETIC visible when we press the toggle button. Initially we need to make the panel invisble while the GUI gets loaded. We should set the visibility mode of panel in off state at the opening function. Opening function gets executed just before GUI window is made visible to user. Setting the visibility is done as follows.

set (handles.uipanel3,{'visible'},{'off'});

Now by checking the state of toggle button , IMAGE ARITHMETIC  panel can be made visible.

Programming panel (IMAGE ARITHMETIC):

Here we are creating a panel window for performing image arithmetic operations. Once we select the ‘image arithmetic operations’ toggle button a new panel will be visible. Panel contains a list box which includes arithmetic operations like addition, compliment, multiplication etc. If the user selects ’imcompliment’ option it complements the chosen image. If the user selects the ‘imadd’ option from the list box a dialogue box will display. It reminds the user to select the second image that is to be added with initial image. Press ‘OK’ on the dialogue box. A new input dialogue box will displayed in which user has to enter the file location. Now the added image will get displayed.

Panel contains

  1. list box
  2. push button

PROGRAMMING PANEL

Programming list box:

List box contains options to add or multiply two images, also to take the compliment of an image. List of items should be defined in the list box Callback function as shown below. 

If user select the ‘imadd’ option and DONE  button is pressed. Once the push button is pressed ,Question box appears which reminds the user to select the second image to be added.

Click ‘ok’ on the dialogue box. Callback function of push button should be edited properly. If the user selects the option ‘Ok’ input dialogue will display.

Coding the dialogue box is given below. Now an input dialogue box displays in which user should enter the file location of the image. Then click OK. Selected images must be of same size to perform addition. Resulting added image is shown in figure window. Similarly we can perform multiplication of images. 

Image processing GUI is completed. We can change the layout of GUI once created by opening the file in guide. MATLAB GUI   provides a better user interface environment for any kind of applications. Now try to build a simple GUI..