Asp.Net: How Do I?

simple Web Service Agent Pattern Webservice Endpoint configuration for local/live hosting

2012-03-10T13:46:00.000-08:00

Setting up webservice to consume is difficult as it has to be hosted in different enviornements and sometime it is difficult to understand the webservice call errors when moving from local to live hosting. Most of the time we rely on auto generated Urls in configuration files.

Best way to handle such situation is to properly configure Urls in local and hosting enviornements. But if it is required to configure the webservice from code behind, i have a simple solution.

Other than that i am going to introduce you to service agent pattern. This is a very simple and generic pattern for Asynchoronous web clients like silverlgiht. This helps configure webservice in reuseable way and makes testing easier. Helps in plugable webservice, and specially in IoC/Dependecny injections.

namespace FileUploader.ServiceAgents
{
    public interface IImageServiceAgent
    {
        void SaveImage(byte[] buffer, string fileName, EventHandler callback);
    }

    public class ImageServiceAgent : IImageServiceAgent
    {
        private readonly ImageServiceSoapClient _proxy;


        public ImageServiceAgent()
        {
            Binding binding = new BasicHttpBinding();
            var endpoint = new EndpointAddress(
                new Uri(Application.Current.Host.Source, "../Webservices/ImageService.asmx"));
            _proxy = new ImageServiceSoapClient(binding, endpoint);
        }

        #region IImageServiceAgent Members

        public void SaveImage(byte[] buffer, string fileName, EventHandler callback)
        {
            _proxy.SaveImageCompleted += callback;
            _proxy.SaveImageAsync(buffer,fileName);
        }

        #endregion
    }
}

Lets start with the inteface. First line defines the IImageServiceAgent. This interface lists all the functions of webservice along with their call backs.

In the implemenations, it has service client that is using basicHttpBinding with endpoint configuraiton in such a way that it will automatically handle any enviornment given that your client and web service is hosted in the same hosting url.

Implementaion of SaveImage is simple, first it subscribes to SaveImageCompleted call back and then calls the Async client.

This is a good way as it can helps using anonymous functions in a good way. Let me know if this helps you or you have a better solution to today world coding standards.

single line news/feed scroller with jQuery

2011-04-19T03:36:00.000-07:00

How Do I? Single Line news/feed Scroller with jQuery

Working Preview:

scroll headline 1
scroll headline 2
scroll headline 3
scroll headline 4
scroll headline 5

While working on my own, I decided to implement a very simple news/feed one line scroller. Idea is simple and in use a lot of websites. Doing it with jQuery is a pleasure.

It will use the Unordered List and will scroll each List Item according to predefined scroll interval. Also while this scrolling is going on, each item will do it with Scroll animation of jQuery.

It is a recursive function and it will schedule call with itself again and again to continue scrolling. It has no stopping criteria as associated with must do recursive functions as it required to be scrolled all the time.

Parameters Detail

It takes 4 parameters.
Unordered List Id: ulId
If you call it firstTime then this bit will be true : isFirstTime
Time between next news/feed: scrollTimeInterval
Time of animation when changing news/feed: animationTimeInterval

Please see the code as listed below and download link is at the end of this article.

//call the function when document is ready to start the scrolling
$(function(){
    ScrollMessages("ulHeadlines",true,3000,1000);
});

function ScrollMessages(ulId,isFirstTime,scrollTimeInterval,animationTimeInterval) 
{
    //Get the Unordered List
    var ul=$("#"+ulId);
    //Get all List Items
    var lis=$("li", ul);
    //If it is not the first time, Current item is the visible one
    var current = $("li:visible:first", ul);
    //if it is the first time, it is the first item of list. Show the first item of list 
    if(isFirstTime)
    {
        //hide all list items
        lis.hide();  
        //get the first list item
        current=$("li:first",ul);
        //show only the first item
        current.show();
    }
    //if it is not the first time then calculate the next item to show and show that item.
    else
    {
        //Get the index of item that will be shown 
        var index=current.index();
        //if it is the last item then current items should be the first item of list else it should be the next item of list
        if (index + 1 == lis.size()) {
            index = 0;
        }
        else {
           index += 1;
        }
        //slide up and hide the current item
        current.slideUp(animationTimeInterval);
        //slide down the next item that is going to be shown 
        $("li:eq(" + index + ")", ul).slideDown(animationTimeInterval);
    }
    //re call this funcation to continue the scroll news recursively
    setTimeout(function(){ScrollMessages(ulId,false,scrollTimeInterval,animationTimeInterval);}, scrollTimeInterval);
}

Click here to download sample

check/uncheck all records using jQuery

2011-04-18T02:37:00.000-07:00

How Do I? check/uncheck all checkboxed on header check box click using jQuery

Working with tables using javascript became easy with jQuery or even with any sort of DOM manipulation. There is one task we repeatedly do i.e. to check/uncheck all the records. Even though its not a difficult problem and usually everybody has its own implementation of this activity. There is perhaps a generic code written which is used by all.

Small challenge:

There is one complexity with this scenario. If all checkbox are selected, then header checkbox should be checked. So in any case if a user uncheck any of record checkbox, it should uncheck the header checkbox also and vice versa if user manually select all records then header checkbox should be checked
The following code is written to overcome such situation in minimum line of codes. Please see the comments and implementation and let me know if you like this approach.

//call the function when document is ready to bind the events with header checkbox to select/unselect all
$(function(){
    //call the function on document ready function
    SelectAll("tblTest","cbHeader");
});

function SelectAll(tableID,cbHeaderID)
{
    //select the table that has the checkboxes
    var table=$("table[id$='"+tableID+"']");
    //bind event with header checkbox change event
    $("input[id$='"+cbHeaderID+"']",table).change(function(){
    //check/uncheck all the checkboxes based on header element status
    $("input:checkbox",table).attr('checked',$(this).attr('checked'));});
    //bind event with all the other checkboxes 
    $("input:checkbox:gt(0)",table).change(
    function(){  
        // if number of checked checkboxes are les than number of checkboxes than uncheck the header checkbox
        var isAllChecked=$("input:checkbox:gt(0)",table).size() > $("input:checkbox:checked:not(#"+cbHeaderID+")",table).size()?false:true;
        $("input:checkbox:first",table).attr('checked',isAllChecked);
    });
    
}

Click here to download the sample page

show hide columns of table in jQuery

2011-04-18T00:23:00.000-07:00

How Do I? Show/hide columns of table based on Multi Select list box in jQuery

Large reports with many columns you must give some extra customization. One of them is to show hide columns based on a multi select list. This article describes the easiest way of doing it with a generic code.

Assumption:

Table is well formatted i.e. it has a thead and tbody tag.

Brief Description:

When page load and document ready function is fired, it will bind a function to change event of multiple select list.
It then loop over the whole select options to see the selected items and hide then if they are selected or show them if they are not selected.
Here is the code,

$(function(){
// add an function on multiple select list ddlcolumns change event
    $("#ddlColumns").change(function(){
        //get the table whose columns will be manipulated
        var table=$("#tblTest");
        //get the first row or thead row
        var headerRow=$("tr:first",table);
        // loop over each option in multiple select list
        $("option",this).each(function(){
            //get the index of current option value e.g. "Header 1"
            var index=$("th:contains("+this.value+")").index();
            // if current option is selected then hide the column along with header else show the column if it is already hidden
            if($(this).attr('selected'))
            {
                $("td:nth-child("+(index+1)+"),th:nth-child("+(index+1)+")",table).hide();
            }
            else
            {
                $("td:nth-child("+(index+1)+"),th:nth-child("+(index+1)+")",table).show();
            }
        });
    });
});

I hope this will help.
Click here to Download sample

File uploading in chunks using HttpHandler and HttpWebRequest

2011-03-05T02:17:00.000-08:00

How Do I? File uploading in chunks using HttpHandler and HttpWebRequest

This is a sample code that shows how to upload file using HttpHandler in chunks. This may not seems like a very good idea in isolation but this could help when creating a file upload control in Silverlight. I already have an article that shows how to upload file using web service in chunk. You can read this article here. When talk about file uploading using web service, it has many disadvantages like 1- it has a limit of sending and receiving data and 2- it pads data that increase the sending data, to name a few problems.

HttpHandlers are better in many ways; this technique could be used to enable huge files. It will understand the entire authentication and authorization constrains already implemented in your web application.
This article has two distinct parts
1- How to send data in chunks using HttpWebRequest
2- How to receive and save data in HttpHandler

Sending data in chunks

The implementation of HttpWebRequest is very simple. It has the following steps
1- Open a file
2- Start reading a chunk
3- Convert the chunk in Base64 String
4- Send the chunk to HttpHandler along with some basic file information e.g. file name

HttpWebRequest will post data to HttpHandler because of data limitation and sercurity of data in a Key-Value pair.

And here is the code

Function that will convert the file into chunk requests

private void ConvertToChunks()
{
 //Open file
 string file = MapPath("~/temp/1.xps");
 FileStream fileStream = new FileStream(file, FileMode.Open, FileAccess.Read);
 //Chunk size that will be sent to Server
 int chunkSize = 1024;
 // Unique file name
 string fileName = Guid.NewGuid() + Path.GetExtension(file);
 int totalChunks = (int)Math.Ceiling((double)fileStream.Length / chunkSize);
 // Loop through the whole stream and send it chunk by chunk;
  for (int i = 0; i < totalChunks; i++)
  {
    int startIndex = i * chunkSize;
    int endIndex = (int)(startIndex + chunkSize > fileStream.Length ?   fileStream.Length : startIndex + chunkSize);
    int length = endIndex - startIndex;

    byte[] bytes = new byte[length];
    fileStream.Read(bytes, 0, bytes.Length);
    ChunkRequest(fileName, bytes);
  }
}

Function that will send the chunk to httpHandler

private void ChunkRequest(string fileName,byte[] buffer)
{
 //Request url, Method=post Length and data.
 string requestURL = "http://localhost:63654/hello.ashx";
 HttpWebRequest request = (HttpWebRequest)WebRequest.Create(requestURL);
 request.Method = "POST";
 request.ContentType = "application/x-www-form-urlencoded";

 // Chunk(buffer) is converted to Base64 string that will be convert to Bytes on  the handler.
 string requestParameters = @"fileName=" + fileName +
"&data=" + HttpUtility.UrlEncode( Convert.ToBase64String(buffer) );

 // finally whole request will be converted to bytes that will be transferred to HttpHandler
 byte[] byteData = Encoding.UTF8.GetBytes(requestParameters);

 request.ContentLength = byteData.Length;

 Stream writer = request.GetRequestStream();
 writer.Write(byteData, 0, byteData.Length);
 writer.Close();
// here we will receive the response from HttpHandler
 StreamReader stIn = new StreamReader(request.GetResponse().GetResponseStream());
 string strResponse = stIn.ReadToEnd();
 stIn.Close();
}

Receiving and saving Chunk data in HttpHandler

It will
1- Receive the chunk and file information
2- Convert back the chunk to byte[] from Base64 string
3- Save the chunk by
a. Creating a new file if file not existed
b. Opening the existing file

Here is the Code

Function that will receive the request in HttpHandler

public void ProcessRequest(HttpContext context)
{
 //write your handler implementation here.

 string fileName = context.Request.Params["fileName"].ToString();
 byte[] buffer = Convert.FromBase64String ( context.Request.Form["data"]);
 SaveFile(fileName, buffer);
}

Function that will Save the file

public void SaveFile(string fileName, byte[] buffer)
{
 string Path = HttpContext.Current.Server.MapPath("~/upload") +"\\"+ fileName;
 FileStream writer = new FileStream(Path,File.Exists(Path)?FileMode.Append:FileMode.Create, FileAccess.Write);

 writer.Write(buffer, 0, buffer.Length);
 writer.Close();
}

To use HttpHandler, it must be configured in web.conf like shown below
<add verb="*" path="*.ashx" type="handlertest.IISHandler1, handlertest"/>

Hope this will help , Please click here to download the sample application. Please see the Default.aspx.cs for HttpWebRequest section and IISHandler1.cs for HttpHandler section.

Using jQuery CreateTable Plug-in to convert JSON into Table

2011-02-12T13:15:00.000-08:00

How Do I? Explanation of jQuery Create Table Plug-in to convert JSON into table easily

Download Plug-in and sample
Download Asp.Net ajax sample and Plug-in

Template

{sr}	{Name}	{Mobile}	{isActive}
{sr}	{FirstName} {LastName}	{Mobile}	{isActive}
{Pager}

This is a complete template that contains a header, body and footer. It must have thead/tbody and tfoot for properly converting a table.

After creating a templat, get the data from server and pass it by using the following syntax

$("table").CreateTable({ Body: data });

That leads us to all available configuration and options. Here are the list of options that can be passed with their default values.

{ Head: null, Body: null, AjaxPager: false, CurrentPage: 0, TotalPages: 0, PageSize: 10, Pager: true,OnRow_Bounded:null,OnPager_Clicked:null }

To build a simple talbe only data is required and it automatically do the rest. But to use ajax pager that will be called on each page change and doing extra when data binding with each row requires more options to configure.

If You want to pass a function that will be called on each row creation, here is what you should you

$("table").CreateTable({ Body: data,OnRow_Bounded:yourCallBackFunction });

This function will be passed the row type (head,body) as first argument and the data that is being bounded to this row and the row (tr) itself. Here you can do special tasks like convert the bounded boolan to a checkbox as you can see in the below code

function OnRow_Bounded(rowData, row, rowType) 
{
    if (rowType == "body") 
    {
      var status_checkbox = $("<input type='checkbox'/>").attr('checked', rowData["isActive"]).bind('click', rowData, EmployeeStatus_Change);
      $("td:contains(" + rowData["isActive"] + ")", row).text('').append(status_checkbox);

    }
  return row;
}

Pager:

You can turn off pager by setting Pager:false.

Using ajax data source with pager.

Pager will generate next/previous according to total records and page size but it can be forsed to set as an Ajax pager. In this mode, total pages will be set in options along with ajax pager set to true as shown blow

$("table").CreateTable({ Body: null, TotalPages: 10, AjaxPager: true });

This will give an object that could be used to refresh table when a record is received. A sample is included in the download that shows how to do it in Asp.Net.

Exposed Object:

Var tble=$("table").CreateTable({ Body: null, TotalPages: 10, AjaxPager: true });

Gives an object of type Table that is created to build a table from template using the provided data. This object has the exposure to all the internal data and functions. Lets assume that you just want to change the data source but not the current page or anything else. This situation can be handled by simply using the following code

tble.Body= your new data source here;
tble.Refresh();

and here you go with your new data source.

Download Plug-in and sample
Download Asp.Net ajax sample and Plug-in

Create a jquery plug-in : creating a jquery plug-in that can convert JSON array into table

2011-02-12T08:48:00.000-08:00

How Do I? Create a jquery plug-in : creating a jQuery plug-in that can convert JSON array into table

Download Plug-in with Samples
Download Plug-in with Asp.net Ajax Sample

This article is about learning how to create jQuery plug-in by actually creating one. I have prepared a sample plug-in that can convert a JSON array into a table. This table is a template table already present in the page and this plug-in will get this table and insert the values of variables in the desired places whether they are in table attributes or inside td’s.

Creating a plug-in is not a big task but creating a reusable plug-in needs deep understanding and better decisions at design time so it can be real reusable component later. If you want to simple know the syntax of creating a plug-in in jQuery, jQuery website has all the information and you can check it from this link
jQuery Plug-in Authoring

However this article is about creating jQuery plug-in, it’s about doing better decision while creating a plug-in. Here are some considerations

1- Plug-in should work even without binding it to jQuery
2- Plug-in should be able to maintain its state(data) for event handling
3- Plug-in should be able to attach to as much elements as we want in a page
(That means it should be object orient rather than procedural)

I am assuming that before reading this article you arefamiliar with javascript prototype programming. But if you are not, please read this article before proceedint "Object Oriented Programming in JavaScript"

In this article I will discuss in detail about all of these aspects of a plug-in. It’s a very simple plug-in and let start building it and while on it, I will discuss the above listed points. Following is the main constructor and possible listed options of table plug-in

function Table(tbl, data)
{
    //data for head and body
    this.Body = data.Body; 
    // table object
    this.RTable = tbl;
    // template for head and body and footer
    this.BodyTemplate;


    // call back function to be called on row data bound
    this.OnRow_Bounded=data.OnRow_Bounded;

    this.GatherTemplate();
    if (this.Body != null) 
    {
      this.Create();
    }
}

This is the function that will gather the template from header/footer and body from the passed table object and this template will be used to bind data

Table.prototype.GatherTemplate = function() {

    this.BodyTemplate = $("tbody", this.RTable).html();
    $("tbody tr:first", this.RTable).remove();

}

After getting all the templates, this will save the required templates that will help in building table.
After gathering template, this next function will build the table and display it on the screen

Table.prototype.Create = function() 
{
  var i = this.CurrentPage == 0 ? 0 : this.CurrentPage * this.PageSize;

  var limit = i + this.PageSize > this.Body.length ? this.Body.length : i + this.PageSize;

  for (; i < limit; i++) 
  {
    this.RTable.append(this.CreateRow(this.BodyTemplate, this.Body[i]));
  }
            
}

This function will create a row and will optionally call a row bound function that can be used for doing different options.

Table.prototype.CreateRow = function(template, rowData) 
{

  for (var i in rowData) 
  {
    var exp = new RegExp("{" + i + "}", "g");
    template = template.replace(exp, rowData[i]);
  }
  var row = $(template);
  if (typeof OnRow_Bounded == 'function') 
  {
    row = OnRow_Bounded(rowData, row, "body");
  }
  return row;
}

Now this is a complete plug-in and when Table function will be called. It will generate a table and display it the place where the template table is placed. Now if you see that this is not a jQuery plug-in yet but it can be used as a plug-in by using it following way

  Var table=new Table($(“table:first”),{Body:yourJSONData});

What it takes it to convert it to a jQuery plug-in is very simple. 1- Initilize a default options object var options = { Head: null, Body: null, AjaxPager: false, CurrentPage: 0, TotalPages: 0, PageSize: 10, Pager: true,OnRow_Bounded:null,OnPager_Clicked:null } 2- Extend the jQuery library

$.fn.CreateTable = function(data) 
{
  //if (this.length > 0) {
  $.extend(options, data);
  var index = 0;
  var objArray = new Array();
  this.each(function() 
  {
    objArray[index] = new Table($(this), options);
    index++;
  });
  return objArray;
  //}
}

Inside this on using a each loop for all tables in the page will bind data to all tables. Default options are extended with extend jQuery object and now this is a complete jQuery plug-in that you can call using jQuery by using the following syntax

  $(“table”).CreateTable({options});

As you can see inside the each loop , a new Table object is created and it works the way it should be. About the second point, where I mentioned it should maintain its state. This plug-in will give back the array of Table objects. These objects can be used to get or set state. These objects can be used in many ways. This article does not cover the whole plug-in but it has the taste of what it is capable of. This article includes various working examples that can be downloaded from the below link. http://rapidshare.com/files/447560766/jQuery-CreateTable-PlugIn.zip

Face Detection based on Skin colour point pixel processing using OpenCV

2011-01-24T11:08:00.000-08:00

How Do I? Face Detection based on Skin colour point pixel processor using OpenCV

This was my project for Digital Image Processing in NUST taught by a great teacher Naveed Sarfaraz Khattak. Thanks all for giving such knowledge and making it easy to study.

Problem Description:

The program will input colour triples, or subimages, that are training samples of human face colour. Let's refer to this colour as C. (Human face colour should NOT be built into the program. By doing this, we should be able to use the same program to extract water, green grass, etc.)
The program will read some constraints on the features of the regions targeted, such as the range of area, elongation, etc.
The program will identify all pixels of the input image that have colour similar to the training samples.
The program will identify each connected region of colour C as an object and measure features of each such region. The program will report only those regions that have properties similar to a human face.
The program will output the input image in P3 format with the bounding box of each face candidate overlaid in white (225,225,225)

Summary of Choices:

I have done this project in OpenCV library using Visual Studio 2010. I am using
1- OpenCV for Image Analysis
2- WPF for presentation Layer along with C#

Skin colour detection Methods:

There are two ways of detecting skins,
1- Region based detection
2- Point pixel processing

This project requires doing the pixel processing.

Colour Models:

There are different types of colour models. Most used and known colour model is RGB. This colour model presents the colour in three bytes with each byte present a property of colour. To process skin colour in this model requires processing all three byte values.

HSV is the other well known format. This format presents the colour detail in one byte the other two bytes used to store the strength and brightness of colour. Using this colour model has added benefit of one dimension processing rather than three dimensions processing in RGB colour model.

For this project, I have chosen to use the HSV colour model. By going through the different research publishing on point processing and their result, HSV produces the best pixel processing results as you can see in figure 1.

HSV for colour detection:

HSV colour model uses H for saving the colour. Only using H for skin detection can very successful. Skin colour is different between different races. Using the result of “Comparative Study of Statistical Skin Detection Algorithms for Sub-Continental Human Images” determines that

Range	Result
2<h<45	95.4
4<h<40	93.2
5<h<35	91.1
10<h<30	84.8

Using the above table and by experimenting with different range of H, I end up using 6<h<18 that produces the good result in my selected images from internet.

Skin colour detection Algorithm:

Algorithm is based on the study of HSV “Skin Detection using HSV colour space”. Following figure shows the details

Figure 2 : Algorithm Detail

Algorithm:

Open Image
Convert Image to HSV colour model
For each row of height
For each column in width
If pixel’s H is between 6 and 18
Tag this as skin pixel
Else
Tag this as a white pixel
End For
End For

Dilate Image with 5x5 Kernel
Erode Image with same 5x5 Kernel
Median Smooth with 3x3 Kernel

Use the Label Image Project 2
After Objects has been labelled
Draw Rectangle on every Object find

Code:

// Detecting skin inside the picture
String^ SkinDetection(String^ filePath,String^ savePath,String^ extension)
{
  // Primary image
  IplImage *primaryImage = cvLoadImage( StringToChar(filePath),1);
  // creating image from the source
  IplImage *source=cvCreateImage( cvGetSize(primaryImage), 8, 3 );
  // creating HSV image from the source
  cvCvtColor(primaryImage,source,CV_BGR2HSV);
  // Destination image that will be created from the image, binary image
  IplImage *destination=cvCreateImage( cvGetSize(source), 8, 1 );
  // intermediate image that will only have SKIN
  IplImage *intermediateImage=cvCreateImage(cvGetSize(source),8,3);

  int height= source->height; // number of lines
  int bytesPerRow= source->width * source->nChannels; // total number of element per line
  int channels=source->nChannels;
  int step= source->widthStep; // effective width

  unsigned char *data= reinterpret_cast<unsigned char *>(source->imageData);
  unsigned char *dData= reinterpret_cast<unsigned char *>(destination->imageData);
  unsigned char *iData= reinterpret_cast<unsigned char *>(intermediateImage->imageData);
  unsigned char *pData= reinterpret_cast<unsigned char *>(primaryImage->imageData);


  int dIndex=0;
  int dStep=destination->widthStep;

  //start of parsing each pixel
  for (int i=0; i<height; i++) 
  {
    dIndex=0;
    for (int j=0; j<bytesPerRow; j+= channels) 
    {
      int value=data[i*step+j];
      if(value> 6 && value<18) // if skin is in this pixel
      {
         iData[i*step+j]=pData[i*step+j];
         iData[i*step+j+1]=pData[i*step+j+1];
         iData[i*step+j+2]=pData[i*step+j+2];
         dData[i*dStep+dIndex]=0; 
      }
      else // if skin is not in this pixel
      {
         iData[i*step+j]=255;
         iData[i*step+j+1]=255;
         iData[i*step+j+2]=255;
         dData[i*dStep+dIndex]=255;
      }
      dIndex+=destination->nChannels;
   }

  }

    // 
    SaveImage(source,savePath+"_HSV.jpg");
    SaveImage(destination,savePath+"_Skin.jpg");
    // Dilate the image
    destination =Dilate(destination);
    SaveImage(destination,savePath+"_Dilated.jpg");
    // Erode the image
    destination=Erode(destination);
    SaveImage(destination,savePath+"_Eroded.jpg");
    // Smoothing image
    destination=MedianSmooth(destination);
    SaveImage(destination,savePath+"_MedianSmooth.jpg");
    //Labeling image and showing bounding box
    SaveImage(intermediateImage,savePath+"_Intermediate.jpg");
    String^ objects=LabelIamge(SaveImage(destination,savePath+"_Label.jpg"),savePath,primaryImage);
    return objects;
}

Description:

With the look at above algorithm, it becomes relatively easy to do the skin detection. Using the last project code, I was able to label the output image of skin detection. Skin detection function output the binary image that became the input for label image. Label image function goes through each object and trashes the objects with regions that have less than twenty pixels. Than using the bounding box details of each object found in the labelled image, a red circle drawn as the bounding box.

Results:

Many images are used to test the result of this program. Algorithm goes through the image and output the eight images on every stage of processing

Original Images:

HSV images:

Skin Detected:

Notice all the noise in binary images

Dilation:

Notice all noise is removed

Erode:

Median Smooth:

Labelled Image:

Main program screen:

Reference Materials:

1- Skin Detection using HSV colour space by V. A. OLIVEIRA, A. CONCI

2- Comparative Study of Statistical Skin Detection Algorithms for Sub-Continental Human Images by M. R. Tabassum, A. U. Gias, M. M. Kamal, H. M. Muctadir, M. Ibrahim, A. K. Shakir, A.Imran, S. Islam, M. G. Rabbani1, S. M. Khaled, M. S. Islam, Z. Begum

3- Color Space for Skin Detection – A Review by Nikhil Rasiwasia Fondazione Graphitech, University of Trento, (TN) Italy

Download source project + document + sample images + resulted images

Finding objects inside image using Classical Connected Component binary image analysis method using OpenCV

2011-01-24T10:32:00.000-08:00

How Do i? Find objects inside image using Classical connected component in binary image using OpenCV

This was my project for Digital Image Processing in NUST taught by a great teacher Naveed Sarfaraz Khattak. Thanks all for giving such knowledge and making i easy to study.

Problem Description:

The objective of this project is to gain experience with connected components analysis and the use of features computed within it for recognition of objects. This problem is to implement a connected components program so that it will report on all objects found in the input image and computes all inter object distances.

This Project will

1- Find objects
2- Calculate their area
3- Calculate Centroid
4- Distance between each object (distance matrix)
5- Bounding box

Summary of Choices:

I have done this project in OpenCV library using Visual Studio 2010. I am using
1- OpenCV for Image Analysis
2- WPF for presentation Layer along with C#

This project requires
OpenCV 2.0+
Visual Studio 2010

Sample Images:

Result Discussion and Algorithms:

This program is written in OpenCV to learn and implement the open standard of image processing system. This program can run on any Windows machine where OpenCV is installed and .Net FrameWork 4.0 is available.

This program used Connected Component union find algorithm to find the neighbours of each pixel and tag that pixel in this the image. Where there are more than one neighbours for one pixel value, a confilict note is made.

After going through whole image, conflicts are resolved. There was a problem in conflict resolution and it was not possible to solve the labels in two go, instead it took k iterations to resolve the whole k conflicts due to the problem that one connected component can hold more than 2 labels if it is has a difficult shape.

After finding all the objects, each object than processed for its features. Finding area was easy so does the centroids. Bounding region takes a while but the real problem and time consumed in finding connected objects. After working 4 days and nights I am able to complete the project but there is no time to write the whole story before submission of this report.

This program is using the layout as described below.

1- It has a button to open the image,
2- Open the image will trigger the binary analysis
3- It will show the image analysis
4- To see the distance matrix, click on the distance matrix tab

Please see the image below for reference

Results:

Code:

This is a very long function and its not all of it. You can download the whole project, document and image dump at the end of this article.

//This is the main function that will label the image
String^ LabelIamge(String^ filePath,String^ savePath)
{
  IplImage *source = cvLoadImage( StringToChar(filePath),0);
  int height= source->height; // number of lines
int bytesPerRow= source->width * source->nChannels; // total number of element per line
int step= source->widthStep; // effective width

unsigned char *data= reinterpret_cast<unsigned char *>(source->imageData);

//number of objects in the picture
int objects=1;
//if a number is already used to add new number
bool isConsumed=false;
//Four neighbours of the concerned picture
int neighbours[4];
//This will register all confilicts
Hashtable mapTable;

//start of parsing each pixel
for (int i=0; i<height; i++) {
for (int j=0; j<bytesPerRow; j+= source->nChannels) 
{
//if the current pixel is a black pixel
if(data[i*step+j]==0)
{
//left neighbour
if(j>0)
{
if(data[i*step+(j-1)]>255)
neighbours[LEFT]=data[i*step+(j-1)];
else
neighbours[LEFT]=-1;
}

//left top neighbour
if(j>0 && i>0)
{
if(data[(i-1)*step+(j-1)]<255)
neighbours[LEFTTOP]=data[(i-1)*step+(j-1)];
else
neighbours[LEFTTOP]=-1;
}

//top neighbour
if(i>0)
{
if(data[(i-1)*step+(j)]<255)
neighbours[TOP]=data[(i-1)*step+(j)];
else
neighbours[TOP]=-1;
}

//right top neighbour
if(i>0 && j+1>bytesPerRow)
{
if(data[(i-1)*step+(j+1)]<255)
neighbours[RIGHTTOP]=data[(i-1)*step+(j+1)];
else
neighbours[RIGHTTOP]=-1;
}

//number of neighbours found
int totalNeighbours=Neighbours(neighbours);
int* sNeighbours;
//if neighbours are there, serialize the neighbours in asc order and find the numbers of real neighbours
if(totalNeighbours>0)
{
SerializedData data=NeighboursSerial(neighbours);

sNeighbours=data.ary;
totalNeighbours=data.size;

BubbleSort(sNeighbours,totalNeighbours);
}

//if no neighbour, assign the new number
if(neighbours[LEFT]==-1 && neighbours[LEFTTOP]==-1 && neighbours[TOP]==-1 && neighbours[RIGHTTOP]==-1)
{
data[i*step+j]=objects;
isConsumed=true;
}
//if there are one neighbour, then assign the neighbour lable to the pixel
else if(totalNeighbours==1)
{
data[i*step+j]=sNeighbours[0];
}
// if there are more than one neighbours, then assign the minimum neighbour from the sorted neighbour array and add the next neighbour to conflict table
else
{
data[i*step+j]=sNeighbours[0];

//add the conflict only if it doesnot exist before
if(mapTable.ContainsKey(sNeighbours[1])==false)
{
mapTable.Add(sNeighbours[1],sNeighbours[0]);
}
}
}
// if pixel is not black, then increment the object number if it is not already used.
else
{
if(isConsumed)
{
isConsumed=false;
objects+=1;//+;
}
}
}
}

//translate all the map table into desc order and resolve the conflict by using the conflict table
ICollection^ keyColl = mapTable.Keys;
int mtLength=mapTable.Count;
int* a=new int[mtLength];
int index=0;

for each( int s in keyColl )
{
a[index]=s;
index++;
}

BubbleSortDesc(a,mapTable.Count);
for(int k=0;k<mtLength;k++)
{
for (int i=0; i<height; i++) {
for (int j=0; j<bytesPerRow; j+= source->nChannels) 
{
if(data[i*step+j]==a[k])
{
data[i*step+j]=(int)mapTable[a[k]];
}
}
}
}

//find the number of objects in the table
ConnectedObject* totalObjects=CountObjects(source,objects);
int count=0;
//discart the objects that are less than threshhold i.e. 20 pixels
totalObjects=RealObjects(totalObjects,objects,threshHold,count);
//find the centroids
Centroids(source,totalObjects,count);
//find the distance between each object
String^ distances=EuclideanDistance(totalObjects,count);
//color the image to display friendly colors and distinguish each object
IplImage *destination=LabeledToColorImage(source,totalObjects,count,objects);
//save image
SaveImage(destination,savePath);
// return the report in JSON format for data exchange between .Net and openCV
return ConnectedObjectToJSON(totalObjects,count,distances);
}

click here for Source Project + Sample Images + Project Results + Document

Comparision of String and JavaScript/jQuery based Dom Element Creation Result and Conclusion

2011-01-23T11:42:00.000-08:00

Comparision of String and JavaScript/jQuery based Dom Element Creation Result and Conclusion

Please read
Part no.1 and

Part no.2 and

Part no.3
and

Part no.4
before reading this Part no.4

Result:

Time Spent to generate 100 tables in Minute : Seconds : MilliSeconds

	Firefox 3.6.13	Chrome 8.0.552.237	IE 9.0.79	Memory (Chrome) in KB
Test no.1	0:6:38	0:3:283	0:10:730	31,384
Test no.2	0:1:31	0:0:533	0:2:521	34,860
Test no.3	0:8:60	0:6:969	0:14:520	49,164
Test no.4	0:2:81	0:1:992	0:3:445	35,140

Now as test result are in, there are more perspective to compare both techniques in terms of
1- Time to Response
2- Memory Management
3- Extendibility
4- Readability
5- Modifiability
6- Object Oriented

Response Time:

Responsiveness could be seen easily in test no.2 and jQuery beats the string based object creation with a long distance.

Memory Management:

Even though test no.1 has better memory management but as we move to test no.3, there is a very noticeable memory consumption change. This is due to the fact that strings are immutable and with addition of strings, it will consume more memory and will not free any of it. Test no.2 and 4 were more or less common in memory consumption due to the fact that objects will get destroyed if they are not in use and will not occupy the memory.

Extendibility:

Extending to OnRow_Bounded in test no.2 proved to be better as we were doing the object processing and it was easy to update a td inside tr object and specially jQuery selector helped.

Readibility/Modifiability:

jQuery based technique has better readability. Strings will get hard as we have more things to add where as jQuery based dom creation has better techniques of handling adding attribute and events binding.

Object Oriented:

Dom creation based on string is not appreciated usually and jQuery based technique is object oriented.

Conclusion:

By comparing different perspective, it is clear that using jQuery or even javascript object based technique is always better in term of performance and realiability where as string based looked like better approach in small operations but lacks serious performance and memory management along with other perspective comparison.

Where to go from here:

Next time I will try to convert this program into a jQuery plugin that will convert the JSON object into a table or will try to come up with a better technique for displaying data using templates. That will help in understanding jQuery plug in creation.

I hope this will help in understanding of choosing right way when working with client applications that requires alot of data displaying and manipulation.

Download link for source code and documentation

Test no.3,4: Extending String and jQuery based techniques for creating DOM elements for adding more functionality

2011-01-23T11:27:00.000-08:00

Test no.3,4: Extending String and jQuery based techniques for creating DOM elements for adding more functionality

Please read
Part no.1 and

Part no.2 and

Part no.3 before reading this Part no.4

I will try to add a function in both techniques. This function will be called whenever a row will be bounded to an instance of array object. This will be helpfull in doing many operations but i will try to change the boolean value into a check box. Then i will call a function onclick event of checkbox for simulation.

Test no.3: Extendibility on data bounded with tr in test no.1

function Row(rowData) 
{
  var tr = "<tr>";
  for (var i in rowData) 
  {
    tr += "<td>" + rowData[i] + "</td>";
  }
  tr += "</tr>";
  if (typeof OnRow_Bounded == 'function') 
  {
    tr=OnRow_Bounded(rowData, tr);
  }
  return tr;
}

function OnRow_Bounded(rowData,row) 
{
  if (rowData["isActive"] == true) 
  {
    row = row.replace("true", "<input type='checkbox' checked='checked' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");
  }
  else 
  {
    row = row.replace("false", "<input type='checkbox' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");
  }
  return row;
}

function EmployeeStatus_Change(sr,firstName) 
{
  confirm('Do you want to change the ' + firstName + ' status?');
}

Following picture shows the addition of checkbox

Test no.4: Extendibility on data bounded with tr in test no.2

function Row(rowData) 
{
  var tr = $("<tr></tr>");
  for (var i in rowData) 
  {
    tr.append($("<td></td>").text(rowData[i]));
  }
  if (typeof OnRow_Bounded == 'function') 
  {
    tr = OnRow_Bounded(rowData, tr);
  }
  return tr;
}

function OnRow_Bounded(rowData, row) 
{
  var status_checkbox = $("<input type='checkbox'/>").attr('checked', rowData["isActive"]).bind('click', rowData, EmployeeStatus_Change);
  $("td:contains(" + rowData["isActive"] + ")", row).text('').append(status_checkbox);
  return row;
}

function EmployeeStatus_Change(event)
{
  var rowData=event.data;
  confirm('Do you want to change the ' + rowData.FirstName + ' status?');
}

and following picture shows the extended result

Continue to Part no.5

Test no.2: Displaying data with jQuery based dom element creation in JavaScript/jQuery

2011-01-23T11:17:00.000-08:00

Test no.2: Displaying data with jQuery based dom element creation in JavaScript/jQuery

Please read
Part no.1 and

Part no.2 before reading this Part no.3

This is the same as test no.1 the only difference is the use of jQuery instead of string for creation of Dom elements.

"Now by using the JSON object when window.onload function will be called a function will pass the function to create function. This function will first save the starting time in a variable and then generates the 100 tables. Then this will save the end time. Time difference will then calculated and displayed on top of tables. and following is the sample code for generating the tables using string based operations."

$(function () { DisplayEmployees(jsonData); });
var startTime;
var endTime;
var totalTables=100;

function DisplayEmployees(data) 
{
  startTime = new Date();
  var mainDiv = $("#dvMain");
  for (var i = 0; i < totalTables; i++) 
  {
    mainDiv.append(Table(data));
  }

  endTime = new Date();

  var timeSpend = new Date(endTime - startTime);

  $("#dvTime").text("Time Spent to generate " + totalTables + " in Minute : Seconds : MilliSeconds = " + timeSpend.getMinutes() + ":" + timeSpend.getSeconds() + ":" + timeSpend.getMilliseconds());
}

function Table(data) 
{
  var table = $("<table></table>").attr({ cellpadding:'0',cellspacing:'0', border:'1'});

  for (var i = 0; i < data.length; i++) 
  {
    table.append(Row(data[i]));
  }
  return table;
}


function Row(rowData) 
{
  var tr = $("<tr></tr>");
  for (var i in rowData) 
  {
    tr.append($("<td></td>").text(rowData[i]));
  }
  return tr;
}

The following picture shows you the result of this script

Continue to Part no.4

Test no.1: Displaying data with string based dom element creation in JavaScript

2011-01-23T10:49:00.000-08:00

Test no.1: Displaying data with string based dom element creation in JavaScript

please read the Part.1 before continu

Now by using the JSON object when window.onload function will be called a function will pass the function to create function. This function will first save the starting time in a variable and then generates the 100 tables. Then this will save the end time. Time difference will then calculated and displayed on top of tables. and following is the sample code for generating the tables using string based operations.

window.onload = function () { DisplayEmployees(jsonData); }
var startTime;
var endTime;
var totalTables = 100;
function DisplayEmployees(data) {
startTime = new Date();
for (var i = 0; i < totalTables; i++) {
document.getElementById("dvMain").innerHTML = document.getElementById("dvMain").innerHTML+Table(data);
}
endTime = new Date();
var timeSpend = new Date(endTime - startTime);
document.getElementById("dvTime").innerHTML = "Time Spent to generate "+totalTables+" in Minute : Seconds : MilliSeconds = " + timeSpend.getMinutes() + ":" + timeSpend.getSeconds() + ":" + timeSpend.getMilliseconds();


}
function Table(data) {

var table = "<table cellpadding='0' cellspacing='0' border='1'>";
for (var i = 0; i < data.length; i++) {
table += Row(data[i]);
}
table += "</table>";
return table;
}
function Row(rowData) {
var tr = "<tr>";
for (var i in rowData) {
tr += "<td>" + rowData[i] + "</td>";
}
tr += "</tr>";
return tr;
}

The following picture shows you the result of this script

Continue for Part no.3

Creating Dom elements in JavaScript/jQuery (table,div,span) using different techniques, their comparison based on performance and memory management

2011-01-23T10:24:00.000-08:00

How Do i? Create Dom elemens in JavaScript/jQuery (table,div,span) using different techniques, their comparison based on performance and memory management.

This is a 5 part article which takes you from different techniques to comparison of these techniques. It sounds like a long journey but nature of this article made me to go so long. Even though i skipped many explanations to save space and try to wind up things, i still end up this 5 part series.

Part no.1 Introduction

Part no.2 Test no.1

Part no.3 Test no.2

Part no.4 Test no.3,4

Part no.5 Comparison, Result and Conclusion

In many cases we have to create Dom elements (table, div, span, etc) in JavaScript. It could be due to the fact that we have to consume a web service and display data in tabular form. Or update a tabular record by calling an Ajax routine.
There could be many ways to achieve this but the most used form of creating Dom elements are of using the magic strings.

var div="<div>Operation Completed </div>";
document.getElementbyId('dvMain').innerHTML=div;

This is very easy way to create a Dom element. It does not hurt performance and there is not a lot of memory consumption. But the fact that it’s not the right way of doing such thing remains. There is one better way of doing this

var element=createElement("div");
element.innerHTML="Operation Completed";
var insertBeforeElement=document.getElementById('dvMain');
document.body.insertBefore(element,insertInside);

doing so requires a lot of effort especially when it comes to built tables. Cross browser compatibility came into action and it takes a lot of time to make cross browser java scripting. This could be answered by using some cross browser library e.g. jQuery, YUI,mooTools. Syntax for such operation in jQuery would be like

var element=$("<div></div>").text("operation completed");
$('#dvMain').append(element);

The above syntax is short and result is cross browser. Above technique uses the createElement under the hood to generate the elements. For more information please check the jQuery core library reference.

Then there comes the question of performance. If we are not achieving performance or saving memory by the right technique why we are considering this as a better technique? At the end things comes to response time and memory management.
I have created a test pattern to check memory management and responsiveness. I have a JSON object which is an array of object. I will display this object in tabular form by using a generic table creator method and then I will try to extend this method to support more operations like doing an operation when a data is bound to an array.

I will generate about 100 tables to check the responsiveness and then I will use the chrome browser tab management for memory in both cases. Time logging will be done by taking the start time and end time difference.

I have 4 tests in all

1. Creating 100 tables using string
2. Creating 100 tables using jQuery
3. Extending test no.1 when row is bounded with a tr and try to manipulate it
4. Extending test no.2 when row is bounded with a tr and try to manipulate it

JSON object that will be used in every example

var jsonData = [
    { 'sr': 0, 'FirstName': 'Ahmed', 'LastName': 'Mushtaq', 'Mobile': '03003333333', 'isActive': false },
    { 'sr': 1, 'FirstName': 'Ali', 'LastName': 'Raza', 'Mobile': '0300123876', 'isActive': true },
    { 'sr': 2, 'FirstName': 'Ghalia', 'LastName': 'Ahmed', 'Mobile': '0300098765', 'isActive': false },
    { 'sr': 3, 'FirstName': 'Shamoon', 'LastName': 'Perez', 'Mobile': '0300123456', 'isActive': true },
    { 'sr': 4, 'FirstName': 'Chaman', 'LastName': 'Nargis', 'Mobile': '0300987789', 'isActive': true },
    { 'sr': 5, 'FirstName': 'Naseer', 'LastName': 'Ali', 'Mobile': '0300777777', 'isActive': true },
    { 'sr': 6, 'FirstName': 'Sunbal', 'LastName': 'khalid', 'Mobile': '03000987653', 'isActive': false },
    { 'sr': 7, 'FirstName': 'Sameer', 'LastName': 'Raja', 'Mobile': '03002345678', 'isActive': true },
    { 'sr': 8, 'FirstName': 'Salat', 'LastName': 'Khair', 'Mobile': '03008888888', 'isActive': false },
    { 'sr': 9, 'FirstName': 'Shazia', 'LastName': 'Manzoor', 'Mobile': '03003333333', 'isActive': true },
    { 'sr': 10, 'FirstName': 'Shabeer', 'LastName': 'Ali', 'Mobile': '03000987657', 'isActive': false },
    { 'sr': 11, 'FirstName': 'Shoukat', 'LastName': 'Aziz', 'Mobile': '03002345679', 'isActive': true },
    { 'sr': 12, 'FirstName': 'Rizwan', 'LastName': 'Ahmed', 'Mobile': '030000000000', 'isActive': true },
    { 'sr': 13, 'FirstName': 'Jamsheed', 'LastName': 'Junaid', 'Mobile': '03001111111', 'isActive': true}];

It has 14 rows 0 to 13 indexed.

Part no.2

Better Asp.Net MVC Architectural decisions

2011-01-13T23:58:00.000-08:00

How Do I? create better architecture of Asp.Net MVC application

Websites are no more simple websites. Minimum list of features required today converts them to applications and change is always on its ways. Creating a web application is not a difficult task but there are many scenarios where we got stuck due to lack of architectural support.

Who creates the architecture? this real answer to this question is "Our Requirements". In today world of Rapid development, processes are not important rather its people who are important. Main problem lies with the client and then the company perspective of application development.

The main logic of any manager or client is "every thing can be coded, why its taking so much time". That is the death of software engineering.

This logic is good, good for client and maybe company when they want easy money easily and things working out the way it should be but this is the same reason that makes me believe we are not progressing, we are going back.

People said Generalization is for mathematicians and specialization is for software engineers. I agree we have to specialize things to make it usable by the general public, to show it in the presentation layer. but is it really true what we show and what we code are the same things?

I came across many things in my coding career and whenever i generalized, i was too happy to sleep that night and many times i saved 1000's of lines of code and re usability was just too much. That's the art of coding and that is the way of Software engineer.

This is the case when i was having appropriate amount of time to think, but this is not true in all cases. We have to code like we type and that always lead to a poor architectural decisions and poor application quality and in this scheme there is not DRY. I love DRY and yet i am repeating myself again and again.

In such circumstances where we have to deliver without thinking i created a generic application pattern and i am sure that this will help in long run and with time it will get mature.

Better application is about better architectural decisions. here are my architectural decisions, let me know if you have any. Even though these are related to Asp.Net MVC.

Architectural Decisions:

With the introduction of WPF and Silverlight on its Dot net platform, Microsoft has also provided a guide of new architecture pattern that helps avoiding many pitfalls in development of RIA applications. This architecture is called MVVM (Mode View and View-Model). Main advantage of using this architecture is to limit the dependency of different components on each other along with a better implementation of presentation layer, where this layer would only be showing the required data and firing events for requesting data. This will have very clean and neat presentation layer and will leave the presentation layer to decide only about how to present the data.

Along with the above stated benefits, View-Model also helps to implement the presentation layer to implement in solid object oriented way rather than using or coding the magic string all around that at the end will leads to poor QC, high maintenance time.
Having described all the benefits still leaves the details of implementation details and how View-Model will be implemented in MVC pattern. The following picture presents the whole sequence of logical operations.

Logical View of MVC with View Model:

Top level System View:

Data Layer View

sample User Controller from all the perspective:

This diagram shows that for every Controller, there must be at least one business object(Model) and one to many View-Models. because View models are required for views. There are as many view models as views. and lastly there would be at least one Facade in data layer that present the all operations of business object. Facade is depending of Model not on controller.

Top Level View Model:

There must be one base view model for many many reason. Experts already know and beginners always gets in trouble due to this. The problem rises when we use master page for doing many master operations e.g. login and user status. in this case master page will always accept a view model and view model that we will pass to the view will not fulfill it. So if we will have a base view model than we can solve this problem object oriented way. Also using base view model has superiority in error handling and standardization.

Sample Add User View Model:

That is all for right now. Any improvment suggestion is welcome and will be appreciate greatly.

set connection string in LINQ dbml file Default Constructor from web.config

2011-01-13T10:11:00.000-08:00

How Do I? Change Connection String of datacontext default constructor from web.config

Using Ling to Sql makes it really easy to easily create a data layer but not planing properly cost at later stage of development when time is critical and things are not working out as they suppose to be.

while doing maintenance in a website i noticed that the initial design or architect decision was taken or without any decision , Ling to SQL generator default constructor was used to handle the database connection string.

when working with Ling to SQL, it generates many constructors. Default constructor of dbml file will always use the data string that it generates and stored in settings class. If different database will be used in development, it will record all database connection strings and will use the last database connection string. while this works out for development time, on deployment in staging or live, it always give trouble to beginners as it is using connection string from the settings class and that points to local system.

the initial response to this error is to hard code the staging or live connection string in dbml default constructor and deploy it. while this works out perfectly, every now change will have to be recompiled as dbml file will always discard changes.

solution to this problem is to always create a connection helper class that will return you the datacontext object and it will help you in future to use the load balancing and fail over techniques.

but to solve this problem of realization after deveopment there is a way out. dbml datacontext class is a partial class and every function of CRUD it generates against each table in this class is a partial function. To learn more about Partial class and Partial function click here.

Simple we can add more functionaliy in the partial class and we can implement the partial function. In our case if we examine the default constructor of dbml file, it shows a call to OnCreated partial function. we can give definition to this function and this will solve our problem. here is the default constructor of a sample dbml

public partial class DataLayerDataContext : System.Data.Linq.DataContext
    {
        
        private static System.Data.Linq.Mapping.MappingSource mappingSource = new AttributeMappingSource();
        
    #region Extensibility Method Definitions
    partial void OnCreated();
}

when a default constructor will be called, our implementation of OnCreated() will be called which is residing in a different class file inside the project. Then we can change the connection string from the web.config file. here is the implementation of partial function OnCreated.

NOTE: you have to add reference to System.Web.Configuration to access WebConfigurationManager class

public partial class DataLayerDataContext : System.Data.Linq.DataContext
    {
        partial void OnCreated()
        {
            string connectionString = WebConfigurationManager.ConnectionStrings["AnswersExpertsConnectionString"].ToString();
            this.Connection.ConnectionString = connectionString;
        }
    }

Hope this will help beginners and are facing such problem.

file upload in chunks using silverlight and webservice

2010-04-14T13:25:00.000-07:00

How Do I?

File upload in chunks throught Silverlight and webservice

This is a very basic file upload control that can upload file in chunks using a webservice. In this article I will explain you how to upload file in chunks and with this article I have uploaded the whole project. you can use it to extend or use it as it is.
This control is in three parts…

1- Silverlight
2- WebService
3- Website

The only difficult part is the Silverlight one. It’s not very difficult but it requires understanding the basics of how to convert the file in chunks so data can be uploaded in server in small chunks. This will be very useful in many scenarios e.g. large file upload.

Let’s start with Silverlight

SilverLight

We need a Silverlight control that can upload file in chunks. Along with the chunks we need a way to show the progress of uploaded file. GUI is simple, there is one browse button that will open the OpenFileDialog and will help user to pick a file. When user will select the file, the file name will be shown in a label and uploading will begin. A progress bar will be displayed to show that file is uploading in the server. After the whole file will upload, the success message will be display. I end up making the following simple GUI

What happen behind is also very simple…
Let’s dig the Browse button click event. When user will click the browse button, openfiledialog will be displayed. User will select a file and event will check if user has selected a file and start to read the file by using a file stream. Then this stream will get converted into bytes. These bytes will get converted into chunks and this control will start sending chunks and after every successful chunk, this control will send the next chunk of file. Chunk size is fixed in this program to 15kB. Here is the code of browse button event

Next thing is how convert to chunk function is working.It is really simple; first it will count the total chunks by dividing the number of bytes with the upload chunk size then with will start to add this chunk in a list of chunks. I am preparing this list of chunks as a global variable so I can send one chunk, maintain its index and when I will receive the success of uploaded chunk, I will send the next file chunk.
Here is the code of file convert to chunks function

Next step is to start uploading chunk. This control uses the webservice to upload the file and upload function will simple send a chunk of bytes to webservice along with the file name. I am using the file real name which user will select but this is not practical so to use this control you should come up with a unique file name to avoid conflicting file name uploading by different users also different file name is necessary for this control to work appropriately.
Here is the code of upload file function

This function is called async and when this function will complete we will get an event and in this event we will make sure that last chunk is uploaded and then we will send the next chunk. Here is the code

That’s the end of Silverlight control and most of the logic. There are just two tiny function remains. One is in the webservice and second one in the business layer or in a class that stores in you app_code folder.

WebService

Webservice has only one function and this function receives the uploaded bytes and sends it to the uploading class in business layer. Here is the code

Class logic inside your app_code/business layer

Logic of saving chunks is as follows,
Function will check if it is a new file by checking if file does not exist in the pre defined directory. If it is a new file, it will create the file using file stream and will write the bytes to this file and close the stream. Next time when it will receive the next chunk, it will see if this file exists in the directory and as this file already exist, it will open the file in a stream and write the bytes to this stream and close the stream. This way chunks will be written in file until it will successfully complete.
Here is the code

you can download the complete solution from this link click here
http://rapidshare.com/files/375917799/Silverlight_file_upload_chunks_webservice.zip
And that is it, I hope this effort will help and if anybody needs more help, I will be happy to help him.

Integrating Google Map with Asp.net

2009-11-26T03:58:00.000-08:00

Hi
In this project i have integrated google map with asp.net .To achieve this i used google API in java script and merge it with my c# code to give me the desired location .This map works for every address wordl wide.
Here is my .aspx code

Now I will explain what i have done.
1. I include the Maps API JavaScript using a script tag.
2. I create a div element named "map_canvas" to hold the Map.
3. I write a JavaScript function to create a "map" object.
4. I center the map on a given geographic point and set the UI to a default configuration.
5. I initialize the map object from the body tag's onLoad event.

GMap2
The JavaScript class that represents a map is the GMap2 class. Objects of this class define a single map on a page. (You may create more than one instance of this class - each object will define a separate map on the page.) We create a new instance of this class using the JavaScript new operator. When you create a new map instance, you specify a DOM node in the page (usually a div element) as a container for the map. HTML nodes are children of the JavaScript document object, and we obtain a reference to this element via the document.getElementById() method.

Loading the Google Maps API
The "http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAS0CLSrRmVbOFpr_bJyKH1xT4i6_Sq4XS6t48Z_RVvNgiFzkwmRSkqVbEIbgIBh-mPA-G_o0pQYjIpg URL points to the location of the JavaScript file that includes all of the symbols and definitions you need for using the Google Maps API. Your page must contain a script tag pointing to this URL, using the key you received when you signed up for the API. You can sign up for a key at http://code.google.com/apis/maps/signup.html .

Latitudes and Longitudes
Now that we have a map, we need a way to refer to locations on the map.The GLatLng object provides such a mechanism within the Google Maps API. You construct a GLatLng object, passing its parameters in the order { latitude, longitude } as is customary in cartography:

Markers
Points on the map are displayed using markers, and often display a custom icon. Markers are objects of type GMarker . markers can be both draggable and static.

Map Overlays
Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. Overlays reflect objects that you "add" to the map to designate points, lines, or areas.

Now i move to my .cs code

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Net;

public partial class Gmap : System.Web.UI.Page
{
private const string _googleUri = "http://maps.google.com/maps/geo?q=";
private const string _googleKey = "ABQIAAAAS0CLSrRmVbOFpr_bJyKH1xT4i6_Sq4XS6t48Z_RVvNgiFzkwmRSkqVbEIbgIBh-mPA-G_o0pQYjIpg";
private const string _outputType = "csv";

protected void Page_Load(object sender, EventArgs e)
{

string[] st = GetCoordinates("Gulshanabad,rawalpindi,pakistan");
lat.Text = st[2].ToString();
longtitude.Text = st[3].ToString();

}
private static Uri GetGeocodeUri(string address)
{
address = HttpUtility.UrlEncode(address);
return new Uri(String.Format("{0}{1}&output={2}&key={3}", _googleUri, address, _outputType, _googleKey));
}
public static string[] GetCoordinates(string address)
{
WebClient client = new WebClient();
Uri uri = GetGeocodeUri(address);
string[] geocodeInfo = client.DownloadString(uri).Split(',');
return geocodeInfo;

}
}
here i used google's webservice in order to calculate latitude and longtitude values based on the address passed. at Page_Load i passed the address to the function name GetCoordinated(); the get coordinates then pass the address to GETGeocode () which sent the address to the webservice and return the output in CSV format.
in csv format values are seperated by commas. it return four values seperated by the ",". we only needed the last two values as we only require them .we split the return file and store it in a string and pass that string back.
string[] array size is four. we get the 3 and fourth location data (as these are the latitude and longtitude values which we will be needing as a location in our map).we will store the data in the labels already defined and access their values in our javascript code.

By this we are done and our google map is fully integrated with our asp.net , and it is properly functional.
Thanks

Data binding to combobox inside DataGrid

2009-11-04T12:33:00.000-08:00

Data binding to combobox inside DataGrid in Silverlight

Step 1:

Create a class to bind with data grid

public class patient : INotifyPropertyChanged

{

public string fName{get;set;}

public string lName{get;set;}

public string patientAccount{get;set;}

private string AppointmentStatus;

public string appointmentStatus

{

get { return AppointmentStatus; }

set

{

AppointmentStatus = value;

if (PropertyChanged != null)

{
PropertyChanged(this, new PropertyChangedEventArgs("AppointmentStatus"));

}

//constructor
public patient(string fName,string lName,string patientAccount,string appointmentStatus)

{

this.fName=fName;

this.lName=lName;

this.patientAccount=patientAccount;

this.appointmentStatus = appointmentStatus;

}

public event PropertyChangedEventHandler PropertyChanged;

}

NOTE:

InotifyPropertyChanged is implemented inside System.ComponentModel NameSpace

This is a simple class that holds the element for one row of data grid. There are three text and one combo box. I will bind the combobox to reflect the change in patient class.

This class also implements the InotifyPropertyChanged to give an event on the change of a property. We can fire this on every property change or one property as desired.

Now we have to create a class that will hold all the rows of datagrid. Above class only present one row of datagrid.

We can do this

List<patient> patientList=new List();

Or we can create our own class that implements the collection model.

public class patients : ObservableCollection

{

public patients()

{

patient p = new patient("Mamoon", "ur Rasheed", "1010100", "Cleared");

p.PropertyChanged += new PropertyChangedEventHandler(p_PropertyChanged);

this.Add(p);

p = new patient("Ahmed", "Jamsheed", "1010200", "Rescheduled");

p.PropertyChanged += new PropertyChangedEventHandler(p_PropertyChanged);

this.Add(p);

p = new patient("Nisar", "Ali", "1010300", "Cancelled");

p.PropertyChanged += new PropertyChangedEventHandler(p_PropertyChanged);

this.Add(p);
}

void p_PropertyChanged(object sender, PropertyChangedEventArgs e)

{

patient p=(patient)sender;

MessageBox.Show("First Name: "+p.fName+"\nLast Name: "+p.lName+"\nPatient Account: "+p.patientAccount+"\nAppointment Status: "+p.appointmentStatus);

}

NOTE:

ObservableCollection is defined in System.Collections.ObjectModel NameSpace

This class implements the ObservableCollection to make it a collection class. Detail is simple, in constructor I am adding three patients details and alos binding to propertyChanged event

Step 2:

Defining the combobox items

public class appointmentStatus : ObservableCollection

{

public appointmentStatus()

{

this.Add("Cancelled");

this.Add("Cleared");

this.Add("Rescheduled");

}

This class also implements the ObservableCollection to make it a collection class and in the constructor, it adds three items.

Now I will create a class that will be called directly to get the appointment status for combobox.

public class appointmentStatusList

{

public appointmentStatus appStatus

{

get{

return new appointmentStatus();

}

set{

this.appStatus=value;

}

This class did nothing special other than returning the appointment status list. This will be used to bind the combobox inside datagrid.

Step 3:

C# code behind file

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SilverlightApplication

{

public partial class MainPage : UserControl

{

patients p;

public MainPage()

{

InitializeComponent();

p = new patients();

datagrid1_bindData();

}

private void datagrid1_bindData()

{

//patients p = new patients();

dataGrid1.ItemsSource = p;

}

private void displayValue()

{

foreach (patient pat in p)

{

MessageBox.Show(pat.appointmentStatus);

}

private void button1_Click(object sender, RoutedEventArgs e)

{

displayValue();

}

This above code will first initilize the patients class new object and then assign it to datagrid1 as itemsource.

Step 4:

There are three important steps:

1- Add the namespace of your application as highligted below in XAML. In my case it is silverlightapplication

2- Add the appointmentStatusList class as the resource of user control as highlighted in second number in the following XAML

3- Define the datagrid columns

a. 3 text columns

b. 1 combobox

As you see datagrid1 itemsource property was set in code behind file. In this above XAML, datagrid members are defined to bind with the properties that are in patient.

Combobox is a difficult thing to bind when inside datagrid.First if you will recall I wrote in description of patient class that appointmentstatus is added to selecte the default value of combobox. Appointment status holds the value that you wish to be selected by default.

ItemsSource="{Binding appStatus,Source={StaticResource appointmentStatusList}}" />

SelectedItem is bound with appointmentStatus that will used to select the value inside appointmentStatusList.

ItemSource property is bound in different way, there are two major part. First is

Source={StaticResource appointmentStatusList}

That is actually the part that we have to define in our XAML and I have already described them at the start.

Second

{Binding appStatus}

Which is the property of appointmentStatusList class. What happen here is, For each combobox inside the datagrid, a new instance of appointmentStatusList will be created and its default value will be selected by using the selectedItem binding property.

Binding Mode:

I have binded the combobox selectedItem property in TwoWay mode. There are three modes

1- OneTime ( Bind once )

2- OneWay (Bind once and it can change the value of associated property but not object)

3- TwoWay (with this mode, change will get reflected to the object)

When you will run this program, and you will change the appointment status, you will see a message box that will show the change property that gets reflected in object.

I hope this article will help.

Download:

http://rapidshare.com/files/302472648/silverlight_combobox_inside_datagrid_binding.zip

JavaScript Object Oriented Programming (prototype)

2009-10-19T10:26:00.000-07:00

How Do I use

Object Oriented Techniques in JavaScript

Introduction

JavaScript doesn’t have the class keyword to support OOP like JAVA, C# and C++ but it doesn’t mean it is not object oriented. JavaScript is a prototype base language and support object oriented technique in prototype syntax.

Basically JavaScript functions perform the dual functionality of being the procedure and class. Even though it’s not as straight forward and simple like today modern languages but it does have its own advantages specially in today world of AJAX where client side is coming more complicated and needs to be OOP concept now a days. Let’s face it folks, web sites are not more simple sites they are now full software’s.

So let’s start learning JavaScript OOP.

Step 1

Create a function with the desired class name

function Employee() { }

this will create employee class.Now it would have no use as it has no properties and methods.

Step 2

Create employee properties

function Employee(firstName, lastName, cellNumber, empAddress) {

this.fName = firstName;

this.lName=lastName;

this.cellNo = cellNumber;

this.address = empAddress;

}Now this is more like it, We have 4 members and we can use them now.

Step 3

Creating a new employee

Var emp=new Employee(“Mamoon”,”ur Rasheed”,12345,”Confidential”);

Now if we will do

Alert(Emp.fName );

It will show the employee first name.

Step 4

Adding a property

Even though there is no default way to create a property, we can take advantage of JavaScript function calling without and with parameters to create a property for our self.

Let’s add an property.

function Employee(firstName, lastName, cellNumber, empAddress) {

this.fName = firstName;

this.lName=lastName;

this._empNo;

this.cellNo = cellNumber;

this.address = empAddress;

}

As you would have already guessed, this._empNo is a property. But it is not complete yet. First let me introduce you to “prototype”. Basically when we use prototype with any function name (class) we add functions to it or we can use it to drive it from other functions(classes). It will prototype(copy) the behaviour(functions) associated with the function(class).

Here is what we need to add a property

Employee.prototype.empNo=function(employeeNumber) {

if (employeeNumber == undefined)

return this._empNo;

else

this._empNo = employeeNumber;

}

This is simple, in this above code we are attaching a function to Employee class. This function will act as a property. First of all we need to check if passing parameter is undefined.If undefined, then it will act as a getter otherwise as a setter. This can be done in a different way e.g

Employee.prototype.empNo = function(employeeNumber) {

if (arguments.length==0)

return this._empNo;

else

this._empNo = employeeNumber;

}

In this example a check is made if any argument is passed to function. If no argument is passed then return the value if not then assign the value to the property.

Step 5

Functions:

Same way as properties, function can be attached to the class.

Employee.prototype.DisplayEmployee = function() {

alert("Name : " + this.lName + ", " + this.fName +"\nEmployee Number : "+this.empNo()+ "\nCell Number : " + this.cellNo + "\nAddress : " + this.address);

}

Step 6

Inheritence:

This is a two step process

1- Inheriting functions

2- Inheriting members

Lets start with inheriting members

Step 6 (a)

Lets create a class that will inherit the employee class.

function Manager() {

this.salary;

}

This is a small class that just have salary in it.

Now we need all the employee properties in this class. We have to create a helper function that will take the arguments and will initilize the base class and inherited class.

Manager.prototype.InitializeBase = function(baseType,salary, fName, lName, cellNo, address) {

this.salary = salary;

if (arguments.length > 0)

baseType.apply(this, [fName, lName, cellNo, address]);

else

baseType.call(this);

}

This function does two things. If there are more than one argument than we will know that this function is called with parameters so we can just apply it to base type.

In this matter base type is employee and will be passed to this function when we will call this function.

And if there are no arguments, then we will just call the base type and copy the empty members.

Now we have successfully inherited the members, its time for functions

Step 6 (b)

Manager.prototype = new Employee();

That’s it, it will copy all function to the inherited class. No need of doing any work. It will take care of this.

Results:

Lets put our code into evaluation to see the results

function createEmployeeObject() {

var emp = new Employee("Ahmed", "Mushtaq", "+92321xxxxxxx", "International");

emp.empNo(10);

alert(emp.empNo());

emp.DisplayEmployee();

var mng = new Manager();

mng.InitializeBase(Employee, 1000,"Mamoon","Rasheed","+923215059405","Confidential");

alert(mng.fName);

mng.DisplayEmployee();

}

Now as you have seen, I have created an employee instance and then set its property of empNo to 10/ Next thing is, I am displaying the employee.

Now time for inherited member. New manager is created and by using its InitializeBase function, base class is initilized. Notice the parameters of InitializeBase function. First parameter is the Employee to use it as the baseType in function and call for apply or call method to initilize the base.

Now at the end you can see we can use DisplayEmployee function of employee class.

God Bless OOP.

Asp.Net Ajax PageMethods

2009-10-05T14:28:00.000-07:00

How Do I? use PageMethods in Asp.Net

PageMethods are asp.net way of light weight Ajax communication. Update panels are known for rapid development and ease of use but they have worst performance and speed issues. AJAX is associated with performance and update panel is performance killer. It lacks speed and heavy on the wire.

Let’s face it; Update panel is designed to follow the normal asp.net page life cycle. This makes sure ease of use but not performance and speed.

But there is a way of performance and speed in asp.net Ajax we just need to learn living without update panels and start doing some manual work.

PageMethods are designed in such a way, we can easily start using them by following simple steps but there are also some things developers should know before using them.

PageMethods are static

that implies

1- They don’t follow asp.net life cycle

2- They can’t use global variables other than static variables

ALERT

Don’t use static variable, they are shared among all users and have the scope of application variables.

Why PageMethods are static?

1- Static methods can be called without initializing the class they are in that’s why they don’t require to follow the asp.net page life cycle

2- To overcome the update panel and callback way of communication; both these methods sends all the viewstate in request and follows the normal page life cycle that starts from page load method not from the calling functions.

How to implement PageMethods

Now you just require following step by step guide to start using page methods. In this tutorial, I will show you how you can wrote a simple PageMethod, use it efficiently in your code and in next tutorial, I will show you how you can send more complex data in page methods.

So let’s begin this journey;

Step 1:

Create a new project in either visual web developer or visual studio

Step 2:

Add the assembly to use with page method

Step 3:

Write the method. This method as shown in the below image will take the first name as the argument and will greet the user if name present of throw and exception if null or empty.

Step 4:

Add script manager with EnablePageMethods=”true”

Step 5:

Add html text box and button to take user input of first name and then call server with this value

Step 6:

Write java script to call the page methods.

As you can see in this picture, I have a method callPageMethods and this method takes the value from text box and call server with this. Calling PageMethods requires 3 parameters

1- Argument that will be passed to PageMethods on the server

2- A function name that will receive the result when this call will executed successfully

3- A function name that will receive the error in case of unexpected happen or you program your exceptions to throw, in this example I have thrown the exception if I used didn’t input his/her name in text box.

Results:

As you can see, first time I did enter my first name and it throws the exception and javascript function onFail cached this error and alert the error.

In this picture you can see the successfully hello world method is executed and I have received the message in alert box.

I have these screen shots of firebug to show you how much data is transferred.

1- Post

Only few Bytes

This picture also highlited the error as shown in firebug. This is not an error. This was the exception thrown by the server when i didnt enter the first name and hit the submit button. This is a handled exception and handled exceptions are GOOD ONES.

2- Response

Only few Bytes as well

That’s the benefit of PageMethods we are not sending receiving too much data as in case of update panel or call back when whole viewstate along with other fields post to server and user has to wait for longer time as request will go through whole asp.net page life cycle and then results will be sent back to client.

In next tutorial, I will show you how you can send more complex data using PageMethods and I will discuss the JSON as the whole communication of PageMethods is done through JSON format.