Interactive Ink

Event Listeners on vue

I am creating a vue application with 2 components, a text area, and the myscript API. What I want to do is get the text result presented in the API, and update the view of the textarea component. However, I am having trouble accessing event listeners through vue, since I would need to access the specific tags associated with the API. Any suggestions on how to simply be able to console.log text output generated by the OCR API in Vue?

Dear Nafy,


Can you please send the code you use ?

That way i can investigate further and try myself with your own code.


Regards,


Maël

In the vue app, when initializing the API, the code example provided refers to the library 'MyScriptJS' and is able to call child functions such as register, in order to register the custom key for the API. I was wondering if there were any other child functions that would allow me to access other functions from the object 'MyScriptJS', such as retrieving text output results, or pointer events, etc. I have attached the part of the code I am referring to down below: mounted() { // Fired every second, should always be true // eslint-disable-next-line console.log("Mounted " + this.$refs['editor']); MyScriptJS.register(this.$refs.editor, { recognitionParams: { type: 'TEXT', protocol: 'WEBSOCKET', apiVersion: 'V4', server: { scheme: 'https', host: 'webdemoapi.myscript.com', applicationKey: 'XXX-XXX-XXX-XXX', hmacKey: 'XXX-XXX-XXX-XXX', }, }, }); }

mounted() { console.log("Mounted " + this.$refs['editor']); MyScriptJS.register(this.$refs.editor, { recognitionParams: { type: 'TEXT', protocol: 'WEBSOCKET', apiVersion: 'V4', server: { scheme: 'https', host: 'webdemoapi.myscript.com', applicationKey: 'XXX-XXX-XXX-XXX', hmacKey: 'XXX-XXX-XXX-XXX', }, }, });

Dear Nafy,


You can indeed access MyScriptJS events through Vue.

I've done the following code :


<div id="editor" @exported="exported($event)"></div>


methods: {
      exported: function (event) {
        var exports = event.detail.exports;

        if (exports && exports['text/plain']) {
          // You can access the recognition result text in "exports['text/plain']"
        }
      }
    }


You maybe have to adapt this sample to your own code but the idea is here : the "@exported" refers to the MyScriptJS eventListener and the "exported($event)" is the Vuejs side method.


I Hope this will help you.


Regards,


Maël

Login or Signup to post a comment