Mobile Apps packages

MathType components are available for integration into mobile apps in Android and iOS.

For application based on WebView the integration is straightforward. If your application is not based on WebView, you can instantiate one only for the purpose of embedding MathType.

We will provide you with an example App for better understanding.

Download Android package

Download Android trial

Download Android Download Android Trial

Integration

This document explains how to integrate MathType in an Android application that uses WebView. If your application is not based on WebView, you can instantiate one only for the purpose of embedding MathType. The app shown can be downloaded in the link above as MathType SDK - SDK for Android (demo).

This explanation is based on Android Studio but can be adapted easily to any other IDE because MathType is delivered as an Android Library Project (AAR file).

Android demo app

Main view of the demo app provided.

Components

MathType SDK consists of several components that provide MathType features and services. The components supplied in MathType SDK - SDK for Android are

  • MathType SDK for Android / core. Core component of MathType providing keyboard input mode and services.
  • MathType SDK for Android / hand. Components that provide recognition of handwritten math and chemistry expressions.
  • MathTypecommon library - SDK for Android. Shared library used among different MathType products.

Add the libraries to your project

You will have to import subprojects for the different components

  • MathType SDK for Android / core – name the subproject wiriseditor
  • MathType SDK for Android / hand – name the subproject wirishand.

Along with this, import the library "WIRIScommon.jar", required for proper interoperability between other WIRIS products' libraries.

Find instructions below on how to set up a subproject step by step. We show it for wiriseditor; follow the same steps for wirishand.

In Android Studio, open your project and go to File → New → New Module…

Select Import .JAR/.AAR Package, choose the MathType Android library AAR file and write "wiriseditor" in the Subproject name field.

Now go to File → Project Structure… and link wiriseditor as a module dependence of your project.

Project structure window. Android Studio project structure tree

Insert MathType in a WebView component

MathType provides a user interface based on JavaScript, and a WebView component is required in order to use it.

Save the following code as an html file, and load it in a WebView component:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="file:///android_asset/www/wiriseditor/viewer_offline.js">
        <script type="text/javascript" src="file:///android_asset/www/wiriseditor/editor_offline.js"></script>
    </head>
    <body>
        <div id="editorContainer" style="width: 100%; height: 100%;"></div>
        <script>
            var viewer = new com.wiris.jsEditor.JsViewerMain('file:///android_asset/www/wiriseditor');           
            var editor = com.wiris.js.JsEditor.newInstance({SDKPath: 'file:///android_asset/www/wiriseditor'});
            editor.insertInto(document.getElementById('editorContainer'));
        </script>
    </body>
</html>

In the above code, MathType is added into the container in the body.

Set-up offline handwriting

MathType handwriting services are initially set up to work online, sending recognition requests to an external server. However, the components provided include an offline recognition system to avoid the dependency on an internet connection and improve performace.

To register the offline public services, you must write the following code in Java, just before loading a URL:

AndroidHandPublicServices.init(myWebViewComponent, myContext)

Where myWebViewComponent is the instance of your WebView component and myContext is an instance of android.content.Context. It's fine to pass an instance of Activity, since Activity inherits from Context.

Example:

    WebView myWebViewComponent = (WebView) findViewById(R.id.activity_main_webview);
    AndroidHandPublicServices.init(myWebViewComponent, this);
    myWebViewComponent.loadUrl("file:///android_asset/editor.html");

Retrieve MathML result

Depending on the Android version, the process to obtain the MathML result is different.

SDK ≥ 19

Android 4.4 (KitKat, API 19) and greater use the WebView method evaluateJavascript to make a call from Java to Javascript and obtain the result.

Example:

    myWebViewComponent.evaluateJavascript("editor.getMathML()", new ValueCallback
    <String>() {
        @Override
        public void onReceiveValue(String value) {
            // value contains the call result.
            // The only problem is that the result comes with special XML characters encoded, such as <, " and &. They need to be decoded to use correctly the result.
        }
    });

SDK < 19

For older Android devices:

1) Create a class that implements the @JavascriptInterface annotation:

      public class ExampleClassJavascriptInterface {
        @JavascriptInterface
          public void getMathml(String value) {
          // value contains the call result
          }
      }

2) Add an instance of this new class as a JavaScript interface to the WebView and call it from JavaScript, passing the resulting MathML from MathType as a parameter.

Example:

      myWebViewComponent.addJavascriptInterface(new ExampleJavascriptInterface(), "ExampleJavascriptInterface");
      webViewComponent.loadUrl("javascript:ExampleJavascriptInterface.getMathml(editor.getMathML())");

Download iOS package

Download iOS trial

Download iOS Download iOS Trial

Integration

This document explains how to integrate MathType in an iOS application that uses WebView. If your application is not based on WebView, you can instantiate one only for the purpose of embedding MathType. The app shown can be downloaded in the above link as MathType SDK - SDK for iOS (demo).

Components

MathType SDK comprises several components that provide MathType features and services. The components supplied in MathType SDK for iOS are

  • MathType SDK for iOS / core. Core component of MathType providing keyboard input mode and services.
  • MathType SDK for iOS / hand. Components that provide recognition of handwritten math and chemistry expressions.

Add the frameworks to your Xcode project

First you should choose the frameworks according to your preferred architecture.

Inside the provided package there are two different directories: Release-iphoneos and Release-universal. Each directory contains a framework for a specific architecture.

  • Release-iphoneos contains a framework compiled for armv7 and arm64. With this framework, apps for iPhone and iPad devices can be compiled. This framework should be used for releases to the AppStore.
  • Release-universal contains a framework compiled for armv7, arm64, i386 and x86_64. With this framework, apps for Xcode simulators and iPhone and iPad devices can be compiled. This framework should be used for development, to be able to try the app in devices and simulators before releasing it.

After choosing the appropriate architecture, drag their corresponding wiriseditor.framework and wirishand.framework from Finder and drop them in Xcode’s Project Navigator. When prompted for the addition, leave the options as default: Copy items if needed, Create folder references, and Add to the current target.

Xcode project windows of MathType - SDK iOS app (demo)

Window shown after drag and drop of MathType hand framework

After including both frameworks you’ll need to configure your project to make MathType work properly. Go to your project’s target configuration and follow the next steps:

  • General tab: add both wiriseditor.framework and wirishand.framework to Embedded Binaries. Make sure they also show up in Linked Frameworks and Libraries.
  • Build Settings tab: set Always Embed Swift Standard Libraries to Yes.
  • Build Phases tab: add both wiriseditor.framework and wirishand.framework to Copy Bundle Resources.

Also, inside the Build Phases tab add wiriseditor.framework to Copy Bundle Resources.

Depending on how your project is configured and structured, the Always Embed Swift Standard Libraries might not have any apparent effect and you’ll end up getting crashes with error messages similar to “dyld: Library not loaded: @rpath/libswiftCore.dylib”. An easy workaround for this issue is adding a dummy Swift file to your project with the following content:
  • import Foundation
  • import UIKit

This will force Xcode to include the required libraries into your project. You can also find this file in the MathType - SDK iOS app (demo) project.

Insert MathType in a WebView component

MathType provides a user interface based on JavaScript, and a WebView component is required in order to use it.

You need to create an HTML file with the following code inside, and load it in a WebView component:

Make the following modifications in the HTML file of Step 2:

  <!DOCTYPE html>
    <html>
       <head>
           <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
           <script type="text/javascript" src="wiriseditor.framework/Assets/viewer_offline.js"></script> <!-- Needed for rendering results in hand -->
           <script type="text/javascript" src="wiriseditor.framework/Assets/editor_offline.js"></script>
       </head>
       <body>
           <div id="editorContainer" style="width: 100%; height: 100%;"></div>
       <script>
               var viewer = new com.wiris.jsEditor.JsViewerMain('wiriseditor.framework/Assets/');
               var editor = com.wiris.js.JsEditor.newInstance({SDKPath: 'wiriseditor.framework/Assets/'});
               editor.insertInto(document.getElementById('editorContainer'));
           </script>
       </body>
    </html>

In the above code, MathType is added into the container in the body.

Set-up offline handwriting

MathType handwriting services are initially set up to work online, sending recognition requests to an external server. However, the components provided include an offline recognition system to avoid the dependency on an internet connection and to improve performance.

To register the offline public services, you need to import MathType hand (@import wirishand) and write the following code in Objective-C, just before loading a URL:

[IOSHandPublicServices initWebView: myWebViewComponent withUIViewController: myUIViewController];

Where myWebViewComponent is the instance of your WebView component and myUIViewController is an instance of the UIViewController, that contains the myWebViewComponent instance.

Example:

[IOSHandPublicServices initWebView:myWebViewComponent withUIViewController: myUIViewController];
[myWebViewComponent loadRequest:myHtmlFileRequestObject];

Retrieve MathML content

Getting the MathML result is easy:

NSString *myMathml = [myWebViewComponent stringByEvaluatingJavaScriptFromString:@"editor.getMathML()"]