I am working with angular on the web, and I have a component called 'sketch' where the editor is configured and working fine. I am comfortable getting converted text through the standard editor. I have the following set up:
this.editorElement.addEventListener("exported", (evt) => {
const exports = evt.detail.exports;
try {
// FIRE IF THERE IS CONTENT
if (exports["application/vnd.myscript.jiix"]) {
console.log(JSON.stringify(exports));
}
} catch {
console.log("nothing");
}
});
This fires when a change occurs. What I am looking to do is treat this as a file - I want to 'save' the sketch that is generated as a 'page,' and have a user come back and load the page later. For example, if I sketch something I am working on, this would save the sketch to a database, and I would be able to open it again later. I want the literal sketch, not the text.
1) How would I 'save' the sketch output so that I may re-open it later?
2) How do I configure the editor so that, on init, it has a sketch present that I had previously saved?
Thank you for any help on this!
Best Answer
G
Gwenaelle @MyScript
said
almost 4 years ago
Hi Mason,
If you add the set the strokes configuration with following block within recognition parameter:
iink: {
export: {
jiix: {
strokes: true
}
}
you should be able to get the strokes information in the jiix exported result.
One first remark, please make sure to use our latest javascript library iinkJS.
There is currentley no API to save then re-open the page, so in order to achieve what you want, you have to write the corresponding code.
Here is the outline of what you could try:
export the JIIX file including the strokes information by setting the export.jiix.strokes configuration property to true.
save the JJIIX file
then use this file to parse the strokes information present into the JIIX file and transform them to pointer events to "feed" the editor. You can refer to following demo that shows how to feed the editor with pointer events. The corresponding code is here
Regards,
Gwenaëlle
M
Mason Secky-Koebel
said
almost 4 years ago
Hi Gwenaëlle,
Thank you for your reply!
In the documentation, I do not see how to 'save' the jiix file for iinkJS (I see it covered for non-JS platforms). I have the configuration set up (your step 1).
How would I export/save the jiix information? Can I do this inside of the exported event?
Thanks again!
O
Olivier @MyScript
said
almost 4 years ago
Dear Mason,
thank you for the update.
Currently, we do not have a save function. What Gwenaelle meant is that you shall first export as JIIX. When you have the JIIX, you can then store it by yourself (just create a small function to save it).
With the JIIX, you can then process it by yourself to get the stroke information.
In order to export as JIIX, you can refer to the following sample with source code:
How it is set up for me at the moment, I am getting the same result as the code you posted, but not the stroke information, or some array of pointer events. I am getting the text prediction object, but not this:
Maybe I am not supposed to get data in the form above? I do not see how to get the stroke information from the editor using iinkJS - just the prediction object. Saving would be perfect if I could somehow get this.
Thanks again for the help!
O
Olivier @MyScript
said
almost 4 years ago
Dear Mason,
currently, the X and Y arrays correspond to the strokes. The following is a stroke, or pointer event:
Basically, the strokes you have are converted in milimeters, while you are providing coordinates in milimiters.
You can then use the above coordinates to redarw your ink.
Best regards,
Olivier
M
Mason Secky-Koebel
said
almost 4 years ago
Hi Olivier,
I am sorry, I worded my response awkwardly. I am not getting that response, and am not sure how to. That is coming from the example that was provided. I am only able to get the converted text, not the stroke information.
How do I get that stroke information? Gwenaelle told me to export the JIIX file including the strokes information by setting the export.jiix.strokes configuration property to true, which I did, but how to get the stroke information is still a mystery.
Thanks!
G
Gwenaelle @MyScript
said
almost 4 years ago
Answer
Hi Mason,
If you add the set the strokes configuration with following block within recognition parameter:
iink: {
export: {
jiix: {
strokes: true
}
}
you should be able to get the strokes information in the jiix exported result.
Oddly enough, as well as not exporting the jiix strokes information, in my editor, the smartGuide is also still enabled, meaning there must be a problem with the way the editor is being configured. Here is the export I get, for example:
Mason Secky-Koebel
Hello!
Brand new to the forum and myScript.js.
I am working with angular on the web, and I have a component called 'sketch' where the editor is configured and working fine. I am comfortable getting converted text through the standard editor. I have the following set up:
this.editorElement.addEventListener("exported", (evt) => { const exports = evt.detail.exports; try { // FIRE IF THERE IS CONTENT if (exports["application/vnd.myscript.jiix"]) { console.log(JSON.stringify(exports)); } } catch { console.log("nothing"); } });This fires when a change occurs. What I am looking to do is treat this as a file - I want to 'save' the sketch that is generated as a 'page,' and have a user come back and load the page later. For example, if I sketch something I am working on, this would save the sketch to a database, and I would be able to open it again later. I want the literal sketch, not the text.
1) How would I 'save' the sketch output so that I may re-open it later?
2) How do I configure the editor so that, on init, it has a sketch present that I had previously saved?
Thank you for any help on this!
Hi Mason,
If you add the set the strokes configuration with following block within recognition parameter:
iink: { export: { jiix: { strokes: true } }you should be able to get the strokes information in the jiix exported result.
For instance, your exported JIIX could look like:
{"exports":{"application/vnd.myscript.jiix":"{\n \"type\": \"Text\",\n \"label\": \"hi\",\n \"words\": [ {\n \"label\": \"hi\",\n \"candidates\": [ \"hi\", \"he\", \"his\", \"be\", \"hir\" ],\n \"items\": [ {\n \"timestamp\": \"2021-01-05 15:45:53.023000\",\n \"X\": [ 31.75, 32.5437508, 34.3958321, 36.5125008, 39.6875, 42.3333321, 45.5083313, 47.0958328,\n 48.9479141, 50.2708321, 51.59375, 52.9166641, 53.9749985, 54.7687492, 54.5041656, 53.9749985,\n 52.6520805, 51.8583336, 51.0645828, 50.2708321, 49.4770813, 48.6833305, 48.6833305, 48.6833305,\n 48.6833305, 48.6833305, 48.9479141, 49.4770813, 50.2708321, 51.3291664, 52.3874969, 52.6520805,\n 53.4458313, 53.4458313, 54.2395821, 55.2979164, 56.3562469, 57.9437485, 58.7374992, 59.2666664,\n 60.0604134, 60.8541641, 61.3833313, 61.9124985, 61.1187477, 60.8541641, 60.8541641, 61.9124985,\n 62.9708328, 64.0291672, 65.0875015, 66.1458282, 67.2041626, 69.0562515, 70.9083328, 71.7020798 ],\n \"Y\": [ 33.3374977, 33.3374977, 33.3374977, 33.3374977, 33.0729141, 32.2791672, 31.2208328, 30.4270821,\n 28.8395824, 26.7229156, 24.0770836, 21.166666, 17.7270832, 14.8166666, 13.229166, 12.1708326,\n 12.1708326, 13.229166, 14.2874994, 17.197916, 21.166666, 25.135416, 28.8395824, 30.9562492,\n 32.2791672, 33.0729141, 32.2791672, 31.2208328, 30.1624985, 29.104166, 29.104166, 29.8979149,\n 32.0145836, 32.8083305, 33.6020813, 33.8666649, 33.8666649, 32.5437508, 32.2791672, 31.2208328,\n 30.1624985, 28.5749989, 27.2520828, 26.4583321, 27.2520828, 29.104166, 30.1624985, 30.6916656,\n 30.9562492, 31.2208328, 31.2208328, 31.2208328, 31.2208328, 31.2208328, 30.9562492, 30.4270821 ],\n \"F\": [ 0.5, 0.826794922, 0.784727871, 0.799350739, 0.652989984, 0.676885366, 0.644344091, 0.779824913,\n 0.813365042, 0.815461159, 0.665629864, 0.652393222, 0.631198287, 0.662335157, 0.768188, 0.729212582,\n 0.743674636, 0.743674636, 0.743674636, 0.662335157, 0.608885467, 0.608885467, 0.625834286, 0.799350739,\n 0.743674636, 0.6761536, 0.683189929, 0.729212582, 0.743674636, 0.759273291, 0.714515865, 0.683189929,\n 0.806067288, 0.6761536, 0.722296655, 0.718526483, 0.714515865, 0.79681462, 0.683189929, 0.729212582,\n 0.743674636, 0.779824913, 0.753112853, 0.700710416, 0.722296655, 0.78587532, 0.714515865, 0.729212582,\n 0.718526483, 0.718526483, 0.714515865, 0.714515865, 0.714515865, 0.784727871, 0.78587532, 0.700710416 ],\n \"T\": [ 0, 122, 137, 154, 170, 186, 204, 220,\n 237, 253, 270, 287, 303, 320, 336, 354,\n 420, 453, 471, 487, 503, 520, 536, 554,\n 570, 704, 820, 836, 854, 870, 987, 1053,\n 1087, 1104, 1121, 1154, 1186, 1220, 1237, 1271,\n 1287, 1304, 1321, 1337, 1387, 1403, 1437, 1537,\n 1554, 1571, 1588, 1604, 1620, 1637, 1671, 1704 ],\n \"type\": \"stroke\",\n \"id\": \"0000000001006f00ff00\"\n }, {\n \"timestamp\": \"2021-01-05 15:45:55.299000\",\n \"X\": [ 60.8541641, 60.8541641 ],\n \"Y\": [ 24.0770836, 24.0770836 ],\n \"F\": [ 0.5, 0.5 ],\n \"T\": [ 0, 0 ],\n \"type\": \"stroke\",\n \"id\": \"0000010001000300ff00\"\n } ]\n } ],\n \"version\": \"2\",\n \"id\": \"MainBlock\"\n}","text/plain":"hi"}}The strokes information are stored in the stroke items. For further details, please check this page: https://developer.myscript.com/docs/interactive-ink/1.4/reference/web/jiix/#stroke-item
Regards,
Gwenaëlle
- Oldest First
- Popular
- Newest First
Sorted by Oldest FirstGwenaelle @MyScript
Hello Mason,
Thank you for contacting us.
One first remark, please make sure to use our latest javascript library iinkJS.
There is currentley no API to save then re-open the page, so in order to achieve what you want, you have to write the corresponding code.
Here is the outline of what you could try:
export.jiix.strokesconfiguration property to true.Regards,
Gwenaëlle
Mason Secky-Koebel
Hi Gwenaëlle,
Thank you for your reply!
In the documentation, I do not see how to 'save' the jiix file for iinkJS (I see it covered for non-JS platforms). I have the configuration set up (your step 1).
How would I export/save the jiix information? Can I do this inside of the exported event?
Thanks again!
Olivier @MyScript
Dear Mason,
thank you for the update.
Currently, we do not have a save function. What Gwenaelle meant is that you shall first export as JIIX. When you have the JIIX, you can then store it by yourself (just create a small function to save it).
With the JIIX, you can then process it by yourself to get the stroke information.
In order to export as JIIX, you can refer to the following sample with source code:
https://myscript.github.io/iinkJS/examples/non-version-specific/on_demand_exports.html
https://github.com/MyScript/iinkJS/blob/master/examples/non-version-specific/on_demand_exports.html
Best regards,
Olivier
Mason Secky-Koebel
Olivier,
How it is set up for me at the moment, I am getting the same result as the code you posted, but not the stroke information, or some array of pointer events. I am getting the text prediction object, but not this:
{ "pointerType": "PEN", "pointerId": 1, "x": [128, 125, 122, 119, 118, 117, 116, 117, 119, 123, 127, 135, 139, 141, 144, 144, 143, 142, 141, 142], "y": [83, 91, 99, 107, 114, 121, 125, 120, 112, 101, 90, 76, 70, 66, 76, 88, 101, 111, 118, 123], "t": [1516190046205, 1516190046247, 1516190046264, 1516190046280, 1516190046297, 1516190046314, 1516190046330, 1516190046380, 1516190046397, 1516190046413, 1516190046430, 1516190046447, 1516190046463, 1516190046480, 1516190046547, 1516190046563, 1516190046581, 1516190046597, 1516190046614, 1516190046630], "p": [0.5, 0.7076987214308235, 0.8060672826037246, 0.8060672826037246, 0.785875329883628, 0.785875329883628, 0.7185264889882718, 0.7461846839143089, 0.8024894359144054, 0.6578786777951477, 0.6578786777951477, 0.5984465727129564, 0.7880849230110567, 0.7292125754002905, 0.6768853685004259, 0.6535898384862245, 0.6389126863152722, 0.6829846120277299, 0.785875329883628, 0.7461846839143089] },{ "pointerType": "PEN", "pointerId": 1, "x": [117, 122, 128, 139, 146], "y": [105, 105, 106, 107, 106], "t": [1516190046870, 1516190046930, 1516190046947, 1516190046963, 1516190046980], "p": [0.5, 0.7763932022500211, 0.7681880209236327, 0.6676543814462531, 0.785875329883628] }Maybe I am not supposed to get data in the form above? I do not see how to get the stroke information from the editor using iinkJS - just the prediction object. Saving would be perfect if I could somehow get this.
Thanks again for the help!
Olivier @MyScript
Dear Mason,
currently, the X and Y arrays correspond to the strokes. The following is a stroke, or pointer event:
{ "pointerType": "PEN", "pointerId": 1, "x": [128, 125, 122, 119, 118, 117, 116, 117, 119, 123, 127, 135, 139, 141, 144, 144, 143, 142, 141, 142], "y": [83, 91, 99, 107, 114, 121, 125, 120, 112, 101, 90, 76, 70, 66, 76, 88, 101, 111, 118, 123], "t": [1516190046205, 1516190046247, 1516190046264, 1516190046280, 1516190046297, 1516190046314, 1516190046330, 1516190046380, 1516190046397, 1516190046413, 1516190046430, 1516190046447, 1516190046463, 1516190046480, 1516190046547, 1516190046563, 1516190046581, 1516190046597, 1516190046614, 1516190046630], "p": [0.5, 0.7076987214308235, 0.8060672826037246, 0.8060672826037246, 0.785875329883628, 0.785875329883628, 0.7185264889882718, 0.7461846839143089, 0.8024894359144054, 0.6578786777951477, 0.6578786777951477, 0.5984465727129564, 0.7880849230110567, 0.7292125754002905, 0.6768853685004259, 0.6535898384862245, 0.6389126863152722, 0.6829846120277299, 0.785875329883628, 0.7461846839143089] }Basically, the strokes you have are converted in milimeters, while you are providing coordinates in milimiters.
You can then use the above coordinates to redarw your ink.
Best regards,
Olivier
Mason Secky-Koebel
Hi Olivier,
I am sorry, I worded my response awkwardly. I am not getting that response, and am not sure how to. That is coming from the example that was provided. I am only able to get the converted text, not the stroke information.
How do I get that stroke information? Gwenaelle told me to export the JIIX file including the strokes information by setting the export.jiix.strokes configuration property to true, which I did, but how to get the stroke information is still a mystery.
Thanks!
Gwenaelle @MyScript
Hi Mason,
If you add the set the strokes configuration with following block within recognition parameter:
iink: { export: { jiix: { strokes: true } }you should be able to get the strokes information in the jiix exported result.
For instance, your exported JIIX could look like:
{"exports":{"application/vnd.myscript.jiix":"{\n \"type\": \"Text\",\n \"label\": \"hi\",\n \"words\": [ {\n \"label\": \"hi\",\n \"candidates\": [ \"hi\", \"he\", \"his\", \"be\", \"hir\" ],\n \"items\": [ {\n \"timestamp\": \"2021-01-05 15:45:53.023000\",\n \"X\": [ 31.75, 32.5437508, 34.3958321, 36.5125008, 39.6875, 42.3333321, 45.5083313, 47.0958328,\n 48.9479141, 50.2708321, 51.59375, 52.9166641, 53.9749985, 54.7687492, 54.5041656, 53.9749985,\n 52.6520805, 51.8583336, 51.0645828, 50.2708321, 49.4770813, 48.6833305, 48.6833305, 48.6833305,\n 48.6833305, 48.6833305, 48.9479141, 49.4770813, 50.2708321, 51.3291664, 52.3874969, 52.6520805,\n 53.4458313, 53.4458313, 54.2395821, 55.2979164, 56.3562469, 57.9437485, 58.7374992, 59.2666664,\n 60.0604134, 60.8541641, 61.3833313, 61.9124985, 61.1187477, 60.8541641, 60.8541641, 61.9124985,\n 62.9708328, 64.0291672, 65.0875015, 66.1458282, 67.2041626, 69.0562515, 70.9083328, 71.7020798 ],\n \"Y\": [ 33.3374977, 33.3374977, 33.3374977, 33.3374977, 33.0729141, 32.2791672, 31.2208328, 30.4270821,\n 28.8395824, 26.7229156, 24.0770836, 21.166666, 17.7270832, 14.8166666, 13.229166, 12.1708326,\n 12.1708326, 13.229166, 14.2874994, 17.197916, 21.166666, 25.135416, 28.8395824, 30.9562492,\n 32.2791672, 33.0729141, 32.2791672, 31.2208328, 30.1624985, 29.104166, 29.104166, 29.8979149,\n 32.0145836, 32.8083305, 33.6020813, 33.8666649, 33.8666649, 32.5437508, 32.2791672, 31.2208328,\n 30.1624985, 28.5749989, 27.2520828, 26.4583321, 27.2520828, 29.104166, 30.1624985, 30.6916656,\n 30.9562492, 31.2208328, 31.2208328, 31.2208328, 31.2208328, 31.2208328, 30.9562492, 30.4270821 ],\n \"F\": [ 0.5, 0.826794922, 0.784727871, 0.799350739, 0.652989984, 0.676885366, 0.644344091, 0.779824913,\n 0.813365042, 0.815461159, 0.665629864, 0.652393222, 0.631198287, 0.662335157, 0.768188, 0.729212582,\n 0.743674636, 0.743674636, 0.743674636, 0.662335157, 0.608885467, 0.608885467, 0.625834286, 0.799350739,\n 0.743674636, 0.6761536, 0.683189929, 0.729212582, 0.743674636, 0.759273291, 0.714515865, 0.683189929,\n 0.806067288, 0.6761536, 0.722296655, 0.718526483, 0.714515865, 0.79681462, 0.683189929, 0.729212582,\n 0.743674636, 0.779824913, 0.753112853, 0.700710416, 0.722296655, 0.78587532, 0.714515865, 0.729212582,\n 0.718526483, 0.718526483, 0.714515865, 0.714515865, 0.714515865, 0.784727871, 0.78587532, 0.700710416 ],\n \"T\": [ 0, 122, 137, 154, 170, 186, 204, 220,\n 237, 253, 270, 287, 303, 320, 336, 354,\n 420, 453, 471, 487, 503, 520, 536, 554,\n 570, 704, 820, 836, 854, 870, 987, 1053,\n 1087, 1104, 1121, 1154, 1186, 1220, 1237, 1271,\n 1287, 1304, 1321, 1337, 1387, 1403, 1437, 1537,\n 1554, 1571, 1588, 1604, 1620, 1637, 1671, 1704 ],\n \"type\": \"stroke\",\n \"id\": \"0000000001006f00ff00\"\n }, {\n \"timestamp\": \"2021-01-05 15:45:55.299000\",\n \"X\": [ 60.8541641, 60.8541641 ],\n \"Y\": [ 24.0770836, 24.0770836 ],\n \"F\": [ 0.5, 0.5 ],\n \"T\": [ 0, 0 ],\n \"type\": \"stroke\",\n \"id\": \"0000010001000300ff00\"\n } ]\n } ],\n \"version\": \"2\",\n \"id\": \"MainBlock\"\n}","text/plain":"hi"}}The strokes information are stored in the stroke items. For further details, please check this page: https://developer.myscript.com/docs/interactive-ink/1.4/reference/web/jiix/#stroke-item
Regards,
Gwenaëlle
Mason Secky-Koebel
Gwenaëlle,
Here is my configuration:
this.editor = iink.register(this.domEditor.nativeElement, { iink: { text: { smartGuide: false, }, export: { jiix: { strokes: true, }, }, }, recognitionParams: { type: "TEXT", protocol: "WEBSOCKET", server: { scheme: "https", host: "webdemoapi.myscript.com", applicationKey: "KEY", hmacKey: "KEY", }, }, websocket: { autoReconnect: true, }, });Oddly enough, as well as not exporting the jiix strokes information, in my editor, the smartGuide is also still enabled, meaning there must be a problem with the way the editor is being configured. Here is the export I get, for example:
{"application/vnd.myscript.jiix":"{\n \"type\": \"Text\",\n \"label\": \"Test.\",\n \"words\": [ {\n \"label\": \"Test\",\n \"candidates\": [ \"Test\", \"test\", \"Tesb\", \"Tesh\", \"Teso\" ]\n }, {\n \"label\": \".\",\n \"candidates\": [ \".\", \",\", \"-\", \"'\", \"_\" ]\n } ],\n \"version\": \"2\",\n \"id\": \"MainBlock\"\n}","text/plain":"Test."}Do you see any issue with my configuration?
Thanks again!
Gwenaelle @MyScript
Mason,
Yes the iink block should be within the recognitionParams block. For instance:
recognitionParams: { server: { scheme: 'https', host: 'webdemoapi.myscript.com', applicationKey: 'xxx', hmacKey: 'yyy', websocket: { pingEnabled: false, autoReconnect: true } }, iink: { export: { jiix: { strokes: true } } } }Gwenaëlle
1 person likes this
Mason Secky-Koebel
Yes! That did it, so sorry this issue was so basic, but thank you for the help!
Gwenaelle @MyScript
Thanks for your update. We are glad you've fixed your issue.
Gwenaëlle