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 at least Visual Studio 2015 Update 1 and Windows 10. Note that the below procedure may vary depending on your Visual Studio version.

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 package name that can be found in Package.appxmanifest (Packaging tab) and select the target environment, then click Create.
  6. Click on the .cs 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 - Configure your Dependencies

  • In Tools > NuGet Package Manager > Manage NuGet Packages for Solution…, browse the ATK Package source in which widgets are displayed.
  • Select MyScript.Atk.SingleCharWidget and click Install.
For more information on NuGet packages, see the corresponding documentation.

Step 3 - Add Resources

Copy the Resources directory from Samples\SingleCharWidgetSample\SingleCharWidgetSample into your project. Resources should include at least an ak resource. More lk resources can also be added to improve and/or constrain the handwriting recognition.

Example: To use US English in superimposed, resources should be at least:

  • Resources\resources\latin\latin-ak-superimposed.lite.res,
  • Resources\resources\en-US\en_US-lk-text.lite.res,
  • Resources\resources\mul\mul-lk-gesture.res,
  • Resources\conf\en_US.conf.

Then, edit their properties:

  • Build Action: Content
  • Copy to Output Directory: Copy always
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 4 - Start with Minimal Integration Code

An Internet connection is required to launch and run ATK applications. To authorize it, check the Internet (Client) box in the Capabilities tab of the Package.appxmanifest.xml file.

However, a 30-day grace period is offered, from the moment you first launch your application. A connection will then be mandatory.

Edit the MainPage.xaml file:

<Page

    xmlns:scw="using:MyScript.Atk.Text.Scw"
>

    <scw:SingleCharWidget x:Name="SingleCharWidget" Grid.Row="1" Background="White"/>

Edit the MainPage.xaml.cs file:

using System;
using System.IO;
using System.Diagnostics;

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Popups;
using Windows.ApplicationModel;

using MyScript.Atk.Text.Scw;
using MyScript.Certificate;

namespace SingleCharDemo
{
  public sealed partial class MainPage : Page,
       MyScript.Atk.Text.Scw.IOnConfiguredListener,
       MyScript.Atk.Text.Scw.IOnTextChangedListener
  {
    public MainPage()
    {
      InitializeComponent();

      if (!SingleCharWidget.RegisterCertificate((byte[])(Array)MyCertificate.Bytes))
      {
        ShowCertificateError();
        return;
      }

      // Listen to widget events (see OnConfigured and OnTextChanged APIs)
      SingleCharWidget.SetOnConfiguredListener(this);
      SingleCharWidget.SetOnTextChangedListener(this);

      // References resources copied as Content
      var resourcesDir = System.IO.Path.Combine(Windows.ApplicationModel.Package.Current.InstalledLocation.Path, "Resources", "conf");
      SingleCharWidget.AddSearchDir(resourcesDir);

      // 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 conf/en_US.conf file in your resources.
      // "si_text" references the configuration name in en_US.conf 
      SingleCharWidget.Configure("en_US", "si_text");
    }

    private async void ShowCertificateError()
    {
      var dialog = new MessageDialog("Please use a valid certificate.", "Invalid Certificate");
      await dialog.ShowAsync();
    }

    public void OnConfigured(ISingleCharWidgetApi widget, bool success)
    {
      if(!success)
      {
        Debug.WriteLine("Single Char Widget configuration error: {0} ({1}", widget.ErrorString, widget.ErrorCode);
        throw new Exception();
      }

      Debug.WriteLine("Single Char Widget Configured!");
    }

    public void OnTextChanged(ISingleCharWidgetApi widget, string text, bool intermediate)
    {
      Debug.WriteLine("Single Char Widget text changed: " + text);
    }
  }
}

API

See the API documentation for Windows.