This repository has been archived by the owner on Jan 4, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 63
/
Copy pathcustom_resources_math.html
115 lines (104 loc) · 3.53 KB
/
custom_resources_math.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="true" />
<title>Custom resources math</title>
<link rel="stylesheet" href="../../dist/myscript.min.css"/>
<link rel="stylesheet" href="../examples.css">
<!-- Live reload with webpack -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script type="text/javascript" src="../../dist/myscript.min.js"></script>
<style>
.description {
margin: 12px;
}
</style>
</head>
<body touch-action="none">
<p class="description">This example use a math custom resource. The grammar restrict the recognition to only basic elementary school math (addition and substraction). </p>
<div id="result"></div>
<div>
<nav>
<div class="button-div">
<button id="clear" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
<img src="../assets/img/clear.svg">
</button>
<button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
<img src="../assets/img/undo.svg">
</button>
<button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
<img src="../assets/img/redo.svg">
</button>
</div>
<div class="spacer"></div>
<button class="classic-btn" id="convert" disabled>Convert</button>
</nav>
<div id="editor"></div>
</div>
<script>
var editorElement = document.getElementById('editor');
var resultElement = document.getElementById('result');
var undoElement = document.getElementById('undo');
var redoElement = document.getElementById('redo');
var clearElement = document.getElementById('clear');
var convertElement = document.getElementById('convert');
editorElement.addEventListener('changed', function (event) {
undoElement.disabled = !event.detail.canUndo;
redoElement.disabled = !event.detail.canRedo;
clearElement.disabled = event.detail.isEmpty;
});
editorElement.addEventListener('exported', function (evt) {
const exports = evt.detail.exports;
if (exports && exports['application/x-latex']) {
convertElement.disabled = false;
resultElement.innerHTML = '<span>' + exports['application/x-latex'] + '</span>';
} else {
convertElement.disabled = true;
resultElement.innerHTML = '';
}
});
undoElement.addEventListener('click', function () {
editorElement.editor.undo();
});
redoElement.addEventListener('click', function () {
editorElement.editor.redo();
});
clearElement.addEventListener('click', function () {
editorElement.editor.clear();
});
convertElement.addEventListener('click', function () {
editorElement.editor.convert();
});
/**
* Attach an editor to the document
* @param {Element} The DOM element to attach the ink paper
* @param {Object} The recognition parameters
*/
MyScript.register(editorElement, {
recognitionParams: {
type: 'MATH',
protocol: 'WEBSOCKET',
apiVersion: 'V4',
server: {
scheme: 'https',
host: 'webdemoapi.myscript.com',
applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
},
v4: {
math: {
customGrammar: "mathCp"
}
}
}
});
window.addEventListener('resize', function () {
editorElement.editor.resize();
});
</script>
</body>
</html>