Adding AR Overlays

To add advanced AR overlays to a Data Capture View you can take advantage of the BarcodeTrackingAdvancedOverlay class, which provides a ready-to-use implementation for view-based AR overlays.

Using BarcodeTrackingAdvancedOverlay

As mentioned above, the advanced overlay combined with its listener offers an easy way of adding augmentations to your DataCaptureView. In this guide we will add a view above each barcode showing its content.

First of all, create a new instance of BarcodeTrackingAdvancedOverlay and add it to the DataCaptureView.

const overlay =
	Scandit.BarcodeTrackingAdvancedOverlay.withBarcodeTrackingForView(
		barcodeTracking,
		view
	);

At this point, you have two options.

• Add a BarcodeTrackingAdvancedOverlayListener to the overlay.
• Use the setters in the overlay to specify the view, anchor and offset for each barcode.

note

The second way will take priority over the first one, which means that if a view for a barcode has been set using BarcodeTrackingAdvancedOverlay.setViewForTrackedBarcode(), the function BarcodeTrackingAdvancedOverlayListener.viewForTrackedBarcode() won’t be invoked for that specific barcode.

Using BarcodeTrackingAdvancedOverlayListener

• You need to implement BarcodeTrackingAdvancedOverlayListener. This interface’s methods are invoked every time a barcode is newly tracked.
• BarcodeTrackingAdvancedOverlayListener.viewForTrackedBarcode() asks for a view to animate on top of the barcode. Returning null will show no view.
• BarcodeTrackingAdvancedOverlayListener.anchorForTrackedBarcode() asks how to anchor the view to the barcode through Anchor. Be aware that it anchors the view’s center to the anchor point. To achieve anchoring the top of the view or the bottom etc. you will have to set an offset as explained in the next point.
• BarcodeTrackingAdvancedOverlayListener.offsetForTrackedBarcode() asks for an offset that is applied on the already anchored view. This offset is expressed through a PointWithUnit.

overlay.listener = {
	viewForTrackedBarcode: (overlay, trackedBarcode) => {
		// Create and return the view you want to show for this tracked barcode. You can also return null, to have no view for this barcode.
		let element = document.createElement('span');
		element.innerText = trackedBarcode.barcode.data;
		element.style.backgroundColor = '#FFFFFFFF';
		return Scandit.TrackedBarcodeView.withHTMLElement(element, null);
	},

	anchorForTrackedBarcode: (overlay, trackedBarcode) => {
		// As we want the view to be above the barcode, we anchor the view's center to the top-center of the barcode quadrilateral.
		// Use the function 'offsetForTrackedBarcode' below to adjust the position of the view by providing an offset.
		return Scandit.Anchor.TopCenter;
	},

	offsetForTrackedBarcode: (overlay, trackedBarcode) => {
		// This is the offset that will be applied to the view.
		// You can use .fraction to give a measure relative to the view itself, the sdk will take care of transforming this into pixel size.
		// We now center horizontally and move up the view to make sure it's centered and above the barcode quadrilateral by half of the view's height.
		return new Scandit.PointWithUnit(
			new Scandit.NumberWithUnit(0, Scandit.MeasureUnit.Fraction),
			new Scandit.NumberWithUnit(-1, Scandit.MeasureUnit.Fraction)
		);
	},
};

Using the setters in the overlay

The function BarcodeTrackingListener.didUpdateSession() gives you access to a session, which contains all added, updated and removed tracked barcodes. From here you can create the view you want to display, and then call BarcodeTrackingAdvancedOverlay.setViewForTrackedBarcode(), BarcodeTrackingAdvancedOverlay.setAnchorForTrackedBarcode() and BarcodeTrackingAdvancedOverlay.setOffsetForTrackedBarcode()

didUpdateSession: (barcodeTracking, session) => {
	session.addedTrackedBarcodes.map((trackedBarcode) => {
		let element = document.createElement('span');
		element.innerText = trackedBarcode.barcode.data;
		element.style.backgroundColor = '#FFFFFFFF';
		let trackedBarcodeView = Scandit.TrackedBarcodeView.withHTMLElement(
			element,
			null
		);

		window.overlay.setViewForTrackedBarcode(trackedBarcodeView, trackedBarcode);
		window.overlay.setAnchorForTrackedBarcode(
			Scandit.Anchor.TopCenter,
			trackedBarcode
		);
		window.overlay.setOffsetForTrackedBarcode(
			new Scandit.PointWithUnit(
				new Scandit.NumberWithUnit(0, Scandit.MeasureUnit.Fraction),
				new Scandit.NumberWithUnit(-1, Scandit.MeasureUnit.Fraction)
			),
			trackedBarcode
		);
	});
};