Get Started With SparkScan

What is SparkScan?

SparkScan is a camera-based solution for high-speed single scanning and scan-intensive workflows. It includes an out-of-the-box user interface (UI) optimized for efficiency and a frictionless worker experience.

UI Overview

Mini preview: A small camera preview screen giving a visual confirmation while aiming at the code. This is placed in the top right corner, where the phone camera is located
Trigger button: A large-sized floating button that users can drag up and down to position it in the most convenient place. This eliminates the need to look at the screen to trigger scanning.
Settings Toolbar: A quick-access toolbar that includes settings to control the torch, switch to continuous scanning, enable the target mode and more.
Additional UI elements: Available for developers to use if their app logic requires displaying errors or additional feedback while scanning.

Scanning Modes Supported

Users can switch between two scanning modes depending on their scanning preference:

Default mode: Ideal for close-range scanning. This mode will display a mini camera preview to aid with aiming.
Target mode: Ideal for long-range scanning. This mode will display a big camera preview. Aim to scan barcodes at distance or when multiple barcodes are in view.

And two scanning behaviors:

Single scan: Tap to scan - the user needs to tap the scanner button to scan a barcode.
Continuous scan: Scan barcodes consecutively. The user needs to tap once to start the scanner and barcodes will be scanned without tapping before each scan.


Scanning Mode: Default. Scanning Behavior: Single Scan.	Scanning Mode: Default. Scanning Behavior: Continuous Scan	Scanning Mode: Target. Scanning Behavior: Single Scan.

Workflow Description

When SparkScan is started, the UI presents just the trigger button, collapsed on the side.
To start scanning, the user can:
- swipe to open the button, then tap on it.
- tap on the collapsed trigger button.
When the scanner is active, the mini preview becomes visible.


Swipe and tap to start the scanner.	Tap to start the scanner.

Depending on the scanning mode enabled, the workflow will behave differently:
- In Single Scan, upon scan the user will receive audio/haptic feedback confirming the scan, and the mini preview displays the scanned barcode for a small amount of time. The scanner will need to be restarted to scan a new code.
- In Continuous Scan, upon scan the user will receive audio/haptic feedback confirming the scan. The mini preview keeps showing the camera preview, ready to scan a new code.


Single Scan.	Continuous Scan.

Upon completing the scanning process (or to interact with the customer app layer), the user can tap in any area outside the trigger button and the mini preview. This collapses the scanner button back to the side, going back to the initial state.

Collapse the SparkScan UI.

SparkScan is implemented through functionality provided by SparkScanView.

Requirements

The Scandit Data Capture SDK. Check out this guide.
A valid Scandit Data Capture SDK license key including SparkScan add-on. You can sign up for a free test account at ssl.scandit.com.

Supported Devices

Runs on iOS and selected Android devices. Contact support for more details.

Supported Symbologies

SparkScan supports all of the major symbologies. The detailed list can be found here: Barcode Symbologies.

Quick Start Guide

With just a few lines of code, SparkScan’s UI and scanning modes are ready to integrate as a separate overlay on top of any application, without the need for extra development time or UI customization.

In this guide you will learn step by step how to add SparkScan to your application.

Roughly, the steps are:

Create a new Data Capture Context instance.
Configure the Spark Scan Mode.
Create the SparkScanView with the desired settings and bind it to the application’s lifecycle.
Register the listener to be informed when new barcodes are scanned and update your data whenever this event occurs.

1. Create a New Data Capture Context Instance

The first step to add capture capabilities to your application is to create a new Data Capture Context. The context expects a valid Scandit Data Capture SDK license key during construction.

const context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --");

2. Configure the SparkScan Mode

The SparkScan Mode is configured through SparkScanSettings and allows you to register one or more listeners that are informed whenever a new barcode is scanned.

For this tutorial, we will set up SparkScan for scanning EAN13 codes. Change this to the correct symbologies for your use case (for example, Code 128, Code 39…).

const settings = new SparkScanSettings();
settings.enableSymbologies([Symbology.EAN13UPCA]);

Next, create a SparkScan instance with the settings initialized in the previous step:

const sparkScan = SparkScan.forSettings(settings);

3. Setup the Spark Scan View

The SparkScan built-in user interface includes the camera preview and scanning UI elements. These guide the user through the scanning process.

The SparkScanView appearance can be customized through SparkScanViewSettings.

const viewSettings = new SparkScanViewSettings();
// setup the desired appearance settings by updating the fields in the object above

By adding a SparkScanView, the scanning interface (camera preview and scanning UI elements) will be added automatically to your application.

Add a SparkScanView to your view hierarchy:

Construct a new SparkScan view. The SparkScan view is automatically added to the provided parentView:

const sparkScanComponent = <SparkScanView
    context={context}
    sparkScan={sparkScan}
    sparkScanViewSettings={viewSettings}
/>;

Additionally, make sure to call SparkScanView.stopScanning() in your app state handling logic. You have to call this for the correct functioning of the SparkScanView.

componentWillUnmount() {
  this.sparkScanViewComponent.stopScanning();
}

handleAppStateChange = async (nextAppState) => {
    if (nextAppState.match(/inactive|background/)) {
      sparkScanView.stopScanning();
    }
}

4. Register the Listener to Be Informed When a New Barcode Is Scanned

To keep track of the barcodes that have been scanned, implement the SparkScanListener interface and register the listener to the SparkScan mode.

// Register a listener object to monitor the spark scan session.

const listener = {
  didScan: (sparkScan, session, getFrameData) => {
    // Gather the recognized barcode
    const barcode = session.newlyRecognizedBarcodes[0];

    // Handle the barcode
  },
};

sparkScan.addListener(listener);

SparkScanListener.didScan() is called when a new barcode has been scanned. This result can be retrieved from the first object in the provided barcodes list: SparkScanSession.newlyRecognizedBarcodes. Please note that this list only contains one barcode entry.

Advanced Settings

Control the Scanner through a Hardware Button

Allowing the end user to control the scanner with hardware buttons can be useful if your users typically wear gloves. It can also improve ergonomics in some workflows. SparkScan offers a built-in API to let you do this via SparkScanViewSettings.hardwareTriggerEnabled.

Trigger the Error State

You may want to introduce logic in your app to show an error message when scanning specific barcodes (e.g. barcodes already added to the list, barcodes from the wrong lot etc.). SparkScan offers a built-in error state you can easily set to trigger an error feedback prompt to the user with error message and visual feedback.

The scanner will be paused for the specified amount of time, but the user can quickly restart the scanning process by tapping the trigger button.

sparkScanView.emitFeedback(new SparkScanViewErrorFeedback("This code should not have been scanned", 6));