This repository has been archived by the owner on Jan 15, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 18
/
websocket_math_iink.html
128 lines (117 loc) · 4.51 KB
/
websocket_math_iink.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
116
117
118
119
120
121
122
123
124
125
126
127
128
<!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>WEBSOCKET Math iink</title>
<link rel="stylesheet" href="../examples.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script type="text/javascript" src="../../dist/iink.min.js"></script>
</head>
<body>
<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" touch-action="none"></div>
</div>
<script>
const editorElement = document.getElementById('editor');
const resultElement = document.getElementById('result');
const undoElement = document.getElementById('undo');
const redoElement = document.getElementById('redo');
const clearElement = document.getElementById('clear');
const convertElement = document.getElementById('convert');
editorElement.addEventListener('changed', (event) => {
undoElement.disabled = !event.detail.canUndo;
redoElement.disabled = !event.detail.canRedo;
clearElement.disabled = event.detail.isEmpty;
});
function cleanLatex(latexExport) {
if (latexExport.includes('\\\\')) {
const steps = '\\begin{align*}' + latexExport + '\\end{align*}';
return steps.replace("\\begin{aligned}", "")
.replace("\\end{aligned}", "")
.replace(new RegExp("(align.{1})", "g"), "aligned");
}
return latexExport
.replace(new RegExp("(align.{1})", "g"), "aligned");
}
editorElement.addEventListener('exported', (evt) => {
const exports = evt.detail.exports;
if (exports && exports['application/x-latex']) {
katex.render(cleanLatex(exports['application/x-latex']), resultElement);
convertElement.disabled = false;
}
else {
convertElement.disabled = true;
resultElement.innerHTML = '';
}
});
undoElement.addEventListener('click', () => {
editorElement.editor.undo();
});
redoElement.addEventListener('click', () => {
editorElement.editor.redo();
});
clearElement.addEventListener('click', () => {
editorElement.editor.clear();
});
convertElement.addEventListener('click', () => {
editorElement.editor.convert();
});
/**
* Attach an editor to the document
* @param {Element} The DOM element to attach the ink paper
* @param {Object} The recognition parameters
*/
iink.register(editorElement, {
recognitionParams: {
type: 'MATH',
protocol: 'WEBSOCKET',
server: {
scheme: 'https',
host: 'webdemoapi.myscript.com',
applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
},
iink: {
math: {
mimeTypes: ['application/x-latex', 'application/vnd.myscript.jiix', 'application/mathml+xml']
},
export: {
jiix: {
strokes: true
}
}
}
}
});
window.addEventListener('resize', () => {
editorElement.editor.resize();
});
</script>
</body>
</html>