How to change barcode scanner overlay img when scanning?

HonLuk · April 11, 2017, 8:13am

barcode-scanner will show a background when scanning. but the green square with red line on ios looks so ugly. anyone know how to replace it use a png image ?

Sujan12 · April 11, 2017, 8:52am

Please provide a link to the version of the “barcode scanner” you are using. Ionic Native? Which plugin? Which version of the plugin?

HonLuk · April 11, 2017, 9:22am

"phonegap-plugin-barcodescanner" : "6.0.6",
"@ionic-native/barcode-scanner": "3.4.4",
ionic-angular:2.2.0

sorry~ i forgot

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Sujan12 · April 11, 2017, 9:33am

So https://ionicframework.com/docs/native/barcode-scanner/ and https://github.com/phonegap/phonegap-plugin-barcodescanner.

From how I know the plugin there is now way to customize the design of the scan view. You would have to fork the plugin and edit https://github.com/phonegap/phonegap-plugin-barcodescanner/blob/master/src/ios/scannerOverlay.xib

HonLuk · April 12, 2017, 1:28am

yeah,I have found this file, but after opening it, I am very confused。
This page is not the same as what I see on the device

Sujan12 · April 12, 2017, 9:18am

Yeah, probably done in code - I don’t know enough Obj-C to be helpful here.

But I found this:

github.com

phonegap/phonegap-plugin-barcodescanner/blob/master/src/ios/CDVBarcodeScanner.mm#L171


if (command.arguments.count == 0) {
  options = [NSDictionary dictionary];
} else {
  options = command.arguments[0];
}


BOOL preferFrontCamera = [options[@"preferFrontCamera"] boolValue];
BOOL showFlipCameraButton = [options[@"showFlipCameraButton"] boolValue];
BOOL showTorchButton = [options[@"showTorchButton"] boolValue];
BOOL disableAnimations = [options[@"disableAnimations"] boolValue];
BOOL disableSuccessBeep = [options[@"disableSuccessBeep"] boolValue];


// We allow the user to define an alternate xib file for loading the overlay.
NSString *overlayXib = options[@"overlayXib"];


capabilityError = [self isScanNotPossible];
if (capabilityError) {
    [self returnError:capabilityError callback:callback];
    return;
} else if ([self notHasPermission]) {
    NSString * error = NSLocalizedString(@"Access to the camera has been prohibited; please enable it in the Settings app to continue.",nil);

HonLuk · April 13, 2017, 3:07am

thank,I’ve done it~,it looks better now.

Sujan12 · April 13, 2017, 6:45am

Uh tell us how you did it. Can you show some code?

HonLuk · April 18, 2017, 3:11am

u can find code from my github
add two file src/ios/CDCoverView.h and src/ios/CDCoverView.m

create overlay :
change CDVBarcodeScanner.mm to put overlay form CDCoverView(see here)

change middle box style:
see line 1083 - 1124.
The main code to change middle red line (see here);
The main code to change green box (see here);

anon22300522 · July 18, 2017, 2:45pm

@HonLuk
PLEASE give us a tutorial how to add a custom scanner overlay!
I know wo many people that would PAY for it in Ionic.
The best also would be that we could “stream” the Scanner to a View. Like Snapchat does. In Example.
Just sayin.
But please provide us a good tutorial for Ionic 2 or 3 how we can change that overlay and add our functions and buttons.

Thanks

HonLuk · August 28, 2017, 8:16am

the scanner overlay write by native code(oc & java)
if u want change it by yourself maybe need to rewrite the part of overlay in the plugin.
sorry cant help u. but u can find code from the plugins and change overlay to what u want.
thank.

divya1993 · December 27, 2019, 7:01am

Could not find the github link … Can you please share the latest link?

o8thug · January 3, 2020, 7:05am

so we can’t do anything in XIB for customising the UIview ,should everything be done in obj c?