Your SlideShare is downloading. ×
Ink for Designers and Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Ink for Designers and Developers

555
views

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 …

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
555
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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