MATLAB Graphical User Interface

A graphical user interface (GUI) is a visual interface to a program. A good GUI can make applications more comfortable to use by providing them with a consistent appearance and with intuitive controls such as pushbuttons, edit boxes, list boxes, sliders, and menus.

How does Graphical User Interface Work?

A graphical user interface provides the client with a familiar environment in which to work. It contains push buttons, toggle buttons, lists, menus, text boxes, etc. GUIs are harder for the programmer because a GUI-based application must be prepared for mouse clicks (or possibly keyboard input) for any GUI item at any time. Such data are known as events, and a program that responds to events is said to be event-driven.

The three principal components required to create a MATLAB graphical user interface are:

Components

Each element on a MATLAB GUI (pushbuttons, labels, edit boxes, etc.) is a graphical component. The method of components includes graphical controls (pushbuttons, togglebuttons, edit boxes, files, sliders, etc.) static components (text boxes), menus, toolbars, and axes. The function uicontrol creates graphical controls and text boxes, and menus are created by the functions uimenu and uicontextmenu. Toolbars are organized by function uitoolbar. Axes, which are used to show graphical data, are created by the function axes.

Containers

The components of a GUI must be organized within a container, which is a window on the computer screen. The most common container is a figure. A figure is a window on the laptop screen that has a title bar along the top, and that can optionally have menus connect. In the past, pictures have been created automatically whenever we plotted data.

Empty figures can be generated with the function figure, and they can be used to influence any combination of components and other containers. The different types of containers are panels (created by the function uipanel) and button groups (created by the function uibuttongroup). Panels can involve components or other containers, but they do not have a title bar and cannot have menus connect. Button groups are special panels that can handle groups of radio buttons or toggle buttons to provide that no more than one button in the group is on at any time.

Callbacks

Finally, there must be some way to act if a user clicks a mouse on a button or type information on a keyboard. A mouse clicks or a keypress is an event, and the MATLAB program must respond to each event if the program is to perform its function. For example, if a user clicks on a button, then that event must cause the MATLAB code that implements the role of the button to be executed. The code performed in response to an event is known as a callback. There must be a callback to implement the role of each graphical element on the GUI.

Components of GUI

Component	Created By	Description
		Containers
Figure	figure	It creates a figure, which is a container that can hold components and other containers. Figures are independent windows that have title bars and can have menus.
Panel	uipanel	It creates a panel, which is a container that can hold components and other containers. Unlike images, panels do not have title bars or menus. Panels can be placed inside picture or other panels.
Button Group	uibuttongroup	It creates a button group, which is a special kind of panel. Button groups automatically handle groups of radio buttons or toggle buttons to ensure that only one component of the group is on at any given time.
		Graphical Controls
Pushbutton	uicontrol	A graphical element that implements a pushbutton. It triggers the callback when clicked with a mouse.
Toggle Button	uicontrol	A graphical component that perform a toggle button. A toggle button is either "on" or "off," and it change state each time it is clicked. Each mouse button click also triggers a callback.
Radio Button	uicontrol	A radio button is a type of toggle button that occur as a small circle with a dot in the middle when it is "on." Groups of radio buttons are used to perform mutually exclusive choices. Each mouse click on a radio button triggers a callback.
Checkbox	uicontrol	A checkbox is a type of toggle button that occur as a small square with a check mark in it when it is "on." Each mouse click on a checkbox triggers a callback.
Edit Box	uicontrol	An edit box displays a text string and allows the user to modify the information presented. A callback is triggered when the user presses the Enter key, or when the user clicks on a different object with the mouse.
List Box	uicontrol	A list box is a graphical control that shows a series of text strings. A customer may select one of the text strings by single- or double-clicking on them. A callback is triggered when the customer selects a string.
Popup Menus	uicontrol	A popup menu is a graphical control that shows a series of text strings in response to a mouse click. When the popup menu is not clicked on, only the currently selected string is clear.
Slider	uicontrol	A slider is a graphical control to adjust a value in a smooth, regular fashion by dragging the control with a mouse. Each slider modify triggers a callback.
Frame	uicontrol	It creates a frame, which is a rectangular box within a figure. Frames are used to association sets of controls together. Frames never trigger callbacks.
Text Field	uicontrol	It creates a label, which is a text string located at a point on the figure. Text fields never trigger callbacks.
		Menus, Toolbars, Axes
Menu Items	uimenu	It creates a menu item. Menu items trigger a callback when a mouse button is released over them
Context Menus	uicontextmenu	It creates a context menu, which is a menu that appears over a graphical object when a user right-clicks the mouse on that object.
Toolbar	uitoolbar	It creates a toolbar, which is a bar across the top of the figure containing quick-access buttons.
Toolbar	uipushtool	It creates a pushbutton to go in a toolbar.
Toolbar Toggle	uitoggletool	It creates a toggle button to go in a toolbar.
Axes	axes	It creates a new set of axes to display data on. Axes never trigger callbacks.

Example

To implement a simple calculator as a GUI (Graphical user interface).

% --- Executes on button press in BtnZero.
function BtnZero_Callback (hObject, eventdata, handles)
% hObject    handle to BtnZero (see GCBO)
% eventdata reserved - to be described in a future version of MATLAB
% handles    structure with manage and user data (see GUIDATA)
textString=get (handles. edit1,'string');
textString=strcat(textString,'0');
set (handles. edit1,'string', textString);

% --- Executes on button press in BtnOne.
function BtnOne_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'1');
set (handles. edit1,'string', textString);
 
 % --- Executes on button press in BtnTwo.
function BtnTwo_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'2');
set (handles. edit1,'string', textString);
 
% --- Executes on button press in BtnThree.
function BtnThree_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'3');
set(handles. edit1,'string', textString);

% --- Executes on button press in BtnFour.
function BtnFour_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'4');
set (handles. edit1,'string',textString);
 
% --- Executes on button press in BtnFive.
function BtnFive_Callback(hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'5');
set (handles. edit1,'string', textString);
 
% --- Executes on button press in BtnSix.
function BtnSix_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'6');
set (handles. edit1,'string', textString);

% --- Executes on button press in BtnSeven.
function BtnSeven_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'7');
set (handles. edit1,'string', textString);

 
% --- Executes on button press in BtnEight.
function BtnEight_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'8');
set (handles. edit1,'string', textString);
 

% --- Executes on button press in BtnNine.
function BtnNine_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'9');
set (handles. edit1,'string', textString);
 
% --- Executes on button press in BtnPlus.
function BtnPlus_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'+');
set(handles. edit1,'string', textString);
 
% --- Executes on button press in BtnMinus.
function BtnMinus_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'-');
set (handles. edit1,'string', textString);
 
% --- Executes on button press in BtnMul.
function BtnMul_Callback (hObject, eventdata, handles)
textString=strcat(textString,'*');
set (handles. edit1,'string', textString);
 
% --- Executes on button press in BtnDivide.
function BtnDivide_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=strcat(textString,'/');
set (handles. edit1,'string', textString);
 
% --- Executes on button press in BtnCalc.
function BtnCalc_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
textString=eval(textString);
set (handles. edit1,'string', textString);
 
% --- Executes on button press in BtnClear.
function BtnClear_Callback (hObject, eventdata, handles)
textString=get (handles. edit1,'string');
set (handles. edit1,'string','');

Output: