How to do GUI programming in matlab

Question

I am trying to learn GUI programming in matlab and for that purpose i am trying to create a simple multiplication calculator. I have done some programms in matlab without GUI but i am having difficulty in understanding GUI programming in Matlab. I have created the GUI but i dont know how to do the programming for that.

This is my GUI i made

EDIT TEXT 1; string= 0
EDIT TEXT 1; tag= edit1
EDIT TEXT 2; string= 0
EDIT TEXT 2; tag= edit2
STATIC TEXT 1; string= X
STATIC TEXT 1; tag= text3
STATIC TEXT 2; string= 0     (for showing results)
STATIC TEXT 2; tag= result
PUSHBUTTON; String= Calculate
PUSHBUTTON; tag=push_calc

i saved the given GUI in the name of "add" and created add.m . Can you tell me how to do programming for given gui.

Answer 1

The basic idea of matlab gui programming is the following:

1. Set up the figures
2. Enter the message loop

Both steps are taken care of by using the matlab gui editor (guide). The important thing is that you give control of the program flow over to the message loop. In order to get things done, you can tell the message loop to call a function whenever something happens.

In the gui editor, right click your pushbutton and select "View Callbacks -> Callback". This will automatically create such a function in you .m file where you can specify what happens when you push the button.

For a better understanding take a look at the Callback property of the pushbutton. Guide will have entered something like add('push_calc_Callback',hObject,eventdata,guidata(hObject)) which calls the main function (add) as a wrapper for your new callback function. You could have done that by yourself in the property editor or programmatically in the startup code.

I guess you want the following to happen:

1. Get the string values of edit1 and edit2
2. Convert the strings to numeric values
3. Perform the calculation
4. Set the string value of text3 to the string representation of the result

You can access the properties of the gui elements by using the handles available to you as the third function argument and the get and set functions. The handles structure is created by guide and the elements are named the same as the tag you specified.

In matlab code, this could look like this:

% --- Executes on button press in push_calc.
function push_calc_Callback(hObject, eventdata, handles)
% hObject    handle to push_calc (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
x_string = get( handles.edit1, 'String');
y_string = get( handles.edit2, 'String');

x_numeric = str2num( x_string );
y_numeric = str2num( y_string );

result_numeric = x_numeric * y_numeric;
result_string = num2str( result_numeric );

set( handles.result, 'String', result_string);

Edit: The question is what is handles.edit1 and so on. Whenever you want to do something with a widget like a button or a textbox, you have to be able to tell matlab exactly what widget you mean. Guide does a few things behind the scenes. One of them is to call uicontrol, which creates the widget and returns a random but unique number. This is a bit like a bank account number in the way that it is a handle to a resource that can be used to manipulate it. When you create a new pushbutton in guide and assign the tag "clickme" in the property editor, guide creates the pushbutton and stores the handle in a structure handles.clickme. That gives you an easy way to get the handle of any widget that you created if you can still remember what tag you assigned it.

Let's take the first line of the function:

x_string = get( handles.edit1, 'String');

That calls the function get with some number you should not care about as long as it the same number that matlab associates with the edit1 widget and a property name from the property editor, in this case 'String'. That would be the same as you clicking through all the window elements until the property editor shows a tag of 'edit1', and for that object you find the value for the property named 'String'.

The properties get updated automatically whenever you type in new text, move a slider, change the window size and so on. It works the other way around, too. If you modify the 'Position' property with set( handles.edit1, 'Position', [20 20 100 30]), then the widget is automatically moved and re-sized to the specified position.