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

Commit 7f9b3bb

Browse files
RomainCscnRomainCscn
committed
[UPDATE] Changelog v4.1.1
1 parent e4110dc commit 7f9b3bb

File tree

5 files changed

+205
-58
lines changed

5 files changed

+205
-58
lines changed

‎CHANGELOG.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
1-
# v4.1.0
1+
# [v4.1.1](https://github.com/MyScript/MyScriptJS/tree/v4.1.1)
2+
3+
## Features
4+
5+
- New export in `myscript.js` for better import using frameworks (as React).
6+
7+
## Bugs fixed
8+
9+
- Multiple smart guides now working in case of multiple editors,
10+
- Stix font removed from css as useless now,
11+
- Languages list for v3 now displaying correct list.
12+
13+
## Breaking changes
14+
15+
In order to be consistent with the native API :
16+
- `guide` renamed to `guides` in the configuration.
17+
18+
# [v4.1.0](https://github.com/MyScript/MyScriptJS/tree/v4.1.0)
219

320
## Features
421
- New smart guide enabled by default:

‎docs/index.html

Lines changed: 149 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -261,86 +261,192 @@
261261
</div>
262262
</nav>
263263

264-
<div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><p><strong>MyScriptJS</strong> is the fastest way to integrate rich <strong>handwriting</strong> features in your webapp.</p>
265-
<p></p><p>
264+
<div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><h1 id="myscriptjs">MyScriptJS</h1>
265+
<blockquote>
266+
<p>The fastest way to integrate rich <strong>handwriting</strong> features in your webapp.</p>
267+
</blockquote>
268+
<p><div>
266269
<img src="preview.gif">
267-
</p>
270+
</div>
268271

269-
<p></p>
270-
<h2 id="what-is-it-about-">What is it about?</h2>
271-
<p>MyScriptJS is a JavaScript library that can be used in every web application (whatever JavaScript framework you are using) to bring handwriting recognition.</p>
272+
</p>
273+
<p>MyScriptJS is a JavaScript library that can be used in every web application to bring handwriting recognition.</p>
272274
<p>It integrates all you need:</p>
273275
<ul>
274-
<li>Signal capture,</li>
276+
<li>Signal capture for all devices,</li>
275277
<li>Digital ink rendering,</li>
276-
<li>Plug with MyScript Cloud to bring handwriting recognition.</li>
278+
<li>Link to MyScript Cloud to bring handwriting recognition.</li>
277279
</ul>
278-
<h2 id="getting-started">Getting started</h2>
279-
<h3 id="prerequisites">Prerequisites</h3>
280+
<h2 id="table-of-contents">Table of contents</h2>
281+
<ul>
282+
<li><a href="https://github.com/MyScript/MyScriptJS#examples">Examples</a></li>
283+
<li><a href="https://github.com/MyScript/MyScriptJS#features">Features</a></li>
284+
<li><a href="https://github.com/MyScript/MyScriptJS#requirements">Requirements</a></li>
285+
<li><a href="https://github.com/MyScript/MyScriptJS#installation">Installation</a></li>
286+
<li><a href="https://github.com/MyScript/MyScriptJS#usage">Usage</a></li>
287+
<li><a href="https://github.com/MyScript/MyScriptJS#documentation">Documentation</a></li>
288+
<li><a href="https://github.com/MyScript/MyScriptJS#development">Development</a></li>
289+
<li><a href="https://github.com/MyScript/MyScriptJS#support">Support</a></li>
290+
<li><a href="https://github.com/MyScript/MyScriptJS#sharing-your-feedback">Feedback</a></li>
291+
<li><a href="https://github.com/MyScript/MyScriptJS#contributing">Contributing</a></li>
292+
</ul>
293+
<h2 id="examples">Examples</h2>
294+
<p>Discover Interactive Ink with MyScriptJS and its major features with our <a href="http://webdemo.myscript.com/views/text.html">text demo and tutorial</a>.</p>
295+
<p>Try our two basic examples featuring <a href="https://myscript.github.io/MyScriptJS//examples/v4/websocket_text_iink.html">the text recognition</a> and <a href="https://myscript.github.io/MyScriptJS/examples/v4/websocket_math_iink.html">the math recognition</a>.</p>
296+
<p>We also provide several examples to show the features of MyScriptJS. Those examples can be found on our <a href="https://myscript.github.io/MyScriptJS/examples/">examples page</a> with the source codes in <a href="https://github.com/MyScript/MyScriptJS/tree/master/examples">this directory</a>.</p>
297+
<p>We also provide examples of integration with the major JavaScript frameworks:</p>
298+
<table>
299+
<thead>
300+
<tr>
301+
<th>Framework</th>
302+
<th>Link</th>
303+
</tr>
304+
</thead>
305+
<tbody>
306+
<tr>
307+
<td><div><img src="assets/react.svg" height="50"></div></td>
308+
<td><a href="https://github.com/MyScript/web-integration-samples/tree/master/react-integration-examples">Example of React integration</a></td>
309+
</tr>
310+
<tr>
311+
<td><div><img src="assets/angular.svg" height="50"></div></td>
312+
<td><a href="https://github.com/MyScript/web-integration-samples/tree/master/angular-integration-examples">Example of Angular integration</a></td>
313+
</tr>
314+
<tr>
315+
<td><div><img src="assets/vue.svg" height="50"></div></td>
316+
<td><a href="https://github.com/MyScript/web-integration-samples/tree/master/vue-integration-examples">Example of Vue integration</a></td>
317+
</tr>
318+
</tbody>
319+
</table>
320+
<h2 id="features">Features</h2>
321+
<ul>
322+
<li>Text and Math support,</li>
323+
<li>Easy to integrate,</li>
324+
<li>Digital ink capture and rendering,</li>
325+
<li>Rich editing gestures,</li>
326+
<li>Import and export content,</li>
327+
<li>Styling,</li>
328+
<li>Typeset support,</li>
329+
<li>More than 200 mathematical symbols supported,</li>
330+
<li>59 supported languages.</li>
331+
</ul>
332+
<p>You can discover all the features on our Developer website for <a href="https://developer.myscript.com/text">Text</a> and <a href="https://developer.myscript.com/math">Math</a>.</p>
333+
<h2 id="requirements">Requirements</h2>
280334
<ol>
281-
<li>Have <a href="https://bower.io/#install-bower">bower</a> installed.</li>
335+
<li>Have <a href="https://www.npmjs.com/get-npm">npm</a>, <a href="https://yarnpkg.com/en/docs/install#linux-tab">yarn</a> or <a href="https://bower.io/#install-bower">bower</a> installed.</li>
282336
<li>Have a MyScript developer account. You can create one <a href="https://developer.myscript.com/support/account/registering-myscript-cloud/">here</a>.</li>
283337
<li>Get your keys and the free monthly quota to access MyScript Cloud at <a href="https://developer.myscript.com/getting-started/web">developer.myscript.com</a></li>
284338
</ol>
285-
<h3 id="installation">Installation</h3>
286-
<ol>
287-
<li><p>Download MyScriptJS library</p>
339+
<h2 id="installation">Installation</h2>
340+
<p>MyScriptJS can be installed with the well known package managers <code>npm</code>, <code>yarn</code> and <code>bower</code>. </p>
341+
<p>If you want to use <code>npm</code> or <code>yarn</code> you first have to init a project (or use an existing one). </p>
342+
<pre><code class="lang-shell"><code class="source-code prettyprint">npm init
343+
OR
344+
yarn init</code>
345+
</code></pre>
346+
<p>You can then install MyScriptJS and use it as showed in the <a href="https://github.com/MyScript/MyScriptJS#usage">Usage</a> section.</p>
347+
<pre><code class="lang-shell"><code class="source-code prettyprint">npm install myscript
348+
OR
349+
yarn add myscript</code>
350+
</code></pre>
351+
<p>You can also install MyScriptJS using bower (with or without an existing project) and use it as showed in the <a href="https://github.com/MyScript/MyScriptJS#usage">Usage</a> section replacing <code>node_modules</code> by <code>bower_components</code>.</p>
288352
<pre><code class="lang-shell"><code class="source-code prettyprint">bower install myscript</code>
289353
</code></pre>
354+
<h2 id="usage">Usage</h2>
355+
<ol>
356+
<li><p>Create an <code>index.html</code> file in the same directory.</p>
290357
</li>
291-
<li><p>Create and edit <code>index.html</code> file in the same directory.</p>
292-
</li>
293-
<li><p>Add the following lines in the <code>head</code> section ot your file. We use pep to ensure better browsers compatibilities. Note that you can also use it using bower dependencies:</p>
294-
<pre><code class="lang-html"><code class="source-code prettyprint">&lt;link rel=&quot;stylesheet&quot; href=&quot;bower_components/myscript/dist/myscript.min.css&quot;/&gt;
295-
&lt;script src=&quot;bower_components/myscript/dist/myscript.min.js&quot;&gt;&lt;/script&gt;
358+
<li><p>Add the following lines in the <code>head</code> section ot your file to use MyScriptJS and the css. We use <a href="https://github.com/jquery/PEP">PEP</a> to ensure better browsers compatibilities. Note that you can also use it using dependencies from <code>node_modules</code> or <code>bower_components</code>:</p>
359+
<pre><code class="lang-html"><code class="source-code prettyprint">&lt;link rel=&quot;stylesheet&quot; href=&quot;node_modules/myscript/dist/myscript.min.css&quot;/&gt;
360+
&lt;script src=&quot;node_modules/myscript/dist/myscript.min.js&quot;&gt;&lt;/script&gt;
296361
&lt;script src=&quot;https://code.jquery.com/pep/0.4.3/pep.js&quot;&gt;&lt;/script&gt;</code>
297362
</code></pre>
298363
</li>
299-
<li><p>In the <code>body</code> tag, create a <code>div</code> tag that will contain the editing zone:</p>
364+
<li><p>Always in the <code>head</code> section, add a <code>style</code> and specify the height and the width of your editor:</p>
365+
<pre><code class="lang-html"><code class="source-code prettyprint">&lt;style&gt;
366+
#editor {
367+
width: 100%;
368+
height: 100%;
369+
}
370+
&lt;/style&gt;</code>
371+
</code></pre>
372+
</li>
373+
<li><p>In the <code>body</code> tag, create a <code>div</code> tag that will contain the editing area:</p>
300374
<pre><code class="lang-html"><code class="source-code prettyprint"> &lt;div id=&quot;editor&quot;&gt;&lt;/div&gt;</code>
301375
</code></pre>
302376
</li>
303-
<li><p>In JavaScript, create the editor attached to editor DOM Node:</p>
304-
<pre><code class="lang-javascript"><code class="source-code prettyprint">var editorElement = document.getElementById(&apos;editor&apos;);
377+
<li><p>In JavaScript and within a <code>&lt;script&gt;</code> tag placed before the closing tag <code>&lt;/body&gt;</code>, create the editor using the <code>register</code> function, your editor html element and a simple configuration:</p>
378+
<pre><code class="lang-javascript"><code class="source-code prettyprint">const editorElement = document.getElementById(&apos;editor&apos;);
305379

306380
MyScript.register(editorElement, {
307381
recognitionParams: {
308-
type: &apos;MATH&apos;,
382+
type: &apos;TEXT&apos;,
309383
server: {
310-
applicationKey: &apos;#YOUR MYSCRIPT CDK APPLICATION KEY#&apos;,
311-
hmacKey: &apos;#YOUR MYSCRIPT CDK HMAC KEY#&apos;
384+
applicationKey: &apos;#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#&apos;,
385+
hmacKey: &apos;#YOUR MYSCRIPT DEVELOPER HMAC KEY#&apos;
312386
}
313387
}
314388
});</code>
315389
</code></pre>
316390
</li>
317-
<li><p>Launch a local webserver and browse the sample.</p>
391+
<li><p>Your <code>index.html</code> file should look like this:</p>
392+
<pre><code class="lang-html"><code class="source-code prettyprint">&lt;html&gt;
393+
&lt;head&gt;
394+
&lt;link rel=&quot;stylesheet&quot; href=&quot;node_modules/myscript/dist/myscript.min.css&quot;/&gt;
395+
&lt;script src=&quot;node_modules/myscript/dist/myscript.min.js&quot;&gt;&lt;/script&gt;
396+
&lt;script src=&quot;https://code.jquery.com/pep/0.4.3/pep.js&quot;&gt;&lt;/script&gt;
397+
&lt;style&gt;
398+
#editor {
399+
width: 100%;
400+
height: 100%;
401+
}
402+
&lt;/style&gt;
403+
&lt;/head&gt;
404+
&lt;body&gt;
405+
&lt;div id=&quot;editor&quot;&gt;&lt;/div&gt;
406+
&lt;script&gt;
407+
const editorElement = document.getElementById(&apos;editor&apos;);
408+
409+
MyScript.register(editorElement, {
410+
recognitionParams: {
411+
type: &apos;TEXT&apos;,
412+
server: {
413+
applicationKey: &apos;#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#&apos;,
414+
hmacKey: &apos;#YOUR MYSCRIPT DEVELOPER HMAC KEY#&apos;
415+
}
416+
}
417+
});
418+
&lt;/script&gt;
419+
&lt;/body&gt;
420+
&lt;/html&gt;</code>
421+
</code></pre>
422+
</li>
423+
<li><p>Open <code>index.html</code> in your browser or serve your folder content using any web server.</p>
318424
</li>
319425
</ol>
320-
<h2 id="examples">Examples</h2>
426+
<p>You can find this guide and a more complete example on the <a href="https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/">MyScript Developer website</a>.</p>
427+
<h2 id="documentation">Documentation</h2>
428+
<p>You can find a complete documentation with the following sections on our Developer website:</p>
321429
<ul>
322-
<li>First, you may want to <a href="http://webdemo.myscript.com/views/text.html">discover Interactive Ink</a> and its major features.</li>
323-
<li><a href="https://myscript.github.io/MyScriptJS//examples/v4/websocket_text_iink.html">Text recognition and conversion with V4 API</a></li>
324-
<li><a href="https://myscript.github.io/MyScriptJS/examples/v4/websocket_math_iink.html">Math recognition and conversion with V4 API</a></li>
325-
<li><a href="https://myscript.github.io/MyScriptJS/examples/v3/websocket_text.html">Text recognition and conversion with V3 API</a></li>
326-
<li><a href="https://myscript.github.io/MyScriptJS/examples/"><strong>more examples...</strong></a></li>
430+
<li><strong>Get Started</strong>: <a href="https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/get-started/">how to use MyScriptJS with a full example</a>,</li>
431+
<li><strong>Editing</strong>: <a href="https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/editing/">how to interact with content</a>,</li>
432+
<li><strong>Conversion</strong>: <a href="https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/conversion/">how to convert your handwritten content</a>,</li>
433+
<li><strong>Import and Export</strong>: <a href="https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/import-and-export/">how to import and export your content</a>,</li>
434+
<li><strong>Styling</strong>: <a href="https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/styling/">how to style content</a>.</li>
327435
</ul>
328-
<p>The <a href="https://github.com/MyScript/MyScriptJS/tree/master/examples">directory examples/</a> of this Git repository contains all the example source codes.</p>
329-
<p>If your are willing to integrate MyScriptJS with React, Angular or VueJS basic applications are available in this <a href="https://github.com/MyScript/web-integration-samples">github repository</a>.</p>
330-
<h2 id="documentation">Documentation</h2>
331-
<p>A complete guide is available on <a href="https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/">MyScript Developer website</a>.</p>
332-
<p>The API Reference is available in the <code>docs</code> directory or on <a href="https://myscript.github.io/MyScriptJS/docs">myscript.github.io/MyScriptJS/ website</a>.</p>
333-
<h2 id="building-myscriptjs">Building MyScriptJS</h2>
334-
<p>Instructions to help you build the project are available in <a href="https://github.com/MyScript/MyScriptJS/blob/master/SETUP.md">SETUP.md</a> file.</p>
436+
<p>As well as a global <a href="https://developer.myscript.com/docs/interactive-ink/latest/reference/web/configuration/">Configuration page</a>.</p>
437+
<p>We also provide a complete <a href="https://myscript.github.io/MyScriptJS/docs">API Reference</a>.</p>
438+
<h2 id="development">Development</h2>
439+
<p>Instructions to help you build the project and develop are available in the <a href="https://github.com/MyScript/MyScriptJS/blob/master/SETUP.md">SETUP.md</a> file.</p>
335440
<h2 id="getting-support">Getting support</h2>
336-
<p>You can get some support from the <a href="https://developer-support.myscript.com/support/discussions/forums/16000096021">dedicated section</a> on MyScript Developer website.</p>
441+
<p>You can get support and ask your questions on the <a href="https://developer-support.myscript.com/support/discussions/forums/16000096021">dedicated section</a> of MyScript Developer website.</p>
337442
<h2 id="sharing-your-feedback-">Sharing your feedback ?</h2>
338443
<p>Made a cool app with MyScriptJS? We would love to hear about you!
339444
We&#x2019;re planning to showcase apps using it so let us know by sending a quick mail to <a href="mailto://[email protected]">[email protected]</a>.</p>
340445
<h2 id="contributing">Contributing</h2>
341-
<p>We welcome your contributions:
342-
If you would like to extend MyScriptJS for your needs, feel free to fork it!
343-
Please sign our <a href="https://github.com/MyScript/MyScriptJS/blob/master/CONTRIBUTING.md">Contributor License Agreement</a> before submitting your pull request.</p>
446+
<p>We welcome your contributions: if you would like to extend MyScriptJS for your needs, feel free to fork it! </p>
447+
<p>Please take a look at our <a href="https://github.com/MyScript/MyScriptJS/blob/master/CONTRIBUTING.md">contributing</a> guidelines before submitting your pull request.</p>
448+
<h2 id="license">License</h2>
449+
<p>This library is licensed under the <a href="http://opensource.org/licenses/Apache-2.0">Apache 2.0</a>.</p>
344450
</div>
345451
</div>
346452

0 commit comments

Comments
 (0)