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.
 

How to Host Your Website from Home

Hello Code Breakers

Today I am here with one great tutorial. Today I will show you the way to start your own home server to host your website from home. It very easy and you can do with just few commands.

Here I assume that you have following configuration in your PC/Laptop.

OS: Ubuntu 10.04 or Later
Hard Drive: 50GB(Minimum)
Ram: 2GB(Minimum)
And good Internet broadband connection with speed atleast 1Mbps.

Note: We must require a modem/router to put your website online . (If you are BSNL broadband user u will most probably have the modem/router).

So Lets Break It Than!!!

Setp-1:  First of we will need to install Apache sever. As we are going to make web server we need PHP,MySQL and Apache server, And in Ubuntu this can be easily available in one single package called "LAMP Server". So for to install LAMP server in Ubuntu in very easy way and with GUI so that those who are not comfortable with commands can install it with ease we will install on package called "Tasksel". If you are using Ubuntu 10.04 mostly this package is installed in it by default,but those who are using Ubuntu latest version will need to install it. So for that start your terminal with Alt+Ctrl+t, and write following command in terminal.

 You will notice here that we are adding "sudo" before command to give it administrative rights, so it will ask for administer password. so enter it. It will ask you for permission to download contents from internet, Sof enter "Y" and press enter. Thats it now wait till download and installation finish.

Setp-2: Once tasksel is installed, write following command in terminal

enter administrator password if asked. and you will see following screen.

Find ans select "LAMP Server" by  pressing space key.

And press Tab key to select <ok> and press enter.

when you press Enter you will see following screen. Let the installation finish.

In the middle of installing process you will ask to configure MySQL  "root" user password with the following screen. Keep in mind that what ever password you will enter remember it very well. We will need that in further installation and also if you loss that password you cant retrieve it.

 So we have installed "LAMP Server". So now we can check it that our server is working properly or not.
Open firefox(or browser you are using) and enter url "http://localhost" and u will se following screen. If you see this screen You have successfully installed you web server.

 Step-3:  Now we will install "phpmyadmin" as MySQL database GUI interface. If you dont know about phpmyadmin you can google it. So to install phpmyadmin write following command in terminal.

If it ask for password enter your administrator password.

Just enter "Y" and press Enter. and wait till installation finish.
Now as in the middle of the installation it will ask for to configure phpmyadmin with your serveer.

Select "apache2" and press ok.

Now it will ask to configure MySQL database with phpmyadmin.

First select "ok" and than "Yes". Now it will ask to enter password for root user. Enter the same password as we have enter in Step-2 for MySQL configuration. Enter the same password in bellow  screens.

And wait for installation to finished. Thats it!. We have done here. Now we will check that phpmyadmin is working or not.

and Go.

Thats It you have install and configure your webserver successfully.

Step-4: Now we will put our server online. So it can be accessible from any where. Now I am going to explain for BSNL modem/router. But for others the mechanism is same. So lets do it.

• First open you browser and enter "http://192.168.1.1" in url.
• As you open this url you will ask for username and password. Now for BSNL modem  generally username and password is "admin". Enter admin in username and password. and u will se tht you will be redirected to modem configuration page.
• Now find tab name "Port Forwarding"  from the left side bar. you can find that in under security tab mostly.

•   Now you must be wondering why we need this, because we are going to set up our port 80 for webserver communication using TCP to Outside world.(This is the easy explanation for you but in technical way its little complex.) 
• So click on Add. You will see following page.

Now select "Pre-Defined" -> "Server"-"Web Server"  as show in above figure. Now we have to enter internal IP address to "Forward to host internal IP Address". 

To get you PC/Laptop internal IP address type "sudo ifconfig" command in terminal.

And note down the "inet addr" of  "eth0" . Here for me it is "192.168.44.130". Now enter this address in to "Forward to host internal IP Address" . 

And click on Apply. Thats all you are done. now put your website content in "/var/www/" folder and thats it now you can access you website from anywhere.

Note: But for that you have to purchase one Domain name and configure it with your server. That i will explain in another tutorial. 

Till Then "Break It, Feel It And Learn It"