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.
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: 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.
Hiding or Replacing the STRICH Logo
Hiding or replacing the STRICH logo is a custom add-on capability available for the Enterprise license.