https://github.com/myscript/iinkts
https://github.com/myscript/iinkts
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/myscript/iinkts
- Owner: MyScript
- License: other
- Created: 2023-01-17T10:27:32.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-24T07:05:28.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T17:58:54.139Z (almost 2 years ago)
- Language: TypeScript
- Size: 3.9 MB
- Stars: 31
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# iinkTS
[](https://badge.fury.io/js/iink-ts)
[](https://myscript.github.io/iinkTS/examples/)
[](https://developer.myscript.com/docs/interactive-ink/latest/web/iinkts/)
> The fastest way to integrate rich **handwriting** features in your webapp.
>
> :point_right: [Examples](https://myscript.github.io/iinkTS/examples/):point_left:
iinkTS is a TypeScript library that can be used in every web application to bring handwriting recognition.
It integrates all you need:
* Signal capture for all devices,
* Digital ink rendering,
* Link to MyScript Cloud to bring handwriting recognition.
## Table of contents
* [Features](#features)
* [Requirements](#requirements)
* [Installation](#installation)
* [Usage](#usage)
* [Documentation](#documentation)
* [Development](#development)
* [Support](#getting-support )
* [Feedback](#sharing-your-feedback)
* [Contributing](#contributing)
* [License](#license)
## Features
* Text and Math support,
* Easy to integrate,
* Digital ink capture and rendering,
* Rich editing gestures,
* Import and export content,
* Styling,
* Typeset support,
* More than 200 mathematical symbols supported,
* 72 supported languages.
You can discover all the features on our Developer website for [Text](https://developer.myscript.com/features/text) and [Math](https://developer.myscript.com/features/math).
## Requirements
1. Have [npm](https://www.npmjs.com/get-npm), [yarn](https://yarnpkg.com/en/docs/install).
2. Have a MyScript developer account. You can create one [here](https://developer.myscript.com/support/account/registering-myscript-cloud/).
3. Get your keys and the free monthly quota to access MyScript Cloud at [developer.myscript.com](https://developer.myscript.com/getting-started/web)
## Installation
iinkTS can be installed with the well known package managers `npm`, `yarn`.
If you want to use `npm` or `yarn` you first have to init a project (or use an existing one).
```shell
npm init
OR
yarn init
```
You can then install iinkTS and use it as showed in the [Usage](#usage) section.
```shell
npm install iink-ts
OR
yarn add iink-ts
```
## Usage
1. Create an `index.html` file in the same directory.
2. Add the following lines in the `head` section of your file to use iinkTS and the css :
```html
```
3. Still in the `head` section, add a `style` and specify the height and the width of your editor:
```html
#editor {
width: 100%;
height: 100%;
}
```
4. In the `body` tag, create a `div` tag that will contain the editing area:
```html
```
5. In JavaScript and within a `` tag placed before the closing `</body>` tag, create the editor using the `load` function of the editor, your html editor element, the type of editor desired and the possible options depending on the type of editor then initialize it:
```javascript
const editorElement = document.getElementById('editor');
const editor = await iink.Editor.load(editorElement, "INTERACTIVEINK", /* or INTERACTIVEINKSSR or INKV1 or INKV2*/
{
configuration: {
server: {
applicationKey: '#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#',
hmacKey: '#YOUR MYSCRIPT DEVELOPER HMAC KEY#'
}
}
});
```
6. Your `index.html` file should look like this:
```html
<html>
<head>
<script src="node_modules/iink-ts/dist/iink.min.js">
#editor {
width: 100%;
height: 100%;
}
const editorElement = document.getElementById('editor');
const editor = await iink.Editor.load(editorElement, "INTERACTIVEINK", /* or INTERACTIVEINKSSR or INKV1 or INKV2 */
{
configuration: {
server: {
applicationKey: '#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#',
hmacKey: '#YOUR MYSCRIPT DEVELOPER HMAC KEY#'
}
}
});