This article should help you build a vanilla or any framework web application with math or text handwriting recognition embedded, in less than 5 minutes.

What is iinkTS?

iinkTS is the core of the MyScript browser technology. It is a graphical library that makes the integration of handwriting recognition and interactive ink easier in any web application. It displays a capturing and a SVG based rendering zone. It takes care of the communication with the server too.

As recognition and conversion are processed on the server, it brings some constraints to ensure an optimal user experience. You need a high speed internet connection (latency is the key, as exchanged messages are relatively small except during jiix exports). For content styling, you have to use parameters and JavaScript objects instead of CSS, as the server needs to know the exact user positions.

Supported features

The following features of interactive ink are supported :

• Easy to integrate,
• Digital ink capture and rendering,

• Rich editing gestures,

• Import and export content,

• Styling,

• Typeset support,

• More than 200 mathematical symbols supported,

• 66 supported languages

Browser support

iinkTS supports the latest version of all major browsers: Safari, Chrome, Firefox and Edge.

Requirements

This guide assumes that you are already familiar with key web-concepts like JavaScript dependencies management.

npm and Node.js have to be installed on your working environment.

This guide and relative libraries have been tested on Windows, macOS and Linux.

Installation

Use an existing project or start a fresh one with the command below:

npm init

Type the following in your developing folder to install the dependency:

npm install iink-ts

Recopy and read index.html

Recopy the content of index.html into the folder where the npm install command was launched.

As iinkTS is relying on either MyScript Cloud or MyScript Server, you have to provide an url and credentials to the server. The default url for MyScript Cloud is cloud.myscript.com. The credentials come as applicationKey and hmacKey properties that you should update with your own keys in the index.html.

We recommend you to read the source code, as the comments might help you understand the logic. The following contains the different steps of the example:

• import iinkts javascript and css,
• create the required DOM elements:
  • buttons for the editor’s controls,
  • an element to register an editor
• register the editor to its DOM element with iinkTS,
• bind the buttons events to the editor’s controls,
• listen editor’s events to update buttons state.

Start using it

Launch a webserver serving the directory containing the dependencies and the index.html file with for example python -m SimpleHTTPServer in python v2 or python -m http.server in python v3.

Open the page in your browser (http://127.0.0.1:8000 if you used the previous command)

Understanding iinkTS architecture

iinkTS is a graphical JavaScript library. Rich content and behavior are bound to the DOM element provided to the library during a creation phase. This element is being called “editor” in the documentation. It is the central point to interact with content.

If you are already familiar with iink, please note web libraries allow you to manipulate only one content part at a time. The editing zone captures and renders the user input as the user writes on it. Depending on the editor, a canvas or a SVG element is created.

Once strokes are captured, iinkTS handles the communication with the server. The protocol used (REST or WebSocket) depends on the editor.

The library handles identification and communication with the server. It also detects errors and attempt retries for you. Once a recognition result is received, the display is updated and rich events are sent to enable custom integration and interaction with your application.

See below the architecture of iinkTS:

An editor is always attached to a DOM element, where all the DOM nodes required for stroke capture and rendering are done. To work properly, you have to inject the right configuration and provide the Cloud with urls and credentials. As recognition is done on the server side, you have to provide styling information to the editor, that will propagate it to the server. The editor also allows you to import and export ink data in it.

Creating an editor and attaching it to the DOM

To use iinkTS, you need to install the lib with npm and import it.

1. Create an index.html file in the same directory.

2. Add the following lines in the head section of your file to use iinkTS and the css :

<script src="node_modules/iink-ts/dist/iink.min.js"></script>

1. Still in the head section, add a style and specify the height and the width of your editor:

<style>
    #editor {
        width: 100%;
        height: 100%;
    }
</style>

1. In the body tag, create a div tag that will contain the editing area:

<div id="editor"></div>

1. Then you need to instantiate the editor with the DOM Element you have created and a valid configuration object, and to initialize it.

const editorElement = document.getElementById('editor');

  const editor = await iink.Editor.load(editorElement, "INTERACTIVEINK", /* or INTERACTIVEINKSSR or INKV2 or INKV1 */
        configuration: {
            server: {
                applicationKey: '#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#',
                hmacKey: '#YOUR MYSCRIPT DEVELOPER HMAC KEY#'
            }
        }
  });

A working version of this example is available online.

Reference documentation

Other optional attributes, methods and events are listed and documented in the reference documentation. In addition, the examples web page shows a number of demo use cases based on iinkTS.

The next sections will drive you through the most important points.