Browse DevX
Sign up for e-mail newsletters from DevX


Using Ink on the Web : Page 3

One of the more interesting and challenging places to use Ink is in Web applications. But how can this technology, which is dependent on the physical relationship between the stylus, the digitizer, and the operating system, work over the Internet?




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Saving the Ink
Now that you have built this incredibly robust, full-featured control (hopefully, you will add more functionality than a Red Ink button), you still are not much better off than if you were using an Etch-a-Sketch™. Once the user leaves the page where they have been creating their masterpiece, all traces of their hard work will disappear into the ether. Surely, you wouldn't want that to happen.

Depending on the goal of your Web application, there are a variety of options for persisting the ink data. You may want to store the Ink in a database, save it as an image, or even send it to a Web service that processes it somehow. You also may want to send it to an Ink control on another page or just display it as an image on another Web page.

You can find more information about saving ink in the article "Persisting Ink on the Web." There, I explain some of the complexities that you have to deal with and show one method for getting the Ink out of the control and over to the server where you can process it however you like: save to a database, save as an image, etc.

The InkOverlay is able to persist its ink data in a few formats. With the SAVE method, you can serialize the Ink data to the proprietary format, InkSerializedFormat (ISF), so that it can be loaded into another Ink control. Another option of the SAVE method lets you output binary data to GIF format. Not only can this be pulled back into another Ink control, but it contains a byte array that represents a GIF.

When working with this data, consider that you will be handling it on the client side of your Web application and not on the server side. This poses some complicated problems. For example, HTML does not understand binary data. If you need to move the data around, it will need to be converted to Base64-encoded text and streamed out of the client side. Getting data from the client side to the server side is tricky as well.

The first thing you need to do is get the Ink out of the embedded control. This requires exposing a function that returns the Ink data. Because this data moves across the pipe to the server, it has to be in a string format, specifically Base64. (Saving as GIF will not save Ink with a transparent background. Using the persistence format of Base64InkSerialzedFormat provides both transparency and Base64 in one call.) With the function to turn the Ink red, everything was internal and it was okay to have the button in the control. With this function, you need to be connected to the Web page. The control has a public function and you will be calling it from the client-side script.

Add the following method to the Windows Form control

Public Function GetCurrentBase64Ink() As String If inkO.Ink.Strokes.Count = 0 Then Return "" Else Dim inkbytes() As Byte = _ inkO.Ink.Save(PersistenceFormat.Gif) Return Convert.ToBase64String(inkbytes) End If End Function

On the Web Form, you need a hidden field where you build a button to get this thing started, a function to make the call into the control, and a hidden field to store the returned string. The form will then post to server-side code. The server-side code then digs the data out of the hidden field and posts it to a database.

Add an HTML button to the Web Form and to its onclick event, add the function InktoDB().

<INPUT style="Z-INDEX: 101; LEFT: 424px; POSITION: absolute; TOP: 24px" type="button" value="Ink to DB" onclick="InktoDB()">

Next, add a hidden field to the form named InkDataASCII.

<INPUT id="InkDataASCII" type="hidden" runat="server">

Note that this field is exposed to the server side with runat="server". This allows you to get the data on the server side. Also, it is very important to remember that hidden data is visible to the client. You do not want to do this with any private data.

Next, add the following JavaScript function inside of <script> tags within the body of the page.

function InktoDB() { Form1.InkDataASCII.value= Form1.MyInkControl.GetCurrentBase64Ink(); if (Form1.InkDataASCII.value!="empty") Form1.submit(); }

The first line of the function calls the GetCurrentBase64Ink method from the control and stuffs the returned string into the hidden control. The second line submits the form. This is dependent on a change to the <form> tag.

Edit the <form> tag. In order to make this trick work, you need to remove the runat=server parameter from the form tag and add a post action that calls to a Web page where you process the Ink data.

<FORM id="Form1" action="ProcessInk.aspx" method="post">

This is all of the work that you need to do on this Web page.

Now create the server-side code that receives the data. In this sample, you will use another Web page to handle this processing for you. If you do not require any UI on the second Web page, you can also use an HTTPHandler, but a more detailed explanation is out of this article's scope.

Create a new Web Form called ProcessInk. In the Load event of the page, you get the Ink data from the calling Web page using the Request.Form.GetValues method, which returns a string array of public items on the requesting page. Extract the hidden field from the array and store it into a string

Dim inkStringArray() as String Dim inkData as String inkStringArray()= _ Request.Form.GetValues("InkDataASCII") inkData=InkStringArray(0)

Now you have the Base64 string representation of the Ink data. To convert it back to the byte array originally returned by the InkOverlay.Save method, you can use the following method

dim inkBytes() as _ Byte=Convert.FromBase64String(inkData)

This gives you full access to the GIF persistence-formatted data from the Ink control. At this point, you should be able to do anything with it on the server side that you could do in a regular Windows application that uses Ink data.

Thanks for your registration, follow us on our social networks to keep up-to-date