MATLAB GUI Basic Programming: Tutorial 2:- Make Simple Basic Image Viewer using MATLAB

Hello Code Breakers,
Here i am with another Basic Tutorial for MATLAB GUI Programming. Today i am going to show you how to make  simple image viewer using MATLAB. It will be quite fun. so Lets Break It.

First of all if you have not check my first Tutorial and you are not aware of MATLAB GUIDE than first check that. MATLAB GUI Basic Programming Tutorial1

Now here I will asume that you know how to open GUIDE and save you project. So first open GUIDE and Select Blank GUI(Default) and save it as Tutorial2. This will generate 2 files "Tutorial2.fig" and "Tutorial2.m". You can save this with whatever name you want to use.

So now if you have checked my  MATLAB GUI Basic Programming Tutorial1 you have idea about how to use Push Button  and Edit Text components. It this we are going to use one new component called "Axes" a shown in above figure.

So lets Drag and Drop all the components in drawing area and adjust them as showed in below figure.

So it should be Look like this. Now let me explain the use of all three components in this tutorial.

Push Button: we ware going to use Push Button as to open file browser for selecting image file.
Edit Text: we will display the path of the selected image file in Edit Text.
Axes: we are going to use axes as image viewer which ever image we will select it will be displayed in axes.


Now lets change the Properties of Components according to our convenience.

For axes
change its "Tag" properties from "axes1" to "img_display" 

For Push Button

String: Load Image
Tag: pb_load

For Edit Text

Now as we have set all the properties save the file and switch to Tutorial2.m file.

Now find the Callback function for "pb_load" push button.

% --- Executes on button press in pb_load.
function pb_load_Callback(hObject, eventdata, handles)
% hObject    handle to pb_load (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

Now On button Click Following events occurs...

1. Open file Browser.
2. Select image File.
3. Display image on axes
4. Diplay file path in Edit Text Box.

So for that we need to add some line at the end of function.

So first for Open File browser 

[filename, pathname] = uigetfile({'*.bmp';'*.jpg';'*.gif';'*.*'}, 'Pick an Image File');

here filename is variable which stores the name of file which we will select. and pathname is variable which stores the file path.

uigetfile() is matlab inbuilt function which  will open the file browser. Now if you want add file type in file selection you can do like this.

uigetfile({'file type1','file type2','*.*'},'File browser name');

Here '*.*' is used to show "All files" in file browser.

Now after that we want to read image file so that we can display it in matlab axis component. 

img=imread([pathname,filename]);

Here imread() is matlab inbuilt function which will read image file and will store in matlab variable.

Here img matlab variable. 

To set the file path in Edit Box

set(handles.edit1,'String',[pathname,filename]);

To display Image on Axes.
axes(handles.img_display);
imagesc(img);
set(handles.img_display,'Visible','off');

Here imagesc() is matlab inbuilt function for detail you can use MATLAB help which will give you best example of this function.

So that's it our final code will be look like this


% --- Executes on button press in pb_load.
function pb_load_Callback(hObject, eventdata, handles)
% hObject    handle to pb_load (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
[filename, pathname] = uigetfile({'*.bmp';'*.jpg';'*.gif';'*.*'}, 'Pick an Image File');
img=imread([pathname,filename]);
set(handles.edit1,'String',[pathname,filename]);
axes(handles.img_display);
imagesc(img);
set(handles.img_display,'Visible','off');
guidata(hObject, handles);

Now save and Run file.

That's it. More is coming till then..

Break It, Feel It and Learn It 

MATLAB GUI Basic Programming:Tutorial 1-Simple Button Click Event Example

Hello Code Breakers,
Today I am going to start new tutorial series of MATLAB GUI programming especially for my fellow juniors who are making their project in MATLAB.

Today I will show you one simple tutorial on how to use button click event. But before that just keep one thing in mind about programming.

Your Programming will be as great as your Imagination. 

The more you imagine well the more great your programming will be. There is no limit until we make one. So just keep your hard work and your great imagination UP and you will find your way in every complex and situation, and i will be sure that you will be amazed by your own programming and will be asking yourself
"Woww... Is this software made by me???" :-D

Now enough of this Philosophy...Lets Break It.

So i assume that you have well installed MATLAB in your computer.so here we go,open MATLAB and you will see following screen.

 
Now follow the Step 1 and Step 2 as show in above figure.

When You completed with Step 2 the GUIDE Quick Start window will be appeared.It has some predefined templates. Select Blank GUI(Default) and press Ok.

Now when you click ok, You will see a GUIDE window.

So first of all save this file as your desired location. Trust me friends it is good habit to save file from the starting of work. :-D

Here i am saving this file as Tutorial1. Now friends note here when you save this file for first time, two file will be generated with ".m" and ".fig" extension. For me it will be "Tutorial1.m" and "Tutorial1.fig" .

Now in GUIDE you will see toolbar at the left side.

Now as you can see in above figure that i have point out specific 3 components. Push Button,Static Text and Edit Text.

Push Button: It is general button.
Edit Text: It is a text box in witch we can write text.
Static Text: It is a general text which act as Label.

Now one by one drag and drop all 3 components in working area.

Now we will change the properties of every component. we will see the example of "Edit Text" properties and you have to do same for rest of the components.

So keep the cursor on Edit Text and press Right Click.and select "Property Inspector".

You will see Inspector Window.

Now we want edit text Box empty so for that find "String" property from Inspector window and delete whatever is written in its value.Here you also change "Tag"  value according to your wish. This Tag will be used as unique identifier for your particular component.  Here i hav ket that as it is.

Do the same for "Static Text" and "Push Button".

here for Push Button I have Change its String to "Click Me"  and its Tag to "btn1". Now you will see the screen like this.

Now Save this file.


Now Switch to MATLAB main screen when you will see the Tutorial1.m file is already open in Editor.

Now find below function in that file.


function btn1_Callback(hObject, eventdata, handles)
% hObject    handle to btn1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

This function is Callback function For btn1(Push Button) component. When the Button will click this function will be executed. So here now what we want to do is When we click on Button, what ever we have written in Edit Box will be Printed on Static Text. Like this.

So for doing that we need to add two line of code at the end of Callback function of btn1 Push Button.


% --- Executes on button press in btn1.
function btn1_Callback(hObject, eventdata, handles)
% hObject    handle to btn1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
data=get(handles.edit1,'String');%This line will fetch the data from Edit Text Box
set(handles.text1,'String',data);%This line will printed the fetch data on Static Text.

Here get() function is used to fetch data from Edit Text whose Tag is edit1. And set() function is used to print data on Static Text whose Tag is text1. As you have might notice that what is "data". data is variable witch is used to store the value fetched from edit1(Edit Box). 

So thats it. Save the file and Run it. You will see the Output.

Hope you have find this Tutorial Helpful, Though it is very basic step but i find this necessary so that even a person first time using MATLAB can also understand it.

Note: Please Do comment if you have any suggestion about upcoming tutorials. Also want to request any specific case you can do that. More tutorial are coming soon. Till then....

Break It, Feel It And Learn It.