×
MENU
Resources Base
Table of contents

UI Elements

In this section, we’ll explore the UI Elements that are built into the DWT library for user interactions.

Installation Dialog

UI 1

This dialog comes up when running DWT in service mode under one of the following conditions:

  • The Dynamsoft Service is not installed
  • The Dynamsoft Service is not running
  • A failure to connect to the Dynamsoft Service

How to customize

This dialog is opened by one of the following functions

  • OnWebTwainNotFoundOnWindowsCallback

For Windows clients

  • OnWebTwainNotFoundOnLinuxCallback

For Linux clients

  • OnWebTwainNotFoundOnMacCallback

For macOS clients

  • OnRemoteWebTwainNotFoundCallback

For any client that connects to a remote Dynamsoft Service

All four of these functions eventually call the global API Dynamsoft.WebTwainEnv.ShowDialog() to show the installation dialog. You can use your own method to show the necessary information so that your users know how to proceed. For example

function OnWebTwainNotFoundOnWindowsCallback(ProductName, InstallerUrl, bHTML5, bIE, bSafari, bSSL, strIEVersion) {
    alert(ProductName + " is not installed, please download and install it from " + InstallerUrl);
}
// same for macOS & Linux...
function OnRemoteWebTwainNotFoundCallback(ProductName, ip, port, bSSL) {
    alert("The Dynamsoft Service is not installed or not running on the machine with IP" + ip);
}

When and where to override these functions

If you are not using dynamsoft.webtwain.min.js or dynamsoft.webtwain.min.mjs . you can simply make the changes in the file dynamsoft.webtwain.install.js .

If you are using dynamsoft.webtwain.min.js or dynamsoft.webtwain.min.mjs , the file dynamsoft.webtwain.install.js doesn’t exist. In this case, you must make the changes before you create a WebTwain instance . For example

window.OnWebTwainNotFoundOnWindowsCallback = function(ProductName, InstallerUrl, bHTML5, bIE, bSafari, bSSL, strIEVersion) {
    alert(ProductName + " is not installed, please download and install it from " + InstallerUrl);
}
Dynamsoft.WebTwainEnv.Load();

Indicators

Loading bar and backdrop

UI 2

This loading bar and backdrop shows up when creating a WebTwain instance or when you try to scan. The functions Dynamsoft.WebTwainEnv.OnWebTwainPreExecute() and Dynamsoft.WebTwainEnv.OnWebTwainPostExecute() are called before and after the process. You can customize the behavior like this

Dynamsoft.WebTwainEnv.OnWebTwainPreExecute = function() {
    // Show your own progress indicator
    console.log('An operation starts!');
};
Dynamsoft.WebTwainEnv.OnWebTwainPostExecute = function() {
    // Hide the progress indicator
    console.log('An operation ends!');
};

On the other hand, you can also call the functions Dynamsoft.WebTwainEnv.OnWebTwainPreExecute() and Dynamsoft.WebTwainEnv.OnWebTwainPostExecute() to show and hide the loader bar and backdrop when you need it in your own workflow.

If you just want to change the loading bar, you can use the Dynamsoft.WebTwainEnv.CustomizableDisplayInfo.loaderBarSource .

Progress bar

When DWT performs a time-consuming task, it’ll show a progress bar. This progress bar is either like this

UI-3

or like this (with a Cancel button)

UI-4

The 1st bar shows up when saving, loading or converting and can be hidden by setting IfShowProgressBar to false .

Both bars show up when uploading or downloading and can be hidden by setting IfShowCancelDialogWhenImageTransfer to false .

For uploading or downloading, you can also build your own progress bar with the help of the built-in event OnInternetTransferPercentage .

DWObject.RegisterEvent('OnInternetTransferPercentage',
    function(percentage) {
        console.log(percentage);
        // Use the percentage to build your own progress bar
    }
);

Language

Security Dialog

If you have enabled the security dialogs, you may see the following dialog when you try to scan

UI-5

You can change the language with the method SetLanguage() . The following sets the language to Spanish

DWObject.SetLanguage(Dynamsoft.EnumDWT_Language.Spanish);

UI-6

Error Messages

DWT has many built-in error messages as shown here. Each ErrorString has its own ErrorCode . To change the language of the message, you can read the ErrorCode and output the error string you have customized. For example

if (DWObject.ErrorCode === -2359) {
    // ErrorString "The index is out of range."
    // To Spanish
    console.log("El índice está fuera de rango.")
}

Is this page helpful?

YesYes NoNo

In this article:

latest version

  • Latest Version
  • Version 16.1.1
Change +
© 2003–2020 Dynamsoft. All rights reserved.
Privacy Statement / Site Map / Home / Purchase / Support