How to Integrate Dynamic Web TWAIN into Vaadin Platform

Vaadin platform, similar to GWT (Google Web Toolkit), is a set of web components that allow developers to implement HTML5 web apps using the Java programming language. This tutorial aims to help developers to create a simple web document scanning app with Vaadin and Dynamic Web TWAIN SDK.

Setting Up Vaadin Development Environment

The Vaadin quick start tutorial recommends developers to use IntelliJ, Eclipse, and Netbeans as the development tools. But I strongly recommend Visual Studio Code.

With the installer of Visual Studio Code for Java developers, you can set up the development environment by one-click.

vscode java installer

Download the latest Apache Maven.

Using Dynamic Web TWAIN in Vaadin Flow

We can quickly get started with Vaadin by learning the basic sample code:

git clone https://github.com/vaadin-learning-center/vaadin-todo

When press F5 to run the code, Visual Studio Code will automatically generate a launch.json file:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Debug (Launch) - Current File",
            "request": "launch",
            "mainClass": "${file}"
        },
        {
            "type": "java",
            "name": "Debug (Launch)-Application<dwt>",
            "request": "launch",
            "mainClass": "org.vaadin.marcus.spring.Application",
            "projectName": "dwt"
        }
    ]
}

If you fail to run the app, copy the configuration to your launch.json file.

To use Dynamic Web TWAIN, we need to know how to import https://tst.dynamsoft.com/libs/dwt/14.3.1/dynamsoft.webtwain.min.js.

According to the online docs, we can import the Dynamic Web TWAIN JavaScript library as follows:

@JavaScript("https://tst.dynamsoft.com/libs/dwt/14.3.1/dynamsoft.webtwain.min.js")

Create a div tag as the container of Dynamic Web TWAIN:

@Tag("div")
  public static class WebTWAINContainer extends Component {
    public WebTWAINContainer() {
      getElement().setProperty("id", "dwtcontrolContainer");
    }

  }

Initialize the UI with a button and the div tag:

package org.vaadin.marcus.spring;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.JavaScript;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route
@JavaScript("https://tst.dynamsoft.com/libs/dwt/14.3.1/dynamsoft.webtwain.min.js")
public class MainView extends VerticalLayout {
  public MainView() {
    Button addButton = new Button("Scan");

    addButton.addClickListener(click -> {
    });

    add(new H1("Vaadin Dynamic Web TWAIN"), new VerticalLayout(addButton, new WebTWAINContainer()));
  }

  @Tag("div")
  public static class WebTWAINContainer extends Component {
    public WebTWAINContainer() {
      getElement().setProperty("id", "dwtcontrolContainer");
    }

  }

}

The next step is to trigger the document scanning event by executing JavaScript code.

Get a FREE 30-day trial license key.

Invoke the Java method executeJavaScript to run the JavaScript code that wrapped as a string:

addButton.addClickListener(click -> {
String acquireimage = "var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');DWObject.ProductKey = 'LICENSE-KEY';if (DWObject) {DWObject.SelectSource(function () {var OnAcquireImageSuccess, OnAcquireImageFailure;OnAcquireImageSuccess = OnAcquireImageFailure = function () {DWObject.CloseSource();};DWObject.OpenSource();DWObject.IfShowUI = false; DWObject.Resolution = 300;    DWObject.PixelType = EnumDWT_PixelType.TWPT_GRAY;DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);}, function () {console.log('SelectSource failed!');});}";

getUI().get().getPage().executeJavaScript(acquireimage);

});

Refresh the web page and the document scan function should work now.

vaadin dynamic web twain

However, the long string is not readable and editable. We’d better optimize it. An alternative way is to move all JavaScript code to a .js file and then import it.

Create a scan.js file under src\main\webapp\frontend\src directory:

function AcquireImage() {
    var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    if (DWObject) {
        DWObject.ProductKey = LICENSE-KEY';
        DWObject.SelectSource(function () {
            var OnAcquireImageSuccess, OnAcquireImageFailure;
            OnAcquireImageSuccess = OnAcquireImageFailure = function () {
                DWObject.CloseSource();
            };
            DWObject.OpenSource();
            DWObject.IfShowUI = false; 
            DWObject.Resolution = 300;    
            DWObject.PixelType = EnumDWT_PixelType.TWPT_GRAY;
            DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
        }, function () {
            console.log('SelectSource failed!');
        });
    }
}

Import the JavaScript file from the local path frontend://src/scan.js. The code snippet looks much better now:

@Route
@JavaScript("https://tst.dynamsoft.com/libs/dwt/14.3.1/dynamsoft.webtwain.min.js")
@JavaScript("frontend://src/scan.js")
public class MainView extends VerticalLayout {
  public MainView() {
    Button addButton = new Button("Scan");

    addButton.addClickListener(click -> {
      getUI().get().getPage().executeJavaScript("AcquireImage()");
    });

    add(new H1("Vaadin Dynamic Web TWAIN"), new VerticalLayout(addButton, new WebTWAINContainer()));
  }

  @Tag("div")
  public static class WebTWAINContainer extends Component {
    public WebTWAINContainer() {
      getElement().setProperty("id", "dwtcontrolContainer");
    }

  }

}

Source Code

https://github.com/dynamsoft-dwt/vaadin-document-scan