DWT Java Script Library Progress Dialogue Automatically Displays with Angular 5

Question

I am incorporating the Dynamic Web Twain javascript library into my angular application to allow my end users to scan using a web browser instead of a desktop application.

Upon loading the page, the progress bar immediately pops up. This is not expected behavior, nor does it happen when I use angular 4. I am using angular 5 at work. It also makes no difference which browser I use (IE, Chrome, Firefox).

The version of my Angular is:

> Angular CLI: 1.6.6 Node: 9.4.0 OS: win32 x64 Angular: 5.2.3 ...
> animations, common, compiler, compiler-cli, core, forms ... http,
> language-service, platform-browser ... platform-browser-dynamic,
> router
> 
> @angular/cli: 1.6.6 @angular-devkit/build-optimizer: 0.0.42
> @angular-devkit/core: 0.0.29 @angular-devkit/schematics: 0.0.52
> @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.6
> @schematics/angular: 0.1.17 typescript: 2.5.3 webpack: 3.10.0

I have included the javascript library into my newly created Angular project using these commands:

npm install dwt --save
npm install @type/dwt --save

Also note that my webtwain.min.js is added to the scripts within my angular-cli.json:

"scripts": [
    "../node_modules/dwt/dist/dynamsoft.webtwain.min.js"

Here is the layout of my project:

Finally, here is my component.ts file and its related html (it doesn't matter how I populate the html, the result is the same):

    /// <reference types="dwt" />

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-scan',
  template: '<button (click)="acquireImage()">Scan Document</button><div id="dwtcontrolContainer"></div>',
  styleUrls: ['./scan.component.css']
})
export class ScanComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }


  acquireImage(): void {
    const dwObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    dwObject.IfShowIndicator = false;
    const bSelected = dwObject.SelectSource();
    if (bSelected) {
      const onAcquireImageSuccess = () => { dwObject.CloseSource(); };
      const onAcquireImageFailure = onAcquireImageSuccess;
      dwObject.OpenSource();
      dwObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
    }
  }

}

Finally here is the result:

The 'progressbar' shown with a value of 0% pops up immediately. In angular 4, this does not happen. Any thoughts on what is causing this? I am trying to read up on the changes between 4 and 5, specifically asynchronous and synchronous loading but I am still new to this framework.

Thanks, Josh

Answer 1

This is Tom from Dynamsoft.

What you posted here is a known issue in v13.3 of the SDK Dynamic Web TWAIN.

Here is the fix

1. Update CSS (dynamsoft_dwt_html5.css) to add the following

   dialog[closed] { display: none; }

2. Update dynamsoft.webtwain.initiate.js to apply the new CSS rule

   m.showDialog=function(y){var z=this,v;if(z.open){j.error("showDialog called on open dialog.");return}z.open=i;z.removeAttribute("closed");

   m.closeDialog=function(t){var v=this;if(!v.open){j.error("closeDialog called on closed dialog.")}v.open=o;v.removeAttribute("open");v.setAttribute("closed","closed");

   y.push('<dialog class="dynamsoft-dwt-dialogProgress" closed="closed" style="top:30%">

Since the code is minimized, it might look different in your own copy of the JS, if you like, you can email our support team ([email protected], if possible, please use your business email address) for the patch. Thanks.

BTW, the patch will be part of v13.4 soon to be released.