Start a new topic
iink SDK Web
Hi, i am building my own application and i can't get it working. select recognition type a "TEXT" it works fine, but when i select
<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 Text</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="/node_modules/iink-ts/dist/iink.min.js"
></script>
<style>
#editor {
height: calc(100vh - 166px);
}
@media only screen and (max-width: 452px) {
height: calc(100vh - 213px);
</style>
</head>
<body>
<div id="result"></div>
<nav>
<div class="flex-container wrap gap">
<button id="clear" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
<img src="clear.svg" />
</button>
<button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
<img src="undo.svg" />
<button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
<img src="redo.svg" />
</div>
<select id="language"></select>
</nav>
<div id="editor" touch-action="none"></div>
<script>
const editorElement = document.getElementById("editor");
const resultElement = document.getElementById("result");
const languageElement = document.getElementById("language");
const clearElement = document.getElementById("clear");
const undoElement = document.getElementById("undo");
const redoElement = document.getElementById("redo");
/**
* we expose the editor for use in the integration test
*/
let editor;
* We use a function to wait the server configuration to load
async function loadEditor() {
const options = {
configuration: {
server: {
scheme: "https",
host: "cloud.myscript.com",
applicationKey: "",
hmacKey: "",
protocol: "WEBSOCKET"
},
recognition: {
type: "MATH",
math: {
mimeTypes: ["application/x-latex"]
};
* Instanciate editor
* @param {Element} The DOM element to attach the ink paper
* @param {Object} The Editor parameters
editor = new iink.Editor(editorElement, options);
* async initialize editor behaviors
await editor.initialize();
const currentLanguage = editor.configuration.recognition.lang;
const availableLanguageResponse = await iink.utils.getAvailableLanguageList(editor.configuration);
Object.keys(availableLanguageResponse.result).forEach(function (key) {
const selected = currentLanguage === key;
languageElement.options[languageElement.options.length] = new Option(availableLanguageResponse.result[key], key, selected, selected);
});
editor.events.addEventListener("changed", (event) => {
undoElement.disabled = !event.detail.canUndo;
redoElement.disabled = !event.detail.canRedo;
clearElement.disabled = !event.detail.canClear;
editor.events.addEventListener("exported", (event) => {
resultElement.innerHTML =
event.detail && event.detail["application/vnd.myscript.jiix"] ? event.detail["application/vnd.myscript.jiix"].label : "";
clearElement.addEventListener("click", async () => {
editor.clear();
undoElement.addEventListener("click", () => {
editor.undo();
redoElement.addEventListener("click", () => {
editor.redo();
languageElement.addEventListener("change", (e) => {
const configuration = JSON.parse(JSON.stringify(editor.configuration));
configuration.recognition.lang = e.target.value;
editor.configuration = configuration;
window.addEventListener("resize", () => {
editor.resize();
loadEditor().catch(error => console.error(error));
</script>
</body>
</html>
Hello Denis,
Thank you for contacting us.
Please, note that your application keys are personal information that you should not share. So I removed them from your code snippet.
For a Web Socket Math example, using LaTeX export and rendering please refer to this sample:
https://myscript.github.io/iinkTS/examples/websocket/websocket_math_iink.html
The source code is here:
https://github.com/MyScript/iinkTS/blob/master/examples/websocket/websocket_math_iink.html
Best regards,
Gwenaëlle
Denis
Hi, i am building my own application and i can't get it working. select recognition type a "TEXT" it works fine, but when i select
i can only draw but the result doesn't show up in the result div as it does with "TEXT"...Thanks for help
<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 Text</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="/node_modules/iink-ts/dist/iink.min.js"
></script>
<style>
#editor {
height: calc(100vh - 166px);
}
@media only screen and (max-width: 452px) {
#editor {
height: calc(100vh - 213px);
}
}
</style>
</head>
<body>
<div id="result"></div>
<nav>
<div class="flex-container wrap gap">
<button id="clear" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
<img src="clear.svg" />
</button>
<button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
<img src="undo.svg" />
</button>
<button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
<img src="redo.svg" />
</button>
</div>
<select id="language"></select>
</nav>
<div id="editor" touch-action="none"></div>
<script>
const editorElement = document.getElementById("editor");
const resultElement = document.getElementById("result");
const languageElement = document.getElementById("language");
const clearElement = document.getElementById("clear");
const undoElement = document.getElementById("undo");
const redoElement = document.getElementById("redo");
/**
* we expose the editor for use in the integration test
*/
let editor;
/**
* We use a function to wait the server configuration to load
*/
async function loadEditor() {
const options = {
configuration: {
server: {
scheme: "https",
host: "cloud.myscript.com",
applicationKey: "",
hmacKey: "",
protocol: "WEBSOCKET"
},
recognition: {
type: "MATH",
math: {
mimeTypes: ["application/x-latex"]
}
}
}
};
/**
* Instanciate editor
* @param {Element} The DOM element to attach the ink paper
* @param {Object} The Editor parameters
*/
editor = new iink.Editor(editorElement, options);
/**
* async initialize editor behaviors
*/
await editor.initialize();
const currentLanguage = editor.configuration.recognition.lang;
const availableLanguageResponse = await iink.utils.getAvailableLanguageList(editor.configuration);
Object.keys(availableLanguageResponse.result).forEach(function (key) {
const selected = currentLanguage === key;
languageElement.options[languageElement.options.length] = new Option(availableLanguageResponse.result[key], key, selected, selected);
});
editor.events.addEventListener("changed", (event) => {
undoElement.disabled = !event.detail.canUndo;
redoElement.disabled = !event.detail.canRedo;
clearElement.disabled = !event.detail.canClear;
});
editor.events.addEventListener("exported", (event) => {
resultElement.innerHTML =
event.detail && event.detail["application/vnd.myscript.jiix"] ? event.detail["application/vnd.myscript.jiix"].label : "";
});
clearElement.addEventListener("click", async () => {
editor.clear();
});
undoElement.addEventListener("click", () => {
editor.undo();
});
redoElement.addEventListener("click", () => {
editor.redo();
});
languageElement.addEventListener("change", (e) => {
const configuration = JSON.parse(JSON.stringify(editor.configuration));
configuration.recognition.lang = e.target.value;
editor.configuration = configuration;
});
window.addEventListener("resize", () => {
editor.resize();
});
};
loadEditor().catch(error => console.error(error));
</script>
</body>
</html>
Hello Denis,
Thank you for contacting us.
Please, note that your application keys are personal information that you should not share. So I removed them from your code snippet.
For a Web Socket Math example, using LaTeX export and rendering please refer to this sample:
https://myscript.github.io/iinkTS/examples/websocket/websocket_math_iink.html
The source code is here:
https://github.com/MyScript/iinkTS/blob/master/examples/websocket/websocket_math_iink.html
Best regards,
Gwenaëlle
Gwenaelle @MyScript
Hello Denis,
Thank you for contacting us.
Please, note that your application keys are personal information that you should not share. So I removed them from your code snippet.
For a Web Socket Math example, using LaTeX export and rendering please refer to this sample:
https://myscript.github.io/iinkTS/examples/websocket/websocket_math_iink.html
The source code is here:
https://github.com/MyScript/iinkTS/blob/master/examples/websocket/websocket_math_iink.html
Best regards,
Gwenaëlle