Editing

This page focuses on the role of the editing methods of myscript-math-web element.

Input capture

Incremental input

Interactive Ink SDK typically processes user input in real time. Once strokes are captured, myscript-math-web 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 myscript-math-web object:

  • pointerDown() - When the pointer first touches the surface.
  • pointerMove() - When the pointer moves while staying in contact with the surface.
  • pointerUp() - When the pointer is lifted from the surface.

Each of these methods requires you to provide:

  • x and y - The coordinates of the pointer on the surface
  • t - The timestamp of the pointer event
  • p - The pressure information associated to the event (normalized between 0 and 1)
  • pointerId - An identifier for this pointer.

Remarks:

  • The timestamp is typically the time in ms since Jan 1st, 1970. You can set it to -1 to let iink SDK generate one for you based on the current time of the system.
  • Interactive Ink SDK does not use the pressure information. It is stored in the model and can be retrieved at export or when implementing your own inking. If you don’t have or need this information, you can set it to 0.
  • If you only have one pointer simultaneously active, you can pass a pointer id of -1.

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.

Interactive Ink 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;
myscriptMathWeb.pointerEvents(strokes, processGestures);

Even if the following demo is written with myscript-common-element the exact same API applies to myscript-math-web.

Edit

Interactive Ink 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 myscript-math-web object:

  • Undo
  • Redo
  • Clear

By default, myscript-math-web comes with buttons bind to this actions. If you may plug them to any of your UI element please consider the following examples.

To plug your own commands you have to bind to your buttons the undo(), redo(), clear(), export_() and convert(). If you are willing to hide the default one just set the disablecontrols attribute.

<nav>
  <button class="classic-btn" onclick="myscriptCommonElement.undo()">undo</button>
  <button class="classic-btn" onclick="myscriptCommonElement.redo()">redo</button>
  <button class="classic-btn" onclick="myscriptCommonElement.clear()">clear</button>
  <button class="classic-btn" onclick="myscriptCommonElement.export_()">export</button>
  <button class="classic-btn" onclick="myscriptCommonElement.convert()">convert</button>
</nav>

<myscript-common-element scheme="https"
  applicationkey="..."
  hmackey="..."
  disablecontrols
  touch-action="none">

<script>
  const myscriptCommonElement = document.querySelector('myscript-common-element');
</script>

You can listen to the myscript-common-element’s change event to update the context:

myscriptCommonElement.addEventListener('changed', function(event) {
  undoElement.disabled = !event.detail.canUndo;
  redoElement.disabled = !event.detail.canRedo;
  clearElement.disabled = !event.detail.isEmpty;
});
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.

  • loaded: Fired when the editor is fully loaded.
  • changed: Fired when the editor state change, e.g. when undo/redo is available or not.
  • converted: Fired when the editor content is converted.
  • exported: Fired when the editor content export is available.
  • idle: Fired when the editor idle state changes, when asked.
  • error: Fired when an error occurs.
  • undo: Triggered when undo() is called.
  • redo: Triggered when redo() is called.
  • clear: Triggered when clear() is called.
  • convert: Triggered when convert() is called.
  • export: Triggered when export_() is called.

The method waitForIdle() provides by myscript-math-web 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.

Debug mode

As a developer you can have a better understanding of the internal behavior of myscript-math-web with debug mode.

If you want to debug the internal behavior, set the debug attribute when using myscript-math-web.

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