A Form Management Solution using SVG

Keywords: Handwriting Recognition, Form Management, SVG and Java

Lorenzo Boncompagni
Project Manager/Head of RecogInk Solutions
RecogInk Solutions
Rue Louis Hap 227
Brussels
Belgium
lorenzo.boncompagni@recogink.com

Biography

Biography

He worked as support and pre-sales manager since 1998 in the field of WorkFlow Management and Document Management Solutions mainly in Italy, UK and Belgium. He is now developing the RecogInk Solution project with other IT developers in order to market it by the end of 2005/beginning of 2006.

Michel Hirtzler
IT Director
RecogInk Solutions
Rue Louis Hap 227
Brussels
Belgium
michel.hirtzler@recogink.com

Biography

Biography

He has an academical and working background as mathematician. He develops continuously new solutions, tutorials and programs that are widely known in the svg community under his Pilat website. He wrote with other authors (Frost and Goessner) the book "Learn SVG" and is now in the phase of completing a second book on SVG. He develops the SVG part of the RecogInk project.


Abstract


Abstract

A Form Management Solution using SVG Reducing costs for managing paper and electronic forms is an important step in future technologies to automate entire processes especially when forms are still an important part of retrieving, storing and organizing part of costumers and people information. Reducing workflows and organizing electronically the Forms handwritten by users with SVG/JavaScript as the front-end, XML as the data storage and Java/Tomcat as the back-end is even more appealing as a solution. This Form Management Solution has a multi-stroke handwriting recognition engine especially conceived for managing pen gesture written forms. The application will be described from an application and form processing problem-solving point of view in detail in our session. In brief the modules, which are all SVG based, that will be shown consists of: - The FormBuilder: to create form Templates in order to save the fields drawn that will be submitted to the RecogInk handwriting recognition. It also allows printing forms in the desired format A4, A5 or Letter-Size. - The UpLoader: to upload handwritten data via Tablet PC or via other devices - The FormFiller: to Write on Screen with keyboard or via electronic handwriting such as the Tablet PC Pen or the mouse. - The PreViewer: to preview uploaded handwritten data and overlay them to the correct form Template in case of paper form incoming data - The Repository to store and search all the data stored and recognized in the system. The User Interface has been implemented in 3 languages (English, French and Italian). The system works at this stage with two types of hardware devices: - a special hardware tablet that allows to write on paper and keep all the electronic data and to upload it at a later stage into a PC via the SVG UpLoader Interface - the tablet pc where costumers can directly write into an SVG interface and process them to the Handwriting engine to later view and retrieve the forms organized in the Repository. This Form Management Solution is a proof that SVG can be used for the most various and important applications giving the user the opportunity to use a very portable web-based solution. The presentation intent is to make a demonstration of the solution and how problems of this kind can be solved with SVG.


Table of Contents


1. Introduction
2. The Flow of the RecogInk Form Management Solution
3. The Tools
     3.1 The FormBuilder
          3.1.1 Some advanced Features
               3.1.1.1 The Prefences
               3.1.1.2 The Contact Wizard
     3.2 The UpLoader
     3.3 The PreViewer
          3.3.1 The Compass feature
     3.4 The Repository
4. Technical Aspects
5. Other Important Aspects
6. Conclusions
Bibliography

1. Introduction

Handwriting recognition is a very complex and important field nowadays to eliminate the burden of entering manually data already handwritten. So far Tablet Pcs have reached just a very small market (of all the client PCs sold until today just 0.5 % are Tablet PC - one every 200) and companies/administration still feel more comfortable to let people fill in paper forms. Today the only way that has been so far adopted to solve the Information Paper Form problems has been through scanners with ICR (Intelligent Character Recognition) on images and manual data-entry but has proven to be non cost-effective due to lack of good recognition rates on handwritten images. Other solutions involve special paper with special pens. This is proveed to be a better concept but tights the users to expensive papers with expensive solutions.

The solution we have developed is innovative because its main purpose is still to work with standard paper but in the same time to have a very good recognition rate through stroke based recognition engine (superior from the usual image hanwritten recognition engines) with an extensive and easy to use program thanks to SVG. The input of the Forms can be taken in 3 different ways:

The purpose of this presentation is to demonstrate that with appropriate hardware and thoughtful techniques it is possible to reach a very complex flow without having to train intensively the end user. For this reason we will focus only on the most innovative side of the solution which is the input via the digitizer DigiMemo. A 10 minutes training on how to write on the special hardware should suffice. From a back-end point of view the question is different and differs from case to case. SVG is the core-programming interface that allowed reaching the goal of having everything simplified and available on the web.

2. The Flow of the RecogInk Form Management Solution

In order to understand the entire solution it is necessary to understand the workflow of all the Modules:

FlowTools.png


Figure1: FormBuilder -> DigiMemo -> PreViewer -> Repository

FormBuilder phase

The DigiMemo phase

The PreViewer phase

The Repository phase

The Repository shows the various Recognized Forms in a structured Form Management system with images of the Forms and the data recognized in the Forms:

3. The Tools

RecogInk is made of various tools as described before. The Main page allows you to enter into any of these tools.

printscreen.png

Figure 2: Printscreen of the RecogInk Standalone Main-page

3.1 The FormBuilder

FormBuilder is the program to allow creating, editing and printing forms. Several tools have been developed to allow a complete control of administering forms in the RecogInk Solution. These tools allow creating fields of various types:

These fields are essential to create the entire customizable forms that have to be managed internally by the system, printed and visualized by the user. All these fields have their own peculiarities to allow maximum flexibility. Not only the graphic appearance is very important but also the various parameters given to each field is extremely useful in order to have a better recognition result from the engine and to have less repetitive work to do at a later stage when incoming forms get uploaded into the system.

FBuilder.png

Figure3: Printscreen of the FormBuilder

3.1.1 Some advanced Features

Other tools have been developed to accelerate the drawing capabilities such as:

In the following sub-sections we will here describe some of these features.

3.1.1.1 The Prefences

This tool allows to customize many functions by default . As the user gets more aknowledged with the solution he will understand that by setting properly the Preferences he will skip repetitive tasks concerning drawing forms.

preferences.png

Figure 4: Pop-up Preferences

The user can predefine these functions so that when refreshing or opening a template these settings will appear as already set.

For the Workspace:

For the Notes:

For the Combo box:

For the Check box:

For the Image:

For the Label:

For the Picture:

Each time you change the settings you will have a direct preview on the right side. The numbers and complexity of these features shows the level of interaction and accuracy to solve every given problem with SVG.

3.1.1.2 The Contact Wizard

The Contact Wizard is a set of Fields and Labels related to the very popular fields that can be seen almost on every Form that regards personal details.

By clicking into the Contact Wizard option once the user has chosen where to place the contact-wizard, a pop-up window will appear with different combo-boxes and labels.

cw1.jpg

Figure 5: Pop-up Contact Wizard

In the Create Contact Pop Up the user can check the fields on the left he wants to be put into the form template (Name, Surname, Number, Street, City, Zip Code, State, Country, Phone, Email, Sex, Birthday) and on the right he can choose the number of combed letters he want to be drawed (for the birthday he can also choose the format). If he is happy with the choices made he can click the Next button and the list of fields will be listed as shown in Figure 6.

cw2.jpg

Figure 6: Pop-up2 Contact Wizard

The user clicks and drag the mouse on the fields where he can also change their position. When happy about the disposition of the fields the user clicks the Create button and the list of fields designed will appear into the Form Template. The user can always go back with the Previous button to re-check and make other changes.

3.2 The UpLoader

The Uploader has the only purpose of uploading the files stored in the portable digitizer and prepare them to be processed into the PreViewer.

3.3 The PreViewer

The PreViewer allows associating the Forms that have been written in the Digitizer with the Templates designed in the FormBuilder. Once the Uploader finds Forms in the Digitizer the PreViewer lists the Templates and the Written Forms charged from the DigiMemo.

PreViewer.png

Figure 7: Printscreen of the PreViewer

Other tools have been developed to accelerate the processing capabilities such as:

3.3.1 The Compass feature

The compass functionality allows to position correctly the handwritten data to the template the user wants to synchronize it with. The User can click on the compass button and he will see that on the PreView Image side of the screen a big compass will appear (as shown here below on the image).

compass1.jpg

Figure 8: Printscreen of the Compass

As you can see from the image the writing isn’t correctly overlaid to the form template. This is due because the paper form over which the user wrote was badly overlaid on the tablet or because of calibration issues. In order to re-establish a correct positioning there are two circles. The red circle allows you to move the writing over the form in all the directions wanted just by clicking on the red circles and dragging it into the correct position. The result is shown in the image here below.

compass2.jpg

Figure:9 Printscreen II of the Compass

As you can see all the letters are now correctly positioned into the boxes. The compass tool allows also to rotate the written data with the green circle into whatever direction wanted for as many degrees as needed. Just by clicking on the green circle and dragging it into the rotation direction wanted. This function is useful when the paper has been incorrectly positioned and the written data appears distorted in respect to the template. Here below is an example on how much it is possible to rotate the written data. We accentuated the rotation to show the flexibility of the tool.

compass3.jpg

Figure:10 Printscreen III of the Compass

Once correctly positioned the written data in the form the user can pass to the next form in the page table on the top right side. The positioning of the new compass setting will be saved for the page where the changes have been made.

3.4 The Repository

The Repository is the ultimate result of the entire flow. It shows the results of the recognition and the image with the form template overlaid. It has also important features such as:

4. Technical Aspects

For the GUI RecogInk uses SVG.

The entire system uses Java as back-end with Tomcat and Joone as Artificial Intelligence Processor. To communicate between server and the GUI, RecogInk uses jsp and Javascript.

The Software requirements to run the entire system are:

The Window platform limit is due to the Adobe plug-in v. 6 beta that is at the moment the only compatible.

5. Other Important Aspects

The entire system has been studied so that further development can be easily added. One example is the multi-language feature that allows to add languages with few text translations.

Other modules can be added such as:

6. Conclusions

SVG-based solutions have the portability and potential to grow steadily in the entire Document Management market. RecogInk is the proof that this can be done. With the new 1.2 SVG standard that will be implemented in new plug-ins, even more features could be added so that there would be almost no difference between a thick-client tool and SVG based programs. The objective reached so far is to maximize portability, ease of use and practicality in an environment that requires high efficiency.

Bibliography

Pilat Informatique
RecogInk Solutions
RecogInk Demo
Joone Artificial Intelligence

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.