Ink for Designers and Developers


Published on

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.

Published in: Business, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ink for Designers and Developers

  1. 1. Sam George Development Lead Microsoft Corporation
  2. 2. Demos Why ink? Design guidelines Ink 101 for developers Going beyond the basics Questions
  3. 3. Interactive Expressive Differentiating Works with Stylus or Mouse Easy!
  4. 4. 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
  5. 5. Minimum Ink Controls Ink Erase Additional Ink Controls Ink color Ink height and width
  6. 6. <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
  7. 7. <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>
  8. 8. StrokeCollection Simple collection of Stroke objects HitTest, GetBounds Stroke StylusPoints and DrawingAttributes StylusPoint X, Y, PressureFactor DrawingAttributes Height, Width, Color, OutlineColor
  9. 9. 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
  10. 10. 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
  11. 11. 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>
  12. 12. 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
  13. 13. 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
  14. 14. If you are interested in using the 2005 Recognizer Pack commerically:
  15. 15. © 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.