WP7 A better InkPresenter using XNA

  Last week I was at SMAU Italia  together with Matteo Pagani giving a hand at Windows Phone 7 labs and having a good time with my friends at Microsoft. I also got the pleasure to meet Ben Riga. One of the attendees at the laboratory raised a really good question about the performance of the InkPresenter in WP7. He is using the control to capture a signature, but if you are pretty fast (usually people when they do their signature are fast) the result is "ugly" and not really usable. You won't get a smooth curve, but something like this:

 This screenshot is taken in the emulator, but on the real device the curve looks worst and it's easy to reproduce this behavior. I took this "problem" as a challenge (two nights of work and now the third to write the post) convinced that I can get better results with a mix between XNA and Silverlight, mix that in Mango is possible. T

 The main problem is the number of points returned by the event MouseMove of the InkPresenter control which is not enough points to draw a decent curve.

  The first thing I've tried in the XNA version was to use the TouchPanel.GetState() but I was surprised to see that I get the same number of sampling points as the MouseMove in InkPresenter. The things improved a lot when I've used TouchPanel.ReadGesture() with GestureType.FreeDrag. Using these sampling points as StylusPoints for the InkPresenter the situation improved a little:

 The black line is the one obtained with MouseMove and the red one is the one obtained with ReadGesture.The result is better, but not satisfying. The only way to further improve the result was to manually draw the curve without InkPresenter. I've have used BezierSegment to draw the curve. Without any processing this would be the result:

The new curve is the blue one which is better than the others, but it is still not smooth in some points. This is because a Bézier path is smooth if each endpoint and its two surrounding control points lie in a straight line. In other words, the two tangents at each Bézier endpoint are parallel.

There is more than one approach to solve this behavior and I've implemented two (with all the mathematics I felt back at the University http://en.wikipedia.org/wiki/B%C3%A9zier_curve). 

The first is an algorithm for Automatically Fitting Digitized Curves with the Douglas Peucker algorithm to reduce the number of points (http://stackoverflow.com/questions/5525665/smoothing-a-hand-drawn-curve).

The second one uses Bézier splines which creates the First and Second control points for each Bézier segment http://www.codeproject.com/KB/graphics/BezierSpline.aspx . 

With both algorithms the results are pretty good:

If you are interested to play with the sample you can change the following parameters:

double PhilipSchneiderTolerance = 0;

double PhilipSchneiderError = 4;

-used when the fitting algorithm is PhilipSchneider (run this sample http://cid-c27e99281f78a67a.office.live.com/self.aspx/Public/Simplify.zip on the desktop to understand what changes when you change the Tolerance and the Error)

 private bool _showPoints = false;

-shows or hides the points read by ReadGesture

        

private bool _showOtherCurves = false;

-shows or hides the InkPresenter curve using MouseMove and ReadGesture

private FitCurveAlgorithm _algorithm = FitCurveAlgorithm.PhilipSchneider;

-changes the fitting algorithm: None, BezierSpline, PhilipSchneider

Here you can download the project!

P.S. The project still needs some working/polishing in order to be used in production, but that is the simple part so... HAVE FUN

NAMASTE