1+ <!DOCTYPE html>
2+ <html lang="en">
3+
4+ <head>
5+ <meta charset="UTF-8">
6+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+ <meta name="apple-mobile-web-app-capable" content="yes">
8+ <meta name="mobile-web-app-capable" content="yes">
9+ <meta name="HandheldFriendly" content="true"/>
10+
11+ <title>Style test</title>
12+
13+ <link rel="stylesheet" href="../../dist/myscript.min.css"/>
14+ <link rel="stylesheet" href="../examples.css">
15+
16+ <!-- Live reload with webpack -->
17+ <script type="text/javascript" src="http://localhost:8080/webpack-dev-server.js"></script>
18+ <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
19+ <script type="text/javascript" src="../../dist/myscript.min.js"></script>
20+ </head>
21+
22+ <body touch-action="none">
23+ <div>
24+ <nav>
25+ <button class="action-button" id="clear" disabled></button>
26+ <button class="action-button" id="undo" disabled></button>
27+ <button class="action-button" id="redo" disabled></button>
28+ <div class="spacer"></div>
29+ <button class="action-label-button" id="convert" disabled>Convert</button>
30+ </nav>
31+ <div id="editor"></div>
32+ </div>
33+ <script>
34+ var editorElement = document.getElementById('editor');
35+ var undoElement = document.getElementById('undo');
36+ var redoElement = document.getElementById('redo');
37+ var clearElement = document.getElementById('clear');
38+ var convertElement = document.getElementById('convert');
39+
40+ editorElement.addEventListener('changed', function (evt) {
41+ clearElement.disabled = !evt.detail.canClear;
42+ undoElement.disabled = !evt.detail.canUndo;
43+ redoElement.disabled = !evt.detail.canRedo;
44+ convertElement.disabled = !evt.detail.canConvert;
45+ });
46+
47+ undoElement.addEventListener('click', function () {
48+ editorElement.editor.undo();
49+ });
50+ redoElement.addEventListener('click', function () {
51+ editorElement.editor.redo();
52+ });
53+ clearElement.addEventListener('click', function () {
54+ editorElement.editor.clear();
55+ });
56+ convertElement.addEventListener('click', function () {
57+ editorElement.editor.convert();
58+ });
59+
60+ theme = {
61+ '.math': {
62+ 'color': '#ad5fff',
63+ '-myscript-pen-brush' : 'CalligraphicBrush'
64+ }
65+ };
66+
67+ editorElement.addEventListener('loaded', function () {
68+ editor.theme = theme;
69+ });
70+
71+
72+ /**
73+ * Attach an editor to the document
74+ * @param {Element} The DOM element to attach the ink paper
75+ * @param {Object} The recognition parameters
76+ */
77+ var editor = MyScript.register(editorElement, {
78+ recognitionParams: {
79+ type: 'MATH',
80+ protocol: 'WEBSOCKET',
81+ apiVersion: 'V4',
82+ server: {
83+ scheme: 'https',
84+ host: 'webdemo-internal-stable.visionobjects.com',
85+ applicationKey: '64e1afbf-f3a7-4d04-bce1-24b05ee0b2d6',
86+ hmacKey: '88d81b71-13cd-41a0-9206-ba367c21900f'
87+ },
88+ v4: {
89+ math: {
90+ mimeTypes: ['application/x-latex']
91+ }
92+ }
93+ }
94+ });
95+
96+ window.addEventListener('resize', function () {
97+ editorElement.editor.resize();
98+ });
99+ </script>
100+ </body>
101+
102+ </html>
0 commit comments