Phonegap-plugin-barcodescanner: Color of scan frame

Created on 23 Nov 2015  路  4Comments  路  Source: phonegap/phonegap-plugin-barcodescanner

Currently on IOS there is a green and red frame that indicates where to focus the scanner. Can these colors be customized. ?

enhancement help wanted

Most helpful comment

I found out the solution..
if you go into /{ProjectFolder}/platforms/ios/{AppName}/Plugins/phonegap-plugin-barcodescanner/CDVBarcodeScanner.mm

you can customize the UI of green box and red line.
almost at the end of the code, you see this:

`#define RETICLE_SIZE 500.0f

define RETICLE_WIDTH 5.0f

define RETICLE_OFFSET 60.0f

define RETICLE_ALPHA 0.4f

//-------------------------------------------------------------------------
// builds the green box and red line
//-------------------------------------------------------------------------

  • (UIImage_)buildReticleImage {
    UIImage_ result;
    UIGraphicsBeginImageContext(CGSizeMake(RETICLE_SIZE, RETICLE_SIZE));
    CGContextRef context = UIGraphicsGetCurrentContext();

if (self.processor.is1D) {
UIColor* color = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:RETICLE_ALPHA];
CGContextSetStrokeColorWithColor(context, color.CGColor);
CGContextSetLineWidth(context, 0.5_RETICLE_WIDTH);
CGContextBeginPath(context);
CGFloat lineOffset = RETICLE_OFFSET+(0.5_RETICLE_WIDTH);
CGContextMoveToPoint(context, lineOffset, RETICLE_SIZE/2);
CGContextAddLineToPoint(context, RETICLE_SIZE-lineOffset, 0.5*RETICLE_SIZE);
CGContextStrokePath(context);
}

if (self.processor.is2D) {
UIColor* color = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:RETICLE_ALPHA];
CGContextSetStrokeColorWithColor(context, color.CGColor);
CGContextSetLineWidth(context, RETICLE_WIDTH);
CGContextStrokeRect(context,
CGRectMake(
RETICLE_OFFSET,
RETICLE_OFFSET,
RETICLE_SIZE-2_RETICLE_OFFSET,
RETICLE_SIZE-2_RETICLE_OFFSET
)
);
}

result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return result;
}
`

I already edited a little bit, and I got a beautiful white box and slimmer red line.

All 4 comments

It would be really great to be able to customise the color/size of the overlay frame as well as the text prompt ("Place a barcode inside the viewfinder rectangle to scan it")._my app is meant only to scan qrcodes

I found out the solution..
if you go into /{ProjectFolder}/platforms/ios/{AppName}/Plugins/phonegap-plugin-barcodescanner/CDVBarcodeScanner.mm

you can customize the UI of green box and red line.
almost at the end of the code, you see this:

`#define RETICLE_SIZE 500.0f

define RETICLE_WIDTH 5.0f

define RETICLE_OFFSET 60.0f

define RETICLE_ALPHA 0.4f

//-------------------------------------------------------------------------
// builds the green box and red line
//-------------------------------------------------------------------------

  • (UIImage_)buildReticleImage {
    UIImage_ result;
    UIGraphicsBeginImageContext(CGSizeMake(RETICLE_SIZE, RETICLE_SIZE));
    CGContextRef context = UIGraphicsGetCurrentContext();

if (self.processor.is1D) {
UIColor* color = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:RETICLE_ALPHA];
CGContextSetStrokeColorWithColor(context, color.CGColor);
CGContextSetLineWidth(context, 0.5_RETICLE_WIDTH);
CGContextBeginPath(context);
CGFloat lineOffset = RETICLE_OFFSET+(0.5_RETICLE_WIDTH);
CGContextMoveToPoint(context, lineOffset, RETICLE_SIZE/2);
CGContextAddLineToPoint(context, RETICLE_SIZE-lineOffset, 0.5*RETICLE_SIZE);
CGContextStrokePath(context);
}

if (self.processor.is2D) {
UIColor* color = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:RETICLE_ALPHA];
CGContextSetStrokeColorWithColor(context, color.CGColor);
CGContextSetLineWidth(context, RETICLE_WIDTH);
CGContextStrokeRect(context,
CGRectMake(
RETICLE_OFFSET,
RETICLE_OFFSET,
RETICLE_SIZE-2_RETICLE_OFFSET,
RETICLE_SIZE-2_RETICLE_OFFSET
)
);
}

result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return result;
}
`

I already edited a little bit, and I got a beautiful white box and slimmer red line.

is it possible to increase the width of the box ?

I think so.. why don't you change RETICLE_SIZE?
first parameter for CGSizeMake() and third parameter for CGRectMake() are both width, so you should play with those!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mrbinr picture mrbinr  路  5Comments

SunboX picture SunboX  路  9Comments

jrobichaud picture jrobichaud  路  9Comments

IYABAO picture IYABAO  路  7Comments

thomas-tran picture thomas-tran  路  9Comments