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
- Open Visual Studio, click File > New > Project
- Select Word Add-in in Installed > Templates > Visual C# > Office/SharePoint > Web Add-ins
![]()
- Create a Web Add-in for Word
- 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:The
bower init
command will trigger a few questions in the terminal. If you are not familiar withbower
, you can just enter the Return key.- In your Visual Studio project, edit the file
Home.html
.
![]()
- In
<head>
, add the polyfills to make sure all browsers are supported, then add the web component:- In
<head>
, remove the following line as no external css file is needed:- In
<head>
, add the following style to optimize the height of MyScript Math web component in the add-in:- 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: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.
- In Visual Studio, save the file and click Start to launch Word: The Add-in task pane should now be accessible.
![]()
- 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>
.- 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:
- 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!