MyScript Math Sample

Have you ever noticed what a large spectrum of reliable HMIs exist nowadays? You can type, swipe, speak, write, touch, etc. Sure, your good old keyboard is nice to use but is it because it is the most efficient way to get things done or because it is part of a routine?

Here at MyScript, we think that each interface is helpful but may have its limits and its own range of use cases where it is the most powerful. For example, would it cross your mind to use speech recognition to obtain a diagram? Probably not the best way to get good results, is it?

Let’s focus on mathematics. Think about equations. What seems like the easiest way to get a digital version? You might already be using Microsoft Word to enter all the symbols and characters. But it takes time and it’s definitely slower than just writing on paper.

That’s where we offer added value, with a JavaScript plugin for Word: MyScript Math Sample. You can write your equation directly into the plugin canvas as you would on paper. Your handwriting is recognized in real time and easily editable if needed.

On the user side, it consists in a Web Add-in in Microsoft Word, with a canvas where you can write with your finger, your stylus or your mouse, a result zone, standard buttons (undo, redo, clear) and an export option towards your Word document.

On the developer side, it is really easy to integrate our web component. Just follow the next steps!



Requirements

The following must be installed:



Get started

  1. Open Visual Studio, click File > New > Project
  2. Select Word Add-in in Installed > Templates > Visual C# > Office/SharePoint > Web Add-ins

    3. 1-web-add-in

  3. Create a Web Add-in for Word
  4. In a command line terminal, go to the WordWebAddIn1Web folder (default name) and type the following lines to download the MyScript Math web component into your project:
    5. bower init
bower install --save myscript-math-web

    The bower init command will trigger a few questions in the terminal. If you are not familiar with bower, you can just enter the Return key.

  5. In your Visual Studio project, edit the file Home.html.

    6. 3-edit-home

  6. In <head>, add the polyfills to make sure all browsers are supported, then add the web component: 
    <script src="./bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="./bower_components/myscript-math-web/myscript-math-web.html">
  7. In <head>, remove the following line as no external css file is needed: 
    <script src="Home.js" type="text/javascript"></script>;
  8. In <head>, add the following style to optimize the height of MyScript Math web component in the add-in: 
    <style>
	#contentpan {
		height: calc(100vh - 50px);
	}
	myscript-math-web {
		height: 100%;
	}
</style>
  9. In <body>, replace the existing content with the MyScript Math Web component integration. All properties are already set for a quick integration but you can also add your own values: 
    <div id="contentpan">
	<myscript-math-web id="mathInput"
		hidebuttons
		host="cloud.myscript.com"
		applicationkey="ec5e1610-8449-4a42-8149-1591b59f7ebb"
		hmackey="9b32e6d3-aca5-4290-a8b6-f6a4dcb952c7"
		resulttypes='["LATEX","OFFICEOPENXMLMATH"]'>
	</myscript-math-web>
</div>

    10. The application and HMAC keys displayed here are only part of the demo, you will later need to generate your own keys. To generate your own keys, see the Registration section.

  10. In Visual Studio, save the file and click Start to launch Word: The Add-in task pane should now be accessible.

    11. 7-start

  11. You now need to add an Insert button in your plugin so that recognition results can be inserted in your Word document.
    To do so, add the <button class="ms-Button ms-Button--primary" id="insert-button">Insert</button> button just after <div>.
  12. Add the following script section just before </body> to add the interaction between the Insert button, the MyScript Math web component and the Word API. This will allow handwriting recognition results to be added to the target document:
    <script>
	 //Office API have to be initialized to be able to insert content into the document
	 Office.initialize = function() {
		 //Adding click behavior on button
		 $('#insert-button').on("click", function() {
				 var mathInput = document.querySelector('myscript-math-web');
				 var ooXmlRes = mathInput.result.OFFICEOPENXMLMATH;
				 if (ooXmlRes) {
					 // Template is split in a begin and end part to ease the construction of a good officeXml fragment
					 var officeOpenXmlTemplateStart =
						 '<?xml version="1.0" encoding="UTF-8"?> <pkg:package xmlns:pkg="http://schemas.microsoft.com/office/2006/xmlPackage"> <pkg:part pkg:name="/_rels/.rels" pkg:contentType="application/vnd.openxmlformats-package.relationships+xml" pkg:padding="512"> <pkg:xmlData> <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"> <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/> </Relationships> </pkg:xmlData> </pkg:part> <pkg:part pkg:name="/word/document.xml" pkg:contentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"> <pkg:xmlData> <w:document xmlns:wpc="http://schemas.microsoft.com/office/word/2010/wordprocessingCanvas" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:wp14="http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:w10="urn:schemas-microsoft-com:office:word" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:w14="http://schemas.microsoft.com/office/word/2010/wordml" xmlns:w15="http://schemas.microsoft.com/office/word/2012/wordml" xmlns:wpg="http://schemas.microsoft.com/office/word/2010/wordprocessingGroup" xmlns:wpi="http://schemas.microsoft.com/office/word/2010/wordprocessingInk" xmlns:wne="http://schemas.microsoft.com/office/word/2006/wordml" xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape"> <w:body> <w:p>';
					 var officeOpenXmlTemplateEnd = '</w:p> </w:body> </w:document> </pkg:xmlData> </pkg:part> </pkg:package>';
					 // We remove the xml declaration unnecessary here
					 ooXmlRes = ooXmlRes.replace('<?xml version="1.0" encoding="UTF-8"?>', '');
					 //Building the final math document fragment
					 var officeOpenXmlFragment = officeOpenXmlTemplateStart +
						 ooXmlRes +
						 officeOpenXmlTemplateEnd;
					 // http://dev.office.com/reference/add-ins/shared/document.setselecteddataasync
					 Office.context.document.setSelectedDataAsync(officeOpenXmlFragment, {
						 coercionType: Office.CoercionType.Ooxml
					 });
			 } else {
				 console.log("No office open xml result");
			 }
		 })
	 };
 </script>
  13. In Visual Studio, click Start again (see step 8). Your results can now be inserted in your Word document.

To obtain examples, source files and the complete integration code, go to GitHub. You will see how easy it is to customize the look and feel, interface and buttons' behavior. No doubt it will be just as easy in your application as in this Get Started guide!

We use cookies to ensure that we give you the best experience on our website • Read the privacy policy