Interface OverlayConfiguration

Overlay configuration

interface OverlayConfiguration {
    cornerRadius?: number;
    customLogoSrc?: string;
    detectionBorderColor?: string;
    detectionBorderWidth?: number;
    detectionFillColor?: string;
    filterCameras?: boolean;
    focusOnTap?: boolean;
    maskColor?: string;
    primaryColor?: string;
    showCameraSelector?: boolean;
    showDetections?: boolean;
    showFlashlight?: boolean;
    showTargetingLine?: boolean;
    targetingLineActiveColor?: string;
    viewfinderBorderWidth?: number;
    viewfinderCornerRadius?: number;
}

Properties

cornerRadius? customLogoSrc? detectionBorderColor? detectionBorderWidth? detectionFillColor? filterCameras? focusOnTap? maskColor? primaryColor? showCameraSelector? showDetections? showFlashlight? showTargetingLine? targetingLineActiveColor? viewfinderBorderWidth? viewfinderCornerRadius?

Properties

Optional cornerRadius

cornerRadius?: number

Corner radius in pixels for rectangular elements such as viewfinder and camera selector.

The allowed range of the corner radius is 0 to 8 pixels.

Default Value

0

Optional customLogoSrc

customLogoSrc?: string

Override the STRICH logo displayed in the bottom-right corner with a custom image.

The image is supplied as an absolute URL or inline as a data URL. The image should have a transparent background (WebP or PNG format). The recommended size is 140x30 pixels.

Remarks

This is a capability that is only available as a paid add-on for Enterprise licenses. Please note that attempting to hide or replace the STRICH logo by other means is a violation of the License Agreement.

Optional detectionBorderColor

detectionBorderColor?: string

Color to use for drawing a border around the area of detected barcodes. Must be specified in rgb() format, with the color components given as integers with no separating whitespace. The border will become transparent when the detection becomes stale.

Remarks

Only has an effect if OverlayConfiguration.showDetections is true.

Default Value

undefined

Optional detectionBorderWidth

detectionBorderWidth?: number

The border width in pixels to use for drawing a border around the area of detected barcodes.

Remarks

The allowed range is 0 to 4 pixels. Values outside the range are clamped.

Default Value

0

Optional detectionFillColor

detectionFillColor?: string

Color to use for filling area of detected barcodes. Must be specified in rgb() format, with the color components given as integers with no separating whitespace. The fill will become transparent when the detection becomes stale.

Remarks

Only has an effect if OverlayConfiguration.showDetections is true.

Default Value

rgb(0,0,255)

Optional filterCameras

filterCameras?: boolean

Filter cameras returned by the browser.

If set to true, only cameras that are deemed appropriate for barcode scanning will be offered in the camera selector.

Default Value

true

Optional focusOnTap

focusOnTap?: boolean

Indicate if single-tapping the overlay should attempt to trigger autofocus.

Remarks

Triggering autofocus is currently only available on Android devices.

Default Value

true

Optional maskColor

maskColor?: string

Color to use for de-emphasizing the area around the viewfinder.

The color will be used to create a mask around the viewfinder/region of interest to aid the user in focusing the camera on the barcode.

A semi-translucent dark color works best, e.g. rgba(0,0,0,0.5) would use a semi-translucent black.

Default Value

undefined

Optional primaryColor

primaryColor?: string

Color to use for drawing UI elements such as the viewfinder and camera selector. Must be specified in rgb() format, with the color components given as integers with no separating whitespace.

Default Value

rgb(255,255,255)

Optional showCameraSelector

showCameraSelector?: boolean

Indicate if the camera selector should be shown in the overlay.

Default Value

true

Optional showDetections

showDetections?: boolean

Indicate if the overlay should draw the bounding boxes of detected barcodes on top of the camera preview.

Default Value

true

Optional showFlashlight

showFlashlight?: boolean

Indicate if the flashlight toggle should be shown in the overlay.

Remarks

Flashlight functionality is not supported in some browsers.

Default Value

true

Optional showTargetingLine

showTargetingLine?: boolean

Indicate if a horizontal line should be drawn to aid in positioning 1D barcodes.

Default Value

true

Optional targetingLineActiveColor

targetingLineActiveColor?: string

Color to use for drawing the horizontal targeting line when a barcode was detected. Must be specified in rgb() format, with the color components given as integers with no separating whitespace.

Defaultvalue

rgb(255,0,0)

Optional viewfinderBorderWidth

viewfinderBorderWidth?: number

Border width in pixels of the viewfinder, the rectangle around the region of interest.

Remarks

The allowed range is 1 to 20 pixels. Values outside the range are clamped.

Default Value

1

Optional viewfinderCornerRadius

viewfinderCornerRadius?: number

Corner radius in pixels of the viewfinder, the rectangle around the region of interest.

This property applies only to the viewfinder and overrides the OverlayConfiguration.cornerRadius property.

The allowed range of the corner radius is 0 to 20 pixels.

Default Value

0

Settings

Member Visibility

Theme

On This Page

cornerRadiuscustomLogoSrcdetectionBorderColordetectionBorderWidthdetectionFillColorfilterCamerasfocusOnTapmaskColorprimaryColorshowCameraSelectorshowDetectionsshowFlashlightshowTargetingLinetargetingLineActiveColorviewfinderBorderWidthviewfinderCornerRadius