Using the EasyInk Control

Article
10/26/2006

Get started capturing signatures in your eMbedded Visual Basic applications as I walk you through some sample code.

Applies to:
   Microsoft Windows Powered Pocket PC 2000
   Microsoft eMbedded Visual Tools
   Download Free EasyInk control from Odyssey Software's support site (https://www.odysseysoftware.com/support.html)
   Download 730-CF-DEV.exe

Languages Supported

English

Signatures in Business Applications

When you build business applications for the Pocket PC, it's very often the case that you replace paper-based processes with a solution based on digital communication and storage. Sooner or later you will find a situation in which you need to capture signatures that were previously captured on paper. One very common solution is to print a paper on a mobile printer, but it's becoming more acceptable to send signature captures in digital form directly. One reason is that the legal issues have been resolved in many areas. The benefits of storing signatures are obvious. You can save signatures, you can send them anywhere, and you can even print them at another location from where they were captured.

There is no easy way of sending signatures on a Pocket PC using standard Microsoft eMbedded Visual Basic controls. Even if you have a PictureBox control, it's difficult to retrieve the graphical information from that control. I have seen applications that solved the problem by capturing all mouse movements during the input of a signature and then storing the coordinates (vectors) of all those movements. Yes, it is possible—but hardly something that is fun to do. Now there is an easier way.

EasyInk for Easier Inking

Odyssey Software has provided us all with a free control very suitable for signature capture (and other types of freehand drawings) called EasyInk. This is a Microsoft ActiveX control available for the Pocket PC platform as well as the PC. The point of having the same control available on both platforms is that you can transfer digital image data (signatures) between the two. A practical example would be to capture the signature on a Pocket PC and then send the data (wirelessly) to a server, where the signature gets added to a report using the same control. The data that you can retrieve from the control is in bitmap format, as this is more often smaller for freehand drawing (like signatures) than the vector format I mentioned above.

EasyInk Sample

To show how the EasyInk control works, I created a simple form using Microsoft eMbedded Visual Basic that looks like this:

EasyInk sample.

Inside the Write your signature field, a dashed shape control (of type Rectangle), is the EasyInk control. In the EasyInk area, I have written a signature. To remove all drawing in the EasyInk control, use the Clear button.

To save the signature to a bitmap file you use the Save Bitmap button, and you load a saved bitmap with the Open Bitmap button. You can also save the raw data of the EasyInk area to a binary file using the Save Data button, and retrieve it using the Open Data button. The interesting point is that you can get to the actual data of the control from a property and in a real-world scenario you would probably use this functionality to save the signature to a database or send it to a server. Finally, you can save the data to a memory variable with the Save to Variable button and get back the drawing from that variable with the Get from Variable button. This is an excellent way to transfer the signature data between different parts (forms) of your application.

Code Walkthrough

Let us start with some of the simpler things you can do. Here is the code behind the Save to Variable button:

Private paImageData
 
Private Sub cmdSaveVar_Click()
  
  paImageData = EasyInk.ImageData
 
End Sub

On the form level, we have declared a private variable named paImageData that is assigned the ImageData property of the EasyInk control. To get the data back in the control, we have the following code behind the Get from Variable button:

Private Sub cmdOpenVar_Click()
  
  EasyInk.ImageData = paImageData
 
End Sub

And that's all there is to it. The benefit of being able to store signature (or other drawing) data in a variable like this is great. You can pass the information between different parts (forms and modules) of your application, and you can even pass it to other machines, like a server or another Pocket PC. More on that in a moment.

The code for clearing the EasyInk control can be found behind the Clear button:

Private Sub cmdClear_Click()
  
  EasyInk.Clear
 
End Sub

To store the signature to a bitmap file is not much harder. This is the code behind the Save Bitmap button:

Private Sub cmdSaveBitmap_Click()
 
  ' Get filename
  Dialog.DialogTitle = "Select a name for the saved image"
  Dialog.Filter = "Bitmaps Images|*.bmp"
  Dialog.FilterIndex = 1
  Dialog.Flags = cdlOFNLongNames Or cdlOFNPathMustExist _
                 Or cdlOFNOverwritePrompt
  Dialog.CancelError = True
  On Error Resume Next
  Err.Clear
  Dialog.ShowSave
  If Err.Number <> 0 Then Exit Sub
  On Error GoTo 0
  
  ' Save bitmap
  EasyInk.SaveImage Dialog.FileName
 
End Sub

I have been using the CommonDialog control to let the user select a filename. I use the SaveImage method on the EasyInk control to save the contents of the control to the selected filename. The signature is saved in the standard bitmap format, which enables us to load it into multiple other applications.

To open the saved file, the Open Bitmap button uses this code:

Private Sub cmdOpenBitmap_Click()
 
  ' Get filename
  Dialog.DialogTitle = "Select a name for the image to open"
  Dialog.Filter = "Bitmaps Images|*.bmp"
  Dialog.FilterIndex = 1
  Dialog.Flags = cdlOFNLongNames
  'Dialog.FileName = "Signature"
  Dialog.CancelError = True
  On Error Resume Next
  Err.Clear
  Dialog.ShowOpen
  If Err.Number <> 0 Then Exit Sub
  On Error GoTo 0
  
  EasyInk.LoadImage Dialog.FileName
 
End Sub

Again, I use the CommonDialog control to select a file to open and then the LoadImage method on the EasyInk control to load the file content.

As you saw in the first code sample, the most interesting property of the EasyInk control is the ImageData property. You saw that you can store the drawing data in a variable for passing around within your application, but you might also use that data in other ways. I have used this property to store the pure data to a file. Here is the code behind the Save Data button:

Private Sub cmdSaveData_Click()
 
  Dim loFile As File
  Dim laImageData As Variant
  Dim lsImageData As String
  Dim i As Integer
  
  ' Get filename
  Dialog.DialogTitle = "Select a name for the saved image"
  Dialog.Filter = "Binary|*.bin"
  Dialog.FilterIndex = 1
  Dialog.Flags = cdlOFNLongNames Or cdlOFNPathMustExist _
                 Or cdlOFNOverwritePrompt
  Dialog.CancelError = True
  On Error Resume Next
  Err.Clear
  Dialog.ShowSave
  If Err.Number <> 0 Then Exit Sub
  On Error GoTo 0
 
  ' Create object
  Set loFile = CreateObject("FileCtl.File")
  
  ' Write file
  loFile.Open Dialog.FileName, fsModeOutput, fsAccessWrite
  laImageData = EasyInk.ImageData
  For i = 1 To LenB(laImageData)
    lsImageData = lsImageData & Chr(AscB(MidB(laImageData, i, 1)))
  Next 'i
  loFile.LinePrint lsImageData
  loFile.Close
 
End Sub

As before, I'm using the CommonDialog control to get the filename to save to. And then I'm using the FileSystem control (and its File object) to open an ordinary text file. Because the ImageData property is an array of bytes, I have to convert this information to a string before saving it to a file. When that is done, I just save the string and close the file.

To find out how to retrieve the data in that file, here is the code behind the Open Data button:

Private Sub cmdOpenData_Click()
   
  Dim loFile As File
  Dim laImageData As Variant
  
  ' Get filename
  Dialog.DialogTitle = "Select a name for the image to open"
  Dialog.Filter = "Binary|*.bin"
  Dialog.FilterIndex = 1
  Dialog.Flags = cdlOFNLongNames
  'Dialog.FileName = "Signature"
  Dialog.CancelError = True
  On Error Resume Next
  Err.Clear
  Dialog.ShowOpen
  If Err.Number <> 0 Then Exit Sub
  On Error GoTo 0
  
  ' Create object
  Set loFile = CreateObject("FileCtl.File")
  
  ' Write file
  loFile.Open Dialog.FileName, fsModeInput, fsAccessRead
  laImageData = loFile.InputB(loFile.LOF — 2)
  EasyInk.ImageData = laImageData
  loFile.Close
 
End Sub

After retrieving the file name that I want to open (again using the CommonDialog control), I simply open the file for input, read the data into a variable, and assign it to the ImageData property of the EasyInk control. I have to remove the last two characters of the file because the LinePrint method on the File object (see the code for the SaveData control above) adds two extra characters when saving the file.

Of course, you could store the image data in a local (or remote) database in much the same way. Just make sure you use a field data type that can hold the image data.

For a complete example, download 730-CF-DEV.exe.

Interchange Drawing Data

Because the ImageData property on the EasyInk control is saved in a variable of type Variant, you could use any remoting technology (like Odyssey Software's Cefusion or ViaXML) to call Component Object Model (COM) components on a server or another Pocket PC and pass the image data as a parameter.

On the server, you could build a reporting application that uses the sent data and the EasyInk control to produce real-time reports on Web pages or to print on paper. You could even have a server application in which someone in real time is checking the accuracy of signatures captured in the field. As an example of a peer-to-peer (P2P) application, you could create a messenger application that uses drawings instead of simple text to exchange messages.

Conclusion

With the EasyInk control you have a simple but very powerful tool to capture freehand drawings like signatures in your Pocket PC applications. You also have the power to store or send the drawing data anywhere. Now it's up to you to create great solutions with this tool.