AJAXify phpMyAdmin Interface - GSOC 2011 - Fifth week

Since I could not finish my fourth weeks second task which is "Ajaxify the multi row export in table browse" last week, I continued working with it in this week.

I used the sql.js file for handling the actions related to export and then the sql.php file. For this task I tried to reuse the toggle_quick_or_custom(); function. I used two actions for this task which are

1. $("#resultsForm.ajax .mult_submit[value=export]").live('click') which pop ups the "Export" dialog box containing the "dump" form for export
2. $("#buttonGo.ajax").live('click') which post the export data to export.php file.

Even though I worked with this task still there are some bugs with that option and I'll continue with that in the next week also.

Even tough my "Ajaxify Table-> Browse->Multiple rows->Export" option is not yet finished, since my this weeks task is "Ajaxify Table->Structure->Multiple rows->Change", I worked with it.

In this I tried to reuse the "if($("input[type='hidden'][name='table_type']").val() == "table")" code segment and place it in "displayMoreTableOpts()" fucntion in function.js.

I used the tbl_structure.js for handling the change event and in that I used two actions which are

1. "$("#fieldsForm.ajax .mult_submit[value=change]").live('click')" action to pop up the change dialog which contains the "#apend_field_form".
2. "$("#append_fields_form input[name=do_save_data].ajax").live('click')" action to handle the save option for save the changes.

There small modifications which should done for this option, so I need to continue with this option in the next week.

My sixth week tasks are "Ajaxify edit index and show/hide index in table structure", so I'll work with those options in next week.

AJAXify phpMyAdmin Interface - GSOC 2011 - Fourth week

After ajaxifying the table-> insert in db-> structure in last week, I had to fix some bugs in the same option this week also. Then I started applying ajax dialog for muti_row->change in the table->browse option. As Marc requested I have changed the name of the form "rowsDeleteForm" in to "resultsForm". Then I went through the code to find whether there are any code segments which can be used for my developments. There were not much code on that and I just find the

$("input[name=navig].ajax").click

function which can be used for reload the "resultForm" after successfully changing the row values.

Then I started implementing the feature and first I developed the click event for "Change" option which pops up the "Change" dialog which contains the "#insertForm" form which allows to change the selected values.

$("#resultsForm.ajax .mult_submit[value=edit]").live('click')

Then I developed the two events which handles the clicks on go buttons at "InsertRowTable" and "navigationPanel". Those are

$("#insertForm .insertRowTable.ajax input[value=Go]").live('click') and

$("#buttonYes.ajax").live('click')

On those I used the "$.post()" action to submit the changed values and if it is success used to trigger the "navg" button to reload the "resutlsForm".

$("input[name=navig].ajax").trigger('click')

After instructions given by Marc, I changed the code in order it supports for the vertical table.

This feature is now works fine and merged to the master branch by Marc and I believe it really improve the usability of the PMA.

Next week I have to work with ajaxify the table->export in db->browse and the actions in multiple rows in the table->structure.

AJAXify phpMyAdmin Interface - GSOC 2011 - Third week

After finishing my last week task which is ajaxifying the "Add a new User" in db->privileges, this week I started providing an ajax featured dialog to the table inserts in db->structure.
There were no previously done related works on that, so I had to start it form the beginning and there were no any codes which I could reuse in my implementation. I chose the db_structure.js file to handle the ajax behavior in this insertion.

• Initially I added the ajax class for the insert link and then wrote the action for that insert link click in db_structure.js file. The action is $("td.insert_table a.ajax").live('click'). After click action it popups the "insert_table_dialog" dialog which carries the "insertForm"

Insert Table pop up dialog

• Then I implemented the action which triggers when the "Go" button in "insertRowTable" is clicked. That is $("#insertForm .insertRowTable.ajax input[value=Go]").live('click') and it basically post the insert form to the db_structure.php and then after the record is successfully inserted it reloads the "tablesForm" in the db->structure with newly inserted values. I used "$().load()" function to load the tableForm with new values.
• Then I implemented the click action of the "Go" button at the "action_panel" in the insertForm. That is "$("#buttonYes.ajax").live('click')". In that case I had to handle the different "submit_types" and "after_insert" types. When user select the "new_insert" in after_insert list the "Insert table" dialog should re popup. So I used "trigger('click')" function to trigger the insert click automatically.

Now the insert option in db->structure works fine with its ajax behavior but seems little bit slow due to high number of "get()" requests during the operations. I'll fix that issue in the next week.

Next week my major tasks will be implementing the Actions on multiple rows in table browse. It will basically contains two part which are "change" and "export".

AJAXify phpMyAdmin Interface - GSOC 2011 - Second week

After successfully completing my first task which is Ajaxify the "Create Table" option in the navigation panel last week, I moved to the second task of the schedule. It is applying ajax behavior to the "Add a new User" option in the db->privileges tab. Initially I went through the implementation of "Add a new User" option in host->privileges which is a similar situation as db->privileges. I went through the code in the server_privileges.php and server_privileges.js files to find out what are the available logics and the code which can be reused for my implementation. I found that $("#fieldset_add_user a.ajax").live("click") event code is the logic and the code which I can reuse for my implementation. After that I started modifying it according to my task.

First I added the class="ajax" attribute to the "Add a new user link" when the Ajax in enabled. Then It became supporting to the same logic in $("#fieldset_add_user a.ajax").live("click") event.

At that point when we click on the "Add a new User" link, it successfully popups the dialog box which is carrying the "Add user" form and after we submit it correctly create that user. But still its not done. Because I had to reload the "db specific user rights" table at the db->privileges tab.

After discussing with Marc I decided to use a post command to get the updated "db specific user rights" table in db->privileges and replace it with the current table. So in oder to do so I had to remove the echoes of the "db specific user rights" form in server_privileges.php file and use the PMA_ajaxResponse() to pass the string of the table object as a json string.

Then I had to face a problem of not parsing the json string correctly and outputs error. So I used the $.parseJSON() function to parse the json string at the server_privileges.js file. Then it worked fine and reloaded the "db specific user rights" table with newly added user.

Then Marc directed me to a new scenario in host->databases->check_privileges->"Add a new user" which gave some errors because of my modification. Finally I have modified the logic which corrects the error and now the feature is working correctly.

Add user dialog

Now the "Add a new user" in db->privileges option works fine with the ajax behavior and I think it will help to improve the usability of PMA.

Next week I'm going to work with modifying the "Insert for a table" option in db->structure, which will apply the ajax behavior to it.

AJAXify phpMyAdmin Interface - GSOC 2011 - First week

This is the fist week of coding time period in my gsoc 2011 project with phpMyAdmin(PMA). On 23rd of May the official coding time started. Since there were some free time with my in the community building period I started my works on before hand. It made me easy to be familiar with the code base and style which is used in PMA.

My first task is give the ajax behavior to the "Create Table" option in the navigation panel of the database. Initially when we click on the "Create Table" option it directs the content frame to a new page. So I wanted to give a dialog box which loads the create table form and then submit it using ajax.

First I went through a similar feature in the "database->structure" and "database->operation" by using the "create_table_form_minimal" form. At that case I got some knowledge on how we can use dialog boxes for this kind of scenario. Then I tried to find out of them what are the code segments which I can reuse for my task. There were three actions which used for "Create Table" option in "function.js". Those are


("#create_table_form_minimal").live('submit') - triggers when the initial form has submit.
("#create_table_form input[name=do_save_data]").live('click') - triggers when the save button clicks in the form.
("#create_table_form.ajax input[name=submit_num_fields]").live('click') - triggers when the add new column option clicks.


Out of those I realized that the second and third actions are common to both cases. I had to add a new action instead of the first one.

Then I planed how to structure my new option. After discussing with Marc I decided to add my code the "navigation.js" so it is logical and easy to use in the future. Then I developed the (#newtable).live('click') action in "naviation.js" file and after discuss with Marc I put the common logic to the "PMA_createTableDialog()" function in the "fucntion.js" file.
Finally Marc requested a modification on changing the "Add 'x' column(s) Go" option to the top of the create table form and I did that. Now the "Create Table" option in the navigation panel works fine and I think the modification added some more usability on that.
I have successfully finished my first task of my project. Next I 'm willing to work with adding the ajax behavior to the "database->privileges" option.

AJAXify phpMyAdmin Interface - Gsoc 2011

This time my proposal on "AJAXify phpMyAdmin Interface" got accepted for Google Summer of Competition with phpMyAdmin (PMA). Marc Delisle, Michal Čihař and Ninad Pundalik who is the last year Gsoc contributor helped me a lot when I improve my patches and the proposal. Marc Delisle act as my mentor for my project in this summer.

Ajaxifing the PMA is a project idea which continues from the last year gsoc session which was done by Ninad Pundalik. Last year he has improved some important features by giving the ajax behaviour to them in the PMA. Since ajax is a trendy behaviour among web domain and since it improves the usability of the system, moving in to ajax is a huge improvement step on PMA. This time I’m willing to improve the usability of some identified important features in PMA by applying ajax behavior using jquery library. After improving those features, they will be able to provide a quick and consistent flow of operations to the PMA users.

Next series of blog post will discuss more about my project in this summer.

Optical Character recognition with Tesseract

Since I was very busy with my final year stuff I could not write a blog post for months. But today I got some time to introduce an amazing tool for you, which will help you when dealing with the Optical Character Recognition(OCR) domain. Lets get a basic knowledge on the OCR domain, before moving to Tesseract.

What is OCR?

"Translating the handwritten, typewritten or printed texts in a scanned image to a machine encoded text."

This OCR concept is very important and widely used in converting important documents which are in image formats to text format. The first major use of OCR was in processing petroleum credit card sales drafts. This application provides recognition of the purchaser from
the imprinted credit card account number and the introduction of a transaction. Most of the modern scanners provides the feature of OCR enabling for the images scanned using it which will directly output the text content of the scanned image. This concept helps to save a huge time which will waste on rewriting the image contents. There are lots of pattern recognition and image processing activities involved with this field and this is an very interesting and research area in the current computing word.

What is Tesseract?

"The Tesseract OCR engine was one of the top 3 engines in the 1995 UNLV Accuracy test and it is probably one of the most accurate open source OCR engines available. The source code will read a binary, grey or color image and output text. A tiff reader is built in that will read uncompressed TIFF images. Tesseract is licensed under the apace license and any one can use it for free. The core developer on the project is Ray Smith "

Sometimes back I involved with a project to modifying an OCR module for Sahana Disaster Management System. So I searched for an OCR engine for integrate it with the SahanaOCR system. Tesseract was the best solution I found. It has an immense power on recognizing printed text and also it is very easy to localize for your own mother languages.

How to install Tesseract on your PC ?.

Tessearct provides a set of binary executable for Windows and installers for Linux systems. The detailed installation guild is available here.

The Windows users can directly download the latest exe file here. The installation guide for the Linux users also provided at the general installation guide . Then you have to download the trained data folder which is available at the download page. Currently there are trained data sets for many languages such as English, Chines, Spanish etc. You can download any of those tessdata files and extract it into your working directory.

Then there you can go into the directory where the tesseract.exe is located and use the following command to recognize the images and finally to output the recognized characters in an text file.

tesseract image outputbasename [-l lang] [configs]

In this the image file is name of your image using for OCR and the output_base_name is the name of the text file which will contains the recognized output. The images should be in TIFF format and you can use the Libtiff library for handling compressed images with Tesseract. Other configurations are optional and they facilitate for more advance features.

Training Tesseract.

There is another amazing feature provided by Tesseract which is customizing it for your local languages. For that initially we have to train Tessearct for the new language. Here is the training guide for the Tessearct.

For training it, you have to have a proper training set of characters. Then after you select a proper training set you can follow the training procedure which is described at the guide. After following all the steps it will provide you a lang.trainddata file which contains all the newly trained data.

Tessbase API.

Now you have a good idea on how to use Tesseract for OCR. But thats all for using Tesseract on its own. What if we need to integrate it with our own application. So for that Tesseract provides a highly user friendly API which is named as Tessbase API. So you can use tessbaseAPI class to call the internal functions provided by Tesseract.

Here is the general forum where the common discussions carried out on Tesseract project and you can find more details on the project by subscribing to that.