Atalasoft Knowledge Base

HOWTO: WebCapture with RequireJS

: 3 Months Ago
: Tananda
: WingScan

In 11.2, we included "modularization" for WebDocumentViewer and WebDoumentThumbnailer

There is a tutorial for how to use various dependency loading tools (including RequireJS) with these controls

That tutorial is available on our WebDocumentViewer API Online

Our WebCapture was not "modularized" in quite the same way, so the above doesn't work "out of the box" for WebCapture

WebCapture with RequireJS requires "shimming".

Minimal No-Viewer WebCapture and RequireJS

For a minimal install without involving WDV the changes to standard procedure required are as follows:

find the direct script calls to jquery and atalaWebCapture

    <script src="/WebCapture/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="/WebCapture/atalaWebCapture.js" type="text/javascript"></script>

Replace them with this:

    <script data-main="/scripts/webCapturenitialization" src="/scripts/require.js" defer="defer"></script>

Find and comment out your script dirctives related to WebCapture - they will move into the initialization script you're about to create... in my example I found and removed this:

    <script type="text/javascript">
        // Initialize Web Scanning and Web Viewing
        $(function () {
            try {
                Atalasoft.Controls.Capture.WebScanning.initialize({
                    handlerUrl: 'WebCaptureHandler.ashx',
                    onUploadCompleted: function (eventName, eventObj) {
                        if (eventObj.success) {
                            document.getElementById('resultDiv').innerHTML = "Status: Upload Success... " + eventObj.documentFilename;
                        }
                    },
                    onScanError: scanErrorHandler,
                    scanningOptions: { applyVRS: false, pixelType: 0, showScannerUI: false }
                });
            } catch (error) {
                alert('Thrown error: ' + error.description);
                Atalasoft.Controls.Capture.WebScanning.dispose();
            }
        });

        function scanErrorHandler(msg, params) {
            switch (msg) {
                case Atalasoft.Controls.Capture.Errors.badBrowser:
                    alert(msg);
                    break;
                case Atalasoft.Controls.Capture.Errors.activeX:
                    alert(
                    "The ActiveX Scanning Control needs to be installed, updated or enabled.\n" +
                    "When prompted, please allow the WingScan Web Scanning Control to install itself,\n" +
                    "or Manage Add-ons through IE Settings. Refresh your browser when completed.");
                    break;
                case Atalasoft.Controls.Capture.Errors.noTwain:
                    alert(
                "TWAIN is not installed on this computer.\n" +
                "Contact your system administrator.");
                    break;
                case Atalasoft.Controls.Capture.Errors.noPlugin:
                    var pluginUrl = window.location.protocol + "//" + window.location.host + "/WebCapture/" + params.filename
                    alert(
                    "The WingScan Web Scanning plugin is not available. \n\n" +
                    "Please download from : " + pluginUrl + "\n" +
                    "If you are not prompted to install, the plugin may be installed but disabled. \n" +
                    "enable it through Tools... Extensions. \n" +
                    "Refresh your browser when completed.");
                    window.open(pluginUrl, '_downloadPlugin');
                    break;
                case Atalasoft.Controls.Capture.Errors.oldPlugin:
                    alert(
                    "The WingScan Web Scanning plugin is out of date" +
                    "To download and install the latest version from " +
                    params.filename);
                    window.open(pluginUrl, '_downloadPlugin');
                    break;
                case "VRS: No license or license expired":
                    alert("Scanning aborted with a VRS licensing exception. \n\n" +
                    "VRS is enabled, but no VRS license is present.\n" +
                    "Either turn VRS off in your scanningOptions or \n" +
                    "activate a license with VRS.");
                    break;
                default:
                    alert(msg);
                    break;
            }
        }

        function scanWithSelectedScanner() {
            Atalasoft.Controls.Capture.WebScanning.scanningOptions.scanner = $('.atala-scanner-list').val();
            Atalasoft.Controls.Capture.WebScanning.scan();
        }
    </script>

Add a scripts directory to the root of your project and copy require.js to it

Within that directory, create a new Javascript and name it webCaptureInitialization.js

Edit webCaptureInitialization.js, and populate it with this:

requirejs.config({
    baseUrl: '/WebCapture',
    paths: {
        'jquery': 'jquery-3.5.1.min',
        'web-capture-service': 'atalaWebCapture'
    },
    shim: {
        // Web Capture Service at the moment is non-AMD script and requires a AMD shim config.
        'web-capture-service': {
            deps: ['jquery'],
            exports: 'Atalasoft',
        }
    }
});


requirejs(["web-capture-service", "jquery"], function RunApp(Atalasoft, jQuery) {
    Atalasoft.Controls.Capture.WebScanning.initialize({
        handlerUrl: 'WebCaptureHandler.ashx',
        onUploadCompleted: function (eventName, eventObj) {
            if (eventObj.success) {
                document.getElementById('resultDiv').innerHTML = "Status: Upload Success... " + eventObj.documentFilename;
                alert(eventObj.documentFilename);
                //_thumbs.openUrl('atala-capture-upload/' + eventObj.documentFilename, '');
            }
        },
        onScanError: scanErrorHandler,
        scanningOptions: { applyVRS: false, pixelType: 0, showScannerUI: false }
    });

    function scanErrorHandler(msg, params) {
        switch (msg) {
            case Atalasoft.Controls.Capture.Errors.badBrowser:
                alert(msg);
                break;

            case Atalasoft.Controls.Capture.Errors.activeX:
                alert(
                "The ActiveX Scanning Control needs to be installed, updated or enabled.\n" +
                "When prompted, please allow the WingScan Web Scanning Control to install itself,\n" +
                "or Manage Add-ons through IE Settings. Refresh your browser when completed.");
                break;
            case Atalasoft.Controls.Capture.Errors.noTwain:
                alert(
                "TWAIN is not installed on this computer.\n" +
                "Contact your system administrator.");
                break;
            case Atalasoft.Controls.Capture.Errors.noPlugin:
                var pluginUrl = window.location.protocol + "//" + window.location.host + "/WebCapture/" + params.filename
                alert(
                "The WingScan Web Scanning plugin is not available. \n\n" +
                "Please download from : " + pluginUrl + "\n" +
                "If you are not prompted to install, the plugin may be installed but disabled. \n" +
                "enable it through Tools... Extensions. \n" +
                "Refresh your browser when completed.");
                window.open(pluginUrl, '_downloadPlugin');
                break;
            case Atalasoft.Controls.Capture.Errors.oldPlugin:
                var pluginUrl = window.location.protocol + "//" + window.location.host + "/WebCapture/" + params.filename
                alert(
                "The WingScan Web Scanning plugin is out of date." +
                "To download and install the latest version from " +
                params.filename);
                 window.open(pluginUrl, '_downloadPlugin');
                break;
            case "VRS: No license or license expired":
                alert("Scanning aborted with a VRS licensing exception. \n\n" +
                "VRS is enabled, but no VRS license is present.\n" +
                "Either turn VRS off in your scanningOptions or \n" +
                "activate a license with VRS.");
                break;
            default:
                alert(msg);
                break;
        }
    }
});

function scanWithSelectedScanner() {
    Atalasoft.Controls.Capture.WebScanning.scanningOptions.scanner = $('.atala-scanner-list').val();
    Atalasoft.Controls.Capture.WebScanning.scan();
}

What this does is to configure RequireJS with the needed paths and shim to properly bring in the scripting and then executes the needed scripts

Minimal WDV (no web capture)

The above is for web capture .. the sample projects contain both a no viewer and a WingScan with WDV sample. However we also have customers wanting to use WDV without capture modularized. The process is very similar to the WebCapture one .. please see the BasicWdv_Require.zip sample download below