Getting started

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 MyScriptJS?

MyScriptJS 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 rendering zone (SVG if V4 api are used) and takes care of the communication with the server.

MyScriptJS can be used with any web framework.

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 :

Browser support

MyScriptJS supports the latest version of all major browsers: Safari 10+ and the evergreen Chrome, Firefox and Edge.

Requirements

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

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 myscript

Recopy and read index.html

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

Before using those API, you have to be registered on MyScript Cloud and have both an application key and an hmac key.

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 a pointer event polyfill,
  • import myscriptjs 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 MyScriptJS,
  • 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. Open the page in your browser (http://127.0.0.1:8000 if you used the previous command)

Understanding MyScriptJS architecture

MyScriptJS 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 configuration, a canvas or a SVG element is created.

Once strokes are captured, MyScriptJS handles the communication with the server. The protocol used (REST or WebSocket) depends on the configuration. 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 MyScriptJS:

Configuration
[Not supported by viewer]
DOM Element
[Not supported by viewer]
Editor
[Not supported by viewer]
Styling
[Not supported by viewer]
Imports
[Not supported by viewer]
Exports
[Not supported by viewer]
MyScript Cloud or 
MyScript Server
[Not supported by viewer]

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 MyScriptJS, you need to install the lib with npm and import it. We also recommend you to import a pointer event polyfill like PEP.

<head>
  <link rel="stylesheet" href="node_modules/myscript/dist/myscript.min.css"/>
  <script src="node_modules/myscript/dist/myscript.min.js"></script>
  <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>

In the webpage where you want your user to write, add a div tag:

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

Then you need to register the editor with the DOM Element you have created and a valid configuration object. All the options and default values are described in the DefaultConfiguration.js file.

This documentation explains the V4 version of api.

const editorElement = document.getElementById('editor');
const configuration = {
  recognitionParams: {
    type: 'TEXT',
    protocol: 'WEBSOCKET',
    apiVersion: 'V4',
    server: {
      applicationKey: 'YOUR APPLICATION KEY',
      hmacKey: 'YOUR HMAC KEY'
    }
  }
}
MyScript.register(editorElement, configuration);
The grape of objects behind V3 attribute are related to the previous version of MyScript API. To benefit from V4 features, set the apiVersion to V4 and configure the parameters behind V4 attribute.

A working version of this example is available online.

Configuring Math recognition

Another variant of this example configured with Math is also available. Configuration and usage are pretty close.

Reference documentation

Other optional attributes, methods and events are listed and documented in the reference documentation. The next sections will drive you through the most important points.

We use cookies to ensure that we give you the best experience on our website Read the privacy policy