Imagine if your users could add handwritten annotations over online photos, greeting cards or video (including live playback of your handwriting). Learn how to use Ink to take your Web sites to new heights of interactivity, personalization, social interaction, and usability. Learn the key design principles for Ink, and see how to code for Ink in the browser and on the server.

2. Sam George
Development Lead
Microsoft Corporation

3. Demos
Why ink?
Design guidelines
Ink 101 for developers
Going beyond the basics
Questions

5. Interactive
Expressive
Differentiating
Works with Stylus or Mouse
Easy!

6. Provide an open, uncluttered inking surface
Separate and minimize command and setting UI
Make ink surfaces as large as possible
Ensure sufficient contrast of ink over media
Use OutlineColor

7. Minimum Ink Controls
Ink
Erase
Additional Ink Controls
Ink color
Ink height and width

9. <InkPresenter/>
Based on Canvas
Ink is presented on top of children
Absolute positioning for children
Canvas.Left, Canvas.Top
InkPresenter.Strokes
StrokeCollection object
Entry point into simple Ink object model

10. <InkPresenter>
<InkPresenter.Strokes>
StrokeCollection
<StrokeCollection>
<Stroke>
<Stroke.DrawingAttributes/>
Stroke
<DrawingAttributes Color=“Blue”/>
</Stroke.DrawingAttributes>
DrawingAttributes <Stroke.StylusPoints>
<StylusPoint X=“1” Y=“2”/>
</Stroke.StylusPoints>
StylusPointCollection
</Stroke>
</StrokeCollection>
</InkPresenter.Strokes>
StylusPoint
</InkPresenter>

11. StrokeCollection
Simple collection of Stroke objects
HitTest, GetBounds
Stroke
StylusPoints and DrawingAttributes
StylusPoint
X, Y, PressureFactor
DrawingAttributes
Height, Width, Color, OutlineColor

12. Collecting ink
Listen to MouseDown, MouseMove, MouseUp
On MouseDown, create a new Stroke
Call args.GetStylusPoints(element)
Add StylusPointCollection to Stroke
We have a simple javascript file that does this for you

13. Erasing ink
Listen to MouseDown, MouseMove, MouseUp
Call args.GetStylusPoints(element)
Call inkPresenter.Strokes.HitTest()
Remove any hit strokes
We have a simple javascript file that does this for you

15. Saving / loading ink
Recommend you save as Xaml, load from Xaml
<StrokeCollection>
<Stroke>
<Stroke.DrawingAttributes/>
<DrawingAttributes Color=“Blue”/>
</Stroke.DrawingAttributes>
<Stroke.StylusPoints>
<StylusPoint X=“1” Y=“2”/>
</Stroke.StylusPoints>
</Stroke>
</StrokeCollection>

16. Playing back ink
Create a Stroke
Add a single StylusPoint
Add it to the StrokeCollection
Add StylusPoints on a timer until you're done
We have a javascript file that does this for you

17. Recognizing ink
Install on Windows Server 2003 x86:
Tablet PC 1.7 SDK
Tablet PC Edition 2005 Recognizer Pack
Tablet PC InkAnalysis and Input supplemental
We have a sample ASP.NET asmx webservice
Takes StrokeCollection XAML
Returns recognized handwriting and an alternate

18. If you are interested in using the 2005 Recognizer Pack
commerically: mtpisv@microsoft.com

21. © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,
it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.