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