The Tablet PC SDK from Microsoft ships with a couple of high-level controls
to help developers rapidly build ink-enabled applications. The three
controls that I'll look at in this article are the InkEdit, InkPicture, and
PenInputPanel. Currently, the out-of-the-box controls do a decent job of
meeting the basic needs of developers and users looking for ink-input
functionality. These controls will most likely be supplemented by a robust
line of tools from the independent component publishers community in the
near future.
The InkEdit Control
The most basic of the controls is the InkEdit control, which collects
ink for an end user in the form of handwriting and converts the input to
text in place. The InkEdit control closely resembles a standard Rich Textbox
control and is able to handle either single-line entry or multiline text
entry.
In addition to understanding basic handwriting, the InkEdit control also
understands a limited number of gestures for performing actions such as
backspace, enter, tab, etc.
One of the nice features of the InkEdit control is its ability to
convert ink to text or leave the ink as handwriting. The one drawback to
this feature is that the ink will be scaled and displayed based on the font
size of the control and displayed inline with other text.
Getting Started
To become familiar with the InkEdit control, create a new Windows Forms
project and add the InkEdit control to your toolbar. If you don't already
have a copy of the Tablet PC SDK, you can download a copy from the Tablet PC
Developer site at www.tabletpcdeveloper.com.
After creating a project, drag and drop an InkEdit control onto the
page. Before running the project, let's take a look at a couple of
properties.
You'll notice that the control has most of the standard properties you
would expect to find on an input control. The first one specific to this
control is the InkInsertMode property. InkInsertMode allows a developer to
determine if the control will leave the ink as ink or if it will be
converted to text on the fly.
If you have the InkInsertMode set to "Insert as Text", which is the
default, then the RecoTimeout- property is a factor. The RecoTime
out property controls the amount of time between when the last stroke is
detected and when the control converts the ink into its recognized text
value.
To see the InkEdit control in action, run the project and test out the
control. One of the first things you will notice is that the control will
allow you to enter text right from the keyboard like a standard Rich Textbox
control. This is necessary to allow the end user to use the application even
if they don't have ink capability on their computer or the ability to allow
convertible-style Tablets to run with the keyboard.
If you write in the input box with a pen device you'll notice that a few
seconds after you lift the pen your input is converted into text and aligned
to the left. You can combine both forms of input by using both the pen and
the keyboard.
Now add two command buttons to the form. Label the first one "Toggle"
and the second "Display". Add the following to the click event of the
"Toggle" button:
Select Case
Case Microsoft.Ink.InkDisplayMode.Ink
InkEdit1.SelectAll()
InkEdit1.SelInksDisplayMode = Microsoft.Ink.InkDisplay
Mode.Text Case Microsoft.Ink.InkDisplayMode.Text
InkEdit1.SelectAll()
InkEdit1.SelInksDisplayMode = Microsoft.Ink.InkDisplayMode.Ink
End Select
Even though your handwriting was converted and displayed as text, the
InkEdit control still stores the original ink value. If you select all of
the text, or just certain sections with the select method, you can toggle
the display mode back and forth between ink and text. This is important if
you want to persist the ink as ink into a database at a later time.
Add the following code to the click event of the "Display" button:
MsgBox(InkEdit1.Text)
If you run the project again and write some text in the box, pressing
the display button after the text is converted will display your input in
the message box. If you then press the toggle button to convert the input
back into its ink format and press the display button again, the message box
is blank. If you mix keyboard entry and text displayed as ink, you will find
that only the keyboard entry is displayed. The text property of the InkEdit
control returns only text that is being displayed as text.
Persistence
What if you want to persist your input to the database as ink, e.g.,
when capturing signatures? While not providing a single API call to do this
Microsoft has made the process fairly simple.
The first step is converting the value in the field back to ink. To do
this you would follow the same steps as converting back to ink on the toggle
button. Once the InkEdit control is displaying ink, you will need to create
a memory stream object to assist with persisting the original ink.
Dim ms = new MemoryStream()
Once you have a memory stream, call the SaveFile method of the InkEdit
control, passing it the memory stream.
InkEdit1.SaveFile(ms, System.Windows.Forms.Rich
TextBoxStreamType.RichText)
This will persist the ink to the memory stream. Now you can convert the
memory stream to a byte array to store in an image field of SQL server or
another data store.
ms.ToArray()
The InkEdit control is a very basic control that gives developers a
quick drop-in replacement for the standard textbox or Rich Textbox controls,
but it has some limitations and possible usability issues. One of these is
that the amount of space to write in is limited. Microsoft has addressed
this with the PenInput-Panel.
The PenInputPanel
While the PenInputPanel is not a control that you can place on a form,
it does belong in a discussion of ink controls. In Windows XP Tablet Edition
you can use the input panel found in your taskbar to perform pen input into
any non-ink application. The problem with the input panel is that you cannot
programmatically access it or control it. This has been corrected in the
current version of the Tablet PC SDK.
The PenInputPanel control is extremely powerful for application
developers since you can simply attach the PenInputPanel to existing
controls in an application. Once attached, the control can begin receiving
ink-based input.
The PenInputPanel does not provide access to the underlying ink as the
InkEdit control does; it is used exclusively for providing text-based input
into its attached control.
To attach a PenInputPanel to a control, simply declare a PenInput-
Panel object from the Microsoft.Ink namespace provided by the Tablet PC SDK
1.5. After the object has been declared, pass it a handle to the control
that you want to associate it with.
Dim PenInputPanel As New Microsoft.Ink.PenInputPanel
PenInputPanel.AttachedEditWindow = InkEdit2.Handle
You do not need to create a PenInputPanel for every control on a page.
Instead, you can create one shared PenInputPanel object and attach it to
each control that accepts text input in the Enter event for that control
(see Figures 1 and 2).
Besides providing a robust writing pad with quick keypads for symbols or
numbers, the PenInputPanel can also be placed into keyboard mode by the user
(or programmatically by the developer). Keyboard mode is useful for fields
used to enter passwords or part numbers. Input into such a field is probably
not going to be a standard word and will not be found in the text
recognizer's dictionary.
The PenInputPanel is automatically positioned so that it does not cover
any of the original control, as long as screen space allows. If there is a
need to reposition or overlap, the PenInputPanel provides an API to allow
for explicit positioning by the developer (see Figure 3).
One best practice to remember when working with the PenInput-
Panel is to call the Dispose method when you are finished with the object.
The PenInputPanel maintains links to unmanaged objects and can cause memory
leaks if you wait for the finalize method to run.
The InkPicture Control
The last of the basic included controls is the InkPicture control.
The InkPicture control derives from the standard .NET PictureBox class.
Because of this it works as a good drop-in replacement for image controls.
The InkPicture control allows developers or end users to load in images in
standard .jpg, .bmp, .gif, or .png formats, and then add ink annotations.
The ink in the InkPicture is not recognized as text but is instead
stored as ink. All of the ink is collected in a transparent layer over the
base image. This allows the image to be resized on the fly without losing
any ink information, even if the ink is cropped or resized as a result of
the change.
One of the main drawbacks of the InkPicture control is its printing
support. The control supports basic printing functions but is missing
advanced features such as print preview. It is up to developers to implement
these features on their own.
To add an InkPicture control to the current project, simply drag the
control onto the form. Set the Image property at either design time or
runtime to any image that you would like to mark up.
The ink color will default to black, but this can be adjusted via code
along with many other style and appearance properties on the
DefaultDrawingAttributes object.
InkPicture1.DefaultDrawing
Attributes.Color = Color.Red
The InkPicture control can be used to create very advanced applications,
such as the scanned form example that is provided with the Tablet PC SDK.
However, the lack of features such as advanced printing and a simple API for
saving its contents make the control a bit difficult to use without
extensive additional coding.
Conclusion
Overall, the control set provided by the Tablet PC SDK provides
developers with a solid foundation to start building ink-enabled
applications. The controls, especially when viewed with the robust object
model provided by the Tablet PC SDK, are a good starting point and mask a
lot of the potential complexities of ink development from the developer.
This allows existing .NET developers to rapidly add ink support to
applications.
About The Author
Brad McCabe is a technology evangelist for .NET, ASP.NET, and .NET CF for Infragistics (www.infragistics.com), a leader in providing a broad infrastructure of reusable presentation-layer components essential for the creation of next-generation Web-based applications and XML Web services utilizing .NET, COM, and Java.
bradm@infragistics.com
All Rights Reserved
Copyright © 2004 SYS-CON Media, Inc.
E-mail:
info@sys-con.com