Skip to main content
Email Password   helpLost your password?

Sample Image - webinkctrl.gif

Introduction

This article discusses how to create and use a web browser (IE only) compatible ink or drawing control using the Microsoft Tablet PC SDK version 1.7. A sample pre-built control is provided for use and demonstration. Also, please read the disclaimer at the end in case you have any issues with this article.

Background

Having seen Microsoft's Tablet PC ink capabilities in action, I found it sad they didn't provide web or ASP.NET support of their ink libraries. That is until recently � with the release of the Tablet PC SDK version 1.7, Microsoft provides a way to create an ink user control that can be embedded in a webpage and interact with the web server via web scripting, etc.

There are several articles on the web (and a sample in the SDK) that talk about this new feature and how to build such a control. However, I found the documentation/articles to be lacking in some respect due to confusing presentation of how to deploy such an application. Furthermore, no complete source code (other than the sample in the SDK) is provided for evaluation. Only minor snippets are shown in the articles.

Thus, this article skips over the part on creating the control (you can refer to the reference websites below for that information) and instead focuses on:

  1. the deployment part using a sample demo control project, and
  2. possible (creative?) uses plus pros and cons for such a control.

The sample control is also pre-built with common drawing and inking features included so that you can use it as is, saving you time from having to write one up from scratch. Or you can also extend the control with additional properties & methods or modify the existing methods.

Reference Websites

Main References

Code Magazine article: Ink on the Web
Mobile Ink Jots 3: Ink on the Web
Microsoft Tablet PC - Creating a Redistributable Setup

Additional References

Creating Interactive Hand-Written Web Pages on Tablet PC
Code Magazine article: Introduction to Tablet PC Development
Code Magazine article: Ink Recognition and Ink Analysis

Ink Control Overview

We'll begin the article from the point after creation of the user control. First, some brief points to mention:

  1. The control is a .NET windows form control (not an ASP.NET web control) that you can embed onto a webpage and have it run like a Java applet on the client side. Interaction with the server can be achieved through posting back to the server via JavaScript & a web form. You can also alternatively use the control in a windows form application. The control could also be extended to provide methods for communicating with a server by making use of the .NET Web Request & Response classes, or networking classes, etc.
  2. The control can be implemented with interaction between itself and the external environment by (1) placing code for interaction as components/controls within the control or (2) placing code for interaction as public methods that are a part of the control that can be called from the external environment. In terms of making the control web usable, option two provides better customization and extendability, and better resizing of the control. Thus, the sample control project uses option two.

Using the Control

Requirements

The following is required to run or execute the control on a browser client:

* You can get the Microsoft Ink Library version 1.7 by installing a custom Microsoft Ink version 1.7 library installer or from installing the Microsoft Tablet PC SDK version 1.7. Windows XP Tablet PC with Service Pack 2 also includes the library by default. Sadly, deploying the control over the web does not allow loading the reference libraries along with the control, unlike a windows form application where the Ink library can reside (without installation) in the same directory as the application. For developing & modifying the control, you will need to use the SDK (even if you have Windows XP Tablet PC w/ SP2).

Embedding & Loading the Control

To embed & load the control in a browser, you simply insert a special block of code utilizing the HTML object tag into a webpage. The tag should be similar to the following format (it worked for me, while some examples in the other articles didn't). 

<object id="NameForObject" height="aValue" width="aValue" 
classid="ControlDLLName.dll#ControlNamespaceName.ControlClassName"></object>
<!--// Example here assumes that the DLL is in the same directory as the 
webpage. If not, you will have to modify the path in the classid attribute.
//-->

With this code, the object will run upon the browser loading the webpage. You can't do much with it at this point, so you can go to the next step.

Interacting with the Control on the Client Side

To provide functionality between the control & the user, you can call the control's built-in methods. This, however, requires writing JavaScript wrapper functions that call the control's methods as in the following example: 

function SetPenColor(pColor){
//common colors only, unrecognized colors results in no change or black ink

//good idea to access control object by having it be a part of a form

//then access object's methods through the form

document.forms[0].NameForObject.SetPenColor(pColor);
}

The following code listing shows the available methods in the demo control. Not all are available for use over the web due to security restrictions, unless you add the website as a fully trusted site in Internet Explorer. NOTE: Not all methods were fully tested and some may not behave as you would expect.

/* Get & Set Methods */
// Get or set whether anti-alias is used. Default is true

public bool AntiAlias
// Get or set whether to smooth out the drawn ink or not.

public bool FitToCurve
// Get or set whether the pen recognizer detects pressure from the pen

// to adjust the width, height, and intensity of the ink drawn, etc. 

// Default is false.

public bool IgnorePressure
// Set the pen color using common (.NET) color names.

public void SetPenColor(string usrColor)
// Set the background color using common (.NET) color names.

public void SetBackgroundColor(string usrColor)
// Get or set the pen tip style. 0 for ball point, 1 for rectangle.

public int PenTipStyle
// Get or set the pen width in pixels.

public float PenWidth
// Get or set the pen height in pixels.

public float PenHeight
// Get or set transparency level of ink drawn. Values range 

// from 0 to 255. 0 is opague, 255 is transparent.

public int Transparency
/* Editing Mode Methods */
// For set modes, returns true on success in changing modes. Else false.

// Set the control to inking or drawing mode.

private bool SetToInkMode()
// Set the control to ink/object selection mode.

private bool SetToSelectMode()
// Set the control to erasing mode.

private bool SetToDeleteMode()
// Clears the ink in the control.

public void ClearInk()
// For clipboard functions, returns true on success, else false

// Copy ink to clipboard as serialized ink. Not usable when used on the web.

public bool CopyAsSerialInk()
// Copy ink to clipboard as a bitmap. Not usable when used on the web.

public bool CopyAsBitmap()
// Cut ink from control to clipboard as serialized ink. Not usable when used 

// on web.

public bool CutAsSerialInk()
// Cut ink from control to clipboard as a bitmap. Not usable when used on web.

public bool CutAsBitmap()
// Paste ink in clipboard to control. Not usable when used on the web.

public bool Paste()
/* Transformation Methods */
// Create a shear effect on the selected ink based on a set of coordinates

// x = Horizontal shear factor

// y = Vertical shear factor

public void Shear(float x, float y)
// Scale selected ink based on a set of coordinates

// x = Horizontal scale factor

// y = Vertical scale factor

public void ScaleInk(float x, float y)
// Rotate the selected ink for some degrees based on a set of coordinates

// degrees = Number of degrees to rotate

// x = Horizontal coordinate

// y = Vertical coordinate

public void Rotate(float degrees, int x, int y)
// Move the selected ink by an offset coordinate

// x = Horizontal offset

// y = Vertical offset

public void MoveInk(float x, float y)
/* Text Recognition Methods */
// Perform text recognition on ink and return best guess. Only works with 

// Windows XP 

// Tablet PC systems.

public string InkToTextBestGuess()
// Perform text recognition on ink and return the set of best guesses as a 

// newline delimited string. Only works with Windows XP Tablet PC systems.

public string InkToTextResults()
/* I/O Methods */
// Get ink in the control as Base 64 encoded string of the ink in GIF format.

public string ReturnInkAsBase64Gif()
// Get ink in the control as a GIF (byte array)

public byte[] ReturnInkAsGif()
// Get ink in the control as Base 64 encoded string of the serialized ink.

public string ReturnInkAsBase64SerializedInk()
// Get ink in the control as serialized ink

public byte[] ReturnInkAsSerializedInk()
// Load a byte array of ink into the control. Returns true on success.

// inkData = the byte array of ink data.

public bool LoadInk(byte[] inkData)
// Load a base 64 encoded string (of a byte array) of ink/GIF into the 

// control. Returns true on success.

// b64InkData = the base 64 encoded string (of byte data).

public bool LoadInkFromBase64(string b64InkData)
// Load background image to ink control. NOTE: This is meant for windows 

// forms applications only, or requires

// no security restrictions on client side file access in a web application.

// filePath = the file path of background image to load.

public bool LoadBackgroundImage(string filePath)
// Dispose of the control when not needed, like on a webpage unload

//you can use the control's native dispose method, something like:

protected void Dispose()

Interacting with the Control on the Server Side

To communicate with the web server, you can make a request to the server, sending the ink data along with it. And you may be able to retrieve information back to the control from the server reply (this part has not been tested nor implemented). A simple way to do so would be to make the control object part of a form and use JavaScript to submit the ink data (stored to a hidden form field) to the server. To pass the data over the web, it needs to be encoded as a Base 64 string since HTML does not handle binary data. Then you can decode and process the data on the server side. Unless you need to work in native Microsoft Ink format, you would generally pass the ink data as a GIF byte array since GIF is a standard image format, easy to process, and still be loaded back into an ink control. The following code snippets show how to send the control's ink data to the server as a GIF byte array.

First, implement the technique to retrieve the control's data and store it in a hidden form field.

<!--// This can be done with HTML and a javascript onclick event, for example.
//-->
<input type="button" value="Save as GIF" name="SaveCmd" onclick="SaveAsGif()">
<input type=hidden name="SavedInkData" value="empty">

Then, implement the technique to send the data to the server as a Base 64 encoded string. The demo project includes a simple server processing sample that just decodes & outputs the GIF image to the browser. In practice, you could further manipulate the image, store to a database, write to file, or send somewhere via email.

function SaveAsGif(){
//store control's ink data in base 64 encoding to hidden form field

document.forms[0].SavedInkData.value = 
               document.forms[0].InkBoxCtrl.ReturnInkAsBase64Gif();
//send the data using a form submit, generally via HTTP POST method

document.forms[0].submit();
}

Notes on Deploying the Demo Application and About the Source Files

The demo application was created in the simplest fashion, and is not a standard Visual Studio .NET web application. To deploy the demo, you need only copy it to your web server. No special Visual Studio .NET or IIS virtual directory setup is required. The server side script is available in ASP.NET or PHP, which means you can deploy this application to IIS with ASP.NET (or PHP) or any web server that supports PHP. Only the browser clients need to support the .NET Framework.

For any ASP.NET configuration files and settings that are needed in your case, you may use your existing configuration files or create them yourself by manually creating them or using Visual Studio .NET to generate them.

The source is a Visual Studio .NET 2003 C# control project.

NOTE: The control works fine when used in a web application like the one described here but there may be problems when using it in a Windows Form/Desktop application. I tried dropping the control into a Windows forms project and just compiling it and I got errors (or maybe I didn't add the control to the application correctly). So if you plan to use it in such projects, you may have to tweak the control to get it to work.

IIS Deployment Issues

You may encounter some problems when deploying to IIS, particularly IIS 6 on Windows 2003 Server. Here are some tips on resolving such problems. Try them in the specified order:

  1. Verify in IIS, that your application has "Script only" execute permissions under your Virtual Directory, Home Directory, or Directory settings. If you have it set to "Scripts and Executables" you will not be able to download the web ink control DLL. If you must use "Scripts and Executables" because you are using CGI, you may need to rethink how you plan to deploy this application. This method solved my IIS problem. Click here for more info.
  2. Verify that you are not using URLSCAN (from Microsoft) or something similar on IIS. If you are using such a tool, you must configure it to allow downloads of DLL files. Click here for Using URLScan on IIS.
  3. Try lowering your IIS server security settings, if necessary. Probably not a good idea though, and I don't think you will really need to do this.
  4. When all else fails & you really like using this control & you are not required to use IIS/ASP/ASP.NET, consider hosting the application on a non-IIS web server like Apache.

Apache Deployment Issues

Alessandro Torrisi pointed out a potential issue on Apache (whether running server on Windows or Linux, to be safe) where the ink control DLL was not loaded into the application. According to Alessandro, to fix this, just add "application/x-msdownload dll" in the "/etc/apache2/mime.types" file and restart apache.

Points of Interest

Summary of Pros & Cons

I think such a control has potential in some applications. The negative aspects are that the control runs in a Microsoft client environment only, it requires downloading & installing the Microsoft Ink library, and text recognition is available only for Tablet PCs. These aspects might deter people from using & deploying the control. However, there are some positive aspects of this control too, particularly in the possible uses that the control can provide as well as the option of using any server side platform (it need not be Microsoft). In summary, while the control may not be feasible for general public & corporate use, it may prove useful in certain specialized applications. Plus it's a fun thing to toy around with in your spare time.

Possible (Creative?) Use Cases

Updated Features and Information - as of Oct. 27, 2007

Bugs

Release History

Disclaimer

NOTE: This article and accompanying code are not entirely original. Rather, this article is intended to clarify and elaborate on the subject where the original articles seem to be lacking in detail. Additionally, source code (a compilation of code snippets from the original articles integrated together with my own code and extra functionality) and a demo application are provided for you to use freely. The original articles only provided code snippets, no complete code that you could use off the bat. Last, this article is intended to suggest and foster creative use of such an ink control beyond the standard Microsoft convention/platform.

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralIts not working on IE 8 Pin
Tauiqr		3:03 2 Jun '09  
GeneralRe: Its not working on IE 8 Pin
daluu		8:26 2 Jun '09  
QuestionQuick Question Pin
greekgoddess		17:50 15 Jan '09  
AnswerRe: Quick Question Pin
daluu		19:35 15 Jan '09  
Generalalignment Pin
kingplatypus666		10:23 15 Dec '08  
GeneralRe: alignment Pin
daluu		7:44 23 Dec '08  
GeneralScreen refreshing when switch colors Pin
Member 3869755		4:03 13 Oct '08  
QuestionRe: Screen refreshing when switch colors Pin
Member 3869755		6:42 13 Oct '08  
AnswerRe: Screen refreshing when switch colors Pin
daluu		7:15 14 Oct '08  
QuestionThe Scale Function Pin
Member 3869755		9:15 10 Oct '08  
AnswerRe: The Scale Function Pin
daluu		9:57 10 Oct '08  
GeneralRe: The Scale Function Pin
Member 3869755		10:02 10 Oct '08  
GeneralExtending the dll Pin
Member 3869755		8:34 13 Aug '08  
GeneralRe: Extending the dll Pin
daluu		8:55 13 Aug '08  
GeneralRe: Extending the dll Pin
Member 3869755		9:45 13 Aug '08  
Generalwhat version .net does this work on? Pin
Member 3869755		4:58 11 Aug '08  
GeneralRe: what version .net does this work on? Pin
daluu		8:37 11 Aug '08  
GeneralWeb Ink architecture Pin
hlai2006		16:28 10 Jun '08  
GeneralRe: Web Ink architecture Pin
daluu		8:02 15 Jun '08  
General.NET 3.0, WPF, WCF alternative implementation Pin
daluu		8:17 6 Jun '08  
QuestionA poll or survey - How are you using or how do you plan to use the ink control in your application? Pin
daluu		7:58 6 Jun '08  
GeneralLoadInkFromBase64() fails since InkOverLay object is null. InkCtrl_Load function not called at every page_load? Pin
henkedude		7:36 27 May '08  
GeneralRe: LoadInkFromBase64() fails since InkOverLay object is null. InkCtrl_Load function not called at every page_load? Pin
henkedude		1:11 28 May '08  
GeneralDimDim for whiteboard sharing Pin
daluu		13:27 11 Apr '08  
Questionhow to print a web page which contains an inkbox control and how to create an image with ink and backgroundImage? [modified] Pin
awax82		23:05 7 Apr '08  
Last Visit: 18:54 20 Nov '09     Last Update: 18:54 20 Nov '09 1234 Next »


Last Updated 29 Oct 2007 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009