iink SDK on Device

Answered

Save/ Upload to remote storage and Download/Re-Render content into canvas.

Hi,

I was able to dump my entire scribbles to a JIIX file. But I couldn't find any way to read from it again.

Any help would be helpful

Regards
Sourav


Best Answer

Dear Sourav,


currently, the question is rather what do you want to achieve? A copy/paste, or save a package and restore it later?


Indeed, if you want to copy paste, you should use the corresponding functions:

-Copy: https://developer.myscript.com/refguides/interactive-ink/android/1.2/com/myscript/iink/Editor.html#copy-com.myscript.iink.ContentBlock-

-Paste: https://developer.myscript.com/refguides/interactive-ink/android/1.2/com/myscript/iink/Editor.html#paste-float-float-


And to save and open later a Content package:

-save: https://developer.myscript.com/refguides/interactive-ink/android/1.2/com/myscript/iink/ContentPackage.html#saveAs-java.io.File-

-Open: https://developer.myscript.com/refguides/interactive-ink/android/1.2/com/myscript/iink/Engine.html#openPackage-java.io.File-


If this doesn't match your needs, please explain what you exactly want to achieve, so that we may think of another solution.


Best regards,


Olivier


Hi, I have a similar a question that I hope you re-clarify based on above.  I too am working with my developer and we are trying to build a simple web based app.  my use case is as follows:


using only drawing canvas (just ink strokes, no recognition)

using angular / web framework

using cloud (e.g. sql azure or firebase) storage

my developers are saying they are running into trouble storing and retrieving the ink for editing.  e.g. draw something on screen, close app. re-open app on web and try to edit ink.  


are they correct or are we missing a trick here? surely this as simple as loading the ink data?


thanks 

Prem


Thanks for quick response.

Yes. I did

Here is a sample which I am saving into a local file in temp directory.

{
 "type": "Container",
 "id": "MainBlock",
 "bounding-box": {
  "x": 7.5225859,
  "y": 23.09,
  "width": 145.43666,
  "height": 24.629333
 },
 "children": [ {
   "type": "Text",
   "bounding-box": {
    "x": 7.5225859,
    "y": 23.09,
    "width": 145.43666,
    "height": 24.629333
   },
   "label": "-\nABC",
   "words": [ {
     "label": "-",
     "candidates": [ "-", "_", "~", "I", "2" ],
     "bounding-box": {
      "x": 13.04697,
      "y": 25.265909,
      "width": 37.406059,
      "height": 6.1371212
     },
     "range": "[0:0,0:54$]",
     "strokes": [ {
       "timestamp": "2018-08-07 13:55:24.714000",
       "X": [ 14.04697, 14.912879, 15.39394, 15.875, 16.35606, 17.029545, 17.799242, 18.472727,
        19.338636, 20.204546, 21.070456, 22.128788, 23.09091, 24.149242, 25.207577, 26.458334,
        27.420456, 28.478788, 29.729546, 30.884092, 31.846212, 32.904545, 33.866669, 34.828789,
        35.406063, 36.175758, 36.945454, 37.522728, 38.100002, 38.484848, 38.965908, 39.446972,
        39.928032, 40.409092, 40.890152, 41.467426, 42.140911, 42.718182, 43.584091, 44.161366,
        45.027275, 45.70076, 46.374245, 47.047729, 47.625, 48.10606, 48.49091, 48.779545,
        49.068184, 49.164394, 49.260609, 49.356819, 49.356819, 49.45303, 49.45303 ],
       "Y": [ 28.286364, 27.612879, 27.612879, 27.612879, 27.709091, 27.709091, 27.901516, 27.997728,
        28.190151, 28.190151, 28.286364, 28.286364, 28.286364, 28.286364, 28.286364, 28.190151,
        28.093941, 27.805304, 27.516666, 27.228031, 26.939394, 26.746971, 26.554546, 26.362122,
        26.265909, 26.265909, 26.265909, 26.265909, 26.265909, 26.458334, 26.843182, 27.228031,
        27.709091, 28.190151, 28.671213, 29.152273, 29.537121, 29.92197, 30.114395, 30.306818,
        30.40303, 30.40303, 30.40303, 30.40303, 30.210608, 30.018183, 29.729546, 29.537121,
        29.537121, 29.44091, 29.344698, 29.344698, 29.248486, 29.248486, 28.863636 ],
       "F": [ 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0 ],
       "T": [ 0, 92, 100, 109, 117, 125, 133, 141,
        149, 158, 166, 175, 183, 191, 200, 208,
        216, 224, 233, 241, 250, 258, 267, 274,
        283, 291, 300, 308, 316, 325, 333, 341,
        350, 358, 366, 375, 383, 391, 400, 408,
        417, 425, 433, 441, 450, 458, 467, 475,
        483, 491, 500, 508, 600, 650, 667 ],
       "id": "0000000001006d00ff00"
      } ]
    }, {
     "label": "\n"
    }, {
     "label": "ABC",
     "candidates": [ "ABC", "Abc", "ABO", "ABG", "ABE" ],
     "bounding-box": {
      "x": 14.009091,
      "y": 29.691668,
      "width": 50.49091,
      "height": 16.239393
     },
     "range": "[1:0,4:32$]",
     "strokes": [ {
       "timestamp": "2018-08-07 13:55:26.806000",
       "X": [ 15.778789, 15.778789, 15.778789, 15.778789, 15.778789, 15.682576, 15.490151, 15.39394,
        15.201515, 15.009091, 15.009091, 15.009091, 15.105304, 15.39394, 15.586364, 15.971212,
        16.35606, 16.837122, 17.414394, 17.895454, 18.376516, 18.665152, 19.050001, 19.434849,
        19.723486, 20.108334, 20.493183, 20.781818, 21.166668, 21.551516, 22.032576, 22.417425,
        22.802273, 23.283333, 23.668182, 23.860607, 24.05303, 24.245455, 24.341667, 24.43788,
        24.534092, 24.630304 ],
       "Y": [ 33.770454, 34.347729, 34.924999, 35.694698, 36.560608, 37.618938, 38.581062, 39.446972,
        40.120457, 40.601517, 40.697727, 40.890152, 40.409092, 39.831818, 38.869698, 37.715153,
        36.849243, 35.887123, 34.924999, 34.251514, 33.57803, 33.193184, 32.904545, 32.808334,
        32.71212, 32.71212, 32.71212, 32.71212, 32.808334, 33.289394, 33.866669, 34.540154,
        35.309849, 36.079548, 37.041668, 37.907578, 38.869698, 39.543182, 40.216667, 40.505302,
        40.697727, 40.986366 ],
       "F": [ 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0 ],
       "T": [ 0, 67, 75, 83, 91, 99, 108, 116,
        124, 133, 141, 149, 191, 200, 208, 216,
        225, 233, 241, 249, 258, 266, 275, 283,
        291, 299, 308, 316, 325, 333, 341, 350,
        358, 366, 374, 383, 391, 400, 408, 416,
        425, 433 ],
       "id": "0000010001005300ff00"
      }, {
       "timestamp": "2018-08-07 13:55:27.372000",
       "X": [ 16.644697, 17.799242, 18.857576, 20.493183, 22.225, 23.860607, 25.496212 ],
       "Y": [ 36.945454, 36.753033, 36.753033, 36.753033, 36.560608, 36.079548, 35.309849 ],
       "F": [ 0, 0, 0, 0, 0, 0, 0 ],
       "T": [ 0, 58, 66, 75, 83, 92, 101 ],
       "id": "0000020001000d00ff00"
      }, {
       "timestamp": "2018-08-07 13:55:27.589000",
       "X": [ 32.519699, 32.519699, 32.519699, 32.519699, 32.519699, 32.327274, 32.13485, 32.038635,
        32.038635, 31.942425, 31.942425, 31.942425, 31.942425, 31.942425, 31.942425, 31.942425,
        31.942425, 31.942425, 31.942425, 31.942425, 31.942425, 32.038635, 32.423485, 32.808334,
        33.289394, 33.866669, 34.443939, 35.117424, 35.598484, 36.079548, 36.464394, 36.753033,
        37.041668, 37.137878, 37.137878, 37.137878, 37.137878, 37.041668, 36.464394, 35.790909,
        35.213638, 34.540154, 33.962879, 33.674244, 33.481819, 33.481819, 34.05909, 34.636364,
        35.309849, 36.079548, 36.656818, 37.426517, 38.003788, 38.484848, 38.869698, 39.254547,
        39.543182, 39.735607, 39.928032, 39.928032, 39.928032, 39.928032, 39.735607, 39.158333,
        38.292423, 37.234093, 36.175758, 35.117424, 34.05909, 33.000759, 32.038635, 31.076515,
        29.729546, 28.382576, 27.420456 ],
       "Y": [ 34.443939, 35.502274, 35.983334, 36.656818, 37.522728, 38.292423, 38.869698, 39.446972,
        39.831818, 39.831818, 39.928032, 39.639393, 38.869698, 37.907578, 37.041668, 36.175758,
        35.309849, 34.443939, 33.770454, 33.09697, 32.519699, 32.038635, 31.653788, 31.26894,
        30.980303, 30.884092, 30.691668, 30.691668, 30.691668, 30.691668, 30.691668, 30.980303,
        31.365152, 31.846212, 32.423485, 33.09697, 33.770454, 34.443939, 35.117424, 35.694698,
        36.271969, 36.753033, 37.041668, 37.330303, 37.522728, 37.618938, 37.618938, 37.618938,
        37.618938, 37.715153, 37.811363, 38.003788, 38.292423, 38.581062, 38.869698, 39.254547,
        39.543182, 39.831818, 40.216667, 40.409092, 40.601517, 40.697727, 40.890152, 40.986366,
        41.082577, 41.178787, 41.178787, 41.178787, 41.178787, 41.178787, 41.178787, 41.178787,
        41.178787, 41.178787, 41.082577 ],
       "F": [ 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0 ],
       "T": [ 0, 83, 91, 100, 108, 117, 125, 133,
        141, 150, 159, 183, 191, 200, 208, 216,
        225, 233, 242, 250, 258, 266, 275, 283,
        292, 300, 308, 316, 325, 333, 342, 350,
        358, 367, 375, 383, 391, 400, 408, 417,
        425, 433, 442, 450, 459, 475, 508, 516,
        525, 533, 542, 550, 558, 566, 575, 583,
        591, 600, 608, 616, 625, 633, 642, 650,
        661, 667, 675, 683, 692, 700, 709, 717,
        725, 733, 741 ],
       "id": "0000030001009500ff00"
      }, {
       "timestamp": "2018-08-07 13:55:28.522000",
       "X": [ 58.112122, 56.765152, 55.225758, 53.590153, 51.665909, 49.934093, 48.779545, 47.817425,
        47.047729, 46.566666, 46.27803, 45.989395, 45.893181, 45.893181, 45.893181, 45.893181,
        46.470455, 47.432575, 48.683334, 50.415154, 52.339394, 54.167427, 55.706818, 57.534851,
        58.881821, 60.22879, 61.19091, 61.960606, 62.53788, 62.922729, 63.115154, 63.307575,
        63.5 ],
       "Y": [ 36.079548, 36.079548, 36.175758, 36.560608, 37.041668, 37.522728, 37.811363, 38.

 The same file I try to load contents as a string and pass into the import function.

Is there any mistake?

Dear Sourav,


currently, you must ensure the following restrictions apply:

  1. Export the block to the JIIX format.
  2. Replace the label of the target word with another word from the candidates list.
  3. Import the modified JIIX data back to your block.

Importing JIIX data is only possible if the target block was not modified since it was exported.


See here: https://developer.myscript.com/docs/interactive-ink/1.2/android/fundamentals/import-and-export/#jiix-import


Best regards,


Olivier

Import takes a string as data parameter. Should I pass the entire JIIX file as string?

Dear Prem,


Thank you for your question.


Currently, it all depends if you are in Math or text mode.


In Math Mode, you can simply export your JIIX file, then later import it. This works fine, you will have your result and strokes kept.


In text mode, it is more complicated:

You can indeed export in JIIX, but import only works in the following conditions: You export the JIIX, update the label with of the candidates and import. Nothing should have happened in between (no new ink, no touch, editor shall be the same...).


Otherwise, you can proceed as follows:

-You export in JIIX: the latter contains the strokes but transformed in milimeters (based on the DPI you provide, we convert ink in milimeters) and the text result.

-You can then either import proceeding as follows: You get the x and y coordinates from the previously exported JIIX file (do not forget as these were converted in milimeters, you may need to convert these back in pixel), and add these in batch mode, proceeding as explined into the following code sample: https://github.com/MyScript/web-integration-samples/blob/master/batch-mode-explorer/src/views/Write.vue

-Or, you can simply import the text result as follows: https://developer.myscript.com/docs/interactive-ink/1.3/web/myscriptjs/import-and-export/. This will allow you to edit the result.


Let us know if this answers your questions.


Best regards,


Olivier

Dear Sourav,


If you just want to import a string, you can proceed as explained here: https://developer.myscript.com/docs/interactive-ink/1.2/android/fundamentals/import-and-export/#import-into-a-block

editor.import_(MimeType.TEXT,"Hello iink SDK",editor.getRootBlock());


Best regards,


Olivier

Hi, thanks Olivier.  

perhaps you are 'over engineering' my request.  my request is much simpler - I don't want to enable any of the math or text mode - I just want to create a simple drawing canvas on the web.  am I able to export the strokes to a database? (in order to re-load at a later date on perhaps either a different machine or a mobile app using myscript?).  or can I use the 'math' mode but hack it not to enable the 'math' mode?! if you see what I mean...?  

Hey,

I want to import the entire thing which I dumped in my JIIX file. It is the same data which I dumped using export. 

Dear Prem,


thank you for the update.


Currently, in order to store your strokes in database, you can refer to the editor.model.strokeGroups property: https://myscript.github.io/MyScriptJS/docs/typedef/index.html#static-typedef-Model


To import these later, you can use the editor.eastereggs.importStrokeGroups fucntion: https://myscript.github.io/MyScriptJS/docs/function/index.html#static-function-importStrokeGroups


Let us know if this helps.


Best regards,


Olivier

Thanks Olivier. We will try that. Cheers.
Answer

Dear Sourav,


currently, the question is rather what do you want to achieve? A copy/paste, or save a package and restore it later?


Indeed, if you want to copy paste, you should use the corresponding functions:

-Copy: https://developer.myscript.com/refguides/interactive-ink/android/1.2/com/myscript/iink/Editor.html#copy-com.myscript.iink.ContentBlock-

-Paste: https://developer.myscript.com/refguides/interactive-ink/android/1.2/com/myscript/iink/Editor.html#paste-float-float-


And to save and open later a Content package:

-save: https://developer.myscript.com/refguides/interactive-ink/android/1.2/com/myscript/iink/ContentPackage.html#saveAs-java.io.File-

-Open: https://developer.myscript.com/refguides/interactive-ink/android/1.2/com/myscript/iink/Engine.html#openPackage-java.io.File-


If this doesn't match your needs, please explain what you exactly want to achieve, so that we may think of another solution.


Best regards,


Olivier

I want to save the contents on my canvas to remote storage like AWS S3. Later, restore the same after downloading it from S3.

Dear Sourav,


in that case, you should rather save/store  content package.


Best regards,


Olivier