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 a graphical TypeScript library that can be used in every web application to bring handwriting recognition and interactivity. Rich content and behavior are bound to the DOM element provided to the library during a creation phase. This element is being called “canvas” 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 canvas zone captures and renders the user input as the user writes on it. Once strokes are captured, iinkTS handles the identification and the communication with the server. It also detects errors and attempts retries. The protocol used (REST or WebSocket) depends on the canvas.

Once a recognition result is received, the display updates and rich events are sent to enable custom integration and interaction with your application. For math content, when the server sends a math-solving result, iinkTS updates the display to show the result and/or plot graphics.

See below the architecture of iinkTS:

A canvas is always attached to a root DOM element, where all the DOM nodes required for stroke capture and rendering are done. The canvas also allows you to import and export ink data in it.

Supported features

The following features of interactive ink are supported :

• Rich editing gestures,
• More than 200 mathematical symbols and math solving support,
• Shape recognition,
• 72 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

iinkTS can be installed with the well known package managers npm, yarn.

If you want to use npm or yarn you first have to init a project (or use an existing one).

npm init OR yarn init

You can then install iinkTS and use it as showed in the Usage section.

npm install iink-ts OR yarn add 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.

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)

Step by step creation of an index.html file

Universal Module Definition (UMD)

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 canvas:

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

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

<div id="canvas"></div>

1. In JavaScript and within a <script> tag placed before the closing </body> tag, create the canvas using the load function, your HTML element, the desired type and the possible options depending on the type, then initialize it:

const canvasElement = document.getElementById('canvas');
    const options = {
      configuration = {
        server: {
          scheme: "https",
          host: "cloud.myscript.com",
          applicationKey: "<YOU-APPLICATION-KEY>",
          hmacKey: "<YOUR-HMAC-KEY>",
        }
      }
    }
    const canvasType = "INTERACTIVE_INK" /* for a full interactive ink web experience
    or IINK_V2 if you only want to get ink recognition, see documentation next pages*/
    const canvas = iink.Canvas.load(canvasElement, canvasType, options);

1. Your index.html file should look like this:

<html>
  <head>
    <script src="node_modules/iink-ts/dist/iink.min.js"></script>
    <style>
      #canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="canvas"></div>
    <script>
      const canvasElement = document.getElementById("canvas")
      const options = {
        configuration: {
          server: {
            scheme: "https",
            host: "cloud.myscript.com",
            applicationKey: "<YOU-APPLICATION-KEY>",
            hmacKey: "<YOUR-HMAC-KEY>",
          },
        }
      }
      const canvasType = "INTERACTIVE_INK" /* for a full interactive ink web experience
      or IINK_V2 if you only want to get ink recognition, see documentation next pages*/
      const canvas = iink.Canvas.load(canvasElement, canvasType, options)
    </script>
  </body>
</html>

1. Open index.html in your browser or serve your folder content using any web server. 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.