How to Save : MyScript Developer Support

M

Mason Secky-Koebel

started a topic almost 4 years ago

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!

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.

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

G

Gwenaelle @MyScript

said almost 4 years ago

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 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:

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

M

Mason Secky-Koebel

said almost 4 years ago

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!

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:

{
    "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

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.

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

M

Mason Secky-Koebel

said almost 4 years ago

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!

G

Gwenaelle @MyScript

said almost 4 years ago

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

M

Mason Secky-Koebel

said almost 4 years ago

Yes! That did it, so sorry this issue was so basic, but thank you for the help!

G

Gwenaelle @MyScript

said almost 4 years ago

Thanks for your update. We are glad you've fixed your issue.

Gwenaëlle

Forums

How to Save

Mason Secky-Koebel

Gwenaelle @MyScript

Mason Secky-Koebel

Olivier @MyScript

Mason Secky-Koebel

Olivier @MyScript

Mason Secky-Koebel

Gwenaelle @MyScript

Mason Secky-Koebel

Gwenaelle @MyScript

Mason Secky-Koebel

Gwenaelle @MyScript