Sunday, June 24, 2007

Image-Based Bot Detector

Image-Based Bot Detector is a variant of image-based CAPTCHAs that uses human ability to recognize a distorted region on the image he never seen before.

Download Image-Based Bot Detector

Requires .NET Framework 2.0

Overview, help

In order to use it you have to set TemplateImageFolder property to relative virtual path of the template images folder - for example, "~/templates" and to add registration of HttpHandler in web.config.
<add verb="GET" path="ImageBasedBotDetector.ashx"
type="Marss.Web.UI.Controls.ImageBasedBotDetector, Marss.Web"/>
There are 3 types of predefined distortion (Stretched, Random, Volute) and user-defined (Custom) distortion. In order to use predefined distortion it needs to set DistortionType property. User-defined distortion can be used in derived classes with overriden DrawCustom method.

If you want to use template images that are placed elsewhere then a subfolder of your web application - for example, from database - you have to override GetTemplateImage method.

To check whether user passed the test IsValid property is used. Also user can be locked after a predefined number of unsuccessful attempts to pass the test (FailedAttemptsBeforeLocking property, default value is 5).

Public properties
TemplateImageFolderGets or sets template image folder.
FailedAttemptsBeforeLockingGets or sets the number of unsuccessful attempts before locking.
IsValidGets result of test passing.
IsLockedGets or sets value indicating where user is locked.
DistortionTypeGets or sets distortion type. Available types:
  • Stretched - image within distorted area is stretched.
  • Random - points within distorted area is mixed in a random way.
  • Volute - image within distorted area is volute.
  • Custom - custom distortion. Have to be used together with overriden DrawCustom method.
Public events
LockedOccurs when detector has been locked because of exceeding the failed attempts limit.
public event EventHandler Locked

Protected virtual methods
GetTemplateImageGets template image.
protected virtual System.Drawing.Image GetTemplateImage()
See example of usage.
DrawCustomDistorts specified rectangle of image in a user defined way. Have to be used coupled with DistortionType=Custom
protected virtual void DrawCustom(System.Drawing.Bitmap bitmap, System.Drawing.Image img, Rectangle distortedRectangle)
bitmap - the output image,
img - the template (input) image,
distortedRectangle - area on the image to be distorted.

Wednesday, June 6, 2007

Merging columns in GridView/DataGrid header

As necessity to show header columns in a few rows occurs fairly often it would be good to have such functionality in the GridView/DataGrid control as an in-built feature. But meanwhile everyone solves this problem in his own way.

The described below variant of the merging implementation is based on irwansyah's idea to use the SetRenderMethodDelegate method for custom rendering of grid columns header. I guess this approach can be simplified in order to get more compact and handy code for reuse.

The code overview

As it may be required to merge a few groups of columns - for example, 1,2 and 4,5,6 - we need a class to store common information about all united columns.
private class MergedColumnsInfo
// indexes of merged columns
public List<int> MergedColumns = new List<int>();
// key-value pairs: key = the first column index, value = number of the merged columns
public Hashtable StartColumns = new Hashtable();
// key-value pairs: key = the first column index, value = common title of the merged columns
public Hashtable Titles = new Hashtable();

//parameters: the merged columns indexes, common title of the merged columns
public void AddMergedColumns(int[] columnsIndexes, string title)
StartColumns.Add(columnsIndexes[0], columnsIndexes.Length);
Titles.Add(columnsIndexes[0], title);

Attribute Serializable is added in order to have a possibility to store information about merged columns in ViewState - it is required if paging or sorting is used.

That is the only additional action. Now the code usage.
.ascx file:
//for GridView
<asp:GridView ID="grid" runat=server OnRowCreated="GridView_RowCreated" ... ></asp:GridView>

//for DataGrid
<asp:DataGrid ID="grid" runat=server OnItemCreated="DataGrid_ItemCreated" ... ></asp:DataGrid>

Columns can be defined in design time or can be autogenerated - it does not matter and doesn't influence the further code. Merging also does not harm sorting and paging if they are used in the GridView/DataGrid.

.cs file:
//property for storing of information about merged columns
private MergedColumnsInfo info
if (ViewState["info"] == null)
ViewState["info"] = new MergedColumnsInfo();
return (MergedColumnsInfo)ViewState["info"];

protected void Page_Load(object sender, EventArgs e)
if (!IsPostBack)
//merge the second, third and fourth columns with common title "Subjects"
info.AddMergedColumns(new int[] { 1, 2, 3 }, "Subjects");
grid.DataSource = ... //some data source


Particular code for GridView:
protected void GridView_RowCreated(object sender, GridViewRowEventArgs e)
//call the method for custom rendering the columns headers
if (e.Row.RowType == DataControlRowType.Header)

and for DataGrid:
protected void DataGrid_ItemCreated(object sender, DataGridItemEventArgs e)
//call the method for custom rendering the columns headers
if (e.Item.ItemType == ListItemType.Header)

Next code is common for both GridView and DataGrid:
//method for rendering the columns headers 
private void RenderHeader(HtmlTextWriter output, Control container)
for (int i = 0; i < container.Controls.Count; i++)
TableCell cell = (TableCell)container.Controls[i];

//stretch non merged columns for two rows
if (!info.MergedColumns.Contains(i))
cell.Attributes["rowspan"] = "2";
else //render merged columns common title
if (info.StartColumns.Contains(i))
output.Write(string.Format("<td align='center' colspan='{0}'>{1}</td>",
info.StartColumns[i], info.Titles[i]));

//close the first row
//set attributes for the second row

//start the second row

//render the second row (only the merged columns)
for (int i = 0; i < info.MergedColumns.Count; i++)
TableCell cell = (TableCell)container.Controls[info.MergedColumns[i]];

That is all. The code can be used without any modification, the only part that has to be changed in a concrete case is:
info.AddMergedColumns(new int[] { 1, 2, 3 }, "Foo");
info.AddMergedColumns(new int[] { 6, 7 }, "Bar");
//and so forth ...

Download code - 1.4 Kb