2. Code for touch, get mouse and pen for free

5. Pointer API captures pen motion, passing coordinates to Ink API Ink API helps render and stores motion as ink. Ink manipulation. Ink API groups strokes and passes them to recognizer Reco API returns interpreted combination of strokes from recognizer (rich recognition results) HI! Hi! Hit Hid hi!

6. Metro style app Windows.UI.Input. Inking stroke builder, rendering helper, ink manipulation, handwriting recognition with rich recognition results with alernates, clipboard, serialization Input Render Obtains Raw Data position, id and pressure using MSPointer (JavaScript / ICoreWindow (XAML) and passes this to stroke builder: Begin/Append/End Stroke methods Obtains Raw Data position, id and pressure using MSPointer (JavaScript / ICoreWindow (XAML) and passes this to stroke builder: Begin/Append/End Stroke methods Renders Strokes render using rendering helper method: InkRenderingSegment does not return packets but stroke rendering segments such as Bezier curves

7. Code Snippets Register for events ProcessPointerDown ProcessPointerUpdate ProcessPointerUp Render everything

8. Register for events html: <canvas id="myCanvas" width="1000" height="1000"></canvas> js: var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); canvas.addEventListener("MSPointerDown", handlePointerDown, false); canvas.addEventListener("MSPointerMove", handlePointerMove, false); canvas.addEventListener("MSPointerUp", handlePointerUp, false); var inkManager = new Windows.UI.Input.Inking.InkManager();

9. ProcessPointerDown function handlePointerDown(evt) { if ((evt.pointerType === 3) || ((evt.pointerType === 4) && (evt.button === 1))) { evt.preventManipulation(); inkManager.processPointerDown(evt.currentPoint); context.beginPath(); context.moveTo(evt.currentPoint.rawPosition.x, evt.currentPoint.rawPosition.y); } else if ((evt.pointerType === 2) || ((evt.pointerType === 4) && (evt.button === 2))) { // Handle touch down } }

10. ProcessPointerUpdate function handlePointerMove(evt) { if ((evt.pointerType === 3) || ((evt.pointerType === 4) && (evt.button === 1))) { evt.preventManipulation(); inkManager.processPointerUpdate(evt.currentPoint); context.lineTo(evt.currentPoint.rawPosition.x, evt.currentPoint.rawPosition.y); context.stroke(); } else if ((evt.pointerType === 2) || ((evt.pointerType === 4) && (evt.button === 2))) { // Handle touch move } }

11. ProcessPointerUp function handlePointerUp(evt) { if ((evt.pointerType === 3) || ((evt.pointerType === 4) && (evt.button === 1))) { evt.preventManipulation(); inkManager.processPointerUp(evt.currentPoint); context.lineTo(evt.currentPoint.rawPosition.x, evt.currentPoint.rawPosition.y); context.stroke(); context.closePath(); } else if ((evt.pointerType === 2) || ((evt.pointerType === 4) && (evt.button === 2))) { // Handle touch up } renderAllStrokes(); }

12. Render everything function renderAllStrokes() { inkManager.getStrokes().forEach(function (stroke) { var first = true; stroke.getRenderingSegments().forEach(function (segment) { if (first) { context.moveTo(segment.position.x, segment.position.y); first = false; } else { context.bezierCurveTo(segment.bezierControlPoint1.x, segment.bezierControlPoint1.y, segment.bezierControlPoint2.x, segment.bezierControlPoint2.y, segment.position.x, segment.position.y); } }); }); context.stroke(); context.closePath(); }

14. Code Snippets Select strokes using Touch Moving selected strokes Selecting and Erasing modes Deleting selected strokes

15. Selecting individual strokes (using touch) function handlePointerDown(evt) {... else if ((evt.pointerType === 2) || ((evt.pointerType === 4) && (evt.button === 2))) { var hit = false; inkManager.getRecognitionResults().forEach(function (result) { if (inRect(evt.offsetX, evt.offsetY, result.boundingRect)) { result.getStrokes().forEach(function (stroke) { stroke.selected = true; hit = true; }); } }); if (hit) { evt.preventManipulation(); prevX = evt.offsetX; prevY = evt.offsetY; } } }

16. Moving selected strokes function handlePointerMove(evt) { if ((evt.pointerType === 3) || ((evt.pointerType === 4) && (evt.button === 1))) { // Handle pen move } else if ((evt.pointerType === 2) || ((evt.pointerType === 4) && (evt.button === 2))) { evt.preventManipulation(); var shift = {x: evt.offsetX - prevX, y: evt.offsetY - prevY}; inkManager.moveSelected(shift); renderAllStrokes(); prevX = evt.offsetX; prevY = evt.offsetY; } }

17. Selecting mode (Lasso) and erasing mode inkManager.mode = Windows.UI.Input.Inking.InkManipulationMode.selecting; inkManager.mode = Windows.UI.Input.Inking.InkManipulationMode.erasing; inkManager.mode = Windows.UI.Input.Inking.InkManipulationMode.inking; // These 3 modes all use the same down/move/up handlers inkManager.deleteSelected();

19. Code Snippets Recognition Find and select all strokes

20. Recognition function recognize() { inkManager.recognizeAsync(Windows.UI.Input.Inking.InkRecognitionTarget.all).then( function (results) { inkManager.updateRecognitionResults(results); }); }

21. Find and select all strokes function recognizeThenFindAndSelect(target) { inkManager.recognizeAsync(Windows.UI.Input.Inking.InkRecognitionTarget.all).then(function (results) { results.forEach(function (result) { result.getTextCandidates().forEach(function (candidate) { if (target.toLowerCase() === candidate.toLowerCase()) { result.getStrokes().forEach(function (stroke) { stroke.selected = true; }); } }); }); }); }

28. Metro style app built for Windows using JavaScript / C++ or C# runtime environment Metro style app Windows runtime Windows.UI.Input.Inking namespace for ink management Windows.Graphics namespace for rendering IE events for JavaScript / Windows.Foundation namespace for ICoreWindow (C++ / C#) obtains position, id, & pressure from MSPointer (JavaScript) / ICoreWindow (C++/C#) obtains position, id, & pressure from MSPointer (JavaScript) / ICoreWindow (C++/C#) manages ink with calls to Windows.UI.Input.Inking renders using HTML5 Canvas (JavaScript), D2D and DUI

29. Save function saveToFile() { var picker = new Windows.Storage.Pickers.FileSavePicker(); picker.pickSingleFileAsync().then(function (file) { file.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) { var outputStream = fileStream.getOutputStreamAt(0); inkManager.saveAsync(outputStream).then(function() { outputStream.flushAsync().then(function() { }); }); }); }); }

30. Load function loadFromFile() { var picker = new Windows.Storage.Pickers.FileOpenPicker(); picker.pickSingleFileAsync().then(function (file) { file.openAsync(Windows.Storage.FileAccessMode.read).then(function (stream) { var inputStream = fileStream.getInputStreamAt(0); inkManager.Load(inputStream); renderAllStrokes(); }); }); }

31. Copy and Paste function copySelectedToClipboard() { inkManager.copySelectedToClipboard(); } function pasteFromClipboard(point) { inkManager.pasteFromClipboard(point); }

32. Select with Recent Recognition function recognizeRecentThenFindAndSelect(target) { inkManager.recognizeAsync(Windows.UI.Input.Inking.InkRecognitionTarget.recent).then(function (results) { inkManager.updateRecognitionResults(results); inkManager.getRecognitionResults().forEach(function (result) { result.getTextCandidates().forEach(function (candidate) { if (target.toLowerCase() === candidate. toLowerCase()) { result.getStrokes().forEach(function (stroke) { stroke.selected = true; }); } }); }); }); }