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 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.DiagramWidget and click Install.

For more information on NuGet packages, see the corresponding documentation.

Step 3 - Add Resources

Copy the Resources and Styles directories from Samples\DiagramWidgetSample\DiagramWidgetSample into your project.

Then, edit their properties:

  • Build Action: Content
  • Copy to Output Directory: Copy always
Resources are available for download on the Developer Portal.

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:diagram="using:MyScript.Atk.DiagramWidget"
>

    <diagram:DiagramWidget x:Name="DiagramWidget"/>

Edit the MainPage.xaml.cs file:

using System;
using System.Diagnostics;
using Windows.UI.Popups;
using Windows.UI.Xaml.Controls;

using MyScript.Atk.DiagramWidget;
using MyScript.Certificate;

namespace DiagramDemo
{
  public sealed partial class MainPage : Page, 
    MyScript.Atk.Diagram.IDiagramEventListener
  {
    public MainPage()
    {
      InitializeComponent();

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

      DiagramWidget.SetDiagramListener(this);

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

     // Indicate the stylesheet to the widget
     DiagramWidget.StyleSheet = System.IO.Path.Combine(Windows.ApplicationModel.Package.Current.InstalledLocation.Path, "Styles");

     // "analyzer" references the Analyzer bundle name in conf/analyzer.conf file in your resources bundle.
     DiagramWidget.Configure("analyzer", "diagram");
     
     // "shape" references the Shape bundle name in conf/shape.conf file in your resources bundle.
     DiagramWidget.Configure("shape", "diagram");

     // "en_US" references the Text bundle name in conf/en_US.conf file in your resources bundle.
     DiagramWidget.Configure("en_US", "cur_text");
    }

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

    public void SessionStart()
    {
      System.Diagnostics.Debug.WriteLine("Session started");
    }
    
    public void SessionEnd()
    {
      System.Diagnostics.Debug.WriteLine("Session ended");
    }
    
    public void CanUndo(bool canUndo)
    {
      if (canUndo)
        System.Diagnostics.Debug.WriteLine("Undo available");
      else
        System.Diagnostics.Debug.WriteLine("Undo unavailable");
    }

    public void CanRedo(bool canRedo)
    {
      if (canRedo)
        System.Diagnostics.Debug.WriteLine("Redo available");
      else
        System.Diagnostics.Debug.WriteLine("Redo unavailable");
    }

    public void OnError(string errorMessage)
    {
      System.Diagnostics.Debug.WriteLine(errorMessage);
    }

    public void SelectionModified()
    {
      System.Diagnostics.Debug.WriteLine("Selection is modified");
    }
  }
}

API

See the API documentation for Windows.