Drawing Pad in Web Pages
You can draw images (like signature etc) in your web pages using Microsoft Ink assembly. Actually this is specially designed for Tablet PC. But we can use this in ASP.Net web pages too.
You can download this from here
Download and Install the setup file. After installing you will find the Microsoft.Ink.dll file in “\Program Files\Microsoft Tablet PC Platform SDK\Include” path.
1. Create Ink enabled Control (using Windows Control Library)
2. Embed the control into ASP.Net page.
Creating Ink Enabled Control
We need to create an ink enable control (COM Control) with following capabilities,
• Able to change the pen color
• Have Eraser Control for removing unwanted drawings.
• Save the image which has been drawn into file.
• Clear the Draw pad which will removes images which were drawn.
Steps to create Ink Enabled Control
Create a window control library. By default it will generate one class file named “UserControl1.cs”. Then we need to do the following actions,
1. Add reference for the Microsoft.Ink.dll by selecting “Microsoft Tablet PC API” in the Add Reference Window.
2. Create an instance for the “InkOverlay” Class.
3. We should make this control assembly as COM Visible. We can make through Project Property pages -> Application -> Assembly Information -> Check the “Make assembly Com – Visible” Box. Or we can set through AssemblyInfo.cs file with following statement,
[assembly: ComVisible(true)]
In UserControl1,
• Add one ToolStrip control which will show the colors and other buttons.
• Add three buttons in Toolstrip by clicking the dropdown menu in strip. These buttons are used to select the ink color. And set the backcolor of each buttons as like “Red”,”Yellow”,”Blue”
• Add another two buttons for Eraser and Clear all in strip. Eraser button will removes depends on the strokes. And Clear all button cleans all the strokes from pad.
Copy and Paste the following code in UserControl1.cs file
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Text;
using System.Windows.Forms;
using Microsoft.Ink;
namespace hsp_Ink
{
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
InkOverlay objInk;
private void UserControl1_Load(object sender, EventArgs e)
{
objInk = new InkOverlay(this);
objInk.Enabled = true;
}
private void Color_Click(object sender, EventArgs e)
{
ToolStripButton btn = (ToolStripButton)sender;
objInk.DefaultDrawingAttributes.Color = btn.BackColor;
objInk.EditingMode = InkOverlayEditingMode.Ink;
objInk.DefaultDrawingAttributes.Width = 3f;
}
private void Eraser_Click(object sender, EventArgs e)
{
objInk.EraserMode = InkOverlayEraserMode.PointErase;
objInk.EditingMode = InkOverlayEditingMode.Delete;
}
private void ClearAll_Click(object sender, EventArgs e)
{
objInk.Ink.DeleteStrokes();
this.Invalidate();
}
#region "Functions to be called from Web Pages"
public string GetInkData() // For Getting drawing data.
{
if (objInk.Ink.Strokes.Count == 0)
return "";
byte[] inkBytes = objInk.Ink.Save(PersistenceFormat.Gif, CompressionMode.NoCompression);
return Convert.ToBase64String(inkBytes);
}
public void LoadIntData(string InkData)
{
byte[] inkBytes = Convert.FromBase64String(InkData);
if (objInk != null) // If already inked.
{
objInk.Dispose();
objInk = new InkOverlay(this);
objInk.Enabled = true;
}
objInk.Ink.Load(inkBytes);
this.Invalidate();
}
#endregion
}
}
All color buttons click event should point out the Color_Click function. This is done by selecting “Color_Click” function in buttons click event.
Eraser button should point out the “Eraser_Click” and Clear All button should be to “ClearAll_Click”
Actually we don’t need any code handles for change color, erasing etc. we only need to embed the control.
From Webpage we will call the following functions,
• GetInkData – For Storing drawn image.
• LoadIntData – For Loading Image into Pad.
Now Build the Project which will create a control assembly for Inking.
Creating Web Page which includes the Ink Control
We need to embed the ink control in our page. Copy the control dll and paste it in root folder of web page. (Eg: C:\Inetpub\wwwroot\mywebsite)
Create a jscript file named as “inkScript.js” and paste the following statements in that file.
function GetInk()
{
document.write('<object id="InkControl" classid="myAssembly.dll#myAssembly.UserControl1"style="width:100%; height:200px" />');
}
Put the following code in Page1.aspx
Add the following between <head> tag
<script src="EmbeddedInkObj.js" type="text/javascript"></script>
<script>
function GetInkData()
{
document.getElementById('hdn').value = form1.InkControl.GetInkData();
form1.submit();
return true;
}
function LoadInkData()
{
if(document.getElementById('hdn'))
{
if(document.getElementById('hdn').value != "")
form1.InkControl.LoadIntData(document.getElementById('hdn').value);
}
}
</script>
Replace the <body> contents as follows,
<body onload = "LoadInkData()" >
<form id="form1" runat="server">
<table id="tbl">
<tr>
<td>
<input type="hidden" id = "hdn" name = "hdn" value ="<%=Request["hdn"]%>" />
<input type="button" id = "btn" value= "SaveImage" onclick = "return GetInkData();" />
</tr>
<tr>
<td >
<div>
<script>GetInk();</script>
</div>
</td>
</tr>
</table>
</form>
</body>
Create Images folder in root directory and Add the following codes in Page code behind (Page1.aspx.cs),
protected void Page_Load(object sender, EventArgs e)
{
if (Request["hdn"] != null) SaveInk();
}
private void SaveInk()
{
string InkStr = Request["hdn"].ToString();
byte[] InkBytes = Convert.FromBase64String(InkStr);
ImgPath = Server.MapPath("") + @"\Images\Img.gif";
System.IO.File.WriteAllBytes(ImgPath, InkBytes);
}
Run the website and Now you can view the Ink Pad in your web page, you can draw images with different colors.
Happy Coding…
|
| Author: joypackiaraj 19 Mar 2008 | Member Level: Bronze Points : 0 |
good coding
|
| Author: Mahesh Patel 18 Sep 2008 | Member Level: Silver Points : 1 |
Try http://mysignature.brinkster.net (For ASP.NET 1.1 2.0) is an ASP.NET Web Custom Control that creates an online signature box to capture signature.
|
| Author: abhijit mithbawkar 29 Jan 2009 | Member Level: Bronze Points : 0 |
I will explain this
I have developed a User Component using Windows Control Library that requires Windows Tablet PC SDK 1.7 installed on client computer.
When I embed this control in .aspx page it works perfectly fine in Windows XP
but when I host this in Windows 2003, it does not display properly.
|
| Author: Mahesh Patel 31 Jan 2009 | Member Level: Silver Points : 1 |
Hi Abhijit, please be specific to what reference you are replying to, does this article not work on windows server 2003?? because http://mysignature.brinkster.net works on XP, Vista, 2003 and all browsers...
|
| Author: abhijit mithbawkar 04 Sep 2009 | Member Level: Bronze Points : 1 |
Sir,
The component works well only in IE6. It does not work in IE7, IE8, Mozilla FF and Google Chrome. Is there any setting in IIS or a tweak to the code which will make it work in those browsers as well?
|
| Author: Ramesh Sahu 04 Sep 2009 | Member Level: Gold Points : 0 |
Very Good Article but its not work in Window 2008 Environment.
|