Getting started

This section presents what myscript-math-web is and gives you information to start using it.

What is myscript-math-web?

The myscript-math-web element offers the possibility to input handwritten math in any web page. It is a rich editing zone where you can write with hand math, edit it with rich gestures, convert to type script, manipulate style and export the produced content in LaTeX and MATHML. This component comes with a mathematic solver for even richer integrations.

Only basic skills in web development are required to start using myscript-math-web. Being familiar with Polymer is not necessary.

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 :

Easy to integrate,
Digital ink capture and rendering,
Rich editing gestures,
Content export,
Styling,
Typeset support,
More than 200 mathematical symbols supported,

Browser support

myscript-math-web 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-math-web

Mandatory attributes

As myscript-math-web 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.

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

Mandatory attributes

Attribute name	Description
`apiversion`	use `V4` for iink API
`applicationkey`	The application key provided during registration
`hmackey`	The hmac key provided during registration

myscript-math-web will take care of computing and answering the challenge sent by the server.

Integration to HTML markup

Create and edit the index.html file in the same folder and add the following lines:

<!doctype html>
<!--doctype html is mandatory to have Katex (LATEX rendering on web page) work correctly -->
<html>
<head>
  <!-- Those three meta make the capture of handwriting inputs easier on mobile devices -->
  <meta name="viewport" content="width=device-width, minimum-scale=1.3, initial-scale=1.3, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title>myscript-math-web demo</title>

  <!-- As web components are not fully supported -->
  <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

  <!-- myscript-math-web is imported to be used later -->
  <script type="module" src="node_modules/myscript-math-web/myscript-math-web.js"></script>

  <style>
    body {
      margin: 0;
      height: 95vh;
    }

    myscript-math-web {
      height: 100%;
    }
  </style>
</head>
<body>
  <!-- Please change applicationkey and hmackey below with those sent by mail during your registration. You can re-access them by connecting to your dashboard at developer.myscript.com with your myscript account -->
  <myscript-math-web
    applicationkey="YOUR APPLICATION KEY"
    hmackey="YOUR HMAC KEY KEY">
  </myscript-math-web>
</body>
</html>

Launch a local Web server to start using it. We recommend to use the polymer one, you can find more information on the Polymer website.

polymer serve

View demo Get source code

Showing or hiding the export zone

By default, myscript-math-web displays the rendering zone. KaTeX is used to render the LaTeX result and help the user control what is recognized. To hide this zone, set hideexportzone. Note that like any other HTML boolean attribute, hideexportzone=false is interpreted as a true value (like the hidden attribute).

Solver

Entered equations can be solved and question marks are supported as unknown variables. Rounding and truncation options are also available.

Disabling the solver

Solving is done automatically when the user converts the handwritten content. See the [dedicated solver section][math-solver] to see what is supported.

Use the disablesolver attribute of myscript-math-web to disable the solver if you do not need it.

<myscript-math-web
  apiversion="V4"
  applicationkey="YOUR APPLICATION KEY"
  hmackey="YOUR HMAC KEY"
  disablesolver>
</myscript-math-web>

View demo Get source code

Fine-tuning the solver

You can fine-tune the behavior of the solver with the following attributes.

Attribute	Default value and behavior
solverfractionalpartdigit	Number of digits displayed in the fractional part of the solver. For example 1/3 will be solved with 0.33333… if solverfractionalpartdigit is set to 5. By default, it is set to 3.
solverdecimalseparator	Character used as a decimal part separator. By default `.`.
solverroundingmode	`half up` or `truncate`. By default `half up`.
solverangleunit	`deg` or `rad`. By default `deg`.

See code source below for a customized example:

<myscript-math-web
  apiversion="V4"
  applicationkey="YOUR APPLICATION KEY"
  hmackey="YOUR HMAC KEY"
  solverfractionalpartdigit="5"
  solverdecimalseparator=","
  solverangleunit="rad">
</myscript-math-web>

View demo Get source code

Configuring myscript-math-web with JavaScript

For every attribute modification of myscript-math-web (except for styling, such as strokestyle, strokewidth, etc.), the underlying editor is reinitialized, network connections are closed and reopened to provide the updated context of the recognition to the server. If you want to set multiple attributes of a custom element with JavaScript, this behavior could really slow down your web application. That is where the unloaded attribute comes to the rescue.

This article about custom element interoperability lists the good practices met by myscript-math-web to help you build a fast and interoperable web application.

If you want to set attributes in JavaScript, create your instance of myscript-math-web with only an unloaded attribute set. When loaded into the DOM, the component is attached but remains empty. This gives you the possibility to access it with JavaScript (document.querySelector('myscript-math-web')), so that you are able to set all the needed attributes. The configuration attribute allows you to fine-tune all the possible options available with myscript-math-web.

Read the configuration reference documentation for a full list of supported options.

The programmatic init example code illustrates how to achieve it.

View demo Get source code

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.

Read reference