zxing barcode scanner in a fixed div in phonegap android app

Question

I have added zxing barcode scanner plugin successfully in my android phonegap app here is js code where on page show I am able to see barcode scanner screen.

  $('#scanpage').live('pageshow', function (event, ui) {
    //navigator.notification.alert("Search page");

    window.plugins.barcodeScanner.scan( function(result) {
        //navigator.notification.alert("We got a barcode\n" +   "Result: " + result.text + "\n" +"Format: " + result.format + "\n" +
            //    "Cancelled: " + result.cancelled);
         }, function(error) {
        navigator.notification.alert("Scanning failed: " + error);
    }); 

});

here is html5 page code

div id="scanpage" data-role="page">
<div data-role="header" class="pageheader">

<div class="height30" style="padding-right:2%;">
 <div class="back" style="margin-right:2%;"><a href="#homepage">Back</a></div>
<div class="logo2" ><a href="#"  ><img src="images/scan.png" style="padding-top:12px;" alt="Scan Code" /></a>
</div>
 </div>
 </div> 

<div data-role="content"  class="wrapper" style="width:100%">


 <div style="background-color:#000000;" >
 <div style="height:400px;" id="scanarea"></div>


 <input name="" type="button" class="button" value="Focus and Scan" data-role="none"   />

  </div><!-- inner div-->


</div>  
   </div> <!-- end SCAN PAGE -->

BUT how it works, when I open the page firstly load html but in second whole screen is covered with bar-code scanner window I want to fix this scan area in a DIV 'scanarea' . But don't know how to fix it in certain div area and on button click scanning will perform and read the barcode.

scan window

html page

need to show like this

Answer 1

The barcode scanning screen is implemented as Android activity which hides PhoneGap's web view completely. If you want to customize this screen, you may want to change its layout file somehow.

I assume that your button "Focus and scan" should trigger a manual scan (the default is to recognize the first barcode, I think) – therefore you may have to change the activity implementation to include a handler for that button.

See also Simon Mac Donald's blog (he seems to be developing the barcode scanning plugin on Android) and this answer (which is exactly what I wrote above, snap :P).