Wednesday, July 18, 2012

Scan line indicator for ZBar overlays

Zbar is a great tool but I often struggle with adding intuitive graphics to the overlay screens in order to clue-in the users to the fact that scanning has already begun in video mode and they just need to point their camera at a barcode. To that end, I've decided that a red colored line dragging up and down on the screen is a great way to get the point across. And the code applies to any scanning framework that lets you mixin an overlay, not just ZBar.
- (UIView *) loadCameraOverlayView
{
NSString *nibName = @"CameraOverlayView";
NSArray *loadedObjects = [[NSBundle mainBundle] loadNibNamed:nibName owner:nil options:nil];
UIView *overlayView = [loadedObjects lastObject];
overlayView.backgroundColor = [UIColor clearColor];
UIImageView *imageView = (UIImageView*)[overlayView viewWithTag:2];
UIImage *image = [UIImage imageNamed:"red_neon_line_320x10.png"];
imageView.image = image;
[UIView animateWithDuration:1.5
delay:0.0
options:(UIViewAnimationOptionRepeat |
UIViewAnimationOptionAutoreverse |
UIViewAnimationOptionAllowUserInteraction)
animations:^{
imageView.center = CGPointMake(imageView.center.x, imageView.center.y + 280);
}
completion:^(BOOL finished){
}
];
//...
}
view raw gistfile1.m hosted with ❤ by GitHub