Forums
Exported Objects of Protocol WEBSOCKET and REST Have Different Structures in the mimeType of vnd.myscript.jiix?
Hello,
Thank you for your question.
The REST and Websocket objects might be slighlty different, but the JIIX content inside the Object { type: "Math", id: "MainBlock", version: "3", … }, should be the same.
For an example illustrating how to use the JIIX export and import to be able to reedit your Math ink, you might refer to the following example:
https://myscript.github.io/iinkTS/examples/websocket/websocket_math_inside_page.html
The corresponding source code is here: https://github.com/MyScript/iinkTS/blob/master/examples/websocket/websocket_math_inside_page.html
Best regards,
Gwenaëlle
Thanks for your reply.
As I mentioned in my previous email that the exported object has different structure between webscoket and REST in protocol. Your suggested examples are both based on the websocket protocol so they both show the same exported object with the same structure (websocket_math_inside_page.html vs. websocket_math_inside_page.html). What I need is the same object structure for the event.detail.exports object for REST in the same way as that of websocket. Can you help me or ask a developer to help me?
Hello,
Thank you for your update.
As far as I understand, you would like to have the strokes coordinates in your JIIX export for REST as well.
Based on the https://github.com/MyScript/iinkTS/blob/master/examples/rest/rest_math_iink.html example, you can modify its configuration as below:
*/
async function loadEditor() {
const res = await fetch("../server-configuration.json");
const conf = await res.json();
const options = {
configuration: {
server: {
...conf,
protocol: "REST"
},
recognition: {
type: "MATH",
export: {
jiix: {
strokes: true
}
},
math: {
mimeTypes: ["application/vnd.myscript.jiix"]
}
}
}
};Best regards,
Gwenaëlle
Hi Gwenaëlle,
Thanks for the update. I did not realize the MyScript code base has been updated just last month until you replied. My code base was still having this call to the cloud server:
Not like what is in your reply:
async function loadEditor() { };Let me update to the new code base and test it again.
Will get back to you.
Thanks!
Hi Gwenaëlle,
I just realized that the sample codes you provided is for Typescript. While I am still use javascript for our project, can you provide code examples in javascript if the call function to the myscript cloud server is different from the following:
Hello,
Thank you for your update.
The iink 2.1 Web brought some refactoring into its Javascript library and this refresh was also the good opportunity to move to Typescript. For this reason, we also changed its name from iinkJS to iinkTS. Starting from 2.1, we have thus decided to focus on iinkTS and to discontinue the maintenance of iinkJS: if you start a new project, you recommend you to go with iinkTS.
Your iinkJS jiix stroke configuration looks good.
Best regards,
Gwenaëlle
Hi Gwenaëlle,
Thanks for the reply. I was able to get the strokes for the REST protocol. But I have encountered a strange issue of importing strokes to an editor, I will create a new issue for this problem.
I have another question here: How to set the background of an editor to have grids or lines or blank? Is it set in the configuration for creating an editor? I could not find anywhere in the document about these settings.
Hello,
You can use regular CSS to configure the size and the background of your editor.
For further details about Styling, please read:
You can also refer to the following example:
Best regards,
Gwenaëlle
I went through both the codes and the document you cited, and I still have no clue of how to set the editor background to show grids or lines or blank. Can you show some code examples (not the whole file but just a few lines of code snippets)?
Hello,
Thank you for your update.
The websocket text customize style example I was referring to is using a customized css to apply styling: ../assets/style/my-custom-classes.css
You can customize this css file with your own css according to your needs.
For instance, based on https://codepen.io/naprirfan/pen/xEvRae example, you can use the following block in your my-custom-classes.css
.my-custom-class {
position: relative;
height: calc(100vh - 66px);
width: 100%;
z-index: 20;
font-family: sans-serif;
color: #F5F6F7;
background: #333;
background-image: linear-gradient(rgba(0, 255, 0, .7) .1em, transparent .1em), linear-gradient(90deg, rgba(0, 255, 0, .7) .1em, transparent .1em);
background-size: 3em 3em;
}and will get following styling:
Best regards,
Gwenaëlle
Hi Gwenaëlle,
Hello,
Please note that your application keys are personal information that should be kept secret. Please refer to https://developer.myscript.com/support/account/registering-myscript-cloud
Therefore, I removed your code snippet from your post.
The lines of the background when using a Text content type in WebSocket mode are computed by the recognition server and are sent in the SVG patch updates to iinkJS.
(for more details visit https://developer.myscript.com/docs/interactive-ink/2.3/web/websockets/messages/#svg-patch)
This is the reason why you don't find them in the CSS file.
If you don't want the lines, you can deactivate them with the text.guides.enable property (When using iinkJS, the prefix recognitionParams.iink should be added.)
(see https://developer.myscript.com/docs/interactive-ink/2.0/web/reference/configuration-iinkjs/#text)
There is no grid support by the recognition server itself.
Best regards,
Gwenaëlle
Hi Gwenaëlle,
Thanks for the reminder of not revealing the API key.
I do need to specify whether the lines or grids or blank should be used as the canvas background (for either websocket or REST). That is why I keep asking where I can define the code behavior or specify the property for lines or grids as the background image. What you initially suggested is to change CSS, but then you said it is hidden as a step during recognition. Again, what do I need to do if I want any of the following behavior?
For the Websocket protocol, what do I need to do for the background image: lines, grids, or blank?
For the REST protocol, what do I need to do for the background image: lines, grids, or blank?
If one pattern is chosen for a background option, how do I adjust the pattern properties like line width, line space, line color, etc.
No help yet for setting the background image from the support team of MyScript? Not sure if the background image can be set from CSS, why not show an example of how to do it in iink's own code set?
Brainstrong911
To display the same pen strokes in a second editor, an import object is built from the exported object as below:
editorElement.addEventListener('exported', (event) => {
const exports = event.detail.exports;
console.log(exports);
console.log(exports["application/vnd.myscript.jiix"]);
toImport = exports['application/vnd.myscript.jiix'];
........
}
However, it turns out that the structure of the above exported object (event.detail.exports) depends on the iink's protocol of whether it is WEBSOCKET or REST for the mimeType of application/vnd.myscript.jiix. Because of this difference, it is unable to display the pen strokes with REST from the exported object using this line:
toImport = exports['application/vnd.myscript.jiix'];
Why is the structure of the exported object different for different protocols? How to build pen strokes from the exported object of the protocol REST for import?
---------------------------------------------------------
The exported object of WEBSOCKET:
Object { "application/x-latex": "y", "application/vnd.myscript.jiix": "{\n \"type\": \"Math\",\n \"expressions\": [ {\n \"type\": \"symbol\",\n \"id\": \"math/12\",\n \"label\": \"y\",\n \"items\": [ {\n \"timestamp\": \"2023-12-17 13:49:32.617000\",\n \"X\": [ 102.393745, 103.1875, 103.45208, 104.245827, 104.510414, 105.304161, 106.097916, 106.891663,\n 107.42083, 107.685417, 107.685417, 108.214577, 108.479164, 108.479164, 108.479164, 109.008331,\n 109.008331, 109.008331, 108.743744, 108.743744, 108.214577, 107.15625, 105.833328, 105.568748,\n 104.510414, 103.1875 ],\n \"Y\": [ 26.4583321, 27.78125, 28.8395824, 29.3687496, 30.1624985, 30.6916656, 30.1624985, 30.1624985,\n 29.3687496, 28.0458317, 27.2520828, 26.1937485, 25.135416, 24.3416653, 25.9291668, 28.0458317,\n 29.3687496, 30.6916656, 31.4854164, 32.2791672, 33.6020813, 33.6020813, 34.1312485, 34.9249992,\n 35.4541664, 35.9833336 ],\n \"F\": [ 0.5, 0.758526385, 0.718526483, 0.700710416, 0.683189929, 0.700710416, 0.700710416, 0.6761536,\n 0.700710416, 0.746184707, 0.6761536, 0.729212582, 0.718526483, 0.6761536, 0.766522586, 0.80248946,\n 0.743674636, 0.743674636, 0.683189929, 0.6761536, 0.753112853, 0.714515865, 0.753112853, 0.683189929,\n 0.729212582, 0.753112853 ],\n \"T\": [ 0, 232, 266, 333, 399, 500, 566, 600,\n 633, 699, 733, 766, 799, 832, 1233, 1266,\n 1299, 1333, 1366, 1400, 1466, 1600, 1633, 1666,\n 1933, 2000 ],\n \"type\": \"stroke\",\n \"id\": \"0000000001003300ff00\"\n } ]\n } ],\n \"id\": \"MainBlock\",\n \"version\": \"3\"\n}" }
The exported object of REST:
Object { "application/x-latex": "y", "application/vnd.myscript.jiix": {…} }
"application/vnd.myscript.jiix": Object { type: "Math", id: "MainBlock", version: "3", … }
"application/x-latex": "y"
<prototype>: Object { … }