Date post: | 18-Jan-2015 |
Category: |
Business |
Upload: | goodfriday |
View: | 564 times |
Download: | 4 times |
Ink for Developers and Designers
Sam GeorgeDevelopment LeadMicrosoft Corporation
DemosWhy ink?Design guidelinesInk 101 for developersGoing beyond the basicsQuestions
Ink for Developers and DesignersAgenda
Ink over photos and video
demo
InteractiveExpressiveDifferentiatingWorks with Stylus or MouseEasy!
Ink for Developers and DesignersWhy Ink?
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
Minimum Ink ControlsInkErase
Additional Ink ControlsInk colorInk height and width
Ink for Developers and DesignersDesign Guidelines
Ink 101 for 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
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>
StrokeCollectionSimple collection of Stroke objectsHitTest, GetBounds
StrokeStylusPoints and DrawingAttributes
StylusPointX, Y, PressureFactor
DrawingAttributesHeight, Width, Color, OutlineColor
Ink for Developers and DesignersInk 101 for 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
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
Going Beyond the Basics
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>
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
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
If you are interested in using the 2005 Recognizer Pack commerically: [email protected]
Ink for Developers and DesignersGoing Beyond the Basics
Questions?
Please fill out your eval
evaluation
© 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.