Skip to content
This repository was archived by the owner on Jan 4, 2021. It is now read-only.

Commit e4110dc

Browse files
RomainCscnRomainCscn
committed
Merge pull request #7 in WS/myscriptjs from wip-readme to master
* commit 'b7d5137f7338387e156c2e741b0b606093c1d59d': [FIX] Typo in Readme [FIX] Change 1.1 to latest in url [FIX] Size image readme [DOCS] Update Readme [DOCS] Update ToC of Readme [DOCS] Update readme
2 parents 4a1d1bd + b7d5137 commit e4110dc

File tree

7 files changed

+203
-62
lines changed

7 files changed

+203
-62
lines changed

‎CONTRIBUTING.md

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
# Contributing
22

3-
We gladly welcome pull requests to MyScriptJS. If you have any questions, or need help to solve a problem, feel free to stop by the [#MyScript forum](https://dev.myscript.com/support/forum/).
3+
We gladly welcome pull requests to MyScriptJS. If you have any questions, or need help to solve a problem, feel free to stop by the [MyScript forum](https://developer-support.myscript.com/support/discussions/forums/16000096021).
44

55
## CLA
66

77
In order to contribute, you must first agree to the **Contributor License Agreement** available [here](http://goo.gl/forms/YyzZ9VSvYG).
88

9-
Make sure you read the article "[Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)" to understand the contributing process.
10-
11-
## License
12-
13-
This library is licensed under the [Apache 2.0](http://opensource.org/licenses/Apache-2.0).
9+
Make sure you read the article "[Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)" to understand the contributing process.

‎README.md

Lines changed: 148 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,195 @@
1-
**MyScriptJS** is the fastest way to integrate rich **handwriting** features in your webapp.
1+
# MyScriptJS
2+
> The fastest way to integrate rich **handwriting** features in your webapp.
23
3-
<p align="center">
4+
<div align="center">
45
<img src="preview.gif">
5-
</p>
6+
</div>
67

7-
## What is it about?
8-
9-
MyScriptJS is a JavaScript library that can be used in every web application (whatever JavaScript framework you are using) to bring handwriting recognition.
8+
MyScriptJS is a JavaScript library that can be used in every web application to bring handwriting recognition.
109

1110
It integrates all you need:
1211

13-
* Signal capture,
12+
* Signal capture for all devices,
1413
* Digital ink rendering,
15-
* Plug with MyScript Cloud to bring handwriting recognition.
14+
* Link to MyScript Cloud to bring handwriting recognition.
15+
16+
## Table of contents
17+
18+
* [Examples](https://github.com/MyScript/MyScriptJS#examples)
19+
* [Features](https://github.com/MyScript/MyScriptJS#features)
20+
* [Requirements](https://github.com/MyScript/MyScriptJS#requirements)
21+
* [Installation](https://github.com/MyScript/MyScriptJS#installation)
22+
* [Usage](https://github.com/MyScript/MyScriptJS#usage)
23+
* [Documentation](https://github.com/MyScript/MyScriptJS#documentation)
24+
* [Development](https://github.com/MyScript/MyScriptJS#development)
25+
* [Support](https://github.com/MyScript/MyScriptJS#support)
26+
* [Feedback](https://github.com/MyScript/MyScriptJS#sharing-your-feedback)
27+
* [Contributing](https://github.com/MyScript/MyScriptJS#contributing)
28+
29+
30+
## Examples
31+
32+
Discover Interactive Ink with MyScriptJS and its major features with our [text demo and tutorial](http://webdemo.myscript.com/views/text.html).
33+
34+
Try our two basic examples featuring [the text recognition](https://myscript.github.io/MyScriptJS//examples/v4/websocket_text_iink.html) and [the math recognition](https://myscript.github.io/MyScriptJS/examples/v4/websocket_math_iink.html).
35+
36+
We also provide several examples to show the features of MyScriptJS. Those examples can be found on our [examples page](https://myscript.github.io/MyScriptJS/examples/) with the source codes in [this directory](https://github.com/MyScript/MyScriptJS/tree/master/examples).
37+
38+
We also provide examples of integration with the major JavaScript frameworks:
1639

17-
## Getting started
40+
| Framework | Link |
41+
| --- | --- |
42+
| <div align="center"><img src="assets/react.svg" height="50"></div> | [Example of React integration](https://github.com/MyScript/web-integration-samples/tree/master/react-integration-examples) |
43+
| <div align="center"><img src="assets/angular.svg" height="50"></div> | [Example of Angular integration](https://github.com/MyScript/web-integration-samples/tree/master/angular-integration-examples) |
44+
| <div align="center"><img src="assets/vue.svg" height="50"></div> | [Example of Vue integration](https://github.com/MyScript/web-integration-samples/tree/master/vue-integration-examples) |
1845

19-
### Prerequisites
46+
## Features
2047

21-
1. Have [bower](https://bower.io/#install-bower) installed.
48+
* Text and Math support,
49+
* Easy to integrate,
50+
* Digital ink capture and rendering,
51+
* Rich editing gestures,
52+
* Import and export content,
53+
* Styling,
54+
* Typeset support,
55+
* More than 200 mathematical symbols supported,
56+
* 59 supported languages.
57+
58+
You can discover all the features on our Developer website for [Text](https://developer.myscript.com/text) and [Math](https://developer.myscript.com/math).
59+
60+
## Requirements
61+
62+
1. Have [npm](https://www.npmjs.com/get-npm), [yarn](https://yarnpkg.com/en/docs/install#linux-tab) or [bower](https://bower.io/#install-bower) installed.
2263
2. Have a MyScript developer account. You can create one [here](https://developer.myscript.com/support/account/registering-myscript-cloud/).
2364
3. Get your keys and the free monthly quota to access MyScript Cloud at [developer.myscript.com](https://developer.myscript.com/getting-started/web)
2465

25-
### Installation
66+
## Installation
67+
68+
MyScriptJS can be installed with the well known package managers `npm`, `yarn` and `bower`.
69+
70+
If you want to use `npm` or `yarn` you first have to init a project (or use an existing one).
71+
72+
```shell
73+
npm init
74+
OR
75+
yarn init
76+
```
77+
78+
You can then install MyScriptJS and use it as showed in the [Usage](https://github.com/MyScript/MyScriptJS#usage) section.
79+
80+
```shell
81+
npm install myscript
82+
OR
83+
yarn add myscript
84+
```
85+
86+
You can also install MyScriptJS using bower (with or without an existing project) and use it as showed in the [Usage](https://github.com/MyScript/MyScriptJS#usage) section replacing `node_modules` by `bower_components`.
2687

27-
1. Download MyScriptJS library
2888
```shell
2989
bower install myscript
3090
```
3191

32-
2. Create and edit `index.html` file in the same directory.
3392

34-
3. Add the following lines in the `head` section ot your file. We use pep to ensure better browsers compatibilities. Note that you can also use it using bower dependencies:
93+
## Usage
94+
95+
1. Create an `index.html` file in the same directory.
96+
97+
2. Add the following lines in the `head` section ot your file to use MyScriptJS and the css. We use [PEP](https://github.com/jquery/PEP) to ensure better browsers compatibilities. Note that you can also use it using dependencies from `node_modules` or `bower_components`:
3598
```html
36-
<link rel="stylesheet" href="bower_components/myscript/dist/myscript.min.css"/>
37-
<script src="bower_components/myscript/dist/myscript.min.js"></script>
99+
<link rel="stylesheet" href="node_modules/myscript/dist/myscript.min.css"/>
100+
<script src="node_modules/myscript/dist/myscript.min.js"></script>
38101
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
39102
```
40103

41-
4. In the `body` tag, create a `div` tag that will contain the editing zone:
104+
3. Always in the `head` section, add a `style` and specify the height and the width of your editor:
105+
```html
106+
<style>
107+
#editor {
108+
width: 100%;
109+
height: 100%;
110+
}
111+
</style>
112+
```
113+
114+
4. In the `body` tag, create a `div` tag that will contain the editing area:
42115
```html
43116
<div id="editor"></div>
44117
```
45118

46-
5. In JavaScript, create the editor attached to editor DOM Node:
119+
5. In JavaScript and within a `<script>` tag placed before the closing tag `</body>`, create the editor using the `register` function, your editor html element and a simple configuration:
47120
```javascript
48-
var editorElement = document.getElementById('editor');
121+
const editorElement = document.getElementById('editor');
49122

50123
MyScript.register(editorElement, {
51124
recognitionParams: {
52-
type: 'MATH',
125+
type: 'TEXT',
53126
server: {
54-
applicationKey: '#YOUR MYSCRIPT CDK APPLICATION KEY#',
55-
hmacKey: '#YOUR MYSCRIPT CDK HMAC KEY#'
127+
applicationKey: '#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#',
128+
hmacKey: '#YOUR MYSCRIPT DEVELOPER HMAC KEY#'
56129
}
57130
}
58131
});
59132
```
60133

61-
6. Launch a local webserver and browse the sample.
62-
63-
64-
## Examples
134+
6. Your `index.html` file should look like this:
135+
```html
136+
<html>
137+
<head>
138+
<link rel="stylesheet" href="node_modules/myscript/dist/myscript.min.css"/>
139+
<script src="node_modules/myscript/dist/myscript.min.js"></script>
140+
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
141+
<style>
142+
#editor {
143+
width: 100%;
144+
height: 100%;
145+
}
146+
</style>
147+
</head>
148+
<body>
149+
<div id="editor"></div>
150+
<script>
151+
const editorElement = document.getElementById('editor');
152+
153+
MyScript.register(editorElement, {
154+
recognitionParams: {
155+
type: 'TEXT',
156+
server: {
157+
applicationKey: '#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#',
158+
hmacKey: '#YOUR MYSCRIPT DEVELOPER HMAC KEY#'
159+
}
160+
}
161+
});
162+
</script>
163+
</body>
164+
</html>
165+
```
65166

66-
- First, you may want to [discover Interactive Ink](http://webdemo.myscript.com/views/text.html) and its major features.
67-
- [Text recognition and conversion with V4 API](https://myscript.github.io/MyScriptJS//examples/v4/websocket_text_iink.html)
68-
- [Math recognition and conversion with V4 API](https://myscript.github.io/MyScriptJS/examples/v4/websocket_math_iink.html)
69-
- [Text recognition and conversion with V3 API](https://myscript.github.io/MyScriptJS/examples/v3/websocket_text.html)
70-
- [**more examples...**](https://myscript.github.io/MyScriptJS/examples/)
167+
7. Open `index.html` in your browser or serve your folder content using any web server.
71168

72-
The [directory examples/](https://github.com/MyScript/MyScriptJS/tree/master/examples) of this Git repository contains all the example source codes.
169+
You can find this guide and a more complete example on the [MyScript Developer website](https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/).
73170

74-
If your are willing to integrate MyScriptJS with React, Angular or VueJS basic applications are available in this [github repository](https://github.com/MyScript/web-integration-samples).
171+
## Documentation
75172

173+
You can find a complete documentation with the following sections on our Developer website:
76174

77-
## Documentation
175+
* **Get Started**: [how to use MyScriptJS with a full example](https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/get-started/),
176+
* **Editing**: [how to interact with content](https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/editing/),
177+
* **Conversion**: [how to convert your handwritten content](https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/conversion/),
178+
* **Import and Export**: [how to import and export your content](https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/import-and-export/),
179+
* **Styling**: [how to style content](https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/styling/).
78180

79-
A complete guide is available on [MyScript Developer website](https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/).
181+
As well as a global [Configuration page](https://developer.myscript.com/docs/interactive-ink/latest/reference/web/configuration/).
80182

81-
The API Reference is available in the `docs` directory or on [myscript.github.io/MyScriptJS/ website](https://myscript.github.io/MyScriptJS/docs).
183+
We also provide a complete [API Reference](https://myscript.github.io/MyScriptJS/docs).
82184

83-
## Building MyScriptJS
185+
## Development
84186

85-
Instructions to help you build the project are available in [SETUP.md](https://github.com/MyScript/MyScriptJS/blob/master/SETUP.md) file.
187+
Instructions to help you build the project and develop are available in the [SETUP.md](https://github.com/MyScript/MyScriptJS/blob/master/SETUP.md) file.
86188

87189

88190
## Getting support
89191

90-
You can get some support from the [dedicated section](https://developer-support.myscript.com/support/discussions/forums/16000096021) on MyScript Developer website.
192+
You can get support and ask your questions on the [dedicated section](https://developer-support.myscript.com/support/discussions/forums/16000096021) of MyScript Developer website.
91193

92194
## Sharing your feedback ?
93195

@@ -96,6 +198,9 @@ We’re planning to showcase apps using it so let us know by sending a quick mai
96198

97199
## Contributing
98200

99-
We welcome your contributions:
100-
If you would like to extend MyScriptJS for your needs, feel free to fork it!
101-
Please sign our [Contributor License Agreement](https://github.com/MyScript/MyScriptJS/blob/master/CONTRIBUTING.md) before submitting your pull request.
201+
We welcome your contributions: if you would like to extend MyScriptJS for your needs, feel free to fork it!
202+
203+
Please take a look at our [contributing](https://github.com/MyScript/MyScriptJS/blob/master/CONTRIBUTING.md) guidelines before submitting your pull request.
204+
205+
## License
206+
This library is licensed under the [Apache 2.0](http://opensource.org/licenses/Apache-2.0).

‎SETUP.md

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,10 @@
11
# Environment setup
22

3-
## Set up WebStorm
4-
5-
Configure all the librairies to have a good code completion [https://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/](https://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/)
6-
7-
Configure the code format by going in Files -> Settings the Editor -> Code Style -> Javascript and press the button manage. Load the configuration file locate in ./dev/AIRBNB. This will allow you to reformat the javascript code with IDEA formatter as expected by most of configured ES6 rules.
8-
9-
Debug mocha test
10-
- Add a mocha test configuration with test directory
11-
- Configure the launcher with the extra mocha option `--compilers js:babel-core/register`
12-
13-
Activate ESLint checks [https://www.jetbrains.com/help/webstorm/2016.2/eslint.html](https://www.jetbrains.com/help/webstorm/2016.2/eslint.html) and use the automatic search option.
14-
153
## Configure project
164

175
1. Download sources
186
2. Install dependencies.
197
* `npm install`
20-
* `bower install`
218
3. Build the project using gulp.
229
* `gulp`
2310
4. Run the browser using gulp.
@@ -26,3 +13,19 @@ Activate ESLint checks [https://www.jetbrains.com/help/webstorm/2016.2/eslint.ht
2613
**Start coding**
2714

2815
5. Debug using your favorite browser dev tools. The sources will be available under the webpack source folder (for chrome dev tools). Every change in sources will trigger a rebuild with linter and basic tests.
16+
17+
## Set up your IDE
18+
19+
At MyScript, we use WebStorm to develop our library. You can find below some help to configure WebStorm like we do. Obviously, feel free to use any code editor as the configuration can be adapted for any editor.
20+
21+
### WebStorm
22+
23+
Configure all the librairies to have a good code completion [https://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/](https://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/)
24+
25+
Configure the code format by going in Files -> Settings the Editor -> Code Style -> Javascript and press the button manage. Load the configuration file locate in ./dev/AIRBNB. This will allow you to reformat the javascript code with IDEA formatter as expected by most of configured ES6 rules.
26+
27+
Debug mocha test
28+
- Add a mocha test configuration with test directory
29+
- Configure the launcher with the extra mocha option `--compilers js:babel-core/register`
30+
31+
Activate ESLint checks [https://www.jetbrains.com/help/webstorm/2016.2/eslint.html](https://www.jetbrains.com/help/webstorm/2016.2/eslint.html) and use the automatic search option.

‎assets/angular.svg

Lines changed: 1 addition & 0 deletions
Loading

‎assets/react.svg

Lines changed: 35 additions & 0 deletions
Loading

‎assets/vue.svg

Lines changed: 1 addition & 0 deletions
Loading

‎preview.gif

-170 KB
Loading

0 commit comments

Comments
 (0)