MyScript Interactive Ink SDK | Starter | UWP

This project demonstrates a simple way to integrate MyScript Interactive Ink SDK into your UWP app.

1. Project Structure
2. Class/Type Structure
3. Several You-Must-Knows
4. Disclaimer

Project Structure

This project consists of 3 groups:

• The application project Starter;
• The shared libraries Modules, including:
  • Library Common;
  • Library UI;
• The shared sources, including:
  • The shared assembly info Properties;
  • The shared localization Strings;
  • The shared Certificate from MyScript Developer, which is required to integrate Interactive Ink SDK.

To obtain your own developer certificate, please follow the official instructions.

Class/Type Structure

Corresponding to the project structure, classes/types are grouped into the following namespaces:

• Starter -> MyScript.InteractiveInk.*;
• Common -> MyScript.InteractiveInk.Common.*;
• UI -> MyScript.InteractiveInk.UI.*

The entry point is App, which creates and holds a Engine instance with MyCertificate. Then the App launches MainPage, which creates and holds a corresponding MainViewModel to hold an Editor instance. The Editor is supposed to be attached to the UI control InteractiveInkCanvas, which handles the most of rendering commands and exposes interactivity from Interactive Ink SDK to the application layer.

The main implementation lies in InteractiveInkCanvas, to apply this controls in application, you have to:

First, create an Editor (see MainViewModel):

// Code behind.
public Editor Editor { get; set; }
// Assumes that the DPI is the default value 96.
var dpi = 96;
var renderer = engine.CreateRenderer(dpi, dpi, RenderTarget);
Editor = engine.CreateEditor(renderer);

Then attach the Editor to InteractiveInkCanvas (see MainPage):

<!-- Xaml -->
<Page xmlns:iink="using:MyScript.InteractiveInk.UI.Xaml.Controls">
    <iink:InteractiveInkCanvas
        x:Name="RenderTarget"
        Editor="{x:Bind Editor, Mode=OneWay}" />
</Page>

Several You-Must-Knows

Basically, Interactive Ink SDK follows the most common inking mechanism: input the user pointer events into the Editor, then the Editor outputs the rendering commands, which are supposed to be implemented by developers on their platforms. Therefore, the following are the points that you have to implement to integrate Interactive Ink SDK into your app:

• Input pointer events
  • PointerPressed => Editor.PointerDown;
  • PointerMoved => Editor.PointerMove;
  • PointerReleased => Editor.PointerUp;
  • PointerCanceled => Editor.PointerCancel;
• Output rendering commands
  • Implement IRenderTarget;
  • Implement shape drawing commands ICanvas & IPath;

See more information about MyScript Interactive Ink SDK.

Disclaimer

This project is only a representative of personal views, instead of any official positions!