Forums

Start a new topic

Diagram

Answered

Integrate diagram recognition into web app?

Hi all,

I would like to build a browser-based app (based on HTML, CSS, Javascript) to draw pictures (basic shapes connected together) and recognize them to do some backend processing. What is the best way to use myscript technology for this? I noticed the iinkJS library, but it doesn't seem to include diagram recognition capabilities? (The diagrams will also contain some text and math content.)

Regards,
Sukhi

Best Answer

Dear Sukhi,


thank you for the update.


Currently, the host, applicationKey and hmacKey shall not be set in the index.html file but in the sample you want to run.


For example, if you want to use the REST diagram recognition, you shall edit the "v4/rest_diagram_iink.html" file, update the host to "cloud.myscript.com", and the application and hmac keys with your own ones:

  iink.register(editorElement, {
recognitionParams: {
type: 'TEXT',
protocol: 'WEBSOCKET',
server: {
scheme: 'https',
host: 'cloud.myscript.com',
applicationKey: 'YOUR_API_KEY',
hmacKey: 'YOUR_HMAC_KEY'
},
iink: {
export: {
jiix: {
strokes: true
}
}
}
}
  });


Let us know if this helps.


Best regards,


Olivier

5 CommentsSorted by Oldest First

Dear Sukhi,


thank you for contacting us.


Based on the decription of your use-case, our Diagram recognizer is likely to answer your use-case.


Currently, the iinkJS can be used to recognize diagrams. You can refer to the following sample with its source:

-https://myscript.github.io/iinkJS/examples/v4/rest_diagram_iink.html

-https://github.com/MyScript/iinkJS/blob/master/examples/v4/rest_diagram_iink.html


The limitation is that the Diagram recognition is only available via the REST recognition. WebSocket is not available with the latter.


Let us know if this helps.


Best regards,


Olivier

Dear Olivier,

Thanks for the quick response! I seem to have missed this iinkJS functionality. Indeed, it might be what I'm looking for as I was interested only in rest recognition. Could you briefly outline how should I get started on using iinkJS? (i.e registrations, payments, licensing, what I need to install, etc.) It is for individual use; the target application will be used for research in an academic environment.

Regards,
Sukhi

Dear Sukhi,


thank you for the update.


In order to start using our cloud solution, I recommend you refer to the overview page: https://developer.myscript.com/docs/interactive-ink/1.5/web/overview/introduction/


In particular, you shall register on our devportal: https://developer.myscript.com/support/account/registering-myscript-cloud/


You can also follow our getting started: https://developer.myscript.com/getting-started/web


In order to use the iinkJS, you shall follow the instructions on the corresponding page: https://developer.myscript.com/docs/interactive-ink/1.5/web/iinkjs/get-started/


Regarding the pricing, by default each user is granted 2000 free requests monthly ; if doing more requests, each bunch of 1000 requests is charged 10 dollars: https://developer.myscript.com/pricing


Let us know if you have further question.


Best regards,


Olivier

Dear Olivier, 

Thanks for all the info! I have managed to install iink-js via npm. However, could you please let me know where I should update the hmackey and applicationKey in index.html (I have received my keys); and where should I specify the myscript server? Sorry, I'm new to web programming! Thanks in advance if you can help.

Regards,
Sukhi 

Answer

Dear Sukhi,


thank you for the update.


Currently, the host, applicationKey and hmacKey shall not be set in the index.html file but in the sample you want to run.


For example, if you want to use the REST diagram recognition, you shall edit the "v4/rest_diagram_iink.html" file, update the host to "cloud.myscript.com", and the application and hmac keys with your own ones:

  iink.register(editorElement, {
recognitionParams: {
type: 'TEXT',
protocol: 'WEBSOCKET',
server: {
scheme: 'https',
host: 'cloud.myscript.com',
applicationKey: 'YOUR_API_KEY',
hmacKey: 'YOUR_HMAC_KEY'
},
iink: {
export: {
jiix: {
strokes: true
}
}
}
}
  });


Let us know if this helps.


Best regards,


Olivier