ink for designers and developers

22

Upload: goodfriday

Post on 18-Jan-2015

564 views

Category:

Business


4 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Ink for Designers and Developers
Page 2: Ink for Designers and Developers

Ink for Developers and Designers

Sam GeorgeDevelopment LeadMicrosoft Corporation

Page 3: Ink for Designers and Developers

DemosWhy ink?Design guidelinesInk 101 for developersGoing beyond the basicsQuestions

Ink for Developers and DesignersAgenda

Page 4: Ink for Designers and Developers

Ink over photos and video

demo

Page 5: Ink for Designers and Developers

InteractiveExpressiveDifferentiatingWorks with Stylus or MouseEasy!

Ink for Developers and DesignersWhy Ink?

Page 6: Ink for Designers and Developers

Provide an open, uncluttered inking surfaceSeparate and minimize command and setting UIMake ink surfaces as large as possible

Ensure sufficient contrast of ink over mediaUse OutlineColor

Ink for Developers and DesignersDesign Guidelines

Page 7: Ink for Designers and Developers

Minimum Ink ControlsInkErase

Additional Ink ControlsInk colorInk height and width

Ink for Developers and DesignersDesign Guidelines

Page 8: Ink for Designers and Developers

Ink 101 for Developers

Page 9: Ink for Designers and Developers

<InkPresenter/>Based on CanvasInk is presented on top of childrenAbsolute positioning for children

Canvas.Left, Canvas.Top

InkPresenter.StrokesStrokeCollection objectEntry point into simple Ink object model

Ink for Developers and DesignersInk 101 for Developers

Page 10: Ink for Designers and Developers

Ink for Developers and DesignersInk 101 for Developers

StrokeCollection

Stroke

DrawingAttributes

StylusPoint

StylusPointCollection

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

Page 11: Ink for Designers and Developers

StrokeCollectionSimple collection of Stroke objectsHitTest, GetBounds

StrokeStylusPoints and DrawingAttributes

StylusPointX, Y, PressureFactor

DrawingAttributesHeight, Width, Color, OutlineColor

Ink for Developers and DesignersInk 101 for Developers

Page 12: Ink for Designers and Developers

Collecting inkListen to MouseDown, MouseMove, MouseUpOn MouseDown, create a new StrokeCall args.GetStylusPoints(element)Add StylusPointCollection to StrokeWe have a simple javascript file that does this for you

Ink for Developers and DesignersInk 101 for Developers

Page 13: Ink for Designers and Developers

Erasing inkListen to MouseDown, MouseMove, MouseUpCall args.GetStylusPoints(element)Call inkPresenter.Strokes.HitTest()Remove any hit strokesWe have a simple javascript file that does this for you

Ink for Developers and DesignersInk 101 for Developers

Page 14: Ink for Designers and Developers

Going Beyond the Basics

Page 15: Ink for Designers and Developers

Saving / loading inkRecommend you save as Xaml, load from Xaml

Ink for Developers and DesignersGoing Beyond the Basics

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

Page 16: Ink for Designers and Developers

Playing back inkCreate a Stroke Add a single StylusPointAdd it to the StrokeCollectionAdd StylusPoints on a timer until you're doneWe have a javascript file that does this for you

Ink for Developers and DesignersGoing Beyond the Basics

Page 17: Ink for Designers and Developers

Recognizing inkInstall on Windows Server 2003 x86:

Tablet PC 1.7 SDKTablet PC Edition 2005 Recognizer PackTablet PC InkAnalysis and Input supplemental

We have a sample ASP.NET asmx webserviceTakes StrokeCollection XAMLReturns recognized handwriting and an alternate

Ink for Developers and DesignersGoing Beyond the Basics

Page 18: Ink for Designers and Developers

If you are interested in using the 2005 Recognizer Pack commerically: [email protected]

Ink for Developers and DesignersGoing Beyond the Basics

Page 19: Ink for Designers and Developers

Questions?

Page 20: Ink for Designers and Developers

Please fill out your eval

evaluation

Page 21: Ink for Designers and Developers

© 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.

Page 22: Ink for Designers and Developers