diff --git a/code/main.php b/code/main.php index 6bae884..539de82 100644 --- a/code/main.php +++ b/code/main.php @@ -78,14 +78,19 @@ $formFields.=RenderFieldCombo(MultiLang::GetString("Resolution"),"ddlResolution" $formFields.=RenderFieldCombo(MultiLang::GetString("Format"),"ddlFormat",$Formats,$Format); $formFields.=RenderFieldCombo(MultiLang::GetString("Size"),"ddlSize",MultiLang::ApplyArrayKeys($Sizes),$Size); //$formFields.=RenderFieldCheckText("Cropping","chkCrop",$Crop,"txtCropFuzz",$CropFuzz); -$formFields.=RenderFieldButton("","btnScan",MultiLang::GetString("Scan"),"Element_SetVisibility('divLoadBack',true);"); +$formFields.=RenderFieldButton("","btnScan",MultiLang::GetString("Scan"),"ShowProgressDialog();"); $formFields.=RenderHidden("hidScanDevice",$Scanner["ScanDevice"]); $formFields.=RenderHidden("hidScanModel",$Scanner["ScanModel"]); $columns=""; $columns.=renderDiv("divColLeft",$formFields); $columns.=renderDiv("divColRight",RenderDocument($DestFile)); $columns.=RenderCommandLog(); -$columns.=RenderDiv("divLoadBack",RenderDiv("divLoading",MultiLang::GetString("Loading"),"divLoading"),"divLoadBack","display:none;"); +$columns.=RenderDiv("divLoadBack", + RenderDiv("divLoading", + MultiLang::GetString("Loading"). + RenderDiv("divProgressCont",RenderDiv("divProgressBar","","divProgressBar"),"divProgressCont"), + "divLoading"), + "divLoadBack","display:none;"); echo RenderForm("frmMain",$columns); diff --git a/script.js b/script.js index d32e890..437b313 100644 --- a/script.js +++ b/script.js @@ -24,3 +24,41 @@ function Element_ToggleVisibility(element){ } } +function DropDown_GetValue(dropdown){ + return dropdown.options[dropdown.selectedIndex].value; +} + +function ShowProgressDialog(){ + var divLoadBack=GetElement("divLoadBack"); + var divLoading=GetElement("divLoading"); + + var hidScanDevice=GetElement("hidScanDevice"); + var ddlResolution=GetElement("ddlResolution"); + var ddlFormat=GetElement("ddlFormat"); + var ddlSize=GetElement("ddlSize"); + + Element_SetVisibility("divLoadBack",true); + + var keyValue= + hidScanDevice.value+"_"+ + DropDown_GetValue(ddlResolution)+"_"+ + DropDown_GetValue(ddlFormat)+"_"+ + DropDown_GetValue(ddlSize); + var startTime=new Date().getTime() / 1000; + var estimatedTime=0; + if(timings.hasOwnProperty(keyValue)){ + estimatedTime=timings[keyValue]; + } + var divProgressBar=GetElement("divProgressBar"); + + var timerFunction=function(){ + var timeNow=new Date().getTime() / 1000; + var value=(timeNow-startTime)/estimatedTime; + if(value>1.0){value=1.0;} + if(value<0){value=0;} + divProgressBar.style.width=parseInt(value*100)+"%"; + + window.setTimeout(timerFunction,300); + }; + window.setTimeout(timerFunction,300); +} diff --git a/style.css b/style.css index 00f826a..5bf0a2b 100644 --- a/style.css +++ b/style.css @@ -141,11 +141,30 @@ form{ line-height: 30px; width: 150px; text-align: center; - height: 50px; - margin: -25px auto 0px -75px; + height: 75px; + margin: -37px auto 0px -75px; background-image: url("images/loading.gif"); background-repeat: no-repeat; - background-position: 25px; + background-position: 25px 20px; +} + +.divProgressCont{ + position:absolute; + top: 40px; + left: 12px; + width: 125px; + height: 20px; + box-sizing: border-box; + border: solid 1px black; +} + +.divProgressBar{ + position:absolute; + top: 0; + left: 0; + height: 18px; + background-color: black; + box-sizing: border-box; } .width100px {