Customizing the Scanner UI

Overview of the Barcode Scanning UI

The screenshot below illustrates a full-screen barcode scanning UI. The area supplied by the host element is filled with the camera preview. Everything displayed on top of the camera preview is called the overlay.

The region of interest, where barcodes are detected, is delimited by a rectangular frame, called the viewfinder.

Styling Options

The viewfinder can be styled in the following ways:

Primary color: The color of the viewfinder rectangle and UI elements like the camera selector is set using the primaryColor property in the overlay configuration.
Corner radius: The corner radius of the viewfinder rectangle and the camera selector is set using the cornerRadius property in the overlay configuration.
Targeting line visibility: visibility of the targeting line can be toggled using the showTargetingLine property.
Targeting line active color: when a barcode is detected, the targeting line flashes briefly to a bright red. The color can be changed with the targetingLineActiveColor property.
Viewfinder border width: The border width of the viewfinder rectangle, using the viewfinderBorderWidth property.
Viewfinder corner radius: The corner radius of the viewfinder rectangle, using the viewfinderCornerRadius property.
Mask color: The color of the area outside of the viewfinder, using the maskColor property.

When a barcode is detected, and highlighting of detections is enabled (using the showDetections property), a rectangle is drawn at its location. Barcode detections can be styled in the following ways:

Fill color: The color used to fill the rectangle can be changed using the detectionFillColor property.
Border color: The color of the border surrounding the rectangle can be changed using the detectionBorderColor property.
Border width: The width of the border surrounding the rectangle can be changed using the detectionBorderWidth property.

Example 1: Yellow primary color with rounded corners

The following configuration styles the UI using a yellow colors, applies rounded corners and sets the targeting line to be bright yellow in case of a detection.

Overlay configuration snippet

const config = {
    overlay: {
        primaryColor: 'rgb(239,253,95)', // Lemon
        detectionFillColor: 'rgb(249,166,2)', // Gold
        detectionBorderColor: 'rgb(255,255,0)', // Bright yellow
        detectionBorderWidth: 2,
        targetingLineActiveColor: 'rgb(255,255,0)', // Bright yellow
        cornerRadius: 4 // rounded
    }
};

Example 2: Using a mask to emphasize the region of interest

The following configuration styles the UI using a near-white color and emphasizes the region of interest using a dark, semi-transparent mask color and a large border width for the viewfinder rectangle.

Overlay configuration snippet

const config = {
    overlay: {
        primaryColor: 'rgb(236,237,237)',  // Decorator's White
        maskColor: 'rgba(0,0,0,0.5)',
        viewfinderBorderWidth: 5,
        viewfinderCornerRadius: 20
    }
};

Hiding or Replacing the STRICH Logo

Hiding or replacing the STRICH logo is a custom add-on capability available for the Enterprise license.

Last modified: 16 December 2024