Advanced Configurations

Customize the Overlay Appearance

To customize the appearance of the overlay, you can implement a LabelCaptureBasicOverlayListener.

The method brushForLabel() is called every time a label captured and brushForField() is called for each of its fields to determine the brush for the label or field.

import { Brush, Color } from "@scandit/web-datacapture-core";

overlay.listener = {
  brushForField: (overlay, field, label) => {
    switch (field.name) {
      case "<your-barcode-field-name>":
        return new Brush(
          Color.fromRGBA(0, 255, 255, 0.5),
          Color.fromRGBA(0, 255, 255, 0.5),
          0
        );
      case "<your-expiry-date-field-name>":
        return new Brush(
          Color.fromRGBA(255, 165, 0, 0.5),
          Color.fromRGBA(255, 165, 0, 0.5),
          0
        );
      default:
        return Brush.transparent;
    }
  },
  brushForLabel: (overlay, label) => Brush.transparent,
  onLabelTapped: (overlay, label) => {
    // Handle user tap gestures on the label.
  },
};

tip

Use brush colors with transparency (alpha < 100%) to not occlude the captured barcodes or texts.