Customize the Web TWAIN Object

Naming the Dynamic Web TWAIN object

By default, the (first) Dynamic Web TWAIN object is named "DWObject". You should set it before using any other Dynamic Web TWAIN's properties or methods. A good place to do this is the built-in function Dynamsoft_OnReady. For example, in our Hello World sample:

<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
</head>
<body>
<input type="button" value="Scan" onclick="AcquireImage();" />
<div id="dwtcontrolContainer"> </div>
<script type="text/javascript">
        var DWObject;
        function Dynamsoft_OnReady(){
            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
        }
        function AcquireImage(){
            if(DWObject) {
                DWObject.IfDisableSourceAfterAcquire = true;
                DWObject.SelectSource();
                DWObject.OpenSource();
                DWObject.AcquireImage();
            }
        }
    </script>
</body>
</html>

The div with id 'dwtcontrolContainer' is the placeholder for Dynamic Web TWAIN. Its name and size are defined in the file dynamsoft.webtwain.config.js as shown below. You can change it if necessary.

Dynamsoft.WebTwainEnv.Containers = [{ContainerId:'dwtcontrolContainer',Width:270,Height:350}];

Changing the Size of the Viewer

You can simply change the size of the container (the built-in viewer) in dynamsoft.webtwain.config.js. You can both use a number or a percentage here. For example

Dynamsoft.WebTwainEnv.Containers = [{ContainerId:'dwtcontrolContainer',Width: '50%',Height:350}];

Changing the Look of the Installation Prompt

If Dynamic Web TWAIN is not installed, you will see this built-in interface that prompts the user to install the SDK

image015

In most cases, you might want to change the 'Dynamsoft Branding'. The following is how you can achieve this

  • The ‘branding’ is defined in the file \Resources\reference\hint.css
    .DYNLogo
        {
        background:url(logo.gif) left top no-repeat; 
        width:159px; 
        height:39px;
        } 

    As you can see, the following image (\Resources\reference\logo.gif) is the file you need to change. The simplest way is to replace it with your own logo but keep the same name and size.image016

  • If you'd like to change further the style of this prompt, please feel free to change the css mentioned above or change the code in the file \Resources\dynamsoft.webtwain.install.js
    function OnWebTwainNotFoundOnWindowsCallback(ProductName, InstallerUrl, bHTML5, bIE, bSafari, bSSL, strIEVersion) { }
        /* This callback is triggered when Dynamic Web TWAIN is not installed on a PC running Windows */
        function OnWebTwainNotFoundOnMacCallback(ProductName, InstallerUrl, bHTML5, bIE, bSafari, bSSL, strIEVersion) { }
        /* This callback is triggered when Dynamic Web TWAIN is not installed on a MAC */
        function OnWebTwainOldPluginNotAllowedCallback(ProductName) { }
        /* This callback is triggered when Dynamic Web TWAIN is disabled by a non-IE browser */
        function OnWebTwainNeedUpgradeCallback(ProductName, InstallerUrl, bHTML5, bMac, bIE, bSafari, bSSL, strIEVersion) { }
        /* This callback is triggered when Dynamic Web TWAIN installed on the machine is older than the //one on the server and upgrade is needed */