Overview

Diagram Widget is an interactive input method for text and shapes, enabling users to draw some kinds of diagrams freehand, with a finger or a stylus. It is designed to ensure a natural, handwriting-based HMI with real-time recognition and interactivity on digital ink.

It enables users to think visually when they take notes, brainstorm or create a document on a touch or stylus-enabled device.

Use cases

Diagram Widget supports the following diagrams:

  • org charts,
  • flowcharts,
  • concept maps,
  • mind maps.

Other diagrams might not be fully supported.

Organizational chart

In this scenario, the user draws an org chart to present the company hierarchy.

Flowchart

In this scenario, the user draws a flowchart to display the process for an order placement.

Concept map

In this scenario, the user draws a concept map to depict relationships between concepts. It is a graphical tool that instructional designers, engineers, technical writers, etc. use to organize and structure knowledge.

Mind map

In this scenario, the user draws a mind map revolving around one single concept (here: the sun) and associated representations of ideas are added. Major ideas are connected directly to the central concept, and other ideas branch out from those.

Features

Real-time text and shape recognition

Canvas where text and shapes can be drawn without having to switch tools.

Text has to be written horizontally and can either be inside a shape or on its own. Ink width and color can be changed in the API. On Windows, the ink width also depends on how much the stylus is pressed on the screen.

Beautification

The ink diagram can be turned into a sharp and clean document, either on the fly or on demand. Shapes and text are beautified: alignment (center/vertical/horizontal), congruence and connection attraction.

Interactive ink

Manipulate the ink as easily as typeset elements. Select, move, resize and align parts of the diagram. Erase elements and edit text using gestures. Undo/redo features are also supported.

Interaction with the recognition

Visual feedback is provided on the recognition result. The prompter enables to confirm that the shapes and text have been properly recognized.

If not, tap the text in the prompter and choose suggested alternatives. The selection can also be set as doodle (the ink is displayed without beautification).

Note the prompter UI is localized in 11 languages: Localizations can be found in the resources of your project.

Connection

Draw line and elbow (angled) connectors to link elements in your diagram. See the Connection between elements section.

Export and serialization

Diagrams can be saved to be reloaded for later editing. They can also be exported as images, vector graphics (SVG) or XML (GraphML). For more information on GraphML, see the GraphML Primer.

Customization

Many features can be customized through the API: recognition, beautification/typeset, stylesheet update, palm rejection, etc.

Supported shapes

Circles, ellipses Triangles Rectangles, squares Parallelograms Trapezoids Polygons Rhombuses

Supported connectors

Lines and arrows Hyperedges Elbow (angled) connectors
Note that curved connectors (arcs, splines) are not supported.

Supported gestures

The following editing gestures can be applied on handwritten or typeset text.

User action  Gesture Description Code sample 
Break (text only) Draw a straight line downwards Break a word
Join (text only) Draw a straight line upwards Remove extra space
Strikethrough (text only) Strike through an item Erase
Scratch-out (text and shapes) Scratch out an item Erase
Single tap (text and shapes) Briefly touch an item Select the item
The scratch-out gesture will only work on full shapes: It is not possible to erase only parts of shapes.

Supported languages

Diagram Widget supports 58 languages.

To learn more about resources, see the Developer tools page available on the Developer Portal.

Connections

Shapes, connectors and text can easily be linked. Once two items are linked, moving/resizing one means moving/resizing the other accordingly.

  • Write text inside a shape to link both:
  • Write text next to a connector to link both:
  • Draw a connector between two shapes to link them:
  • Draw two connectors close to each other to link them:
  • Label a connector to link both:

As shown in the below figure:

  • When text is written inside a shape, the connector is linked to the shape, and not to the text.
  • When there is no shape, the connector is linked to the text.

Events

See below a sequence diagram detailing the recognition process for a simple case.

  • The user writes one stroke (pointer events: down, move, up), that is sent to the widget in a continuous flow.
  • The widget processes the stroke to define if it is indeed a stroke or an editing gesture.
  • The widget starts the recognition (sessionStart).
  • The widget has finished the recognition (sessionEnd), triggers the prompter and is now stable.

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
    • MobileCoreServices.framework
    • ATKDiagramWidget.framework
    • ATKDiagram.framework
    • ATKSharedUI.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:

    • ATKDiagramWidget.bundle and ATKSharedUI.bundle from the Frameworks directory (images and localizations),
    • resources.bundle from the Samples/DiagramWidgetSample/DiagramWidgetSample/Resources directory (recognition configuration and resources),
    • css directory from the Samples/DiagramWidgetSample/DiagramWidgetSample/Resources directory (ink style properties).
Resources are available for download on the Developer Portal.

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 <ATKDiagramWidget/DIWDiagramWidget.h>

@interface ViewController : UIViewController <DIWDiagramViewDelegate>

@property (strong, nonatomic) IBOutlet DIWDiagramView *diagramView;
@property (assign, nonatomic) BOOL certificateRegistered;

@end
#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 = [_diagramView registerCertificate:certificate];

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

    NSBundle *mainBundle = [NSBundle mainBundle];
    NSString *bundlePath = [mainBundle pathForResource:@"resources" ofType:@"bundle"];
    bundlePath = [bundlePath stringByAppendingPathComponent:@"conf"];
    [_diagramView addSearchDir:bundlePath];
    
    // "en_US" references the en_US bundle name in conf/en_US.conf file in your resources bundle.
    // "text" references the configuration name in en_US.conf
    [_diagramView configureWithBundle:@"en_US" config:@"text" extendedConf:@""];
  }
}

- (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)diagramView:(DIWDiagramView *)diagramView didFailWithError:(NSError *)error
{
  NSLog(@"Diagram error (%@)", [error localizedDescription]);
}

- (void)diagramViewDidSessionStart:(DIWDiagramView *)diagramView
{
  NSLog(@"Diagram Widget session started.");
}

- (void)diagramViewDidSessionEnd:(DIWDiagramView *)diagramView
{
  NSLog(@"Diagram Widget session ended.");
}

@end

API

See the API documentation for iOS.