Overview

Single Character Widget is an interactive input method enabling users to handwrite text quickly, efficiently and without necessarily looking at the writing area. It is also particularly adapted to small devices, such as digital watches, smartphones, GPS navigation units, etc.

Single Character Widget is designed to ensure a natural, handwriting-based HMI with real-time recognition and ink editing gestures as well as word completion features. It is fast and responsive, even with large amount of text.

Single Character Widget can operate in two modes: iso_text and si_text, depending on the set resources:

  • ak-iso resources for isolated input (iso_text), i.e. character by character.

  • ak-superimposed resources for superimposed input (si_text).

Use cases

The below use cases are only examples of applications where Single Character 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 Character Widget in an input method. In this scenario, the user handwrites a text message in a smartphone, with each character written over the previous one.

GPS

Here is an integration example of Single Character Widget in a GPS application. In this scenario, the driver handwrites superimposed characters on a device, and does not necessarily need to pay attention to the writing area.

Crosswords

Here is an integration example of Single Character Widget in a crossword application. In this scenario, the user handwrites isolated characters in the most natural way.

Math

Here is an integration example of Single Character Widget in a digital calculator. In this scenario, the user handwrites characters on top of each other, to display operations and final result.

Features

Character per character input
Canvas where text is entered, character by character, one on top of the other.

Real-time single characters
Real-time recognition of words where characters are written one after the other, with a time-out between characters. See the list of supported languages on the Developer Portal.

Real-time superimposed characters
Real-time recognition of words where characters are written on top of each other without any time-out between characters. See the list of supported languages on the Developer Portal.

Editing gestures
Single tap, long press, return, space and backspace gestures. See below our recommendations.

Word completion
Completion options on partially recognized words.

Word prediction
Prediction options on recognized words.

Option list (candidates)
Character and word option list that potentially match the input ink.

Customization options
Ink color, ink thickness, ink fade-out delay, ink effect, background.

Languages

Single Character Widget supports:

Recommendations

Gesture detection

Single Character Widget supports the following gestures: single tap, long press, return, backspace, space.

Except for space gesture, gestures can be associated with any action. See below a list of suggested actions for each of these.

The space gesture cannot be configured and any line drawn from left to right will be interpreted as a space. Note that you can also create a space button in the UI.
User action  Gesture Description  Sample & default actions
Single tap Briefly touch the screen n/a
Long press Tap and hold down n/a
Return Draw a line downwards then leftwards Insert a hard line break
Backspace Draw a line leftwards Delete a letter
Space Draw a line rightwards Insert a space
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.

Chinese and Japanese

For Chinese and Japanese, we recommend:

  • deactivating space and backspace gestures - to avoid confusion with some characters,
  • increasing the ink fade-out delay - so that strokes are displayed longer, thus allowing to see the whole characters,
  • activating auto spacing.
Auto spacing only works in Chinese and Japanese.

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
    • ATKSingleCharWidget.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/SingleCharWidgetSample/SingleCharSample directory (images, 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 <ATKSingleCharWidget/SCWSingleCharWidget.h>
#import <ATKSingleCharWidget/SCWSingleCharWidgetDelegate.h>

@interface ViewController : UIViewController <SCWSingleCharWidgetDelegate>

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

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

    [_singleCharWidget 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.
    // "si_text" references the configuration name in en_US.conf 
    [_singleCharWidget configureWithBundle:@"en_US" andConfig:@"si_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)singleCharWidget:(SCWSingleCharWidget *)sender didConfigureWithSuccess:(BOOL)success
{
  if(!success)
  {
    NSLog(@"Unable to configure the Single Char Widget: %@", sender.errorString);
    return;
  }

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

- (void)singleCharWidget:(SCWSingleCharWidget *)sender didChangeText:(NSString*)text intermediate:(BOOL)intermediate
{
  NSLog(@"Single Char Widget text changed: %@", text);
}

@end

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

API

See the API documentation for iOS.