Zxing barcode scanner in fixed div in phonegap android application

Question

I added the zxing barcode scanner plugin successfully in my Android phonegap application here is the js code where the page shows that I can see the 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 the 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, first load the html, but in the second whole screen the barcode scanner window is covered. I want to fix this scan area in the 'scanarea' DIV. But I don’t know how to fix this in a certain area of ​​the div, and when I click the button, the click will execute and read the barcode.

scan window

html page

need to show like this:

Answer 1

The barcode scan screen is implemented as an Android action that completely hides the PhoneGap web view. If you want to customize this screen, you can somehow modify its layout file .

I assume that your Focus and Scan button should trigger a manual scan (by default I should recognize the first barcode), so you may need to change the activity implementation to enable the handler for this button.

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