Overview

Single Line Widget is an interactive input method enabling users to handwrite a single line of text. It is a widget designed to ensure a natural, handwriting-based HMI with real-time recognition and ink editing gestures, thanks to a user-friendly interface.

Single Line Widget manages a line of text, modeling it as an infinite horizontal ribbon, also known as the writing area. As the user writes in a continuous flow, the ribbon automatically scrolls after a short delay and turns handwritten ink into typeset characters.

The scroll bar and the cursor allow the user to go back and forth the line to change text - in case it has not been properly recognized - either with editing gestures or by choosing an alternative (or candidate) suggested by the widget.

Use cases

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

SMS

Here is an integration example of Single Line Widget in MyScript Stylus for iOS. In this scenario, the user handwrites a text message on a smartphone. Candidates and editing gestures can be used to modify text.

Form-filling

Here is an integration example of Single Line Widget in a form-filling application for iOS. In this scenario, the user fills out a form using handwriting. Candidates and editing gestures can be used to modify text.

Features

Text input with horizontal auto-scrolling
Canvas where handwritten text automatically scrolls to free writing space.

Real-time cursive text
Real-time recognition of handwritten text (printscript and cursive).

Typeset rendering
Captured handwritten text can be turned into typeset text in real-time.

Editing gestures
The following gestures can be applied on both original handwritten text and typeset text: single tap, long press, return, erase, select, underline, join, insert and overwrite.

Option list (candidates)
Word option list for non-Asian languages and character option list for Asian languages.

Customization options

  • Text size, color & font
  • Ink width & color
  • Background image of the scrolling area
  • Baseline position, thickness and color
  • Auto-scroll margin and delay (auto-scroll feature can be enabled/disabled)
  • Auto-typeset delay (auto-typeset feature can be enabled/disabled)

Writing and correction modes

The writing mode is designed to enable the user to write text in a continuous flow. The writing area scrolls automatically after a short delay, once the user has finished writing. Scrolling of the writing area is managed by the widget.

The correction mode is designed to enable the user to navigate and edit the text already entered. A cursor bar is displayed in the writing area.

Cursor interface

In correction mode, Single Line Widget displays a cursor bar in the writing area. The input method manages and sets the position of the cursor bar which is moved accordingly in the writing area.

Positioning the cursor inside the text automatically selects the word or character at the position of the cursor, depending on the current selection mode. This triggers a selection change event that notifies the input method of the available handwriting candidates.

Languages

Single Line Widget supports 64 languages for Android and 59 languages for iOS and Windows. The full list is available on the Developer Portal.

Recommendations

Gesture detection

User action  Gesture Description  Sample & default actions
Single tap Briefly touch a word No action by default whereas a cursor moves in the sample.
Long press Tap and hold down n/a
Return Draw a line downwards then leftwards Insert a hard line break
Erase Strike through OR scratch out a word Erase
Select Circle a word No action in the sample whereas there is a selection by default
Underline Draw a line under a word No action in the sample whereas there is an underline by default
Join Draw a straight line upwards OR draw a line from one word to the next one Remove extra space
Insert Draw a straight line downwards Break a word
Overwrite Write a letter (or a whole word) on top of another Overwrite
These gestures might be confusing for your users at first, so you might want to integrate only some of these. If you choose to integrate all the gestures, we recommend you clearly explain these to your users to avoid any confusion.

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
    • ATKSingleLineWidget.framework
    • ATKIMCommon.framework
    • ATKText.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:

    • resources.bundle from the Samples/SingleLineWidgetSample/SingleLineSample directory (recognition configuration and resources),
    • ATKIMCommonResources from the Frameworks/ATKIMCommon.framework/Versions/A/Resources directory (images).
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 <ATKSingleLineWidget/SLTWSingleLineWidget.h>
#import <ATKSingleLineWidget/SLTWSingleLineWidgetDelegate.h>

@interface ViewController : UIViewController <SLTWSingleLineWidgetDelegate>

@property (strong, nonatomic) IBOutlet SLTWSingleLineWidget *singleLineWidget;
@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 = [_singleLineWidget registerCertificate:certificate];

  if(_certificateRegistered)
  {
    _singleLineWidget.delegate = self;
    
    NSBundle *mainBundle = [NSBundle mainBundle];
    NSString *bundlePath = [mainBundle pathForResource:@"resources" ofType:@"bundle"];
    bundlePath = [bundlePath stringByAppendingPathComponent:@"conf"];

    [_singleLineWidget addSearchDir:bundlePath];

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

- (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)singleLineWidget:(SLTWSingleLineWidget *)sender didConfigureWithSuccess:(BOOL)success
{
  if(!success)
  {
    NSLog(@"Unable to configure the Single Line Widget: %@", sender.errorString);
    return;
  }

  NSLog(@"Single Line Widget configured!");
}

- (void)singleLineWidget:(SLTWSingleLineWidget *)sender didChangeText:(NSString *)text intermediate:(BOOL)intermediatete
{
  NSLog(@"Single Line Widget text changed: %@", text);
}

@end

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

API

See the API documentation for iOS.