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,


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


Thank you Olivier, I will try to work this out.


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

Hi,

Sorry for the delay; however, I am concentrating on swabs and jabs at the moment as part of the COVID-19 response. Unfortunately this does not answer my question.

The use case is that I write text on the page. I then convert it. I then want to save that converted text to a database. I have looked at the documentation and the examples and can not work out how to do this. Please note that I am not an experienced programmer so I do need detailed instructions.


My code is:

HTML:

 

<nav style="flex-direction: row;">
							<div class="button-div">
								<button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
									<img src="images/undo.png">
								</button>
								<button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
									<img src="images/redo.png">
								</button>
							</div>
							<select id="language" class="col-lg-2 col-md-3"></select>
							
							<div class="spacer"></div>
						    <input type="text" class="input-field" id="importContentField" data-type="text/plain" placeholder="e.g. hello world">
						    <button class="classic-btn" id="importContent">Import</button>
						    
							<div class="spacer"></div>
							<button class="classic-btn" id="exportContent" disabled>Export</button>
						</nav>
						
						<div id="editor" touch-action="none"></div>

 JS:

 

$(document).on('click', '#handwritingBtn', function(){

		$("#handwriting").show();
		
		const editorElement = document.getElementById('editor');

		const languageElement = document.getElementById('language');
		const undoElement = document.getElementById('undo');
		const redoElement = document.getElementById('redo');
		
		const importContentField = document.getElementById('importContentField');
		const importContentElement = document.getElementById('importContent');
		
		const exportElement = document.getElementById('exportContent');

		editorElement.addEventListener('changed', (event) => {
			undoElement.disabled = !event.detail.canUndo;
			redoElement.disabled = !event.detail.canRedo;
			exportElement.disabled = !event.detail.canExport;
		});
		
		editorElement.addEventListener('loaded', async (evt) => { //invalid arrow arrow function parameters
		    /**
		     * Retrieve the list of available recognition languages
		     * @param {Object} The editor recognition parameters
		     */
			const currentLanguage = evt.target.editor.configuration.recognitionParams.iink.lang; //Semi-colon expected
			const res = await iink.getAvailableLanguageList(evt.target.editor.configuration);

			if (languageElement.options.length === 0) {
				Object.keys(res.result).forEach((key) => {
					const selected = currentLanguage === key;
					languageElement.options[languageElement.options.length] = new Option(res.result[key], key, selected, selected);
				});
			}
		});
		
		languageElement.addEventListener('change', (e) => {
			const configuration = editorElement.editor.configuration;
			//The path to the language depend of the version of API you are using.
			configuration.recognitionParams.iink.lang = e.target.value;
		});

		undoElement.addEventListener('click', () => {
			editorElement.editor.undo();
		});
		
		redoElement.addEventListener('click', () => {
			editorElement.editor.redo();
		});
		
		importContentElement.addEventListener('click', () => {
			const value = importContentField.value.replace('\\n', '\n');
			editorElement.editor.import_(value, importContentField.dataset.type);
		});
		
		exportElement.addEventListener('click', () => {
			exportElement.disabled = true;
			var convertedText = editorElement.editor.export_();
			alert("exportText: " + exportText);
		});

		  /**
		   * Attach an editor to the document
		   * @param {Element} The DOM element to attach the ink paper
		   * @param {Object} The recognition parameters
		   */
		iink.register(editorElement, {
			recognitionParams: {
				type: 'TEXT',
				protocol: 'WEBSOCKET',
				server: {
					scheme: 'https',
					host: 'webdemoapi.myscript.com',//cloud.myscript.com
					applicationKey: 'xxxxxxxxxxxx',
					hmacKey: 'xxxxxxxxxxxxxxxx'
				},
				iink: {
					export: {
						jiix: {
							strokes: true
						}
					}
				}
			}
		});

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

 Or do I need to pay for this level of support? If I do then how much does it cost please?

Kind regards,

Glyn



Answer

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

Hi,

I am also a novice programmer trying to save the converted text to a variable so I can save the converted text to the database. I have copied the code provided and can not work out how to access the converted text. I tried var exportText = editorElement.editor.export_(); alert("exportText: " + exportText); which displays "exportText: [object Promise]".

Also, the "Export" button becomes active after I start writing instead of after the convert. As I want to capture the converted text the export button should only become active when there is some converted text available to export.

Kind regards,

Glyn


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

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

Login or Signup to post a comment