×

Discover

Try

Embed WIRIS hand in a Web page

This document explains how to embed WIRIS hand, for recognition of handwriten math expressions, in a Web page.

The embedding process is compound by two steps. The first one is displaying the WIRIS hand canvas itself. The second one is the communication with WIRIS hand in order to retrieve the MathML of the handwriting recognition.

Inserting WIRIS hand in a Web page

You can create a new page with the following content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <script src="http://www.wiris.net/demo/hand/hand.js"></script>
    <script>
    var hand;
    window.onload = function () {
      hand = com.wiris.js.JsHand.newInstance();
      hand.insertInto(document.getElementById('handContainer'));
    }
    </script>
  </head>
  <body>
    <div id="handContainer"></div>
  </body>
</html>

In the above code, WIRIS hand is added into the <div> element inside the body of the page. The actual insertion is done in the onload event. The variable hand is a global variable that will be used later to access the API.

Getting the MathML of the handwriting recognition

WIRIS hand API has methods to get the MathML:

alert( hand.getMathML() );

And to set the MathML:

hand.setMathML(“<math><msup><mfenced open='(' close=')'><mrow><mi>a</mi> <mo>+</mo><mi>b</mi></mrow></mfenced><mn>3</mn></msup></math>”);

WIRIS hand defines an interface of listeners in order to manage the events of handwritten input and recognition. Using this simple interface we can fully interact with WIRIS hand. Below we can see the previous code for inserting WIRIS hand in a Web page extended to listen to the hand events and display the recognized MathML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <script src="http://www.wiris.net/demo/hand/hand.js"></script>
    <script>
    var hand;
    window.onload = function () {
      hand = com.wiris.js.JsHand.newInstance();
      hand.insertInto(document.getElementById('handContainer'));
        
      hand.addHandListener({
        contentChanged: function (instance) {
          document.getElementById('result').value = hand.getMathML();
        },
        recognitionError: function (instance, msg) {
          document.getElementById('result').value = "Error: " + msg;
        },
        strokesChanged: function(instance) {}
      });
    }
    </script>
  </head>
  <body>
    <div id="handContainer"></div>
    <textarea id="result" rows="8" cols="80"></textarea>
  </body>
</html>

This code includes a textarea that displays the recognized MathML anytime the input changes.

The handwriting recognition result also provides a confidence score. This score ranges in [0,1] such that the higher it is the more confident we are in the recognized MathML. It can be obtained using the getScore method.
 

hand.getScore();

Getting and setting the WIRIS hand content

WIRIS hand manages two different fields of information: the handwritten input strokes and the recognized MathML. In addition to the methods getMathML and setMathML previously shown, the API also defines the methods getMathMLwithStrokes and setStrokes.

getMathMLwithStrokes returns the current MathML containing the input strokes as a semantic annotation node.

var mml = hand.getMathMLwithStrokes();

The variable mml could have the following value:

<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics> <msup><mi>x</mi><mn>2</mn></msup><annotation encoding="application/json"> [[[166,183],[166,185],[168,188],[171,192],[174,197],[179,202],[184,207],[189,212],[193,216],[197,219],[200,222],[203,224],[205,225],[206,226],[207,226],[207,225]],[[197,189],[193,194],[188,200],[182,206],[176,213],[171,219],[167,223],[164,227],[162,231],[162,234],[162,236],[162,237]],[[225,144],[226,143],[228,143],[231,143],[234,143],[238,143],[241,143],[244,143],[245,144],[246,146],[245,149],[243,152],[239,155],[234,159],[223,167],[218,170],[215,172],[214,173],[214,174],[216,175],[220,177],[226,178],[233,179],[242,180],[250,181],[258,182],[264,183],[268,183]]]</annotation></semantics></math>

This MathML including the input strokes can be set using the regular setMathML method such that the handwritten input will also be loaded.

hand.setMathML( mml );

We can also set only the strokes (without MathML) and WIRIS hand will recognize them:

hand.setStrokes(“[[[166,183],[166,185],[168,188],[171,192],[174,197],[179,202],[184,207],[189,212],[193,216],[197,219],[200,222],[203,224],[205,225],[206,226],[207,226],[207,225]],[[197,189],[193,194],[188,200],[182,206],[176,213],[171,219],[167,223],[164,227],[162,231],[162,234],[162,236],[162,237]],[[225,144],[226,143],[228,143],[231,143],[234,143],[238,143],[241,143],[244,143],[245,144],[246,146],[245,149],[243,152],[239,155],[234,159],[223,167],[218,170],[215,172],[214,173],[214,174],[216,175],[220,177],[226,178],[233,179],[242,180],[250,181],[258,182],[264,183],[268,183]]]”);

Controlling the canvas size

WIRIS hand will be resized to the same dimensions of its parent container <div>. Following the example, to set a 500x300 canvas you can define the container as

<div style="width:500px;height:300px" id="handContainer"></div>

You can also use percentual dimensions:

<div style="width:100%;height:300px" id="handContainer"></div>

WIRIS Hand customization

It is possible to define the style of WIRIS hand, such as the handwriting width and color:

{'lineWidth':5, 'lineColor':'#ABCDEF'}

or the size of the recognized math expression

{'previewZoom':2.0}

These parameters can be set when a new instance is created

hand = com.wiris.js.JsHand.newInstance({'previewZoom':2.0});

or using the function setParams

hand.setParams({'previewZoom':2.0});

Any other style customization can be achieved by modifying the CSS.

Displaying handwritten equations

WIRIS hand has a read-only mode such that input and recognition are disabled but MathML and strokes can be displayed, for instance:

hand = com.wiris.js.JsHand.newInstance({'readOnly':true});
hand.setMathML( mml );

AttachmentSize
hand.html475 bytes
hand_listener.html893 bytes
hand_custom.html1.03 KB
hand_readonly.html3.26 KB