Interactive Ink

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


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

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

Hi Olivier,

I am discovering MyScript and might want to integrate it to a web app. I've explored the docs and it seems like we can't save/store and then restore a package when we integrate MyScript to a web app? The documentation for storage seems to be only available for native platforms. Is that the case?

If so, what would be the best or closest way to accomplish something like that in a web environment? I would like someone to write into a canva where MyScript applies handwriting recognition. The canva can then be saved and restored by someone else who could modify it or at least write over it.

Thank you,

Alexandre

Dear Alexandre,


thank you for contacting us and the interest you show to our products.


Indeed, in a text part, it is not possible to import jiix in an empty part ; in that case JIIX import can only be done for the following use-case:

-You export the JIIX

-You update the "label" of the JIIX with one of the candidates (any other word will fail)

-You import the JIIX (meanwhile, there should not have had any update in the part -no new ink, delete...-)


There is nevertheless the specific case of math part, that allows to import JIIX in an empty part.


You can find more information in the documentation: https://developer.myscript.com/docs/interactive-ink/1.3/web/myscriptjs/import-and-export/#importing-content


The only way you may proceed is that you store the ink by yourself, then add it to the editor (https://developer.myscript.com/docs/interactive-ink/1.3/web/myscriptjs/editing/#series-of-events). But this doesn't seem to correspond to your use-case (I guess you wan to keep the context).


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


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

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...?  

Login or Signup to post a comment