Client Profile - Codehost

About Codehost

Codehost Logo Codehost offers turnkey solutions, software development and business development services. Their business model combines a superior technical staff with solid industry expertise in the areas of Linux, Unix, Embedded Software, Printing and Mobile Computing. It is their goal to offer their partners the most complete, robust solution for their products and customers. This often involves introducing OEM's and software partners to one another to collaborate on projects.

The Project

Mozdev Group was hired by Codehost to produce a Handwriting Recognition Interface (HRI), otherwise known as a graffiti drawing recognition engine. The main parts of the application are a User Interface to present a canvas for the users to draw on and to choose options, and an XPCOM component to hook into an existing third-party recognition engine. The target platform is Linux only, and this is the platform that the recognition engine was built for. Everything is packaged up into and XPI installer which can be installed on top of any targeted Mozilla distribution.

The UI

The <hricanvas> is a custom tag that can be inserted into an HTML document. It displays the canvas for drawing and several buttons underneath. There are four buttons: Convert, for converting the drawn text and placing it into a field, Clear to clear the drawn text, Undo to undo a stroke, and Options to display an options dialog. A stroke is a sequence of coordinates between a mousedown and a mouseup that presumably constitute a letter.

A Line of Text Converted from the Canvas
Figure 1 : A Line of Text Converted from the Canvas

The user may write text on the canvas by clicking and dragging the mouse. By default, only one word is handled at a time, but there are options for changing this (see section below Options->Detection). When the user presses the Convert button, the engine will attempt to detect the letters that were written on the canvas. The detected text will be filled into a text field. If the user presses the Clear button, the canvas and the text field are cleared. The user may undo by pressing the Undo button. The Options button will display an options dialog to change handwriting detection options. Here is some example HTML:

<html> <head> <title>Example</title> <link rel="stylesheet" href="chrome://hri/content/hricanvas.css"></link> </head> <body> <center> <hricanvas id="the_canvas" options="true" width="600" height="200" target="texttarget"> <form> <input type="text" id="text-area" name="texttarget"> </form> </center> </body> </html> The stylesheet chrome://hri/content/hricanvas.css is necessary and attaches the desired appearance and behavior to the <hricanvas>. This file contains the code which handles the canvas. The <hricanvas> tag may be included anywhere in the HTML. It supports all of the common features that other HTML tags share, such as support for the style and class attributes as shown in the HTML code sample above. If the 'options' attribute is set to true, the canvas will show an Options button.


There were a number of interesting development challenges in this project. The first was to build a stable new tag for HTML, the <hricanvas>, for use specifically for this application. This was done using Mozilla's Extensible Binding Language (XBL). While using XBL in HTML is certainly not something new, it is less chartered water that the use of XBL to create new XUL tags, it's more common usage. The second was integration of the Motorola recognition engine implemented as an xpcom component. This was accomplished by statically linking the engine with the new libhri Mozilla component, creating a wrapper API using an xpidl interface, and then creating a top level DOM object for use from JavaScript from the context of an HTML page.


HRI Canvas Options
Figure 2 : HRI Canvas Options

The options dialog essentially was created to expose the recognition engine settings in the UI. Settings to allow a user to choose what type of detection the engine should use, writing style, text case, text type, and drawing parameters.


The engine is flexible enough to recognize many different types of input. Via the options, you have a choice of detection type, case, writing style, numbers, capitalization, and punctuation. Let's explore these options a little more individually. There are three choices for the type of detection. The first choice is 'By Character' which only detects a single character at a time. This means that the recognizer expects only one character to be entered at a time. The second choice is 'By Word' which detects whole words and is default choice. The third choice is 'By Line' which allows an entire line of text to be detected at once. You can toggle between Lowercase, Uppercase and Mixed case detection. The writing style that the recognizer detects has a choice betwween Print, PseudoPrint and Cursive. The recognition of numeric digits can be turned on or off, as can the acceptance of leading capitalization on words. Finally, a toggle is offered to indicate whether punctuation is recognized or not.

Other Options

Here is a list of the other options available for writing and the appearance of the canvas.

Site Map | Copyright © Mozdev Group, Inc. 2003 - 2017.