Overview

Math Widget is an interactive input method, enabling users to smoothly handwrite mathematical operations and equations, which can then be typeset and solved. Based on MyScript Math SDK, it displays its features in a user-friendly interface.

Math Widget is designed to ensure a natural, handwriting-based HMI with real-time recognition and ink editing gestures. It also offers all the calculation features of a common scientific calculator, including exponential and trigonometric functions.

Use cases

The below use cases are only examples of applications where Math Widget has been used, sometimes with additional features. Note that all available features are listed in the API.

MyScript Calculator

MyScript Calculator is an handwriting calculator based on MyScript Math. In this scenario, the user handwrites mathematical operations and equations. Handwritten input is converted into a digital text formula. The widget can also solve simple arithmetic and trigonometric formulas, returning a calculated result. The content of the displays can be exported as an image or as a MathML or LaTeX string.

MyScript MathPad

MyScript MathPad is a handwriting LaTeX generator based on MyScript Math. It allows you to handwrite your equations and mathematical expressions and convert them for easy sharing.

Features

Real-time recognition of symbols and rules
Real-time recognition of mathematical rules and more than 200 mathematical symbols and characters.

Typeset rendering
Captured handwritten equations can be rendered to typeset equations in real-time. Rendering can be customized (font, color, background, etc.).

Editing gestures
Correction (strikethrough, scratch-out) can be applied on both original handwritten text and typeset text. They can also be deactivated if needed. Undo/redo features are supported.

LaTeX, MathML, image and text results
Results are available as LaTeX, MathML, image and text.

Solver activation
Entered equations can be solved and question marks are supported as unknown variables. Rounding and truncation options are available.

Save and restore
Save and restore your equation in MyScript Math format.

Supported symbols

See below a non-exhaustive list of supported symbols.

It is also possible to create a custom grammar resource, by constraining the recognition for particular use cases (integral calculus, vector calculus, finite element calculus, etc.). For more information, see the Developer tools page.

Type of item  Items
Letters (Latin alphabet) a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Digits 0 1 2 3 4 5 6 7 8 9
Mathematical symbols (including operators)  € $ £ ¥ ₩ ¢ ( ) < > [ ] { }  ! # % & ? @ / \ | ∥ © ∂∅ ∇ ∞ ℂ ℕ ℚ ℝ ℤ + - ± × ÷ * ∘ · = ‘ , .  : ; _ ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ∀ ∃ ∄ ∈ ∉ ∋ ∌ ∪ ∩ ⊂ ⊃ ⊄ ⊅ ∼ ≃ ≈ ≠ ≡ ≢ ≤ ≥ ≪ ≫ ∝ ∠ ∏ ∑ ∫ ∫∫ ∫∫∫ ∮ ∯ ∰ ∧ √l ⊕ ⊗ ⊖ ⊙ ¬Ψℑℜℓ↼⇀↽⇁⇋⇌∐∦≄≅≆≇≉≮≯≰≱⋉⋊⋮⌈⌉ ⌊⌋□ △ ⟦ ⟧ ⦞ 𝔻 ⫻
Greek symbols frequently used in mathematics Γ Δ Ω α β γ δ ε η θ λ ν π ρ σ τ φ χ ψ ω ϕ µ
Mathematical terms sin cos tan sinh cosh tanh arcsin arccos arctan cot coth min max arg argmin argmax inf sup lim liminf limsup ln log dx dy dz dt
International convention units (weight, length, frequency, luminosity, dosage, pressure, etc.) km hm dam dm cm mm µm ha hl dal dl cl ml µl kg hg dag dg cg mg µg ms µs GHz MHz kHz Hz

Supported rules

Each grammar sets out a number of production rules for equations, namely:

Type of rule Written example Recognition
Horizontal pair 2x
Fence (2x)+3
Square root 388
Fraction 2x+4 5y-2 _____
Subscript x i
Superscript
Subsuperscript i-1
Presuperscript 625 n
Overscript Σ n
Underscript Σ x=0
Underoverscript Σ j=1 n

Supported operations

The solver is activated only if the equation contains numbers and/or fractions and at least one of the following operators:

Input and output formats

It is possible to reload a result, using a symbol list or some binary data previously generated.

Math Widget also offers the possibility to export results in 5 different formats:

  • Math Widget symbol list
  • Binary data
  • Image
  • LaTeX

    \dfrac {-b\pm \sqrt {b^{2}-4ac}}{2a}

  • MathML
<math xmlns='http://www.w3.org/1998/Math/MathML'>
  <mfrac>
    <mrow>
      <mo> - </mo>
      <mi> b </mi>
      <mo> &#x00B1; <!-- plus-minus sign --> </mo>
      <msqrt>
        <msup>
          <mrow>
            <mi> b </mi>
          </mrow>
          <mrow>
            <mn> 2 </mn>
          </mrow>
        </msup>
        <mo> - </mo>
        <mn> 4 </mn>
        <mi> a </mi>
        <mi> c </mi>
      </msqrt>
    </mrow>
    <mrow>
      <mn> 2 </mn>
      <mi> a </mi>
    </mrow>
  </mfrac>
</math>

Display modes

No beautification

Characters stay handwritten until solving is activated manually, if needed. Text is then typeset and solved at the same time.

Typeset

Characters are automatically typeset after a short delay, using standard math fonts or custom fonts. If needed, solving has to be activated manually.

Typeset and solve

Characters are typeset after a short delay, using standard math fonts or custom fonts. The whole operation is solved, provided that its characters are supported by the solver (see above).

Integration

General information about ATK (licenses, samples, etc.) is available in the ATK Overview section.
Please make sure to use the latest version of Xcode and iOS SDK. Minimum deployment target is 8.0.

Step 1 - Download your Certificate

  1. Log in at https://atk.myscript.com.
  2. In the Applications tab, click Create application.
  3. Enter your application name and its description, then click Create.
  4. Click Open, then Create certificate.
  5. Enter the bundle identifier that can be found in your project’s properties (General tab) and select the target environment, then click Create.
  6. Click on the .c download icon to download the corresponding certificate.
  7. Paste it in your project and start creating your app.
You need one certificate per application and per platform. You can integrate several widgets in one application.

Step 2 - Build Settings

In the Build Settings tab of your target project:

  • Go to the Other Linker Flags section and add the following flags:
    • -ObjC
    • -lstdc++
  • Go to the Framework Search Paths section and add the path to the Frameworks directory of your package.

Step 3 - Configure your Dependencies

In the Build Phases tab of your target project:

  • Go to the Link Binary With Libraries section and add the following frameworks:

    • SystemConfiguration.framework
    • ATKMathWidget.framework
    • ATKMath.framework
    • ATKCore.framework

They can be found in the Frameworks directory of your package.

It is essential that ATKCore.framework is the last framework to be linked. To do so, make sure it is displayed at the end of the list.

Step 4 - Add Resources

In the Build Phases tab of your target project:

  • Go to the Copy Bundle Resources section and add the following:

    • ATKMathWidget.bundle from the Frameworks directory (images and fonts),
    • resources.bundle from the Samples/MathWidgetSample/MathWidgetSample/Resources directory (recognition configuration and resources),
Resources are available for download on the Developer Portal. You can also customize your own resources: Check the Developer Tools page to discover how.

Step 5 - Start with Minimal Integration Code

An Internet connection is required to launch and run ATK applications. However, a 30-day grace period is offered, from the moment you first launch your application. A connection will then be mandatory.

Edit the ViewController class:

#import <ATKMathWidget/MAWMathWidget.h>

@interface ViewController : UIViewController <MAWMathViewDelegate>

@property (strong, nonatomic) IBOutlet MAWMathView *mathView;
@property (assign, nonatomic) BOOL certificateRegistered;

@end
#import "ViewController.h"

#import "MyCertificate.h"

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad];

  // Register MyScript certificate before anything else
  NSData  *certificate = [NSData dataWithBytes:myCertificate.bytes length:myCertificate.length];
  _certificateRegistered = [_mathView registerCertificate:certificate];

  if(_certificateRegistered)
  {
    // Register as delegate to be notified of configuration, recognition, ...
    _mathView.delegate = self;

    NSBundle *mainBundle = [NSBundle mainBundle];
    NSString *bundlePath = [mainBundle pathForResource:@"resources" ofType:@"bundle"];
    bundlePath = [bundlePath stringByAppendingPathComponent:@"conf"];
    [_mathView addSearchDir:bundlePath];

    // The configuration is an asynchronous operation. Callbacks are provided to
    // monitor the beginning and end of the configuration process.
    //
    // "math" references the math bundle name in conf/math.conf file in your resources.
    // "standard" references the configuration name in math.conf
    [_mathView configureWithBundle:@"math" andConfig:@"standard"];
  }
}

- (void)viewDidAppear:(BOOL)animated
{
  [super viewDidAppear:animated];

  if(!_certificateRegistered)
  {
    UIAlertController *alertController = [UIAlertController
                                          alertControllerWithTitle:@"Invalid certificate"
                                          message:@"Please use a valid certificate."
                                          preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *okAction = [UIAlertAction
                               actionWithTitle:@"Ok"
                               style:UIAlertActionStyleDefault
                               handler:nil];
    [alertController addAction:okAction];
    [self presentViewController:alertController animated:YES completion:nil];
  }
}

- (void)mathViewDidEndConfiguration:(MAWMathView *)mathView
{
  NSLog(@"Math Widget configured!");
}

- (void)mathView:(MAWMathView *)mathView didFailConfigurationWithError:(NSError *)error
{
  NSLog(@"Unable to configure the Math Widget: %@", [error localizedDescription]);
}

- (void)mathViewDidEndRecognition:(MAWMathView *)mathView
{
  NSLog(@"Math Widget recognition: %@", [mathView resultAsText]);
}

@end

You can then use the MAWMathView as any UIView and add it in your ViewController using the Interface Builder (Storyboard).

API

See the API documentation for iOS.