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 listed here: Barcode Symbologies except DotCode, MaxiCode and postal codes (KIX, RM4SCC, LAPA 4SC and USPS Intelligent Mail).

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.

DataCaptureContext dataCaptureContext = 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…).

SparkScanSettings settings = new SparkScanSettings();
HashSet<Symbology> symbologies = new HashSet<Symbology>()
{
    Symbology.Ean13Upca
};
settings.EnableSymbologies(symbologies);

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

SparkScan sparkScan = new SparkScan(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.

SparkScanViewSettings 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 should be added as the last item to AbsoluteLayout or RelativeLayout layouts, to make sure other UI components are visible.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:scandit="clr-namespace:Scandit.DataCapture.Barcode.Spark.UI.Unified;assembly=ScanditBarcodeCaptureUnified">
  <ContentPage.Content>
    <AbsoluteLayout>
      <!-- Your other UI components comes here before SparkScanView -->
      <scandit:SparkScanView
        x:Name="SparkScanView"
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="All"
        DataCaptureContext="{Binding DataCaptureContext}"
        SparkScan="{Binding SparkScan}"
        SparkScanViewSettings="{Binding ViewSettings}">
      </scandit:SparkScanView>
    </AbsoluteLayout>
  </ContentPage.Content>
</ContentPage>

Additionally, make sure to call SparkScanView.OnAppearing() and SparkScanView.OnDisappearing() in your Page.OnAppearing and Page.OnDisappearing callbacks, to make sure that start up time is optimal and scanning is stopped when the app is going in the background.

protected override void OnAppearing()
{
    base.OnAppearing();
    this.SparkScanView.OnAppearing();
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
    this.SparkScanView.OnDisappearing();
}

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 ISparkScanListener interface and register the listener to the SparkScan mode.

// Register self as a listener to monitor the spark scan session.
sparkScan.AddListener(this);

ISparkScanListener.OnBarcodeScanned() 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. When a barcode is scanned, it is possible to emit a sound and a visual feedback via SparkScanView.EmitFeedback().

public void OnBarcodeScanned(SparkScan sparkScan, SparkScanSession session, IFrameData? data)
{
    if (session.NewlyRecognizedBarcodes.Count == 0)
    {
        return;
    }

    // Gather the recognized barcode
    Barcode barcode = session.NewlyRecognizedBarcodes[0];

    // This method is invoked from a recognition internal thread.
    // Run the specified action in the UI thread to update the internal barcode list.
    Device.InvokeOnMainThreadAsync(() =>
    {
        // Update the internal list and the UI with the barcode retrieved above
        this.latestBarcode = barcode;

        // Emit sound and vibration feedback
        this.sparkScanView.EmitFeedback(new SparkScanViewSuccessFeedback());
    });
}

Alternatively to register ISparkScanListener interface it is possible to subscribe to corresponding events. For example:

sparkScan.BarcodeScanned += (object sender, SparkScanEventArgs args) =>
{
    if (args.Session.NewlyRecognizedBarcodes.Count == 0)
    {
        return;
    }

    // Gather the recognized barcode
    Barcode barcode = args.Session.NewlyRecognizedBarcodes[0];

    // This method is invoked from a recognition internal thread.
    // Run the specified action in the UI thread to update the internal barcode list.
    Device.InvokeOnMainThreadAsync(() =>
    {
        // Update the internal list and the UI with the barcode retrieved above
        this.latestBarcode = barcode;

        // Emit sound and vibration feedback
        this.sparkScanView.EmitFeedback(new SparkScanViewSuccessFeedback());
    });
}

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.

You can specify the hardware button that will react to the clicks via SparkScanViewSettings.HardwareTriggerKeyCode

Note

This feature is only available on devices with api >= 28. Whether a device supports this can be checked at runtime with the SparkScanView.HardwareTriggerSupported flag.

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(message: "This code should not have been scanned", resumeCapturingDelay: TimeSpan.FromSeconds(60)));