Barcode AR Overlays

To deliver more personalized visual feedback when scanning barcodes, call the enableBarcodeOverlays method on the Scan View.

Below is an example of adding fixed-sized labels as overlays to a scan view with the feature enabled:

Short example for enabling barcode overlays with text labels
  • Swift

  • Objective-C

// Initialize a scan view
let scanView = ALScanView(frame: frame, scanViewConfig: scanViewConfig)

// Enable barcode overlay feature
scanView.enableBarcodeOverlays { detectedBarcode in
  let overlayView = ALBarcodeOverlayView(config: ALOverlayConfig(anchor: .center()))
  let label = UILabel(frame: CGRect(x: 0, y: 0, width: 180, height: 25))
  label.textColor = .white
  label.text = "\(detectedBarcode.barcode.value)"
  overlayView.addSubview(label)
  return [ overlayView ]
}
// Initialize a scan view
ALScanView *scanView = [[ALScanView alloc] initWithFrame:frame scanViewConfig:scanViewConfig];

// Enable barcode overlay feature
[self.scanView enableBarcodeOverlays:^NSArray<ALBarcodeOverlayView *> * _Nonnull(ALDetectedBarcode * _Nonnull detectedBarcode) {
    ALBarcodeOverlayView *overlayView = [[ALBarcodeOverlayView alloc] initWithConfig:[[ALOverlayConfig alloc] initWithAnchor:ALOverlayAnchorConfig.center]];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 180, 25)];
    label.textColor = [UIColor whiteColor];
    label.text = detectedBarcode.barcode.value;
    [overlayView addSubview:label];
    return @[overlayView];
}];

To enable this feature in ScanView, provide a block that generates and returns ALBarcodeOverlayView instances for the SDK to use as overlays on detected barcodes. In the example, a simple text label displays the detected barcode value and is positioned centrally over the barcode.

You can initialize ALBarcodeOverlayView with an optional ALOverlayConfig object, which the SDK uses to customize the overlay view’s position and size.

This feature is currently supported only when running barcode plugins in continuous scanning mode. It also works with the multi-barcode config option.

Configuring Barcode Overlays from ScanView

The ALScanView class offers methods for enabling, configuring, and disabling barcode overlays.

Method

Description

-[ALScanView enableBarcodeOverlays:updateBlock:deleteBlock:]

Enables barcode overlays for the ScanView. Pass in three blocks: ALBarcodeOverlayCreateBlock, ALBarcodeOverlayUpdateBlock, and ALBarcodeOverlayDeleteBlock.

-[ALScanView enableBarcodeOverlays:]

Enables barcode overlays for the ScanView. Pass in a block: ALBarcodeOverlayCreateBlock.

-[ALScanView setBarcodeOverlayExpiryLength:]

Sets the maximum duration (in seconds, default 1.0) that an overlay can stay on the scan view after its last detection.

-[ALScanView disableBarcodeOverlays]

Disables barcode overlays.

Enabling Barcode Overlays

The blocks passed into -[ALScanView enableBarcodeOverlays:updateBlock:deleteBlock:] allow you to introduce user-defined code within predefined instances while a barcode plugin is running:

Enabling barcode overlays on the scan view
  • Swift

  • Objective-C

scanView.enableBarcodeOverlays({ barcode in
    let overlayViews: [ALBarcodeOverlayView] = []
    // create and customize overlay view(s)
    return overlayViews
}, update: { barcode, overlayViews in
    // can optionally call invalidate on overlay views
    // depending on barcode value (and coordinates)
}, delete: { overlayViews in
    // called when an overlay view is to be removed
    // do some clean up with associated barcode overlay
})
[self.scanView enableBarcodeOverlays:^NSArray<ALBarcodeOverlayView *> * _Nonnull(ALDetectedBarcode * _Nonnull) {
    NSMutableArray<ALBarcodeOverlayView *> *overlayViews = [NSMutableArray array];
    // create and customize overlay view(s)
    return overlayViews;
} updateBlock:^(ALDetectedBarcode * _Nonnull detectedBarcode, NSArray<ALBarcodeOverlayView *> * _Nonnull overlayViews) {
    // can optionally call invalidate on overlay views
    // depending on barcode value (and coordinates)
} deleteBlock:^(NSArray<ALBarcodeOverlayView *> * _Nonnull overlayViews) {
    // called when an overlay view is to be removed
    // do some clean up with associated barcode overlay
}];
  • ALBarcodeOverlayCreateBlock: Invoked by the SDK upon detecting a new barcode within the frame. Utilize the provided ALDetectedBarcode to generate one or more ALBarcodeOverlayView elements, which will serve as overlays for the barcode. In a multi-barcode plugin setup, this block is triggered individually for each newly detected barcode within the ScanView.

  • ALBarcodeOverlayUpdateBlock: Triggered when a barcode with an existing overlay (or multiple overlays) reports updated coordinates. You can configure this block to discard the overlay view and redraw it with the new coordinates by invoking the invalidate method.

  • ALBarcodeOverlayDeleteBlock: Triggered when a detected barcode surpasses the specified timeout period, resulting in its overlay being removed. This block can be used to carry out any necessary cleanup actions related to the disposal of the overlay view.

Once ALBarcodeOverlayView instances are initialized and added to the ScanView via ALBarcodeOverlayCreateBlock, they must not be directly altered by application code. After enableBarcodeOverlays is called, the SDK assumes full control over the lifecycle of these objects, including their removal from the view hierarchy.
These blocks may be invoked on a per-frame basis, so it’s crucial to avoid executing lengthy or complex operations within them, as this could severely affect the scanning performance.

Here is a summary of the blocks used in enableBarcodeOverlays:

Block Name

Parameter(s)

Return Value

ALBarcodeOverlayCreateBlock

ALDetectedBarcode

An array of ALBarcodeOverlayView

ALBarcodeOverlayUpdateBlock

ALDetectedBarcode, array of ALBarcodeOverlayView

void

ALBarcodeOverlayDeleteBlock

Array of ALBarcodeOverlayView

void

In -[ALScanView enableBarcodeOverlays:updateBlock:deleteBlock:], only the first parameter (with type ALBarcodeOverlayCreateBlock) can be non-nil.

Setting Overlay Timeouts

The duration for which a barcode overlay remains on the scan view after it is no longer detectable by the plugin can be configured.Use the -setBarcodeOverlayExpiryLength method from ALScanView, specifying a time in seconds between 0.5 and 5.0. If not set explicitly, the default duration is 1 second.

Setting barcode overlay expiry duration
  • Swift

  • Objective-C

scanView.setBarcodeOverlayExpiryLength(1.5)
[scanView setBarcodeOverlayExpiryLength:1.5];

Disabling Barcode Overlays

Call the -disableBarcodeOverlays method on a ScanView to remove any existing overlays from it and prevent additional overlays from being created.

Disabling barcode overlays
  • Swift

  • Objective-C

scanView.disableBarcodeOverlays()
[scanView disableBarcodeOverlays];

ALBarcodeOverlayView

A UIView that acts as a persistent overlay for a detected barcode in the Scan View, as long as the barcode is visible.

When provided in the block to -[ALScanView enableBarcodeOverlays:], the Scan View adds the view, positions it over the barcode, and completely takes over the management of its lifecycle.

ALBarcodeOverlayView
  • Swift

  • Objective-C

/// A UIView that serves as the overlay to barcodes.
open class ALBarcodeOverlayView {

    /// Initializes an ALBarcodeOverlayView.
    public init!()

    /// Causes the view to be marked for deletion, allowing you to define
    /// a different view in the next update cycle.
    public init!(config: ALOverlayConfig!)

    /// Causes the view to be marked for deletion, allowing you to define
    /// a different view in the next update cycle.
    func invalidate()
}
/// A UIView that serves as the overlay to barcodes.
@interface ALBarcodeOverlayView : UIView

/// Initializes an ALBarcodeOverlayView.
- (instancetype)init;

/// Initializes an ALBarcodeOverlayView with a configuration.
- (instancetype)initWithConfig:(ALOverlayConfig *)config;

/// Causes the view to be marked for deletion, allowing you to define
/// a different view in the next update cycle.
- (void)invalidate;

@end

To create a visually complex overlay, use ALBarcodeOverlayView as the parent of a view hierarchy. The SDK automatically manages the position and size of ALBarcodeOverlayView. To customize its layout, use ALOverlayConfig, which is available as a parameter in its initializer.

Inside a ALBarcodeOverlayCreateBlock
  • Swift

  • Objective-C

// inside a ALBarcodeOverlayCreateBlock

let overlayConfig = ALOverlayConfig(anchor: .topCenter())

let overlayView = ALBarcodeOverlayView(config: overlayConfig)

let imageVw = UIImageView(image: detectedBarcode.barcodeImage())
imageVw.contentMode = .scaleAspectFit
overlayView.addSubview(imageVw)
imageVw.translatesAutoresizingMaskIntoConstraints = false

let label = UILabel()
label.backgroundColor = .white
label.textAlignment = .center
label.numberOfLines = 0
label.font = UIFont.boldSystemFont(ofSize: 14)
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "\(detectedBarcode.barcode.value)"

overlayView.addSubview(label)

// specify the Autolayout constraints of the label and image view within
// ALBarcodeOverlayView
// NOTE: setting frames for the subviews manually is also still possible

NSLayoutConstraint.activate([
    imageVw.centerXAnchor.constraint(equalTo: overlayView.centerXAnchor),
    imageVw.topAnchor.constraint(equalTo: overlayView.topAnchor),
    imageVw.leadingAnchor.constraint(equalTo: overlayView.leadingAnchor),
    imageVw.heightAnchor.constraint(lessThanOrEqualToConstant: 150),

    label.topAnchor.constraint(equalTo: imageVw.bottomAnchor),
    label.bottomAnchor.constraint(equalTo: overlayView.bottomAnchor),
    label.leadingAnchor.constraint(equalTo: overlayView.leadingAnchor),
    label.trailingAnchor.constraint(equalTo: overlayView.trailingAnchor),
    label.heightAnchor.constraint(lessThanOrEqualToConstant: 30)
])

return [ overlayView ]
// Inside a ALBarcodeOverlayCreateBlock

ALOverlayConfig *overlayConfig = [[ALOverlayConfig alloc] initWithAnchor:ALOverlayAnchorConfig.topCenter];

ALBarcodeOverlayView *overlayView = [[ALBarcodeOverlayView alloc] initWithConfig:overlayConfig];

UIImageView *imageVw = [[UIImageView alloc] initWithImage:[detectedBarcode barcodeImage]];
imageVw.contentMode = UIViewContentModeScaleAspectFit;
[overlayView addSubview:imageVw];
imageVw.translatesAutoresizingMaskIntoConstraints = NO;

UILabel *label = [[UILabel alloc] init];
label.backgroundColor = [UIColor whiteColor];
label.textAlignment = NSTextAlignmentCenter;
label.numberOfLines = 0;
label.font = [UIFont boldSystemFontOfSize:14];
label.translatesAutoresizingMaskIntoConstraints = NO;
label.text = [NSString stringWithFormat:@"%@", detectedBarcode.barcode.value];

[overlayView addSubview:label];

// Specify the Autolayout constraints of the label and image view within
// ALBarcodeOverlayView
// NOTE: setting frames for the subviews manually is also still possible

[NSLayoutConstraint activateConstraints:@[
    [imageVw.centerXAnchor constraintEqualToAnchor:overlayView.centerXAnchor],
    [imageVw.topAnchor constraintEqualToAnchor:overlayView.topAnchor],
    [imageVw.leadingAnchor constraintEqualToAnchor:overlayView.leadingAnchor],
    [imageVw.heightAnchor constraintLessThanOrEqualToConstant:150],

    [label.topAnchor constraintEqualToAnchor:imageVw.bottomAnchor],
    [label.bottomAnchor constraintEqualToAnchor:overlayView.bottomAnchor],
    [label.leadingAnchor constraintEqualToAnchor:overlayView.leadingAnchor],
    [label.trailingAnchor constraintEqualToAnchor:overlayView.trailingAnchor],
    [label.heightAnchor constraintLessThanOrEqualToConstant:30]
]];

return @[overlayView];

Methods in ALBarcodeOverlayView

invalidate()

Removes the view from the overlay hierarchy, enabling you to set a different overlay view in its place.

Invalidate an ALBarcodeOverlayView
  • Swift

  • Objective-C

func invalidate()
- (void)invalidate;

You can call invalidate() on an overlay view within an ALBarcodeOverlayUpdateBlock to replace the view based on barcode characteristics (e.g., changing the overlay view type when the barcode size exceeds a threshold).Once removed, the ALBarcodeOverlayCreateBlock is immediately called to create the appropriate overlay view.

ALDetectedBarcode

The class corresponding to this class on Android is called VisibleBarcode.

A class containing general information about a barcode detected by the scanner, which can be associated with an overlay view.

An ALDetectedBarcode object is provided in the ScanView enableBarcodeOverlays block parameters, specifically with ALBarcodeOverlayCreateBlock, which is called by ALScanView whenever a barcode is detected for the first time and needs an overlay view.

ALDetectedBarcode
  • Swift

  • Objective-C

/// A barcode object scanned by the plugin.
open class ALDetectedBarcode : NSObject {

    /// The object corresponding to the barcode detected.
    var barcode: ALBarcode { get }

    /// The CGRect of the scanned barcode within the frame at the time
    /// of its detection.
    var enclosingCGRect: CGRect { get }

    /// Creates and returns a cropped image containing the barcode.
    func barcodeImage() -> Any!
}
/// A barcode object scanned by the plugin.
@interface ALDetectedBarcode : NSObject

/// The object corresponding to the barcode detected.
@property (nonatomic, strong, readonly) ALBarcode *barcode;

/// The CGRect of the scanned barcode within the frame at the time
/// of its detection.
@property (nonatomic, assign, readonly) CGRect enclosingCGRect;

/// Creates and returns a cropped image containing the barcode.
- (id)barcodeImage;

@end

Methods and properties

barcode: ALBarcode

Returns the object containing the decoded barcode value, x-y coordinates, and type (barcode symbology).For more details, refer to the ALBarcode documentation.

enclosingCGRect: CGRect

Returns the tightest possible CGRect containing the barcode corners at the time of detection.

barcodeImage() : UIImage?

Returns a cropped bitmap UIImage containing the barcode.

ALOverlayConfig

An object used to configure the positioning and sizing of overlay views.Pass this type of object to the initializers of ALBarcodeOverlayView.

Defining an ALBarcodeOverlayView with an ALOverlayConfig
  • Swift

  • Objective-C

let overlayConfig = ALOverlayConfig(anchor: .topCenter(),
                                    offsetX: nil,
                                    offsetY: .init(scaleType: .fixedPx(), scaleValue: 15),
                                    sizeX: .init(scaleType: .overlay(), scaleValue: 1.5),
                                    sizeY: .init(scaleType: .keepRatio(), scaleValue: 0.75))

let overlayView = ALBarcodeOverlayView(config: overlayConfig)
// ...
ALOverlayConfig *overlayConfig = [[ALOverlayConfig alloc] initWithAnchor:ALOverlayAnchorConfig.topCenter
                                                                 offsetX:nil
                                                                 offsetY:[[ALScaleValue alloc] initWithScaleType:ALScaleTypeConfig.fixedPx scaleValue:15]
                                                                 sizeX:[[ALScaleValue alloc] initWithScaleType:ALScaleTypeConfig.overlay scaleValue:1.5]
                                                                 sizeY:[[ALScaleValue alloc] initWithScaleType:ALScaleTypeConfig.keepRatio scaleValue:0.75]];

ALBarcodeOverlayView *overlayView = [[ALBarcodeOverlayView alloc] initWithConfig:overlayConfig];
// ...

The overlayConfig above:

  • Positions the overlay above the barcode, centered horizontally (anchor: .topCenter()).

  • Does not introduce an additional x-offset (offsetX: nil).

  • Adds a 15px margin above the barcode (offsetY: .init(scaleType: .fixedPx(), scaleValue: 15)).

  • Sets the width to 1.5 times the width of the barcode’s enclosing rectangle (sizeX: .init(scaleType: .overlay(), scaleValue: 1.5)).

  • Sets the height to 0.75 times the width of the overlay (sizeY: .init(scaleType: .keepRatio(), scaleValue: 0.75)).

Methods and properties

anchor: ALOverlayAnchorConfig

Use this to set the anchor point of a detected barcode relative to its ALBarcodeOverlayView, determining the overlay view’s initial position within the barcode.

Value

ALOverlayAnchorConfig.topLeft()

ALOverlayAnchorConfig.topCenter()

ALOverlayAnchorConfig.topRight()

ALOverlayAnchorConfig.centerLeft()

ALOverlayAnchorConfig.center()

ALOverlayAnchorConfig.centerRight()

ALOverlayAnchorConfig.bottomLeft()

ALOverlayAnchorConfig.bottomCenter()

ALOverlayAnchorConfig.bottomRight()

If not specified, the default anchor will be ALOverlayAnchorConfig.center().

sizeDimension: ALOverlayDimensionConfig

Controls the visible size of the ALBarcodeOverlayView using various methods from ALOverlayDimensionConfig. For example, you can set the overlay size to be a multiple of the detected barcode size.

By default, the overlay’s size matches the barcode’s size (1:1).

offsetDimension: ALOverlayDimensionConfig

Specifies the desired offset of an ALBarcodeOverlayView from the anchor point of a detected barcode. The default value is a null offset.

The scale values in offsetDimension consider the barcode and its anchor point. Non-negative values push the overlay view away from the barcode, while negative values pull the overlay view towards the barcode.

ALOverlayDimensionConfig

Represents x- and y-axis values for an overlay dimension, quantifying size and offset scale information for an ALOverlayConfig.

scaleX: ALOverlayScaleConfig

Scale element for the x-axis.

scaleY: ALOverlayScaleConfig

Scale element for the y-axis.

ALOverlayScaleConfig

Contains scale information for a single axis.

scaleValue: CGFloat

A floating-point quantity used with scaleType for positioning or sizing overlays.

scaleType: ALOverlayScaleTypeConfig

Forms the basic unit component of the scale.See ALOverlayScaleTypeConfig.

ALOverlayScaleTypeConfig

An enum-like class containing possible modes for expressing size or offset values for overlays.

Value

Description

ALOverlayScaleTypeConfig.none()

No offset or size modifier (the scale value is ignored).

ALOverlayScaleTypeConfig.overlay()

The scale value is interpreted as a multiplier on barcode size for that axis.

ALOverlayScaleTypeConfig.fixedPx()

A fixed amount in points in the view coordinate space.

ALOverlayScaleTypeConfig.keepRatio()

Maintain ratio with another dimension. See below for discussion.

ALOverlayScaleTypeConfig.keepRatio()

ALOverlayScaleTypeConfig.keepRatio() has different meanings based on its usage:

For size dimension:

The scale value is treated as a size multiplier for the overlay’s other axis. For example, a scale value of 0.5 in the scaleX dimension config sets the overlay’s width to be half of its evaluated height.

You cannot use keepRatio for both x- and y- axes simultaneously with the size dimension.

For offset dimension:

The scale value representing the offset is treated as a multiplier to the overlay’s own size dimension for the given axis. For instance, an offset value of 2.0 for the y-axis pushes the overlay view away from the barcode’s anchor point by twice the overlay’s evaluated height.