This page focuses on the role of the editor object, the central point to interact with content.

Input capture

Incremental input

MyScript iink SDK typically processes user input in real time. Once strokes are captured, iinkJS handles the communication with the server. The protocol used (REST or WebSocket) depends on the configuration. 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.

Custom capturing

For most integration use cases, the input capture provided is enough but for your custom need you may want to inject the strokes yourself. This can be done by calling the following methods of the iinkJS object:

Each of these methods requires you to provide:

Remarks:

Series of events

In some cases, you may want to send a set of strokes to the engine in a single pass, for instance if you import ink from outside of the iink model or if you want to extract a math equation from a digital ink drawing.

MyScript iink SDK provides a method to input in a single pass a series of pointer events, pointerEvents(), that take in parameter an array of PointerEvent objects.

When calling pointerEvents(), it is possible to set the optional second parameter processGestures to false to explicitly prevent gesture detection for this input. 
// Build the pointer events array
const strokes = [{
    "pointerType": "PEN",
    "pointerId": 1,
    "x": [273, 278, 281],
    "y": [121, 128, 133],
    "t": [3185.7900000000004, 3213.8150000000005, 3222.5350000000003],
    "p": [1.0, 1.0, 1.0]
  },{
    "pointerType": "PEN",
    "pointerId": 1,
    "x": [173, 178, 181],
    "y": [221, 228, 233],
    "t": [6185.7900000000004, 6213.8150000000005,6222.5350000000003],
    "p": [1.0, 1.0, 1.0]
  }];

const processGestures = false;
editor.pointerEvents(strokes, processGestures);
Get source code

Edit

MyScript iink SDK supports all the standard gestures defined as part of Interactive Ink.

There is nothing particular to do to benefit from gestures apart from using the WebSocket protocol as the gestures are not available with REST. The SDK will take care of detecting and applying the effect of the gestures from the provided input without any plumbing needed.

Other edit operations

The following operations can be directly made on the content of a part via a iinkJS object:

Three steps are required to plug buttons to the commands of the editor.

Add controls to the DOM:

<body>
  <div id="controls">
    <button id="undo" disabled></button>
    <button id="redo" disabled></button>
    <button id="clear" disabled></button>
  </div>

  <div id="editor" touch-action="none"></div>

  <script>
    const editorElement = document.getElementById('editor');
    const undoElement = document.getElementById('undo');
    const redoElement = document.getElementById('redo');
    const clearElement = document.getElementById('clear');

  </script>
</body>

Call the editor’s controls on click:

undoElement.addEventListener('click', () => {
    editorElement.editor.undo();
  });
  redoElement.addEventListener('click', () => {
    editorElement.editor.redo();
  });
  clearElement.addEventListener('click', () => {
    editorElement.editor.clear();
});

Listen to the editor’s change event to update the context:

editorElement.addEventListener('changed', (event) => {
    undoElement.disabled = !event.detail.canUndo;
    redoElement.disabled = !event.detail.canRedo;
    clearElement.disabled = !event.detail.canRedo;
  });
Get source code
If you need to integrate iink SDK undo/redo with your own undo/redo stack, refer to this page (advanced)

Monitoring changes in the model

Various events are sent by the DOM Element attached to the editor and let you as a developer to plug some custom logic when they occur.

The method waitForIdle() provides by iinkJS will raise an idle event when server and browser processing are over. This may be useful for instance in the case you want some synchronous recognition.

The following example let you explore by yourself how to handle the error event. Same logic could be applied with any other event.

Get source code

Smart guide

As you may have seen, when using the WebSocket protocol, the editor includes an helper called smart guide that appears as soon as writings are detected. The smart guide enables different actions. It shows in real time a preview of the converted text. It offers you the possibility to change a word using suggestions; it is as simple as clicking on a word and clicking on the suggestion. It also allows you to convert, copy or delete your text, which are available using the actions button on the right.

In iinkJS the smart guide is enabled by default if the type of the recognition is TEXT.

Three parameters are available to modify the default smart guide behavior.

Smart guide could be disabled by setting the attribute smartGuide to false in text parameter of the configuration pass to the Register function.

recognitionParams: {
    iink: {
        text: {
          smartGuide: false
        }
    }
}
Get source code

If you want the smart guide to disappear after a specific duration (no fade-out by default), you can use smartGuideFadeOut and his two properties, enable and duration. By default, the duration is set to 10000 milliseconds.

recognitionParams: {
    iink: {
        text: {
          smartGuideFadeOut: {
            enable: true,
            duration: 10000
          }
        }
    }
}

Debug mode

As a developer you can have a better understanding of the internal behavior of iinkJS with debug mode.

The example below explain how to access LoggerConfig and change the level of log to the desired one.

Get source code