https://github.com/myscript/iinkts-preprod
https://github.com/myscript/iinkts-preprod
Last synced: about 10 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/myscript/iinkts-preprod
- Owner: MyScript
- License: other
- Created: 2023-06-21T14:07:05.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T10:18:54.000Z (over 1 year ago)
- Last Synced: 2024-10-29T12:18:39.589Z (over 1 year ago)
- Language: TypeScript
- Size: 62.3 MB
- Stars: 0
- Watchers: 4
- Forks: 0
- 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
### Universal Module Definition (UMD)
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%;
}
```
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 options = {
configuration = {
server: {
scheme: "https",
host: "cloud.myscript.com",
applicationKey: "<YOU-APPLICATION-KEY>",
hmacKey: "<YOUR-HMAC-KEY>",
}
}
}
const editorType = "INTERACTIVEINK" /* or INTERACTIVEINKSSR or INKV1 or INKV2 */
const editor = iink.Editor.load(editorElement, editorType, options);
```
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 options = {
configuration: {
server: {
scheme: "https",
host: "cloud.myscript.com",
applicationKey: "<YOU-APPLICATION-KEY>",
hmacKey: "<YOUR-HMAC-KEY>",
},
}
}
const editorType =
"INTERACTIVEINK" /* or INTERACTIVEINKSSR or INKV1 or INKV2 */
const editor = iink.Editor.load(editorElement, editorType, options)
import { Editor, getAvailableLanguageList } from "../../dist/iink.esm.js"
const editorElement = document.getElementById("editorEl")
const options = {
configuration : {
server: {
scheme: "https",
host: "cloud.myscript.com",
applicationKey: "<YOU-APPLICATION-KEY>",
hmacKey: "<YOUR-HMAC-KEY>",
},
}
}
const editorType =
"INTERACTIVEINK" /* or INTERACTIVEINKSSR or INKV1 or INKV2 */
const editor = await Editor.load(editorElement, editorType, options)
import { Editor, getAvailableLanguageList } from '../../dist/iink.esm.js'
const editorElement = document.getElementById('editorEl')
const options = {
configuration: {
server: {
scheme: "https",
host: "cloud.myscript.com",
applicationKey: "<YOU-APPLICATION-KEY>",
hmacKey: "<YOUR-HMAC-KEY>",
}
}
}
const editor = await Editor.load(editorElement, 'INTERACTIVEINKSSR', options)