Getting started
This section briefly presents what myscript-common-element
is and gives you basic information to start using it.
What is myscript-common-element?
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,
- Styling,
- 65 supported languages
Browser support
myscript-common-element 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-common-element
Mandatory attributes
As myscript-common-element
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
.
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-common-element
will take care of computing and answering the challenge sent by the server.
Integration to HTML markup
Edit a file index.html
in the same folder and add the following lines:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Those three meta make the capture of handwriting inputs easier on modile devices -->
<title>myscript-common-element demo</title>
<!-- As web components are not fully supported -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- myscript-common-element is imported to be used later -->
<script type="module" src="node_modules/myscript-common-element/myscript-common-element.js"></script>
<style>
body {
margin: 0;
height: 95vh;
}
myscript-common-element {
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-common-element
applicationkey="YOUR APPLICATION KEY"
hmackey="YOUR HMAC KEY KEY">
</myscript-common-element>
</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
Optional attributes
Some attributes are optional but have to be well-configured for a good user experience.
Attribute name | Description |
---|---|
type |
TEXT or MATH are possible values if you want to benefit from interactive ink capabilities. |
host |
Set the value to your host when using the “on premise” version of MyScript technology |
ondemand |
By default, exports are done every time [stroke(s)][glossary-stroke] are sent to the server. You can disable this behavior by setting this attribute. Exports will be done only when an explicit call to export() is done. |
processdelay |
Delay in ms before triggering export event after the last recognition event. Available only in websocket if on-demand is not activated. |
Configuring myscript-common-element with JavaScript
For every attribute modification of myscript-common-element
(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-common-element
to help you build a fast and interoperable web application.
If you want to set attributes in JavaScript, create your instance of myscript-common-element
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-common-element')
), 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-common-element
.
Read the configuration reference documentation for a full list of supported options.
The programmatic init example code illustrates how to achieve it.
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.