How to scan document in zul using TWAIN

 Download sample provided by Dyansoft here


<zk xmlns:x="xhtml" xmlns:zk="zk" >

<window   title="scan" closable="true" width="600px" height="400px" mode="modal" popup="true" border="normal" apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('com.csdcsystems.amanda.jems.web.viewmodel.ScanToInsertAttachmentViewModel')" >

 <script type="text/javascript">

            <![CDATA[

            var DWObject;
            var seed;
            function pageonload() {
                     seed = setInterval(initControl, 500);//Wait 500ms after opening the webpage, call “ControlDetect” function
            }
           
            function initControl() {
                if (DWObject) {
                    //alert("init");
                    if (DWObject.ErrorCode == 0) {
                        clearInterval(seed);
                        DWObject.BrokerProcessType = 1;
                    }
                    //alert("init"+DWObject.SourceCount);
                    for (var i = 0; i < DWObject.SourceCount; i++) {
                       
                        document.getElementById("deviceSetup").options.add(new
                        Option(DWObject.SourceNameItems(i),
                                DWObject.SourceNameItems(i)));
                       
                    }
                    DWObject.attachEvent('onTopImageInTheViewChanged', Dynamsoft_OnTopImageInTheViewChanged);
                    DWObject.attachEvent('onPostAllTransfers', Dynamsoft_OnPostAllTransfers);
                   
                }
            }

            function acquireImage() {
                if (DWObject) {
                    if (DWObject.SourceCount > 0) {
                        DWObject.SelectSourceByIndex(document.getElementById("deviceSetup").selectedIndex);
                        DWObject.CloseSource();
                        DWObject.OpenSource();
                        DWObject.IfShowUI = document.getElementById("ShowUI").checked;
                        DWObject.Resolution = document.getElementById("resolution").value;
                        DWObject.IfFeederEnabled = document.getElementById("ADF").checked;
                        DWObject.IfDuplexEnabled = document.getElementById("Duplex").checked;
                        DWObject.IfDisableSourceAfterAcquire = true;
                        DWObject.AcquireImage();
                      
                   
                    }
                    else
                        alert("No TWAIN compatible drivers detected.");
                }
            }

            function Dynamsoft_OnTopImageInTheViewChanged(index) {
                if (DWObject) {
                    DWObject.CurrentImageIndexInBuffer = index;
                }
            }
            function Dynamsoft_OnPostAllTransfers() {
                btnUpload();
            }

            function btnUpload() {
                    var pageUrl=document.getElementById("hdnActionPageUrl").value;
                      var strActionPage;
                    var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
                    var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
                    strActionPage = CurrentPath + pageUrl; //the ActionPage's file path
                    strHTTPServer = location.hostname;
                    DWObject.HTTPPort = location.port==""?80:location.port;
                    DWObject.HTTPUploadThroughPost(strHTTPServer,0,strActionPage,"imageData.jpg");

                    if (DWObject.ErrorCode != 0)
                        alert(DWObject.ErrorString);
                    else //succeded
                        alert("Image Uploaded successfully");
               
            }   

            zk.afterMount(function() {
                var    ua=navigator.userAgent;
                var IE=false;
                var IE64=false;
                if(ua.indexOf('msie') != -1 || ua.indexOf('trident') != -1 ||ua.indexOf('MSIE') != -1 ){
                    IE=true;
                }
                if(ua.indexOf('win64') != -1 || ua.indexOf('x64') != -1){
                    IE64=true;
                }
                if(IE){
                    if(IE64){
                        //alert("IE64");
                        DWObject = document.getElementById("dwtcontrolContainer_ObjIE");
                    }else{
                        //alert("IE32");
                        DWObject=document.getElementById("dwtcontrolContainer_ObjIE32");
                    }
                }else{
                    //alert("None IE");
                    DWObject = document.getElementById("dwtcontrolContainer_Obj");
                }
                //DWObject = document.getElementById("dwtcontrolContainer_Obj");
                DWObject.ProductKey = "";
                DWObject.isTrial = false;
                var attLabel = $("#attachmentLabel").val();
                var attValue = $("#attachmentValue").val();
                var labelArray = attLabel.split('-');
                var valueArray = attValue.split('-');
           
                for (var i = 0; i < labelArray.length; i++) {
                    document.getElementById("attachmentType").options.add(new
                    Option(labelArray[i],
                            valueArray[i]));
                }
                pageonload();
            } );
           
            ]]>
</script>


 <hlayout>
     <separator width="10px"></separator>
     <x:table border="0" width="520px">
         <x:tr>
             <x:td colspan="2">
                 <space></space>
             </x:td>
         </x:tr>

         <x:tr>
             <x:td align="right">
                 <label value="Attachment Description"></label>
             </x:td>
             <x:td>
                 <x:select id="attachmentType" style="WIDTH: 408px" onChange="demo();">
                        </x:select>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td align="right">
                 <label value="Attachment Detail"></label>
             </x:td>
             <x:td>
                 <x:input type="textbox" id="attachmentDetail"
                     style="WIDTH: 400px; HEIGHT: 42px;" value="" maxlength="4000" />
             </x:td>
         </x:tr>
     </x:table>
 </hlayout>
 <hlayout>
     <separator width="15px"></separator>
     <x:table border="0" width="520px">
         <x:tr>
             <x:td colspan="3">
                 <x:img id="idDetailTableLoadingBar"
                     src="/resource/image/loading-bar.gif" />
             </x:td>
         </x:tr>
         <x:tr>
             <x:td style="WIDTH: 130px" colspan="2">
                 <label value="Scan Mode"></label>
             </x:td>

             <x:td style="WIDTH: 180px">
                 <label value="Scan File Name"></label>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td colspan="2" width="300px">

                 <x:table width="100%">
                     <x:tr>
                         <x:td width="100px">
                             <x:input type="radio" name="bwOrColour"
                                 value="B" checked="true" />
                             <label value="BW" />
                         </x:td>
                         <x:td width="100px">
                             <x:input type="radio" name="bwOrColour"
                                 value="G" />
                             <label value="Gray" />
                         </x:td>
                         <x:td width="100px">
                             <x:input type="radio" name="bwOrColour"
                                 value="C" />
                             <label value="Color" />
                         </x:td>
                     </x:tr>
                 </x:table>
             </x:td>
             <x:td width="173px">
                 <x:input type="textbox" id="FileName"
                     style="WIDTH: 190px" value="@load(vm.fileName)" />
             </x:td>
         </x:tr>
         <x:tr>
             <x:td width="85px">
                 <label value="Resolution"></label>
             </x:td>
             <x:td width="173px">
                 <x:select id="resolution" style="WIDTH: 150px">
                     <x:option value=""></x:option>
                     <x:option value="75">75</x:option>
                     <x:option value="100">100</x:option>
                     <x:option value="150">150</x:option>
                     <x:option value="200">200</x:option>
                     <x:option value="250">250</x:option>
                 </x:select>
             </x:td>
             <x:td width="173px">
                 <label value="File type"></label>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td width="300px" colspan="2">
                 <x:table border="0" width="100%">
                     <x:td width="100px">
                         <x:input type="checkbox" id="ShowUI" />
                         <label value="ShowUI" />
                     </x:td>
                     <x:td width="100px">
                         <x:input type="checkbox" id="ADF" />
                         <label value="ADF" />
                     </x:td>
                     <x:td width="100px">
                         <x:input type="checkbox" id="Duplex" />
                         <label value="Duplex" />
                     </x:td>
                 </x:table>
             </x:td>
             <x:td width="173px">
                 <x:select id="FileType" style="WIDTH: 195px">
                     <x:option value="JPG">JPG</x:option>
                     <x:option value="PNG">PNG</x:option>
                     <x:option value="PDF">PDF</x:option>
                     <x:option value="TIF">TIF</x:option>
                     <x:option value="BMP">BMP</x:option>
                 </x:select>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td style="WIDTH: 300px" colspan="2"></x:td>
             <x:td width="173px">
                 <label value="Device Setup"></label>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td style="WIDTH: 300px" colspan="2"></x:td>
             <x:td width="173px">
                 <x:select id="deviceSetup" style="WIDTH: 195px">
                     <x:option value=""></x:option>
                 </x:select>
             </x:td>
         </x:tr>
     </x:table>
 </hlayout>

 <hlayout>
     <separator width="15px"></separator>
     <x:table border="0" width="520px">

         <space width="30px"></space>
         <x:tr>
             <x:td align="right">
                 <x:input type="textbox" id="attachmentLabel"
                     value="@load(vm.attachmentLabel)" visible="false" />

                 <x:input type="textbox" id="attachmentValue"
                     value="@load(vm.attachmentValue)" visible="false" />
                 <x:input type="textbox" id="lid" width="210px"
                     value="@bind(vm.sessionId)" visible="false" />
                 <x:input type="textbox" id="agencyType" width="210px"
                     value="@bind(vm.agencyType)" visible="false" />
                 <x:input type="textbox" id="folderRSN" width="210px"
                     value="@bind(vm.folderRSN)" visible="false" />
                 <x:input type="textbox" id="folderType" width="210px"
                     value="@bind(vm.folderType)" visible="false" />

                 <x:input type="hidden" id="hdnActionPageUrl"
                     value="@bind(vm.actionPageURL)" />

                 <x:input type="hidden" id="scanProductKey"
                     value="@bind(vm.scanProductKey)" />

                 <x:input type="button" value="Scan"
                     onClick="acquireImage();" id="btnScan" style="WIDTH: 80px">
                 </x:input>
                 <space></space>

                 <x:input type="button" value="Close" id="btnSClose"
                     style="WIDTH: 80px" onClick="@command('doCancel')">
                 </x:input>
             </x:td>
         </x:tr>

         <x:tr>
             <x:td>
                 <x:embed id='dwtcontrolContainer_Obj'
                     style='display: inline; width:0px;height:0px'
                     type='Application/DynamicWebTwain-Plugin'
                     onPostAllTransfers="Dynamsoft_OnPostAllTransfers"
                     onTopImageInTheViewChanged="Dynamsoft_OnTopImageInTheViewChanged"
                     pluginspage='/resource/scanresources/DynamicWebTWAINPlugIn.msi'>
                 </x:embed>

             </x:td>
         </x:tr>
         <x:tr>
             <x:td>
                 <x:object style="display: inline;"
                     classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331">
                     <x:param name="LPKPath"
                         value="/resource/scanresources/DynamicWebTwain.lpk">
                     </x:param>
                     </x:object>
                 <x:object style="width: 0px; height: 0px;"
                     id="dwtcontrolContainer_ObjIE"
                     codeBase="/resource/scanresources/DynamicWebTWAINx64.cab#version=9,1"
                     classid="clsid:E7DA7F8D-27AB-4EE9-8FC0-3FEC9ECFE758"
                     viewastext="">
                     <x:PARAM NAME="_cx" VALUE="2645"></x:PARAM>
                     <x:PARAM NAME="_cy" VALUE="2645"></x:PARAM>
                     <x:PARAM NAME="JpgQuality" VALUE="80"></x:PARAM>
                     <x:PARAM NAME="Manufacturer"    VALUE="DynamSoft Corporation"></x:PARAM>
                     <x:PARAM NAME="ProductFamily"    VALUE="Dynamic Web TWAIN"></x:PARAM>
                     <x:PARAM NAME="ProductName"    VALUE="Dynamic Web TWAIN"></x:PARAM>
                     <x:PARAM NAME="VersionInfo"    VALUE="9, 1, 0, 806"></x:PARAM>
                     <x:param name="ProductFamily" value="Dynamic Web TWAIN">
                </x:param>
            </x:object>
            <x:object style="width: 0px; height: 0px;"
                     id="dwtcontrolContainer_ObjIE32"
                     codeBase="/resource/scanresources/DynamicWebTWAIN.cab#version=9,1"
                     classid="clsid:E7DA7F8D-27AB-4EE9-8FC0-3FEC9ECFE758"
                     viewastext="">
                     <x:PARAM NAME="_cx" VALUE="2645"></x:PARAM>
                     <x:PARAM NAME="_cy" VALUE="2645"></x:PARAM>
                     <x:PARAM NAME="JpgQuality" VALUE="80"></x:PARAM>
                     <x:PARAM NAME="Manufacturer"    VALUE="DynamSoft Corporation"></x:PARAM>
                     <x:PARAM NAME="ProductFamily"    VALUE="Dynamic Web TWAIN"></x:PARAM>
                     <x:PARAM NAME="ProductName"    VALUE="Dynamic Web TWAIN"></x:PARAM>
                     <x:PARAM NAME="VersionInfo"    VALUE="9, 1, 0, 806"></x:PARAM>
                     <x:param name="ProductFamily" value="Dynamic Web TWAIN">
                </x:param>
            </x:object>
             </x:td>
         </x:tr>
     </x:table>
 </hlayout>

</window>

</zk>