Making your input forms more intelligent.

Online sample: Live Demo

There is a large number of applications that are related to entering data that is on paper, these applications always enter the documents from a scanner or import them from a data store and the data entry officer will start filling the forms, some of the forms even have auto OCR for certain areas of the document. Today I want to work on enabling some advance technics that is related to this subject, no OCR detail here (mostly OCR work well only with Western languages like English).

In my case I want my data entry officer to have an easy time entering his information to the form after getting a scan image from the scanner. I don’t want him to have the paper in hand; I don’t want him to switch from one window to another to copy parts of the document as Invoice Number, Owner Name & etc.

My Goal:

• I want the data entry person to see the image side by side with the fields he is entering and the application will focus automatically on the regions that he is filling, as for example, if he is entering information about the Invoice Number, I want the application to zoom on that part of the document, when the data entry person goes to the Owner Name, I need the application to focus and zoom on the Owner Name.

• I need it to work on asp.net pages (web application)
• I want to make it easy to be used on other applications (as a component for example)
• It must be free, no payments here or there.

Tools:

• VS2010/VS2008 for development with C#/VB
• A very cool control called Seadragon

Let’s start, making this a short document is hard so I will need to reference some other blogs that will help me on this subject.

Visit my first blog about this control (Using the Seadragon control with an Image library) it will help us make the control work with an image of our desire.

Open a web site project and download the seadragon-min.js, its available on the site.

Add the following to your page header:

<script type="text/javascript" src="Scripts/seadragon-min.js"></script>

<script type="text/javascript">

var viewer = null;

var Loc_x = .5;

var Loc_y = .5;

var loc_zoom = 2; 

function init() {

viewer = new Seadragon.Viewer("container");

viewer.openDzi("dzc_output.xml");

}

Seadragon.Utils.addEvent(window, "load", init);

function SetFocus(x,y,z) {

Loc_x = x;

Loc_y = y;

loc_zoom = z; 

FocusOn();

}

function FocusOn(event) {

Seadragon.Utils.cancelEvent(event); // don't process link

if (!viewer.isOpen()) { return; }

viewer.viewport.panTo(new Seadragon.Point(Loc_x, Loc_y));

viewer.viewport.zoomTo(loc_zoom);

viewer.viewport.ensureVisible();

}

Seadragon.Utils.addEvent(window, "load", init);

</script>              

Simply we are adding 3 variables, Loc_x & Loc_y for the location, and loc_zoom for the zoom factor.

Let’s add four text boxes simulating our data enter form side by side with the Seadragon:

<asp:ScriptManager ID="ScriptManager1" runat="server"/>        

<table>

<tr><td class="style2" rowspan="4"><div id="container"></div></td>

<td>

Inv. Number: <asp:TextBox ID="TextBox1" runat="server" />

</td></tr>

<tr><td> 

Inv. Owner Name:<asp:TextBox ID="TextBox2" runat="server"/>

</td></tr>

<tr><td>

Inv Date:<asp:TextBox ID="TextBox3" runat="server"/>

</td></tr>

<tr><td>

rest to home <asp:TextBox ID="TextBox4" runat="server"/>

</td></tr>

</table>

And in our page load event

If (Not IsPostBack) Then

TextBox1.Attributes.Add("Onfocus", "SetFocus(.7,.2,8);")

TextBox2.Attributes.Add("Onfocus", "SetFocus(.4,.5,2);")

TextBox3.Attributes.Add("Onfocus", "SetFocus(.3,.9,2);")

TextBox4.Attributes.Add("Onfocus", "SetFocus(.5,.5,1);")

End If

Each control is hocked with the onfocus event and specifying the location and the zoom factor needed.

In general the width of the document is always 1, the height depends on other factors. If you like to read more about the coordination system go here.

I prefer using zoom factor as 1,2,4,8,16,32 & etc

We can simply warp this in a control containing the viewer and some function to hock the control from the data entry fields.

The Identification  of the active points in the document are always related to the document type (so some database can be used here to focus on needed parts depending on the document type)