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 Android Studio and have all Android tools and SDK (level 15 or up) installed and configured properly.

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 AndroidManifest.xml and select the target environment, then click Create.
  6. Click on the .java 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 the build.gradle file of your project, add:
repositories {
    flatDir {
        // Location of your package's `libs` directory containing `*.aar` files.
        dirs 'path/to/libs'
    }
}
  • In the dependencies section, add:
compile 'com.android.support:appcompat-v7:23.+'

compile(name: 'MyScript_ATK-Core-android-component', ext: 'aar')
compile(name: 'MyScript_ATK-Text-android-component', ext: 'aar')
compile(name: 'MyScript_ATK-UI-android-component', ext: 'aar')
compile(name: 'MyScript_ATK-Diagram-android-component', ext: 'aar')
compile(name: 'MyScript_ATK-DiagramWidget-android-widget', ext: 'aar')

Step 3 - Add Resources

Copy the assets directory from samples/DiagramWidgetSample/src/main into your project. It contains the following directories:

  • conf: contains confs files with the different configurations to be activated,
  • resources: contains resources,
  • css: contains style information.
Resources are available for download on the Developer Portal.

Step 4 - Add a Layout Resource

To integrate the Diagram Widget view, add the following snippet in your layout.

<com.myscript.atk.diagram.widget.DiagramWidget
	android:id="@+id/diagram_widget"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
/>

Step 5 - Start with Minimal Integration Code

An Internet connection is required to launch and run ATK applications. To authorize it, add the following line in the AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET" />
However, a 30-day grace period is offered, from the moment you first launch your application. A connection will then be mandatory.

Edit the MainActivity class:

public class MainActivity extends AppCompatActivity implements
    DiagramWidgetApi.DiagramListener,
	DiagramWidgetApi.OnUndoRedoListener
{

  private static final String TAG = "DiagramDemo";

  private DiagramWidgetApi mWidget;

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
 
    setContentView(R.layout.activity_main);
 
    // Set application title
    setTitle(getResources().getString(R.string.activity_name));
 
    //Retrieve Diagram Widget API
    mWidget = (DiagramWidgetApi) findViewById(R.id.diagramWidget);
 
    //Try to register the MyScript certificate
    if(!mWidget.registerCertificate(MyCertificate.getBytes()))
    {
      AlertDialog.Builder dlgAlert  = new AlertDialog.Builder(this);
      dlgAlert.setMessage("Please use a valid certificate.");
      dlgAlert.setTitle("Invalid certificate");
      dlgAlert.setCancelable(false);
      dlgAlert.setPositiveButton("OK", new DialogInterface.OnClickListener()
              {
                public void onClick(DialogInterface dialog, int which)
                {
                  //dismiss the dialog
                }
              });
      dlgAlert.create().show();
      return;
    }

    //Set listeners to diagram events
	mWidget.setDiagramListener(this);
	mWidget.setOnUndoRedoListener(this);
	
    //Tell the widget API where to find the configuration files (*.conf)
    mWidget.addSearchDir("zip://" + getPackageCodePath() + "!/assets/conf/");
 
    //Finally, set up the widget (including recognition engine)
    mWidget.initializeWidget();
	
	//Configure the recognition engine
	mWidget.configure("analyzer", "diagram");
	mWidget.configure("shape", "diagram");
	mWidget.configure("en_US", "cur_text");
  }

  @Override
  protected void onDestroy()
  {
    if (mWidget != null)
    {
      //This method destroys the widget and clear all diagram objects of the memory
      mWidget.release();
      mWidget = null;
    }

    super.onDestroy();
  }

  @Override
  public void onError(DiagramWidgetApi widget, String errorMessage)
  {
    Log.e(TAG, errorMessage);
  }

  @Override
  public void onSelectionModified(DiagramWidgetApi widget)
  {
    Log.e(TAG, "Selection id modified");
  }

  @Override
  public void onSessionStart(DiagramWidgetApi widget)
  {
    Log.e(TAG, "Session started");
  }

  @Override
  public void onSessionEnd(DiagramWidgetApi widget)
  {
    Log.e(TAG, "Session ended");
  }

  @Override
  public void onUndoRedoStateChanged(DiagramWidgetApi widget)
  {
    if (widget.canUndo())
	  Log.e(TAG, "Undo is available");
    if (widget.canRedo())
	  Log.e(TAG, "Redo is available");
  }
}

API

See the API documentation for Android.