# Calculator in Matlab GUI

### Graphical User Interface - Calculator

Today, I would be talking about

**GUI**interface in Matlab. By the end of the post you would be able to make your own**GUI****calculator**in your own way. Infact,**GUI**in matlab is more like a fun. Lest start developing a basic calculator in**GUI**Matlab.**1.**Type

**guide**in Matlab Command Window. Following dialog box will open :-

.

**2.**Selecting "

**Blank GUI (Default)**" will take you to the window of your interest. It would look like :-

**3.**From here, go to File , then Preferences, then Guide, and then

**check all the fields**, so that our

**GUI**window looks more comfortable and user-friendly. Here is the snap shot of our GUI work place :-

**4.**Now using these buttons, try to make a

**calculator**. For example. Place three "edit text" in the panel, two for the inputs and one for the output. You may use number of "static text" in order to improve the visibility. In the end you may use a "push button" to display the result. I have also used four extra push push buttons for addition, subtraction, multiplication and division. Also you may use a panels, e-g as depicted in the figure that I have used three panels namely

*"operands", "operator" and "operand".*Your layout of

**calculator**is almost ready

**.**Above all you must go into the "

**Inspector**" by double clicking the the items individually in order to replace edit text, static text etc into a user friendly format (In Inspector see "String" and "Tag"). You may also change the font and play with colours at your own. Your calculator may like like :-

**5.**After running this

**GUI**( Click the green button), M-file for your GUI

**calculator**will be generated. For the time being we are only concerned with the

*As seen above , we have got 4 push buttons, 2 input fields and one output field. We will proceed such that we will save the inputs entered by the user in some variable. Thereafter we will add, subtract, multiply, divide depending on what user wants. Usually we use*

**c****allbacks.***get*function to take input and

*set*to display the output.

**How to view callbacks?**See below :-

**6.**Following portion of M-file would be in picture :-

**7.**

**Lets come to the coding of individual callbacks in our GUI**

**calculator**. First of all we know that the

**output**field (where the answer will be displayed) does not need any callback coding. So we are left with only 4 push buttons and 2 input fields. Lets talk about each individually :- (Same method is adapted to view the callbacks in each case)

**Ist No Callback**Insert the following code inside the Ist Number callback. Also see the commented lines to grasp the "critical points"

**num1= str2double(get(hObject, 'String'));**

**% get is used to get the data from the input field field**

% str2num; because input is always taken as string

% final value is stored in num 1

% str2num; because input is always taken as string

% final value is stored in num 1

handles.calc.x=num1;

handles.calc.x=num1;

**% not NEEDED. will work without handles.calc.x.num1. % handles.calc.x ; .calc.x may be replaced as desired (abc.z) but through**

% the M-file use the same "calc" like handles.calc.y, handles.calc.z etc

% the M-file use the same "calc" like handles.calc.y, handles.calc.z etc

**% necessarily be needed if used in some other function**

**guidata(hObject,handles);**

% to update the field

% to update the field

**2nd No Callback**Similarly for the second input, enter the following inside the callback function

**num2= str2double(get(hObject, 'String'));**

handles.calc.y=num2;

handles.calc.y=num2;

**% not NEEDED. will work without handles.calc.x.num1.**

guidata(hObject,handles);

guidata(hObject,handles);

See also the comments made in Ist No Callback

**Operands Callback****Additon**:

**add=handles.calc.x+handles.calc.y;**

**% adding the two numbers (could not add if we had not used**

**handles.calc.y etc in Ist % and 2nd no cal l back**

set(handles.ans , 'String', handles.calc.add);

set(handles.ans , 'String', handles.calc.add);

**% This is used to display the output (i-e additon)**

**% handles.ans ; ans is the tag for output field (may be viewed and changed in**

**% inspector)**

__Subtraction:__**sub=handles.calc.x-handles.calc.y;**

set(handles.ans , 'String', sub);

set(handles.ans , 'String', sub);

__Multiplication__

**mul=handles.calc.x*handles.calc.y;**

set(handles.ans , 'String', mul);

set(handles.ans , 'String', mul);

__Division__**div=handles.calc.x*handles.calc.y;**

set(handles.ans , 'String', div);

set(handles.ans , 'String', div);

**Congratulations! Your Matlab GUI calculator is ready **

Now you are just one step ahead to see your calculator working . Click the

*green button*or press*F5*. Your first working GUI calculator is ready. You can open it again by typing in*calc*(in my case) or with whatever named you have saved the M-file. The calculator looks like :-
Posted by Muhammad Ahmed
on 09:46. Filed under
calculator in matlab gui,
MATLAB,
Matlab GUI
.
You can follow any responses to this entry through the RSS 2.0.
Feel free to leave a response