Text

Answered

How to export into a text file

Hello. I am new to MyScript and also a little new to REACT JS.
I have been using iink.js and wanted to somehow export/save what ever I had written inside the editor, to a text file. 

I have been following the guides and have configurated my editor, I think, to serve the purpose mentioned above. However, my main issue is, I do not know how to build a function that will let me export everything into a text file. Can anyone please guide me as to how can I make a function that can be used to export the handwritten part into a text?

Below is my configuration. 

 

 useEffect(() => {

          const fetchItems = async function() {

              var contents = location.state

          }

          fetchItems()


 

          let editor = editorRef.current;

 

          editor.addEventListener('exported', (evt=> {

            const exports = evt.detail.exports

            if (evt.detail) {

            console.log(JSON.stringify(evt.detail))

            } else {

              console.log("empty")

            }

          });

 

              editor = iink.register(editorRef.current, {

                triggers: {

                  exportContent: 'DEMAND'

                },

                recognitionParams: {

                    type: 'TEXT',

                    protocol: 'WEBSOCKET',

                    apiVersion: 'V4',

                    server: {

                    scheme: 'https',

                    host: 'webdemoapi.myscript.com',

                    applicationKey: '1463c06b-251c-47b8-ad0b-ba05b9a3bd01',

                    hmacKey: '60ca101a-5e6d-4159-abc5-2efcbecce059',

                    websocket: {

                      pingEnabled: false,

                      autoReconnect: true

                    }

                    },

                    iink: {

                      export: {

                        jiix: {

                          strokes: true

                        },

                        text: {

                          chars : true

                        }

                      }

                    }

                },

            });

            window.addEventListener('resize', () => { 

            editor.resize() 

            });


            return () => {

            window.removeEventListener('resize', () => { editor.resize() });

            this.editor.close();

            } 

            }, [])


Best Answer

Dear Glyn,

thank you for the update.

Currently, I just adapted the "file_export.html" sample we provide, to export as text. Please find the sample (websocket_text_iink_exportToText.html) at the following link: https://myscript.filecamp.com/s/Ri6QJz9LVSstyJxo/fo

Basically, all you need to do is:
-Select the "text" export file type
-Write on the canvas
-Click the "Export to file" button.

If looking at the code:
-if set to "text", the "exported" event will export as "text/plain" mimetype
-You can then save the "text" result as you prefer, in a text file (as done in this sample), or store it into a database

Our sales administration team also forwarded me your requests. To answer these:
1) Be able to save the converted hand writing to a variable so I can save it to a database. (Must)
>>The above sample should normally answer this question

2) Be able to display the handwriting recognition area within a container (i.e., I do not want the handwriting recognition area taking up the whole page, just a page full width area at the bottom of the page of about 8 rows). (Must)
>>This is an html concern, not a MyScript concern

3) Default to English (United Kingdom). (Should)
>>I just answered your other topic on this forum.

Also, as already pointed, we also have a github.io repository with several code samples that show how to start using our iinkJS: https://myscript.github.io/iinkJS/examples/

If you have any question, we recommend you refer to these samples, that are likely to answer many of the technical questions you may have.

Please note that I am not an experienced programmer so I do need detailed instructions.
>>The purpose of this forum if to help developers integrate our technology ; if facing any coding issue, we recommend you refer to tutorials in the corresponding coding language or refer to stackoverflow or any other resource available.

Best regards,

Olivier


Dear Azhan,


Thank you for contacting us.


Currently, you can refer to the "On_demand exports" sample we provide:

-You can play with it: https://myscript.github.io/iinkJS/examples/non-version-specific/on_demand_exports.html

-And get the source code: https://github.com/MyScript/iinkJS/blob/master/examples/non-version-specific/on_demand_exports.html


In particular, the export is done when calling "editorElement.editor.export_();":

exportElement.addEventListener('click',()=>{
exportElement.disabled=true;
editorElement.editor.export_();

});


You shall then integrate such way to proceed in your REACT project.


Best regards,


Olivier

Olivier @MyScript


Thank you for your answer. I would look into it.

I had another issue I wanted to ask. My main purpose is for users to write into the editor through a pen/mouse/pointer and have an image taken of it which would be sent into a database.

How can I make the editor's configuration as such that it would send the image of the hand written text?

Dear Azhan,


thank you for the update.


Currently, in order to save an image of the iink, you can export as an image (in PNG or JPEG), and save the image:

https://developer.myscript.com/docs/interactive-ink/1.4/web/iinkjs/import-and-export/#exporting-content

https://developer.myscript.com/docs/interactive-ink/1.4/overview/import-and-export-formats/#available-exports


Best regards,


Olivier

Dear Glyn,


in order to export, the easier is that you refer to the On-demand exports sample:

-https://myscript.github.io/iinkJS/examples/non-version-specific/on_demand_exports.html

-And the source: https://github.com/MyScript/iinkJS/blob/master/examples/non-version-specific/on_demand_exports.html


In  the current case, the export is in JIIX ; if you want to export as  Text, you shall set the text/plain mimetype when calling the export_  function: https://myscript.github.io/iinkJS/docs/Editor.html#export_


Let us know if this answers your questions.


Best regards,


Olivier

Answer

Dear Glyn,

thank you for the update.

Currently, I just adapted the "file_export.html" sample we provide, to export as text. Please find the sample (websocket_text_iink_exportToText.html) at the following link: https://myscript.filecamp.com/s/Ri6QJz9LVSstyJxo/fo

Basically, all you need to do is:
-Select the "text" export file type
-Write on the canvas
-Click the "Export to file" button.

If looking at the code:
-if set to "text", the "exported" event will export as "text/plain" mimetype
-You can then save the "text" result as you prefer, in a text file (as done in this sample), or store it into a database

Our sales administration team also forwarded me your requests. To answer these:
1) Be able to save the converted hand writing to a variable so I can save it to a database. (Must)
>>The above sample should normally answer this question

2) Be able to display the handwriting recognition area within a container (i.e., I do not want the handwriting recognition area taking up the whole page, just a page full width area at the bottom of the page of about 8 rows). (Must)
>>This is an html concern, not a MyScript concern

3) Default to English (United Kingdom). (Should)
>>I just answered your other topic on this forum.

Also, as already pointed, we also have a github.io repository with several code samples that show how to start using our iinkJS: https://myscript.github.io/iinkJS/examples/

If you have any question, we recommend you refer to these samples, that are likely to answer many of the technical questions you may have.

Please note that I am not an experienced programmer so I do need detailed instructions.
>>The purpose of this forum if to help developers integrate our technology ; if facing any coding issue, we recommend you refer to tutorials in the corresponding coding language or refer to stackoverflow or any other resource available.

Best regards,

Olivier