diff --git a/docs/partials/get-started/_create-data-capture-context-react-native.mdx b/docs/partials/get-started/_create-data-capture-context-react-native.mdx index f56c7a71..dc2365f3 100644 --- a/docs/partials/get-started/_create-data-capture-context-react-native.mdx +++ b/docs/partials/get-started/_create-data-capture-context-react-native.mdx @@ -1,63 +1,13 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -The first step to enable any data capture mode is to create a new [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The `DataCaptureContext` handles licensing and a valid Scandit Data Capture SDK license key must be passed during initialization to activate scanning. +The first step to enable any data capture mode is to initialize the [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. :::tip If an error message appears on screen after initialization, review the [Context Status Codes](https://docs.scandit.com/data-capture-sdk/react-native/core/api/context-status.html#status-codes) to learn more about the specific reason. ::: -If the app uses only a single scanning mode, create a single `DataCaptureContext` within the scanner component. - - - - ```ts - const context = useMemo(() => { - return DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); - }, []); - ``` - - - ```js - const context = useMemo(() => { - return DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); - }, []); - ``` - - - -If the app uses multiple scanning modes, create the `DataCaptureContext` as a singleton instance and import it into each scanner component. - - - - ```ts - import { DataCaptureContext } from 'scandit-react-native-datacapture-core'; - - DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); - - export default DataCaptureContext.instance; - ``` - ```ts - import dataCaptureContext from 'path/to/DataCaptureContext' - ``` - - - ```js - import { DataCaptureContext } from 'scandit-react-native-datacapture-core'; - - DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); - - export default DataCaptureContext.instance; - ``` +```ts +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +``` - ```js - import dataCaptureContext from 'path/to/DataCaptureContext' - ``` - - +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: \ No newline at end of file diff --git a/docs/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md b/docs/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md index ce70efa0..c870f650 100644 --- a/docs/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md +++ b/docs/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md @@ -23,8 +23,8 @@ import EnableSymbologies from '../../../partials/configure-symbologies/_enable-s The following lines of code show you how to enable scanning Code 128 codes for barcode capture: ```js -const settings = new Scandit.BarcodeCaptureSettings(); -settings.enableSymbology(Scandit.Symbology.Code128, true); +const settings = new BarcodeCaptureSettings(); +settings.enableSymbology(Symbology.Code128, true); ``` import CapturePresents from '../../../partials/configure-symbologies/_capture-presents.mdx' @@ -42,16 +42,8 @@ If you want to read codes that are shorter/longer than the specified default ran The below lines of code show how to change the active symbol count for Code 128 to read codes with 6, 7 and 8 symbols. ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code128 -); -symbologySettings.activeSymbolCounts = [6, 7, 8]; - -const settings = new ScanditBarcode.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - ScanditBarcode.Symbology.Code128 -); +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code128); symbologySettings.activeSymbolCounts = [6, 7, 8]; ``` @@ -68,10 +60,8 @@ This is not possible for all symbologies as it could lead to false reads when th When you enable a symbology as described above, only dark-on-bright codes are enabled (see [SymbologySettings.isEnabled](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#property-scandit.datacapture.barcode.SymbologySettings.IsEnabled 'SymbologySettings.isEnabled property')). When you also want to read bright-on-dark codes, color-inverted reading for that symbology must also be enabled (see [SymbologySettings.isColorInvertedEnabled](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#property-scandit.datacapture.barcode.SymbologySettings.IsColorInvertedEnabled)): ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code128 -); +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code128); symbologySettings.isColorInvertedEnabled = true; ``` @@ -85,11 +75,9 @@ You can enforce a specific checksum by setting it through [SymbologySettings.checksums](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#property-scandit.datacapture.barcode.SymbologySettings.Checksums): ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code39 -); -symbologySettings.checksums = [Scandit.Checksum.Mod43]; +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code39); +symbologySettings.checksums = [Checksum.Mod43]; ``` ## Enable Symbology-Specific Extensions @@ -103,10 +91,8 @@ To enable/disable a symbology extension, use [SymbologySettings.setExtensionEnab The following code shows how to enable the full ASCII extension for Code 39. ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code39 -); +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code39); symbologySettings.setExtensionEnabled('full_ascii', true); ``` diff --git a/docs/sdks/capacitor/barcode-capture/get-started.md b/docs/sdks/capacitor/barcode-capture/get-started.md index 0036945d..79f23a9b 100644 --- a/docs/sdks/capacitor/barcode-capture/get-started.md +++ b/docs/sdks/capacitor/barcode-capture/get-started.md @@ -15,7 +15,7 @@ In this guide you will learn step-by-step how to add Barcode Capture to your app The general steps are: - Include the ScanditBarcodeCapture library and its dependencies to your project, if any. -- Create a new [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) instance, initialized with your license key. +- Initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with your license key. - Create a [barcode capture settings](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-capture-settings.html#class-scandit.datacapture.barcode.BarcodeCaptureSettings) and enable the [barcode symbologies](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology) you want to read in your application. - Create a new [barcode capture mode](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-capture.html#class-scandit.datacapture.barcode.BarcodeCapture) instance and initialize it with the settings created above. - Register a [barcode capture listener](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-capture-listener.html#interface-scandit.datacapture.barcode.IBarcodeCaptureListener) to receive scan events. Process the successful scans according to your application’s needs, e.g. by looking up information in a database. After a successful scan, decide whether more codes will be scanned, or the scanning process should be stopped. @@ -23,16 +23,18 @@ The general steps are: - Display the camera preview by creating a [data capture view](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). - If displaying a preview, optionally create a new [overlay](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-capture-overlay.html#class-scandit.datacapture.barcode.ui.BarcodeCaptureOverlay) and add it to [data capture view](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) for a better visual feedback. -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Scanning Behavior Barcode scanning is orchestrated by the [BarcodeCapture](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-capture.html#class-scandit.datacapture.barcode.BarcodeCapture) [data capture mode](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-mode.html#interface-scandit.datacapture.core.IDataCaptureMode). This class is the main entry point for scanning barcodes. It is configured through [BarcodeCaptureSettings](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-capture-settings.html#class-scandit.datacapture.barcode.BarcodeCaptureSettings) and allows to register one or more [listeners](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-capture-listener.html#interface-scandit.datacapture.barcode.IBarcodeCaptureListener) that will get informed whenever new codes have been recognized. @@ -40,14 +42,14 @@ Barcode scanning is orchestrated by the [BarcodeCapture](https://docs.scandit.co For this tutorial, we will setup barcode scanning for a small list of different barcode types, called [symbologies](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology). The list of symbologies to enable is highly application specific. We recommend that you only enable the list of symbologies your application requires. ```js -const settings = new Scandit.BarcodeCaptureSettings(); +const settings = new BarcodeCaptureSettings(); settings.enableSymbologies([ - Scandit.Symbology.Code128, - Scandit.Symbology.Code39, - Scandit.Symbology.QR, - Scandit.Symbology.EAN8, - Scandit.Symbology.UPCE, - Scandit.Symbology.EAN13UPCA, + Symbology.Code128, + Symbology.Code39, + Symbology.QR, + Symbology.EAN8, + Symbology.UPCE, + Symbology.EAN13UPCA, ]); ``` @@ -56,8 +58,8 @@ If you are not disabling barcode capture immediately after having scanned the fi Next, create a [BarcodeCapture](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-capture.html#class-scandit.datacapture.barcode.BarcodeCapture) instance with the settings initialized in the previous step: ```js -const barcodeCapture = new Scandit.BarcodeCapture(settings); -context.addMode(barcodeCapture); +const barcodeCapture = new BarcodeCapture(settings); +DataCaptureContext.sharedInstance.addMode(barcodeCapture); ``` ## Register the Barcode Capture Listener @@ -90,7 +92,7 @@ The example below will only scan barcodes beginning with the digits `09` and ign ```js ... if (!barcode.data || !barcode.data.startsWith('09:')) { - window.overlay.brush = Scandit.Brush.transparent; + window.overlay.brush = Brush.transparent; return; } ... @@ -111,11 +113,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeCapture.recommendedCameraSettings; +const cameraSettings = BarcodeCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -const camera = Scandit.Camera.default; +const camera = Camera.default; if (camera) { camera.applySettings(cameraSettings); @@ -125,13 +127,13 @@ if (camera) { Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```js -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.On](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): ```js -camera.switchToDesiredState(Scandit.FrameSourceState.On); +camera.switchToDesiredState(FrameSourceState.On); ``` ## Use a Capture View to Visualize the Scan Process @@ -139,17 +141,15 @@ camera.switchToDesiredState(Scandit.FrameSourceState.On); When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = DataCaptureView.forContext(DataCaptureContext.sharedInstance); view.connectToElement(htmlElement); ``` To visualize the results of barcode scanning, the following [overlay](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-capture-overlay.html#class-scandit.datacapture.barcode.ui.BarcodeCaptureOverlay) can be added: ```js -const overlay = Scandit.BarcodeCaptureOverlay.withBarcodeCaptureForView( - barcodeCapture, - view -); +const overlay = new BarcodeCaptureOverlay(barcodeCapture); +view.addOverlay(overlay); ``` ## Disabling Barcode Capture diff --git a/docs/sdks/capacitor/barcode-generator.md b/docs/sdks/capacitor/barcode-generator.md index 3c21e98b..3e9e1b11 100644 --- a/docs/sdks/capacitor/barcode-generator.md +++ b/docs/sdks/capacitor/barcode-generator.md @@ -32,24 +32,28 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to your ## Generating Barcodes -To generate barcodes, you need to create a [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). +To generate barcodes, you need to initialize the [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). With the context you can then instantiate a [`BarcodeGeneratorBuilder`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-generator-builder.html#class-scandit.datacapture.barcode.generator.BarcodeGeneratorBuilder), and use the method of [`BarcodeGenerator`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) for the symbology you are interested in, in this example Code 128. You can configure the colors used in the resulting image: ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.Code128BarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +const builder = BarcodeGenerator.code128BarcodeGeneratorBuilder(DataCaptureContext.sharedInstance) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + When the builder is configured get the `BarcodeGenerator` and try to generate the image: ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { @@ -62,26 +66,30 @@ See the complete [API reference](https://docs.scandit.com/data-capture-sdk/capac ## Generating QR Codes -To generate barcodes, you need to create a [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). +To generate barcodes, you need to initialize the [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). With the context you can then instantiate a [`QRCodeBarcodeGeneratorBuilder`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-generator-builder.html#class-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder) using the method of [`BarcodeGenerator`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) specific for QR codes. You can configure the colors used in the resulting image, and the two settings that can be configured for QR codes: [`QRCodeBarcodeGeneratorBuilder.errorCorrectionLevel`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithErrorCorrectionLevel) and [`QRCodeBarcodeGeneratorBuilder.versionNumber`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithVersionNumber). ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.QrCodeBarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK) - .withErrorCorrectionLevel(Scandit.QrCodeErrorCorrectionLevel.MEDIUM) +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +const builder = BarcodeGenerator.qrCodeBarcodeGeneratorBuilder(DataCaptureContext.sharedInstance) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')) + .withErrorCorrectionLevel(QrCodeErrorCorrectionLevel.Medium) .withVersionNumber(4); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + When the builder is configured get the `BarcodeGenerator` and try to generate the image: ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { diff --git a/docs/sdks/capacitor/barcode-selection/get-started.md b/docs/sdks/capacitor/barcode-selection/get-started.md index e9a9fff4..433aba99 100644 --- a/docs/sdks/capacitor/barcode-selection/get-started.md +++ b/docs/sdks/capacitor/barcode-selection/get-started.md @@ -18,7 +18,7 @@ In this guide you will learn step-by-step how to add Barcode Selection to your a The general steps are: -- Create a new [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) instance, initialized with your license key. +- Initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with your license key. - Create a [barcode selection settings](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-selection-settings.html#class-scandit.datacapture.barcode.selection.BarcodeSelectionSettings) and choose the right configuration. - Create a new [barcode selection mode](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-selection.html#class-scandit.datacapture.barcode.selection.BarcodeSelection 'barcode selection mode class') instance and initialize it with the settings created above. - Register a [barcode selection listener](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-selection-listener.html#interface-scandit.datacapture.barcode.selection.IBarcodeSelectionListener) to receive scan events. Process the successful scans according to your application’s needs, e.g. by looking up information in a database. After a successful scan, decide whether more codes will be scanned, or the scanning process should be stopped. @@ -34,16 +34,18 @@ Before starting with adding a capture mode, make sure that you have a valid Scan You can retrieve your Scandit Data Capture SDK license key by signing in to [your Scandit account](https://ssl.scandit.com/dashboard/sign-in). ::: -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext 'data capture context class'). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext 'data capture context class') with a valid Scandit Data Capture SDK license key. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Selection Behavior _Symbologies_ @@ -53,7 +55,7 @@ Barcode selection is orchestrated by the [BarcodeSelection](https://docs.scandit For this tutorial, we will setup barcode scanning for a small list of different barcode types, called [symbologies](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology). The list of symbologies to enable is highly application specific. We recommend that you only enable the list of symbologies your application requires. ```js -const settings = new Scandit.BarcodeSelectionSettings(); +const settings = new BarcodeSelectionSettings(); settings.enableSymbologies([ Symbology.Code128, Symbology.EAN8, @@ -83,8 +85,8 @@ _Creating the mode_ Next, create a [BarcodeSelection](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-selection.html#class-scandit.datacapture.barcode.selection.BarcodeSelection) instance with the settings initialized in the previous step: ```js -const barcodeSelection = new Scandit.BarcodeSelection(settings); -context.addMode(barcodeSelection); +const barcodeSelection = new BarcodeSelection(settings); +await DataCaptureContext.sharedInstance.addMode(barcodeSelection); ``` ## Register the Barcode Selection Listener @@ -123,11 +125,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeSelection.recommendedCameraSettings; +const cameraSettings = BarcodeSelection.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -const camera = Scandit.Camera.default; +const camera = Camera.default; if (camera) { camera.applySettings(cameraSettings); @@ -137,7 +139,7 @@ if (camera) { Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```js -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.On](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): diff --git a/docs/sdks/capacitor/getting-started.md b/docs/sdks/capacitor/getting-started.md index 525a07ca..f32c9ce5 100644 --- a/docs/sdks/capacitor/getting-started.md +++ b/docs/sdks/capacitor/getting-started.md @@ -21,7 +21,7 @@ The fastest way to get started is by running our sample application, so we'll co Before you start, make sure you have the following: -- Capacitor Version 5-7 [and other related tools and dependencies](https://capacitorjs.com/docs/getting-started). +- Capacitor Version 5-8 [and other related tools and dependencies](https://capacitorjs.com/docs/getting-started). - A project with minimum iOS deployment target of 15.0 or higher. Or an Android project with target SDK version 24 (Android 7, Nougat) or higher. - A valid Scandit Data Capture SDK license key. You can sign up for a free [test account](https://ssl.scandit.com/dashboard/sign-up?p=test&utm%5Fsource=documentation). @@ -47,10 +47,14 @@ cd datacapture-capacitor-samples/ListBuildingSample ```js ... -const context = DataCaptureContext.forLicenseKey('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ... ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + 4. Install the dependencies: ```bash @@ -81,24 +85,27 @@ npm install scandit-capacitor-datacapture-core npm install scandit-capacitor-datacapture-barcode ``` -### 2. Create the Context +### 2. Initialize the Data Capture Context -The first step is to create a context for the Data Capture tasks. This is done by creating an instance of the `DataCaptureContext` class: +The first step is to initialize the Data Capture Context with your license key: ```js -const context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ### 3. Configure SparkScan Settings Next, you need to configure your desired settings for SparkScan, such as the symbologies you want to scan. This is done by creating an instance of the `SparkScanSettings` class: ```js const settings = new SparkScanSettings(); -settings.enabledSymbologies = [Symbology.EAN13, Symbology.Code128]; +settings.enableSymbologies([Symbology.EAN13UPCA, Symbology.Code128]); settings.codeDuplicateFilter = 0; -settings.ScanIntention = ScanIntention.Smart; -await sparkScan.applySettings(settings); +settings.scanIntention = ScanIntention.Smart; ``` In this example, we're: @@ -107,15 +114,13 @@ In this example, we're: - Setting the code duplicate filter to 0, meaning the same code can be reported multiple times - Using the Smart [scan intention](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/scan-intention.html#enum-scandit.datacapture.core.ScanIntention) algorithm, to reduce the likelihood of unintended scans -Lastly, we apply the settings to the SparkScan instance. - ### 4. Setup the SparkScanView Now we'll create and configure the scanner view and it's settings. This is done via the `SparkScanView` and `SparkScanViewSettings` classes: ```js const viewSettings = new SparkScanViewSettings(); -viewSettings.defaultScanningMode = SparkScanScanningModeTarget; +viewSettings.defaultScanningMode = new SparkScanScanningModeTarget(SparkScanScanningBehavior.Single); viewSettings.soundEnabled = true; viewSettings.hapticEnabled = false; ``` @@ -129,25 +134,19 @@ In this example, we're: Next, we create the `SparkScanView` instance, adding the scanning interface to the application: ```js -const sparkScanComponent = ( - -); +const sparkScanView = SparkScanView.forContext(DataCaptureContext.sharedInstance, sparkScan, viewSettings); ``` In your application's state handling logic, you must also call the `stopScanning` method when the scanner is no longer needed: ```js componentWillUnmount() { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } handleAppStateChange = async (nextAppState) => { if (nextAppState.match(/inactive|background/)) { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } }; ``` diff --git a/docs/sdks/capacitor/id-capture/advanced.md b/docs/sdks/capacitor/id-capture/advanced.md index bd94bb9e..681eb421 100644 --- a/docs/sdks/capacitor/id-capture/advanced.md +++ b/docs/sdks/capacitor/id-capture/advanced.md @@ -20,16 +20,16 @@ That means certain data from certain fields won’t be returned, even if it’s ```js // Default value: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_ONLY); +settings.anonymizationMode = IdAnonymizationMode.FieldsOnly; // Sensitive data is additionally covered with black boxes on returned images: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_AND_IMAGES); +settings.anonymizationMode = IdAnonymizationMode.FieldsAndImages; // Only images are anonymized: -settings.setAnyonymizationMode(IdAnonymizationMode.IMAGES_ONLY); +settings.anonymizationMode = IdAnonymizationMode.ImagesOnly; // No anonymization: -settings.setAnyonymizationMode(IdAnonymizationMode.NONE); +settings.anonymizationMode = IdAnonymizationMode.None; ``` ## ID Images @@ -45,13 +45,13 @@ For the full frame of the document, you can use [`setShouldPassImageTypeToResult ```js // Holder's picture as printed on a document: -settings.setShouldPassImageTypeToResult(ImageType.FACE); +settings.setShouldPassImageTypeToResult(IdImageType.Face, true); // Cropped image of a document: -settings.setShouldPassImageTypeToResult(ImageType.CROPPED_DOCUMENT); +settings.setShouldPassImageTypeToResult(IdImageType.CroppedDocument, true); // Full camera frame that contains the document: -settings.setShouldPassImageTypeToResult(ImageType.FULL_FRAME); +settings.setShouldPassImageTypeToResult(IdImageType.Frame, true); ``` ## Callbacks and Scanning Workflows diff --git a/docs/sdks/capacitor/id-capture/get-started.md b/docs/sdks/capacitor/id-capture/get-started.md index 46049c67..cdef6f48 100644 --- a/docs/sdks/capacitor/id-capture/get-started.md +++ b/docs/sdks/capacitor/id-capture/get-started.md @@ -13,7 +13,7 @@ In this guide you will learn step-by-step how to add ID Capture to your applicat The general steps are: -- Creating a new Data Capture Context instance +- Initializing the Data Capture Context - Accessing a Camera - Configuring the Capture Settings - Implementing a Listener to Receive Scan Results @@ -40,25 +40,27 @@ import IdModuleOverview from '../../../partials/get-started/_id-module-overview- -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Add the Camera You need to also create the [Camera](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/camera.html#class-scandit.datacapture.core.Camera): ```js -const camera = Scandit.Camera.default; -context.setFrameSource(camera); +const camera = Camera.default; +DataCaptureContext.sharedInstance.setFrameSource(camera); -const cameraSettings = Scandit.IdCapture.recommendedCameraSettings; +const cameraSettings = IdCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -78,33 +80,33 @@ By default, [anonymized data](./advanced.md#configure-data-anonymization) is not ::: ```ts -const settings = new Scandit.IdCaptureSettings(); +const settings = new IdCaptureSettings(); // Documents from any region: -settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.AnyRegion)); +settings.acceptedDocuments.push(new IdCard(IdCaptureRegion.Any)); // Only documents issued by a specific country: -settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.Germany)); +settings.acceptedDocuments.push(new IdCard(IdCaptureRegion.Germany)); // Regional documents: -settings.acceptedDocuments.push(new Scandit.RegionSpecific.ApecBusinessTravelCard()); +settings.acceptedDocuments.push(new RegionSpecific(RegionSpecificSubtype.ApecBusinessTravelCard)); // Reject passports from certain regions: -settings.rejectedDocuments.push(new Scandit.Passport(Scandit.Region.Cuba)); +settings.rejectedDocuments.push(new Passport(IdCaptureRegion.Cuba)); // To scan only one-sided documents and a given zone: -settings.scannerType = new Scandit.SingleSideScanner({ barcode: true }); +settings.scanner = new SingleSideScanner(true, false, false); // or -settings.scannerType = new Scandit.SingleSideScanner({ machineReadableZone: true }); +settings.scanner = new SingleSideScanner(false, true, false); // or -settings.scannerType = new Scandit.SingleSideScanner({ visualInspectionZone: true }); +settings.scanner = new SingleSideScanner(false, false, true); // To scan both sides of the document: -settings.scannerType = new Scandit.FullDocumentScanner(); +settings.scanner = new FullDocumentScanner(); ``` Create a new ID Capture mode with the chosen settings: ```ts -const idCapture = new Scandit.IdCapture(settings); -context.addMode(idCapture); +const idCapture = new IdCapture(settings); +DataCaptureContext.sharedInstance.addMode(idCapture); ``` ## Implement the Listener @@ -154,11 +156,11 @@ You may wish to implement the follow-up action based on the reason of failure: ```ts onIdRejected: (data, reason) => { - if (reason === Scandit.RejectionReason.Timeout) { + if (reason === RejectionReason.Timeout) { // Ask the user to retry, or offer alternative input method. - } else if (reason === Scandit.RejectionReason.DocumentExpired) { + } else if (reason === RejectionReason.DocumentExpired) { // Ask the user to provide alternative document. - } else if (reason === Scandit.RejectionReason.HolderUnderage) { + } else if (reason === RejectionReason.HolderUnderage) { // Reject the process. } } @@ -171,17 +173,15 @@ When using the built-in camera as [frameSource](https://docs.scandit.com/data-ca To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = DataCaptureView.forContext(DataCaptureContext.sharedInstance); view.connectToElement(htmlElement); ``` Then create an instance of [IdCaptureOverlay](https://docs.scandit.com/data-capture-sdk/capacitor/id-capture/api/ui/id-capture-overlay.html#class-scandit.datacapture.id.ui.IdCaptureOverlay) attached to the view: ```js -let overlay = Scandit.IdCaptureOverlay.withTextCaptureForView( - idCapture, - dataCaptureView -); +const overlay = new IdCaptureOverlay(idCapture); +view.addOverlay(overlay); ``` The overlay chooses the displayed UI automatically, based on the selected [IdCaptureSettings](https://docs.scandit.com/data-capture-sdk/capacitor/id-capture/api/id-capture-settings.html#class-scandit.datacapture.id.IdCaptureSettings). @@ -193,7 +193,7 @@ If you prefer to show a different UI or to temporarily hide it, set the appropri Finally, turn on the camera to start scanning: ```js -camera.switchToDesiredState(Scandit.FrameSourceState.On); +camera.switchToDesiredState(FrameSourceState.On); ``` And this is it. You can now scan documents. diff --git a/docs/sdks/capacitor/matrixscan-ar/get-started.md b/docs/sdks/capacitor/matrixscan-ar/get-started.md index 32a2e85c..1f208684 100644 --- a/docs/sdks/capacitor/matrixscan-ar/get-started.md +++ b/docs/sdks/capacitor/matrixscan-ar/get-started.md @@ -1,11 +1,110 @@ --- -description: "This functionality is not currently supported in the selected framework. " +description: "In this guide you will learn step-by-step how to add MatrixScan AR to your application. Implementing MatrixScan AR involves two primary elements: " displayed_sidebar: capacitorSidebar +sidebar_position: 2 +framework: capacitor +keywords: + - capacitor --- -# Page Unavailable +# Get Started -This functionality is not currently supported in the selected framework. +In this guide you will learn step-by-step how to add MatrixScan AR to your application. Implementing MatrixScan AR involves two primary elements: ---- \ No newline at end of file +- Barcode AR: The data capture mode that is used for scan and check functionality. +- A Barcode AR View: The pre-built UI elements used to highlight items to be checked. + +The general steps are: + +- Initializing the Data Capture Context +- Configuring the Barcode AR Mode +- Setup the Barcode AR View +- Registering the Listener to notify about found items + +## Prerequisites + +Before starting with adding a capture mode, make sure that you have a valid Scandit Data Capture SDK license key and that you added the necessary dependencies. If you have not done that yet, check out [this guide](../add-sdk.md). + +:::note +You can retrieve your Scandit Data Capture SDK license key by signing in to [your Scandit account](https://ssl.scandit.com/dashboard/sign-in). +::: + +## Initialize the Data Capture Context + +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. + +```js +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +``` + +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + +## Configure the Barcode AR Mode + +The main entry point for the Barcode AR Mode is the `BarcodeAr` object. You can configure the supported Symbologies through its [`BarcodeArSettings`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-ar-settings.html), and set up the list of items that you want MatrixScan AR to highlight. + +Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. + +```js +const settings = new BarcodeArSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); +``` + +The create the mode with the previously created settings: + +```js +const mode = new BarcodeAr(settings); +``` + +## Setup the `BarcodeArView` + +MatrixScan AR's built-in AR user interface includes buttons and overlays that guide the user through the scan and check process. By adding a [`BarcodeArView`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-ar-view.html#class-scandit.datacapture.barcode.check.ui.BarcodeArView), the scanning interface is added automatically to your application. + +The `BarcodeArView` is where you provide the [`highlightProvider`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-ar-view.html#property-scandit.datacapture.barcode.check.ui.BarcodeArView.HighlightProvider) and/or [`annotationProvider`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-ar-view.html#property-scandit.datacapture.barcode.check.ui.BarcodeArView.AnnotationProvider) to supply the highlight and annotation information for the barcodes to be checked. If *null*, a default highlight is used and no annotations are provided. + +The `BarcodeArView` appearance can be customized through [`BarcodeArViewSettings`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-ar-view-settings.html#class-scandit.datacapture.barcode.check.ui.BarcodeArViewSettings), and the corresponding settings for your desired highlights and/or annotations, to match your application's look and feel. The following settings can be customized: + +* Audio and haptic feedback +* Torch button visibility and its position +* Switch camera button visibility and its position +* Zoom control visibility and its position +* The size, colors, and styles of the highlight and annotation overlays + +```js +const viewSettings = new BarcodeArViewSettings(); +``` + +Next, create a `BarcodeArView` instance with the Data Capture Context and the settings initialized in the previous step. Then connect it to an HTML element in your view hierarchy. + +```js +const barcodeArView = new BarcodeArView({ + context: DataCaptureContext.sharedInstance, + barcodeAr: mode, + settings: viewSettings, +}); + +barcodeArView.connectToElement(htmlElement); +``` + +## Register the Listener + +Register a [BarcodeArViewUiListener](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-ar-view.html#interface-scandit.datacapture.barcode.check.ui.IBarcodeArViewUiListener) to be notified when a highlighted barcode is tapped. + +```js +barcodeArView.uiListener = { + didTapHighlightForBarcode(barcodeAr, barcode, highlight) { + // Handle the tapped barcode. + }, +}; +``` + +## Start Searching + +As soon as everything is set up, control the [BarcodeArView](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-ar-view.html#class-scandit.datacapture.barcode.check.ui.BarcodeArView) to start the search. + +```js +barcodeArView.start(); +``` diff --git a/docs/sdks/capacitor/matrixscan-ar/intro.md b/docs/sdks/capacitor/matrixscan-ar/intro.md index 32a2e85c..a164b503 100644 --- a/docs/sdks/capacitor/matrixscan-ar/intro.md +++ b/docs/sdks/capacitor/matrixscan-ar/intro.md @@ -1,11 +1,15 @@ --- -description: "This functionality is not currently supported in the selected framework. " +description: "import AboutMatrixScanCheck from '../../../partials/intro/_about-matrixscan-ar.mdx' " -displayed_sidebar: capacitorSidebar +sidebar_position: 1 +pagination_prev: null +framework: capacitor +keywords: + - capacitor --- -# Page Unavailable +# About MatrixScan AR -This functionality is not currently supported in the selected framework. +import AboutMatrixScanCheck from '../../../partials/intro/_about-matrixscan-ar.mdx' ---- \ No newline at end of file + diff --git a/docs/sdks/capacitor/matrixscan-count/advanced.md b/docs/sdks/capacitor/matrixscan-count/advanced.md index a8df17bc..acef1773 100644 --- a/docs/sdks/capacitor/matrixscan-count/advanced.md +++ b/docs/sdks/capacitor/matrixscan-count/advanced.md @@ -50,15 +50,7 @@ import Totes from '../../../partials/count/_tote-mapping.mdx' It can be difficult to reach the shutter button if the smart device is attached to the user’s wrist by a strap or similar. In this instance, you can enable a floating shutter button that can be positioned by the end user in a more ergonomically suitable position. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowFloatingShutterButton = true; - } - }} - /> -); +barcodeCountView.shouldShowFloatingShutterButton = true; ``` ## Filtering @@ -71,7 +63,7 @@ For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```js const settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +settings.enableSymbologies(enabledSymbologies); const excludedSymbologies = [Symbology.PDF417]; const filterSettings = settings.filterSettings; @@ -98,15 +90,7 @@ There are situations in which the user may find it helpful to clean up their scr If this is the case, you can enable the “Clear screen” button. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowClearHighlightsButton = true; - } - }} - /> -); +barcodeCountView.shouldShowClearHighlightsButton = true; ``` ## Customize Overlay Colors @@ -124,15 +108,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Notifications @@ -153,15 +129,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Disable UI Elements @@ -172,30 +140,14 @@ However, if you wish to disable UI elements you can do it as follows. Disable buttons: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowListButton = false; - view.shouldShowExitButton = false; - view.shouldShowShutterButton = false; - } - }} - /> -); +barcodeCountView.shouldShowListButton = false; +barcodeCountView.shouldShowExitButton = false; +barcodeCountView.shouldShowShutterButton = false; ``` Disable feedback and hints: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowUserGuidanceView = false; - view.shouldShowHints = false; - } - }} - /> -); +barcodeCountView.shouldShowUserGuidanceView = false; +barcodeCountView.shouldShowHints = false; ``` diff --git a/docs/sdks/capacitor/matrixscan-count/get-started.md b/docs/sdks/capacitor/matrixscan-count/get-started.md index 63de4b34..9f0d8133 100644 --- a/docs/sdks/capacitor/matrixscan-count/get-started.md +++ b/docs/sdks/capacitor/matrixscan-count/get-started.md @@ -13,7 +13,7 @@ In this guide you will learn step-by-step how to add MatrixScan Count to your ap The general steps are: -1. Create a new Data Capture Context instance +1. Initialize the Data Capture Context 2. Configure the Barcode Count Mode 3. Obtain camera instance and set frame source used 4. Register the listener to be informed when scanned phase is over @@ -23,16 +23,18 @@ The general steps are: 8. Reset Barcode Count mode 9. List and Exit callbacks -## Create A New Data Capture Context Instance +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure The Barcode Count Mode The main entry point for the Barcode Count Mode is the [BarcodeCount](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) object. It is configured through [BarcodeCountSettings](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-count-settings.html#class-scandit.datacapture.barcode.count.BarcodeCountSettings) and allows you to register one or more listeners that are informed whenever a scan phase has finished. @@ -48,7 +50,7 @@ If you are sure that your environment will only have unique barcodes (i.e. no du ```js const barcodeCount = new BarcodeCount(settings); -context.addMode(barcodeCount); +DataCaptureContext.sharedInstance.addMode(barcodeCount); ``` ## Obtain Camera Instance And Set Frame Source Used @@ -56,16 +58,18 @@ context.addMode(barcodeCount); Our recommended camera settings should be used to achieve the best performance and user experience. The following couple of lines show how to get the recommended settings for MatrixScan Count and create the camera from it: ```js -const cameraSettings = new CameraSettings(); +const cameraSettings = BarcodeCount.createRecommendedCameraSettings(); const camera = Camera.default; -camera.applySettings(cameraSettings); +if (camera != null) { + camera.applySettings(cameraSettings); +} ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```js -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` ## Register the Listener @@ -82,9 +86,8 @@ MatrixScan Count’s built-in AR user interface includes buttons and overlays th Add a [BarcodeCountView](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) to your view hierarchy: ```js -const barcodeCountViewComponent = ( - -); +const barcodeCountView = BarcodeCountView.forContextWithMode(DataCaptureContext.sharedInstance, barcodeCount); +barcodeCountView.connectToElement(htmlElement); ``` ## Set Up The Camera So That It Switches On When You Are In Scanning View @@ -92,21 +95,15 @@ const barcodeCountViewComponent = ( The camera is not automatically turned on when you are in a scanning view. You need to set up the camera so that it switches on when needed and it switches off when not needed anymore. Similarly [BarcodeCount](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) should also be enabled and disabled. For instance, you should switch off the camera when the [BarcodeCountView](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is not visible anymore (including when the app goes in the background), similarly you want to switch on the camera when the [BarcodeCountView](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is visible (including when the app goes to the foreground). One way to achieve this is the following: ```js -componentDidMount() { -handleAppStateChangeSubscription = AppState.addEventListener('change', handleAppStateChange); -} - -componentWillUnmount() { -handleAppStateChangeSubscription.remove(); -} - -handleAppStateChange = async (nextAppState) => { -if (nextAppState.match(/inactive|background/)) { -camera.switchToDesiredState(FrameSourceState.Off); -} else { -camera.switchToDesiredState(FrameSourceState.On); -} -} +import { App } from '@capacitor/app'; + +App.addListener('appStateChange', ({ isActive }) => { + if (isActive) { + camera.switchToDesiredState(FrameSourceState.On); + } else { + camera.switchToDesiredState(FrameSourceState.Off); + } +}); ``` ## Store And Retrieve Scanned Barcodes @@ -150,13 +147,5 @@ const viewUiListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.uiListener = viewUiListener; - } - }} - /> -); +barcodeCountView.uiListener = viewUiListener; ``` diff --git a/docs/sdks/capacitor/matrixscan-find/advanced.md b/docs/sdks/capacitor/matrixscan-find/advanced.md index 0d14711f..97e0bf04 100644 --- a/docs/sdks/capacitor/matrixscan-find/advanced.md +++ b/docs/sdks/capacitor/matrixscan-find/advanced.md @@ -24,11 +24,11 @@ mode.addListener({ // The mode was started }, - didPauseSearch(foundItems: BarcodeFindItem[]) { + didPauseSearch(foundItems) { // The mode was paused }, - didStopSearch(foundItems: BarcodeFindItem[]) { + didStopSearch(foundItems) { // The mode was stopped after the finish button was clicked }, }); diff --git a/docs/sdks/capacitor/matrixscan-find/get-started.md b/docs/sdks/capacitor/matrixscan-find/get-started.md index aa2082f2..06f24067 100644 --- a/docs/sdks/capacitor/matrixscan-find/get-started.md +++ b/docs/sdks/capacitor/matrixscan-find/get-started.md @@ -16,22 +16,24 @@ In this guide you will learn step-by-step how to add MatrixScan Find to your app The general steps are: -1. Create a new Data Capture Context instance. +1. Initialize the Data Capture Context. 2. Configure the Barcode Find Mode. 3. Setup the BarcodeFindView. 4. Register a listener to be notified with found items 5. Start searching -## Create a new Data Capture Context instance +## Initialize the Data Capture Context -The first step to add find capabilities to your application is to create a new [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add find capabilities to your application is to initialize the [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const dataCaptureContext = DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Find Mode The main entry point for the Barcode Find Mode is the [BarcodeFind](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-find.html#class-scandit.datacapture.barcode.find.BarcodeFind) object. You can configure the supported Symbologies through its [BarcodeFindSettings](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-find-settings.html#class-scandit.datacapture.barcode.find.BarcodeFindSettings), and set up the list of items that you want MatrixScan Find to highlight (e.g. a list of products). @@ -41,8 +43,8 @@ For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change First create the settings: ```js -const settings = BarcodeFindSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new BarcodeFindSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be actively searched for. @@ -80,17 +82,8 @@ const viewSettings = new BarcodeFindViewSettings(); Construct a new BarcodeFindView. The BarcodeFindView is automatically added to the provided parent view. ```js -let barcodeFind; - { - barcodeFindView = view; - // Handle the view as needed, for example - barcodeFindView.startSearching(); - }} ->; +const barcodeFindView = new BarcodeFindView({ context: DataCaptureContext.sharedInstance, barcodeFind: mode, viewSettings }); +barcodeFindView.connectToElement(htmlElement); ``` ## Register a listener to be notified with found items @@ -101,7 +94,7 @@ In this tutorial, we will then navigate back to the previous screen to finish th ```js barcodeFindView.barcodeFindViewUiListener = { - didTapFinishButton(foundItems: BarcodeFindItem[]) { + didTapFinishButton(foundItems) { // This method is called when the user presses the // finish button. It returns the list of all items that were found during // the session. diff --git a/docs/sdks/capacitor/matrixscan-pick/advanced.md b/docs/sdks/capacitor/matrixscan-pick/advanced.md index 5fa56a92..7e141776 100644 --- a/docs/sdks/capacitor/matrixscan-pick/advanced.md +++ b/docs/sdks/capacitor/matrixscan-pick/advanced.md @@ -16,16 +16,26 @@ MatrixScan Pick is optimized by default for efficiency, accuracy, and a seamless You may want more fine-grained knowledge over the different events happening during the life of the `BarcodePick` mode, such as when the search starts, pauses, and stops. -To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. +To do this, you can directly register a [`BarcodePickViewListener`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-pick-view.html#interface-scandit.datacapture.barcode.pick.IBarcodePickViewListener) on the view itself, keeping in mind that these listeners are called from a background thread. -```javascript -mode.addListener({ - onObservationStarted() { - // The mode was started +```js +const viewListener = { + didStartScanning(view) { + // The view started scanning }, - - onObservationStopped(foundItems: BarcodeFindItem[]) { - // The mode was stopped after the finish button was clicked + + didFreezeScanning(view) { + // The view was frozen + }, + + didPauseScanning(view) { + // The view was paused }, -}); + + didStopScanning(view) { + // The view stopped scanning + }, +}; + +barcodePickView.addListener(viewListener); ``` diff --git a/docs/sdks/capacitor/matrixscan-pick/get-started.md b/docs/sdks/capacitor/matrixscan-pick/get-started.md index c841684b..6d473579 100644 --- a/docs/sdks/capacitor/matrixscan-pick/get-started.md +++ b/docs/sdks/capacitor/matrixscan-pick/get-started.md @@ -16,7 +16,7 @@ In this guide you will learn step-by-step how to add MatrixScan Pick to your app The general steps are: -- Creating a new Data Capture Context instance +- Initializing the Data Capture Context - Configuring the Barcode Pick Mode - Setup the Barcode Pick View - Registering the Listener to notify about found items @@ -29,38 +29,41 @@ Before starting with adding a capture mode, make sure that you have a valid Scan You can retrieve your Scandit Data Capture SDK license key by signing in to [your Scandit account](https://ssl.scandit.com/dashboard/sign-in). ::: -## Create a Data Capture Context +## Initialize the Data Capture Context -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. +The first step to add capture capabilities to your application is to initialize the Data Capture Context with a valid Scandit Data Capture SDK license key. -```javascript -const dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +```js +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Pick Mode The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You can configure the supported Symbologies through its [`BarcodePickSettings`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-pick-settings.html), and set up the list of items that you want MatrixScan Pick to highlight. Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. -```javascript -const settings = BarcodePickSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +```js +const settings = new BarcodePickSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be picked and quantity to be picked for each item. -```javascript +```js const items = [ - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), - new BarcodePickProductQuantityToPick(3), - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3) -] + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), new BarcodePickProductQuantityToPick(3)), + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3)), +]; ``` Create the mode with the previously created settings: -```javascript +```js const mode = new BarcodePick(settings); ``` @@ -79,17 +82,17 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Zoom button * Loading Dialog -```javascript +```js const viewSettings = new BarcodePickViewSettings(); // ... ``` Construct a new `BarcodePickView`. The `BarcodePickView` will be attached to the HTMLElement provided in the ConnectToElement function. -```javascript -const BarcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, BarcodePick, viewSettings); -// Connect the data capture view to the HTML element, so it can fill up its size and follow its position. -view.connectToElement(document.getElementById('html-element-id')); +```js +const barcodePickView = new BarcodePickView({ context: DataCaptureContext.sharedInstance, barcodePick: mode, settings: viewSettings }); +// Connect the view to the HTML element, so it can fill up its size and follow its position. +barcodePickView.connectToElement(document.getElementById('html-element-id')); ``` ## Register the Listener @@ -100,13 +103,12 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/data-capture-sdk In this tutorial, we will then navigate back to the previous screen to finish the find session. -```javascript -BarcodePickView.BarcodePickViewUiListener = { - didTapFinishButton(foundItems: BarcodePickProduct[]) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. - } +```js +barcodePickView.uiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the finish button. + // It returns the list of all items that were found during the session. + }, }; ``` @@ -114,8 +116,8 @@ BarcodePickView.BarcodePickViewUiListener = { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. -```javascript -BarcodePickView.start(); +```js +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/docs/sdks/capacitor/matrixscan/advanced.md b/docs/sdks/capacitor/matrixscan/advanced.md index 67337ebc..e4e7a59f 100644 --- a/docs/sdks/capacitor/matrixscan/advanced.md +++ b/docs/sdks/capacitor/matrixscan/advanced.md @@ -18,11 +18,8 @@ As mentioned above, the advanced overlay combined with its [listener](https://do First of all, create a new instance of [BarcodeBatchAdvancedOverlay](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-advanced-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchAdvancedOverlay) and add it to the [DataCaptureView](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). ```js -const overlay = - Scandit.BarcodeBatchAdvancedOverlay.withBarcodeBatchForView( - barcodeBatch, - view - ); +const overlay = new BarcodeBatchAdvancedOverlay(barcodeBatch); +view.addOverlay(overlay); ``` At this point, you have two options. @@ -48,22 +45,22 @@ overlay.listener = { let element = document.createElement('span'); element.innerText = trackedBarcode.barcode.data; element.style.backgroundColor = '#FFFFFFFF'; - return Scandit.TrackedBarcodeView.withHTMLElement(element, null); + return TrackedBarcodeView.withHTMLElement(element, null); }, anchorForTrackedBarcode: (overlay, trackedBarcode) => { // As we want the view to be above the barcode, we anchor the view's center to the top-center of the barcode quadrilateral. // Use the function 'offsetForTrackedBarcode' below to adjust the position of the view by providing an offset. - return Scandit.Anchor.TopCenter; + return Anchor.TopCenter; }, offsetForTrackedBarcode: (overlay, trackedBarcode) => { // This is the offset that will be applied to the view. // You can use .fraction to give a measure relative to the view itself, the sdk will take care of transforming this into pixel size. // We now center horizontally and move up the view to make sure it's centered and above the barcode quadrilateral by half of the view's height. - return new Scandit.PointWithUnit( - new Scandit.NumberWithUnit(0, Scandit.MeasureUnit.Fraction), - new Scandit.NumberWithUnit(-1, Scandit.MeasureUnit.Fraction) + return new PointWithUnit( + new NumberWithUnit(0, MeasureUnit.Fraction), + new NumberWithUnit(-1, MeasureUnit.Fraction) ); }, }; @@ -79,20 +76,20 @@ didUpdateSession: (barcodeBatch, session) => { let element = document.createElement('span'); element.innerText = trackedBarcode.barcode.data; element.style.backgroundColor = '#FFFFFFFF'; - let trackedBarcodeView = Scandit.TrackedBarcodeView.withHTMLElement( + let trackedBarcodeView = TrackedBarcodeView.withHTMLElement( element, null ); window.overlay.setViewForTrackedBarcode(trackedBarcodeView, trackedBarcode); window.overlay.setAnchorForTrackedBarcode( - Scandit.Anchor.TopCenter, + Anchor.TopCenter, trackedBarcode ); window.overlay.setOffsetForTrackedBarcode( - new Scandit.PointWithUnit( - new Scandit.NumberWithUnit(0, Scandit.MeasureUnit.Fraction), - new Scandit.NumberWithUnit(-1, Scandit.MeasureUnit.Fraction) + new PointWithUnit( + new NumberWithUnit(0, MeasureUnit.Fraction), + new NumberWithUnit(-1, MeasureUnit.Fraction) ), trackedBarcode ); diff --git a/docs/sdks/capacitor/matrixscan/get-started.md b/docs/sdks/capacitor/matrixscan/get-started.md index f82a8f7d..4b7e7dc3 100644 --- a/docs/sdks/capacitor/matrixscan/get-started.md +++ b/docs/sdks/capacitor/matrixscan/get-started.md @@ -11,23 +11,25 @@ In this guide you will learn step-by-step how to add MatrixScan to your applicat The general steps are: -- Creating a new Data Capture Context instance +- Initializing the Data Capture Context - Configuring the MatrixScan mode - Using the built-in camera - Visualizing the scan process - Providing feedback - Disabling barcode tracking -## Create a Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Batch Mode The main entry point for the Barcode Batch Mode is the [BarcodeBatch](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-batch.html#class-scandit.datacapture.barcode.batch.BarcodeBatch) object. It is configured through [BarcodeBatchSettings](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-batch-settings.html#class-scandit.datacapture.barcode.batch.BarcodeBatchSettings) and allows to register one or more [listeners](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-batch-listener.html#interface-scandit.datacapture.barcode.batch.IBarcodeBatchListener) that will get informed whenever a new frame has been processed. @@ -37,15 +39,15 @@ Most of the times, you will not need to implement a [BarcodeBatchListener](https For this tutorial, we will setup Barcode Batch for tracking QR codes. ```js -const settings = new Scandit.BarcodeBatchSettings(); -settings.enableSymbology(Scandit.Symbology.QR, true); +const settings = new BarcodeBatchSettings(); +settings.enableSymbology(Symbology.QR, true); ``` Next, create a [BarcodeBatch](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-batch.html#class-scandit.datacapture.barcode.batch.BarcodeBatch) instance with the data capture context and the settings initialized in the previous steps: ```js -const barcodeBatch = new Scandit.BarcodeBatch(settings); -context.addMode(barcodeBatch); +const barcodeBatch = new BarcodeBatch(settings); +DataCaptureContext.sharedInstance.addMode(barcodeBatch); ``` ## Use the Built-in Camera @@ -63,11 +65,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeBatch.recommendedCameraSettings; +const cameraSettings = BarcodeBatch.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -const camera = Scandit.Camera.default; +const camera = Camera.default; if (camera != null) { camera.applySettings(cameraSettings); } @@ -76,13 +78,13 @@ if (camera != null) { Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```js -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.On](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): ```js -camera.switchToDesiredState(Scandit.FrameSourceState.On); +camera.switchToDesiredState(FrameSourceState.On); ``` There is a separate guide for [more advanced camera functionality](advanced.md). @@ -92,17 +94,15 @@ There is a separate guide for [more advanced camera functionality](advanced.md). When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = DataCaptureView.forContext(DataCaptureContext.sharedInstance); view.connectToElement(htmlElement); ``` To visualize the results of Barcode Batch, first you need to add the following [overlay](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay): ```js -const overlay = Scandit.BarcodeBatchBasicOverlay.withBarcodeBatchForView( - barcodeBatch, - view -); +const overlay = new BarcodeBatchBasicOverlay(barcodeBatch, BarcodeBatchBasicOverlayStyle.Frame); +view.addOverlay(overlay); ``` Once the overlay has been added, you should implement the [BarcodeBatchBasicOverlayListener](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#interface-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener) interface. The method [BarcodeBatchBasicOverlayListener.brushForTrackedBarcode()](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#method-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener.BrushForTrackedBarcode) is invoked every time a new tracked barcode appears and it can be used to set a [brush](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/ui/brush.html#class-scandit.datacapture.core.ui.Brush) that will be used to highlight that specific barcode in the [overlay](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay). @@ -132,7 +132,7 @@ Barcode Batch, unlike Barcode Capture, doesn’t emit feedback (sound or vibrati with your own sound or vibration if you want. ```js -const feedback = Scandit.Feedback.defaultFeedback; +const feedback = Feedback.defaultFeedback; ``` Next, use this [feedback](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/feedback.html#class-scandit.datacapture.core.Feedback) in a [BarcodeBatchListener](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/barcode-batch-listener.html#interface-scandit.datacapture.barcode.batch.IBarcodeBatchListener): diff --git a/docs/sdks/capacitor/sparkscan/advanced.md b/docs/sdks/capacitor/sparkscan/advanced.md index 041fdfa6..9c56259b 100644 --- a/docs/sdks/capacitor/sparkscan/advanced.md +++ b/docs/sdks/capacitor/sparkscan/advanced.md @@ -31,11 +31,29 @@ You may want to introduce logic in your app to show an error message when scanni - The color of the flashing screen upon scan. You can enable or disable the visual feedback via [SparkScanViewSettings.visualFeedbackEnabled](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-settings.html#property-scandit.datacapture.barcode.spark.ui.SparkScanViewSettings.VisualFeedbackEnabled) and you can control the color via [SparkScanBarcodeFeedback](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-barcode-feedback.html#sparkscan-barcode-feedback). -An error example is here reported: +To emit an error, implement a [SparkScanFeedbackDelegate](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/spark-scan-feedback-delegate.html#interface-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate) and set it on the [SparkScanView](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view.html#property-scandit.datacapture.barcode.spark.ui.SparkScanView.FeedbackDelegate): ```js -self.sparkScanView.emitFeedback(SparkScanBarcodeErrorFeedback(message: "This code should not have been scanned", -resumeCapturingDelay: 6, visualFeedbackColor: UIColor.red)) +sparkScanView.feedbackDelegate = sparkScanFeedbackDelegate; +``` + +In the [feedbackForBarcode](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/spark-scan-feedback-delegate.html#method-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate.GetFeedbackForBarcode) callback you can return an error or a success feedback: + +```js +const sparkScanFeedbackDelegate = { + feedbackForBarcode: (barcode) => { + if (isValidBarcode(barcode)) { + return new SparkScanBarcodeSuccessFeedback(); + } else { + return new SparkScanBarcodeErrorFeedback( + 'This code should not have been scanned', + 60 * 1000, + Color.fromHex('#FF0000'), + new Brush(Color.fromHex('#FF0000'), Color.fromHex('#FF0000'), 1), + ); + } + }, +}; ``` You can have different error states triggered by different logic conditions. For example you can trigger an error state when a wrong barcode is scanned, and another one when a duplicate barcode is scanned. These errors can show different colors and have different timeouts. diff --git a/docs/sdks/capacitor/sparkscan/get-started.md b/docs/sdks/capacitor/sparkscan/get-started.md index 73d0ea14..43276579 100644 --- a/docs/sdks/capacitor/sparkscan/get-started.md +++ b/docs/sdks/capacitor/sparkscan/get-started.md @@ -9,7 +9,7 @@ keywords: In this guide you will learn step-by-step how to add SparkScan to your application. The general steps are: -1. Create a new Data Capture Context instance. +1. Initialize the Data Capture Context. 2. Configure the Spark Scan Mode. 3. Create the SparkScanView with the desired settings and bind it to the application’s lifecycle. 4. Register the listener to be informed when new barcodes are scanned and update your data whenever this event occurs. @@ -24,14 +24,18 @@ In this guide you will learn step-by-step how to add SparkScan to your applicati Devices running the Scandit Data Capture SDK need to have a GPU or the performance will drastically decrease. ::: -## Create a New Data Capture Context Instance +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. -```sh -const context = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +```js +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the SparkScan Mode The SparkScan Mode is configured through [`SparkScanSettings`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/spark-scan-settings.html#class-scandit.datacapture.barcode.spark.SparkScanSettings) and allows you to register one or more listeners that are informed whenever a new barcode is scanned. @@ -39,14 +43,14 @@ The SparkScan Mode is configured through [`SparkScanSettings`](https://docs.scan 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…). ```js -const settings = new Scandit.SparkScanSettings(); +const settings = new SparkScanSettings(); settings.enableSymbologies([Symbology.EAN13UPCA]); ``` Next, create a SparkScan instance with the settings initialized in the previous step: ```js -const sparkScan = Scandit.SparkScan.forSettings(settings); +const sparkScan = new SparkScan(settings); ``` ## Setup the Spark Scan View @@ -56,7 +60,7 @@ The SparkScan built-in user interface includes the camera preview and scanning U The [`SparkScanView`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-settings.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView) appearance can be customized through [`SparkScanViewSettings`](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-settings.html#class-scandit.datacapture.barcode.spark.ui.SparkScanViewSettings). ```js -const viewSettings = new Scandit.SparkScanViewSettings(); +const viewSettings = new SparkScanViewSettings(); // setup the desired appearance settings by updating the fields in the object above ``` @@ -67,13 +71,7 @@ By adding a `SparkScanView`, the scanning interface (camera preview and scanning Add a `SparkScanView` to your view hierarchy. Construct a new SparkScan view. The `SparkScan` view is automatically added to the provided parentView: ```js -const sparkScanComponent = ( - -); +const sparkScanView = SparkScanView.forContext(DataCaptureContext.sharedInstance, sparkScan, viewSettings); ``` Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scandit.com/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view.html#method-scandit.datacapture.barcode.spark.ui.SparkScanView.StopScanning) in your app state handling logic. You have to call this for the correct functioning of the @@ -81,12 +79,12 @@ Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scan ```js componentWillUnmount() { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } handleAppStateChange = async (nextAppState) => { if (nextAppState.match(/inactive|background/)) { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } } ``` diff --git a/docs/sdks/cordova/barcode-capture/get-started.md b/docs/sdks/cordova/barcode-capture/get-started.md index 2e0739a0..38bc4690 100644 --- a/docs/sdks/cordova/barcode-capture/get-started.md +++ b/docs/sdks/cordova/barcode-capture/get-started.md @@ -13,7 +13,7 @@ keywords: In this guide you will learn step by step how to add barcode capture to your application. The general steps are: - Include the ScanditBarcodeCapture library and its dependencies to your project, if any. -- Create a new [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) instance, initialized with your license key. +- Initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with your license key. - Create a [barcode capture settings](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-capture-settings.html#class-scandit.datacapture.barcode.BarcodeCaptureSettings) and enable the [barcode symbologies](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology) you want to read in your application. - Create a new [barcode capture mode](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-capture.html#class-scandit.datacapture.barcode.BarcodeCapture) instance and initialize it with the settings created above. - Register a [barcode capture listener](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-capture-listener.html#interface-scandit.datacapture.barcode.IBarcodeCaptureListener) to receive scan events. Process the successful scans according to your application’s needs, e.g. by looking up information in a database. After a successful scan, decide whether more codes will be scanned, or the scanning process should be stopped. @@ -35,16 +35,18 @@ import InternalDependencies from '../../../partials/get-started/_internal-deps.m -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Scanning Behavior Barcode scanning is orchestrated by the [BarcodeCapture](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-capture.html#class-scandit.datacapture.barcode.BarcodeCapture) [data capture mode](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-mode.html#interface-scandit.datacapture.core.IDataCaptureMode). This class is the main entry point for scanning barcodes. It is configured through [BarcodeCaptureSettings](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-capture-settings.html#class-scandit.datacapture.barcode.BarcodeCaptureSettings) and allows to register one or more [listeners](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-capture-listener.html#interface-scandit.datacapture.barcode.IBarcodeCaptureListener) that will get informed whenever new codes have been recognized. @@ -69,7 +71,7 @@ Next, create a [BarcodeCapture](https://docs.scandit.com/data-capture-sdk/cordov ```js const barcodeCapture = new Scandit.BarcodeCapture(settings); -context.addMode(barcodeCapture); +DataCaptureContext.sharedInstance.addMode(barcodeCapture); ``` ## Register the Barcode Capture Listener @@ -123,7 +125,7 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeCapture.recommendedCameraSettings; +const cameraSettings = Scandit.BarcodeCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -137,7 +139,7 @@ if (camera) { Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```js -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/data-capture-sdk/cordova/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.On](https://docs.scandit.com/data-capture-sdk/cordova/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): @@ -153,17 +155,15 @@ camera.switchToDesiredState(Scandit.FrameSourceState.On); When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/cordova/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = Scandit.DataCaptureView.forContext(DataCaptureContext.sharedInstance); view.connectToElement(htmlElement); ``` To visualize the results of barcode scanning, the following [overlay](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-capture-overlay.html#class-scandit.datacapture.barcode.ui.BarcodeCaptureOverlay) can be added: ```js -const overlay = Scandit.BarcodeCaptureOverlay.withBarcodeCaptureForView( - barcodeCapture, - view -); +const overlay = new Scandit.BarcodeCaptureOverlay(barcodeCapture); +view.addOverlay(overlay); ``` ## Disabling Barcode Capture diff --git a/docs/sdks/cordova/barcode-generator.md b/docs/sdks/cordova/barcode-generator.md index 1893535a..322e3a42 100644 --- a/docs/sdks/cordova/barcode-generator.md +++ b/docs/sdks/cordova/barcode-generator.md @@ -32,24 +32,28 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to your ## Generating Barcodes -To generate barcodes, you need to create a [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). +To generate barcodes, you need to initialize the [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). With the context you can then instantiate a [`BarcodeGeneratorBuilder`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-generator-builder.html#class-scandit.datacapture.barcode.generator.BarcodeGeneratorBuilder), and use the method of [`BarcodeGenerator`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) for the symbology you are interested in, in this example Code 128. You can configure the colors used in the resulting image: ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.Code128BarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +const builder = Scandit.BarcodeGenerator.code128BarcodeGeneratorBuilder(DataCaptureContext.sharedInstance) + .withBackgroundColor(Scandit.Color.fromHex('#ffffff')) + .withForegroundColor(Scandit.Color.fromHex('#000000')); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + When the builder is configured get the `BarcodeGenerator` and try to generate the image: ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { @@ -62,26 +66,30 @@ See the complete [API reference](https://docs.scandit.com/data-capture-sdk/cordo ## Generating QR Codes -To generate barcodes, you need to create a [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). +To generate barcodes, you need to initialize the [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). With the context you can then instantiate a [`QRCodeBarcodeGeneratorBuilder`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-generator-builder.html#class-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder) using the method of [`BarcodeGenerator`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) specific for QR codes. You can configure the colors used in the resulting image, and the two settings that can be configured for QR codes: [`QRCodeBarcodeGeneratorBuilder.errorCorrectionLevel`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithErrorCorrectionLevel) and [`QRCodeBarcodeGeneratorBuilder.versionNumber`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithVersionNumber). ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.QrCodeBarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK) - .withErrorCorrectionLevel(Scandit.QrCodeErrorCorrectionLevel.MEDIUM) +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +const builder = Scandit.BarcodeGenerator.qrCodeBarcodeGeneratorBuilder(DataCaptureContext.sharedInstance) + .withBackgroundColor(Scandit.Color.fromHex('#ffffff')) + .withForegroundColor(Scandit.Color.fromHex('#000000')) + .withErrorCorrectionLevel(Scandit.QrCodeErrorCorrectionLevel.Medium) .withVersionNumber(4); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + When the builder is configured get the `BarcodeGenerator` and try to generate the image: ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { diff --git a/docs/sdks/cordova/barcode-selection/get-started.md b/docs/sdks/cordova/barcode-selection/get-started.md index 73582e43..5cab4b40 100644 --- a/docs/sdks/cordova/barcode-selection/get-started.md +++ b/docs/sdks/cordova/barcode-selection/get-started.md @@ -16,7 +16,7 @@ We recommend using **SparkScan** or **Barcode Capture API** instead of Barcode S In this guide you will learn step by step how to add barcode selection to your application. The general step are: -- Create a new [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) instance, initialized with your license key. +- Initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with your license key. - Create a [barcode selection settings](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-selection-settings.html#class-scandit.datacapture.barcode.selection.BarcodeSelectionSettings) and choose the right configuration. - Create a new [barcode selection mode](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-selection.html#class-scandit.datacapture.barcode.selection.BarcodeSelection) instance and initialize it with the settings created above. - Register a [barcode selection listener](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-selection-listener.html#interface-scandit.datacapture.barcode.selection.IBarcodeSelectionListener) to receive scan events. Process the successful scans according to your application’s needs, e.g. by looking up information in a database. After a successful scan, decide whether more codes will be scanned, or the scanning process should be stopped. @@ -32,16 +32,18 @@ Before starting with adding a capture mode, make sure that you have a valid Scan You can retrieve your Scandit Data Capture SDK license key by signing in to [your account](https://ssl.scandit.com/dashboard/sign-in). ::: -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Selection Behavior _Symbologies_ @@ -85,7 +87,7 @@ Next, create a [BarcodeSelection](https://docs.scandit.com/data-capture-sdk/cord ```js const barcodeSelection = new Scandit.BarcodeSelection(settings); -context.addMode(barcodeSelection); +await Scandit.DataCaptureContext.sharedInstance.addMode(barcodeSelection); ``` ## Register the Barcode Selection Listener @@ -126,7 +128,7 @@ When using the built-in camera there are recommended settings for each capture m recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeSelection.recommendedCameraSettings; +const cameraSettings = Scandit.BarcodeSelection.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -141,7 +143,7 @@ Because the frame source is configurable, the data capture context must be told [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```js -context.setFrameSource(camera); +Scandit.DataCaptureContext.sharedInstance.setFrameSource(camera); ``` The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/data-capture-sdk/cordova/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of diff --git a/docs/sdks/cordova/id-capture/advanced.md b/docs/sdks/cordova/id-capture/advanced.md index 4f5ac290..348eace9 100644 --- a/docs/sdks/cordova/id-capture/advanced.md +++ b/docs/sdks/cordova/id-capture/advanced.md @@ -20,16 +20,16 @@ That means certain data from certain fields won’t be returned, even if it’s ```js // Default value: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_ONLY); +settings.anonymizationMode = Scandit.IdAnonymizationMode.FieldsOnly; // Sensitive data is additionally covered with black boxes on returned images: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_AND_IMAGES); +settings.anonymizationMode = Scandit.IdAnonymizationMode.FieldsAndImages; // Only images are anonymized: -settings.setAnyonymizationMode(IdAnonymizationMode.IMAGES_ONLY); +settings.anonymizationMode = Scandit.IdAnonymizationMode.ImagesOnly; // No anonymization: -settings.setAnyonymizationMode(IdAnonymizationMode.NONE); +settings.anonymizationMode = Scandit.IdAnonymizationMode.None; ``` ## ID Images @@ -45,13 +45,13 @@ For the full frame of the document, you can use [`setShouldPassImageTypeToResult ```js // Holder's picture as printed on a document: -settings.setShouldPassImageTypeToResult(ImageType.FACE); +settings.setShouldPassImageTypeToResult(Scandit.IdImageType.Face, true); // Cropped image of a document: -settings.setShouldPassImageTypeToResult(ImageType.CROPPED_DOCUMENT); +settings.setShouldPassImageTypeToResult(Scandit.IdImageType.CroppedDocument, true); // Full camera frame that contains the document: -settings.setShouldPassImageTypeToResult(ImageType.FULL_FRAME); +settings.setShouldPassImageTypeToResult(Scandit.IdImageType.Frame, true); ``` ## Callbacks and Scanning Workflows diff --git a/docs/sdks/cordova/id-capture/get-started.md b/docs/sdks/cordova/id-capture/get-started.md index 134200a9..dd010cc4 100644 --- a/docs/sdks/cordova/id-capture/get-started.md +++ b/docs/sdks/cordova/id-capture/get-started.md @@ -14,7 +14,7 @@ This page will guide you through the process of adding ID Capture to your Cordov The general steps are: -- Creating a new Data Capture Context instance +- Initializing the Data Capture Context - Accessing a Camera - Configuring the Capture Settings - Implementing a Listener to Receive Scan Results @@ -41,25 +41,27 @@ import IdModuleOverview from '../../../partials/get-started/_id-module-overview- To learn more about specifying native dependencies on Cordova and the framework tag, take a look at the official [Cordova documentation](https://cordova.apache.org/docs/en/latest/plugin%5Fref/spec.html#framework). -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Add the Camera You need to also create the [Camera](https://docs.scandit.com/data-capture-sdk/cordova/core/api/camera.html#class-scandit.datacapture.core.Camera): ```js const camera = Scandit.Camera.default; -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); -const cameraSettings = Scandit.IdCapture.recommendedCameraSettings; +const cameraSettings = Scandit.IdCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -82,30 +84,30 @@ By default, [anonymized data](./advanced.md#configure-data-anonymization) is not const settings = new Scandit.IdCaptureSettings(); // Documents from any region: -settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.AnyRegion)); +settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.IdCaptureRegion.Any)); // Only documents issued by a specific country: -settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.Germany)); +settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.IdCaptureRegion.Germany)); // Regional documents: -settings.acceptedDocuments.push(new Scandit.RegionSpecific.ApecBusinessTravelCard()); +settings.acceptedDocuments.push(new Scandit.RegionSpecific(Scandit.RegionSpecificSubtype.ApecBusinessTravelCard)); // Reject passports from certain regions: -settings.rejectedDocuments.push(new Scandit.Passport(Scandit.Region.Cuba)); +settings.rejectedDocuments.push(new Scandit.Passport(Scandit.IdCaptureRegion.Cuba)); // To scan only one-sided documents and a given zone: -settings.scannerType = new Scandit.SingleSideScanner({ barcode: true }); +settings.scanner = new Scandit.SingleSideScanner(true, false, false); // or -settings.scannerType = new Scandit.SingleSideScanner({ machineReadableZone: true }); +settings.scanner = new Scandit.SingleSideScanner(false, true, false); // or -settings.scannerType = new Scandit.SingleSideScanner({ visualInspectionZone: true }); +settings.scanner = new Scandit.SingleSideScanner(false, false, true); // To scan both sides of the document: -settings.scannerType = new Scandit.FullDocumentScanner(); +settings.scanner = new Scandit.FullDocumentScanner(); ``` Create a new ID Capture mode with the chosen settings: ```ts const idCapture = new Scandit.IdCapture(settings); -context.addMode(idCapture); +DataCaptureContext.sharedInstance.addMode(idCapture); ``` ## Implement the Listener @@ -172,17 +174,15 @@ When using the built-in camera as [frameSource](https://docs.scandit.com/data-ca To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/cordova/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = Scandit.DataCaptureView.forContext(DataCaptureContext.sharedInstance); view.connectToElement(htmlElement); ``` Then create an instance of [IdCaptureOverlay](https://docs.scandit.com/data-capture-sdk/cordova/id-capture/api/ui/id-capture-overlay.html#class-scandit.datacapture.id.ui.IdCaptureOverlay) attached to the view: ```js -let overlay = Scandit.IdCaptureOverlay.withTextCaptureForView( - idCapture, - dataCaptureView -); +const overlay = new Scandit.IdCaptureOverlay(idCapture); +view.addOverlay(overlay); ``` The overlay chooses the displayed UI automatically, based on the selected [IdCaptureSettings](https://docs.scandit.com/data-capture-sdk/cordova/id-capture/api/id-capture-settings.html#class-scandit.datacapture.id.IdCaptureSettings). diff --git a/docs/sdks/cordova/matrixscan-ar/get-started.md b/docs/sdks/cordova/matrixscan-ar/get-started.md index 7b23901a..387ab24f 100644 --- a/docs/sdks/cordova/matrixscan-ar/get-started.md +++ b/docs/sdks/cordova/matrixscan-ar/get-started.md @@ -1,11 +1,110 @@ --- -description: "This functionality is not currently supported in the selected framework. " +description: "In this guide you will learn step-by-step how to add MatrixScan AR to your application. Implementing MatrixScan AR involves two primary elements: " displayed_sidebar: cordovaSidebar +sidebar_position: 2 +framework: cordova +keywords: + - cordova --- -# Page Unavailable +# Get Started -This functionality is not currently supported in the selected framework. +In this guide you will learn step-by-step how to add MatrixScan AR to your application. Implementing MatrixScan AR involves two primary elements: ---- \ No newline at end of file +- Barcode AR: The data capture mode that is used for scan and check functionality. +- A Barcode AR View: The pre-built UI elements used to highlight items to be checked. + +The general steps are: + +- Initializing the Data Capture Context +- Configuring the Barcode AR Mode +- Setup the Barcode AR View +- Registering the Listener to notify about found items + +## Prerequisites + +Before starting with adding a capture mode, make sure that you have a valid Scandit Data Capture SDK license key and that you added the necessary dependencies. If you have not done that yet, check out [this guide](../add-sdk.md). + +:::note +You can retrieve your Scandit Data Capture SDK license key by signing in to [your Scandit account](https://ssl.scandit.com/dashboard/sign-in). +::: + +## Initialize the Data Capture Context + +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. + +```js +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +``` + +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + +## Configure the Barcode AR Mode + +The main entry point for the Barcode AR Mode is the `BarcodeAr` object. You can configure the supported Symbologies through its [`BarcodeArSettings`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-ar-settings.html), and set up the list of items that you want MatrixScan AR to highlight. + +Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. + +```js +const settings = new Scandit.BarcodeArSettings(); +settings.enableSymbology(Scandit.Symbology.EAN13UPCA, true); +``` + +The create the mode with the previously created settings: + +```js +const mode = new Scandit.BarcodeAr(settings); +``` + +## Setup the `BarcodeArView` + +MatrixScan AR's built-in AR user interface includes buttons and overlays that guide the user through the scan and check process. By adding a [`BarcodeArView`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-ar-view.html#class-scandit.datacapture.barcode.check.ui.BarcodeArView), the scanning interface is added automatically to your application. + +The `BarcodeArView` is where you provide the [`highlightProvider`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-ar-view.html#property-scandit.datacapture.barcode.check.ui.BarcodeArView.HighlightProvider) and/or [`annotationProvider`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-ar-view.html#property-scandit.datacapture.barcode.check.ui.BarcodeArView.AnnotationProvider) to supply the highlight and annotation information for the barcodes to be checked. If *null*, a default highlight is used and no annotations are provided. + +The `BarcodeArView` appearance can be customized through [`BarcodeArViewSettings`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-ar-view-settings.html#class-scandit.datacapture.barcode.check.ui.BarcodeArViewSettings), and the corresponding settings for your desired highlights and/or annotations, to match your application's look and feel. The following settings can be customized: + +* Audio and haptic feedback +* Torch button visibility and its position +* Switch camera button visibility and its position +* Zoom control visibility and its position +* The size, colors, and styles of the highlight and annotation overlays + +```js +const viewSettings = new Scandit.BarcodeArViewSettings(); +``` + +Next, create a `BarcodeArView` instance with the Data Capture Context and the settings initialized in the previous step. Then connect it to an HTML element in your view hierarchy. + +```js +const barcodeArView = new Scandit.BarcodeArView({ + context: DataCaptureContext.sharedInstance, + barcodeAr: mode, + settings: viewSettings, +}); + +barcodeArView.connectToElement(htmlElement); +``` + +## Register the Listener + +Register a [BarcodeArViewUiListener](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-ar-view.html#interface-scandit.datacapture.barcode.check.ui.IBarcodeArViewUiListener) to be notified when a highlighted barcode is tapped. + +```js +barcodeArView.uiListener = { + didTapHighlightForBarcode(barcodeAr, barcode, highlight) { + // Handle the tapped barcode. + }, +}; +``` + +## Start Searching + +As soon as everything is set up, control the [BarcodeArView](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-ar-view.html#class-scandit.datacapture.barcode.check.ui.BarcodeArView) to start the search. + +```js +barcodeArView.start(); +``` diff --git a/docs/sdks/cordova/matrixscan-ar/intro.md b/docs/sdks/cordova/matrixscan-ar/intro.md index 7b23901a..a98acd92 100644 --- a/docs/sdks/cordova/matrixscan-ar/intro.md +++ b/docs/sdks/cordova/matrixscan-ar/intro.md @@ -1,11 +1,15 @@ --- -description: "This functionality is not currently supported in the selected framework. " +description: "import AboutMatrixScanCheck from '../../../partials/intro/_about-matrixscan-ar.mdx' " -displayed_sidebar: cordovaSidebar +sidebar_position: 1 +pagination_prev: null +framework: cordova +keywords: + - cordova --- -# Page Unavailable +# About MatrixScan AR -This functionality is not currently supported in the selected framework. +import AboutMatrixScanCheck from '../../../partials/intro/_about-matrixscan-ar.mdx' ---- \ No newline at end of file + diff --git a/docs/sdks/cordova/matrixscan-count/advanced.md b/docs/sdks/cordova/matrixscan-count/advanced.md index 7b532457..f9a755a9 100644 --- a/docs/sdks/cordova/matrixscan-count/advanced.md +++ b/docs/sdks/cordova/matrixscan-count/advanced.md @@ -25,8 +25,8 @@ const barcodeCountCaptureListListener = { }, }; -const targetBarcodes = [TargetBarcode.create('data', 1)]; -const barcodeCountCaptureList = BarcodeCountCaptureList.create( +const targetBarcodes = [Scandit.TargetBarcode.create('data', 1)]; +const barcodeCountCaptureList = Scandit.BarcodeCountCaptureList.create( barcodeCountCaptureListListener, targetBarcodes ); @@ -50,15 +50,7 @@ import Totes from '../../../partials/count/_tote-mapping.mdx' It can be difficult to reach the shutter button if the smart device is attached to the user’s wrist by a strap or similar. In this instance, you can enable a floating shutter button that can be positioned by the end user in a more ergonomically suitable position. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowFloatingShutterButton = true; - } - }} - /> -); +barcodeCountView.shouldShowFloatingShutterButton = true; ``` ## Filtering @@ -70,10 +62,10 @@ In this case, you can filter the others out. This can be done by symbology, symb For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```js -const settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +const settings = new Scandit.BarcodeCountSettings(); +settings.enableSymbologies(enabledSymbologies); -const excludedSymbologies = [Symbology.PDF417]; +const excludedSymbologies = [Scandit.Symbology.PDF417]; const filterSettings = settings.filterSettings; filterSettings.excludedSymbologies = excludedSymbologies; ``` @@ -81,7 +73,7 @@ filterSettings.excludedSymbologies = excludedSymbologies; Or, you want to exclude all the barcodes starting with 4 numbers: ```js -const settings = new BarcodeCountSettings(); +const settings = new Scandit.BarcodeCountSettings(); const filterSettings = settings.filterSettings; filterSettings.excludedCodesRegex = '^1234.*'; @@ -98,15 +90,7 @@ There are situations in which the user may find it helpful to clean up their scr If this is the case, you can enable the “Clear screen” button. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowClearHighlightsButton = true; - } - }} - /> -); +barcodeCountView.shouldShowClearHighlightsButton = true; ``` ## Customize Overlay Colors @@ -124,15 +108,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Notifications @@ -153,15 +129,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Disable UI Elements @@ -172,30 +140,14 @@ However, if you wish to disable UI elements you can do it as follows. Disable buttons: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowListButton = false; - view.shouldShowExitButton = false; - view.shouldShowShutterButton = false; - } - }} - /> -); +barcodeCountView.shouldShowListButton = false; +barcodeCountView.shouldShowExitButton = false; +barcodeCountView.shouldShowShutterButton = false; ``` Disable feedback and hints: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowUserGuidanceView = false; - view.shouldShowHints = false; - } - }} - /> -); +barcodeCountView.shouldShowUserGuidanceView = false; +barcodeCountView.shouldShowHints = false; ``` diff --git a/docs/sdks/cordova/matrixscan-count/get-started.md b/docs/sdks/cordova/matrixscan-count/get-started.md index 87e2f163..752c8b92 100644 --- a/docs/sdks/cordova/matrixscan-count/get-started.md +++ b/docs/sdks/cordova/matrixscan-count/get-started.md @@ -13,7 +13,7 @@ In this guide you will learn step-by-step how to add MatrixScan Count to your ap The general steps are: -1. Create a new Data Capture Context instance +1. Initialize the Data Capture Context 2. Configure the Barcode Count Mode 3. Obtain camera instance and set frame source used 4. Register the listener to be informed when scanned phase is over @@ -23,16 +23,18 @@ The general steps are: 8. Reset Barcode Count mode 9. List and Exit callbacks -## Create A New Data Capture Context Instance +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure The Barcode Count Mode The main entry point for the Barcode Count Mode is the [BarcodeCount](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) object. It is configured through [BarcodeCountSettings](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-count-settings.html#class-scandit.datacapture.barcode.count.BarcodeCountSettings) and allows you to register one or more listeners that are informed whenever a scan phase has finished. @@ -40,15 +42,15 @@ The main entry point for the Barcode Count Mode is the [BarcodeCount](https://do For this tutorial, we will set up Barcode Count for tracking EAN13 codes. Change this to the correct symbologies for your use case (for example, Code 128, Code 39…). ```js -const settings = new BarcodeCountSettings(); -settings.enableSymbologies([Symbology.EAN13UPCA]); +const settings = new Scandit.BarcodeCountSettings(); +settings.enableSymbologies([Scandit.Symbology.EAN13UPCA]); ``` If you are sure that your environment will only have unique barcodes (i.e. no duplicated values), you can also enable [BarcodeCountSettings.expectsOnlyUniqueBarcodes](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-count-settings.html#property-scandit.datacapture.barcode.count.BarcodeCountSettings.ExpectsOnlyUniqueBarcodes). This option improves scanning performance as long as you are sure that no duplicates will be present. Next, create a [BarcodeCount](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) instance with the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) and the settings initialized in the previous step: ```js -const barcodeCount = new BarcodeCount(settings); -context.addMode(barcodeCount); +const barcodeCount = new Scandit.BarcodeCount(settings); +DataCaptureContext.sharedInstance.addMode(barcodeCount); ``` ## Obtain Camera Instance And Set Frame Source Used @@ -56,16 +58,18 @@ context.addMode(barcodeCount); Our recommended camera settings should be used to achieve the best performance and user experience. The following couple of lines show how to get the recommended settings for MatrixScan Count and create the camera from it: ```js -const cameraSettings = new CameraSettings(); +const cameraSettings = Scandit.BarcodeCount.createRecommendedCameraSettings(); -const camera = Camera.default; -camera.applySettings(cameraSettings); +const camera = Scandit.Camera.default; +if (camera != null) { + camera.applySettings(cameraSettings); +} ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```js -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` ## Register the Listener @@ -82,9 +86,8 @@ MatrixScan Count’s built-in AR user interface includes buttons and overlays th Add a [BarcodeCountView](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) to your view hierarchy: ```js -const barcodeCountViewComponent = ( - -); +const barcodeCountView = Scandit.BarcodeCountView.forContextWithMode(DataCaptureContext.sharedInstance, barcodeCount); +barcodeCountView.connectToElement(htmlElement); ``` ## Set Up The Camera So That It Switches On When You Are In Scanning View @@ -92,21 +95,13 @@ const barcodeCountViewComponent = ( The camera is not automatically turned on when you are in a scanning view. You need to set up the camera so that it switches on when needed and it switches off when not needed anymore. Similarly [BarcodeCount](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) should also be enabled and disabled. For instance, you should switch off the camera when the [BarcodeCountView](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is not visible anymore (including when the app goes in the background), similarly you want to switch on the camera when the [BarcodeCountView](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is visible (including when the app goes to the foreground). One way to achieve this is the following: ```js -componentDidMount() { -handleAppStateChangeSubscription = AppState.addEventListener('change', handleAppStateChange); -} +document.addEventListener('pause', () => { + camera.switchToDesiredState(Scandit.FrameSourceState.Off); +}, false); -componentWillUnmount() { -handleAppStateChangeSubscription.remove(); -} - -handleAppStateChange = async (nextAppState) => { -if (nextAppState.match(/inactive|background/)) { -camera.switchToDesiredState(FrameSourceState.Off); -} else { -camera.switchToDesiredState(FrameSourceState.On); -} -} +document.addEventListener('resume', () => { + camera.switchToDesiredState(Scandit.FrameSourceState.On); +}, false); ``` ## Store And Retrieve Scanned Barcodes @@ -150,13 +145,5 @@ const viewUiListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.uiListener = viewUiListener; - } - }} - /> -); +barcodeCountView.uiListener = viewUiListener; ``` diff --git a/docs/sdks/cordova/matrixscan-find/advanced.md b/docs/sdks/cordova/matrixscan-find/advanced.md index 47414652..dabe6be4 100644 --- a/docs/sdks/cordova/matrixscan-find/advanced.md +++ b/docs/sdks/cordova/matrixscan-find/advanced.md @@ -24,11 +24,11 @@ mode.addListener({ // The mode was started }, - didPauseSearch(foundItems: BarcodeFindItem[]) { + didPauseSearch(foundItems) { // The mode was paused }, - didStopSearch(foundItems: BarcodeFindItem[]) { + didStopSearch(foundItems) { // The mode was stopped after the finish button was clicked }, }); diff --git a/docs/sdks/cordova/matrixscan-find/get-started.md b/docs/sdks/cordova/matrixscan-find/get-started.md index 263f0db3..5cb34cd8 100644 --- a/docs/sdks/cordova/matrixscan-find/get-started.md +++ b/docs/sdks/cordova/matrixscan-find/get-started.md @@ -16,22 +16,24 @@ In this guide you will learn step-by-step how to add MatrixScan Find to your app The general steps are: -1. Create a new Data Capture Context instance. +1. Initialize the Data Capture Context. 2. Configure the Barcode Find Mode. 3. Setup the BarcodeFindView. 4. Register a listener to be notified with found items 5. Start searching -## Create a new Data Capture Context instance +## Initialize the Data Capture Context -The first step to add find capabilities to your application is to create a new [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add find capabilities to your application is to initialize the [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const dataCaptureContext = DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Find Mode The main entry point for the Barcode Find Mode is the [BarcodeFind](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-find.html#class-scandit.datacapture.barcode.find.BarcodeFind) object. You can configure the supported Symbologies through its [BarcodeFindSettings](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-find-settings.html#class-scandit.datacapture.barcode.find.BarcodeFindSettings), and set up the list of items that you want MatrixScan Find to highlight (e.g. a list of products). @@ -41,8 +43,8 @@ For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change First create the settings: ```js -const settings = BarcodeFindSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new Scandit.BarcodeFindSettings(); +settings.enableSymbology(Scandit.Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be actively searched for. @@ -51,16 +53,16 @@ In this tutorial, let’s look up two items based on their EAN13 codes. We will ```js const items = [ -new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215438"), -new BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), -new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only +new Scandit.BarcodeFindItem(new Scandit.BarcodeFindItemSearchOptions("9783598215438"), +new Scandit.BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), +new Scandit.BarcodeFindItem(new Scandit.BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only ] ``` Create the mode with the previously created settings and set the items: ```js -const mode = new BarcodeFind(settings); +const mode = new Scandit.BarcodeFind(settings); mode.setItemList(items); ``` @@ -74,23 +76,14 @@ The BarcodeFindView appearance can be customized through [BarcodeFindViewSetting - Enable sound and haptic alerts ```js -const viewSettings = new BarcodeFindViewSettings(); +const viewSettings = new Scandit.BarcodeFindViewSettings(); ``` Construct a new BarcodeFindView. The BarcodeFindView is automatically added to the provided parent view. ```js -let barcodeFind; - { - barcodeFindView = view; - // Handle the view as needed, for example - barcodeFindView.startSearching(); - }} ->; +const barcodeFindView = new Scandit.BarcodeFindView({ context: DataCaptureContext.sharedInstance, barcodeFind: mode, viewSettings }); +barcodeFindView.connectToElement(htmlElement); ``` ## Register a listener to be notified with found items @@ -101,7 +94,7 @@ In this tutorial, we will then navigate back to the previous screen to finish th ```js barcodeFindView.barcodeFindViewUiListener = { - didTapFinishButton(foundItems: BarcodeFindItem[]) { + didTapFinishButton(foundItems) { // This method is called when the user presses the // finish button. It returns the list of all items that were found during // the session. diff --git a/docs/sdks/cordova/matrixscan-pick/advanced.md b/docs/sdks/cordova/matrixscan-pick/advanced.md index c5cc1cc0..7264ad5c 100644 --- a/docs/sdks/cordova/matrixscan-pick/advanced.md +++ b/docs/sdks/cordova/matrixscan-pick/advanced.md @@ -16,16 +16,26 @@ MatrixScan Pick is optimized by default for efficiency, accuracy, and a seamless You may want more fine-grained knowledge over the different events happening during the life of the `BarcodePick` mode, such as when the search starts, pauses, and stops. -To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. +To do this, you can directly register a [`BarcodePickViewListener`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-pick-view.html#interface-scandit.datacapture.barcode.pick.IBarcodePickViewListener) on the view itself, keeping in mind that these listeners are called from a background thread. -```javascript -mode.addListener({ - onObservationStarted() { - // The mode was started +```js +const viewListener = { + didStartScanning(view) { + // The view started scanning }, - - onObservationStopped(foundItems: BarcodeFindItem[]) { - // The mode was stopped after the finish button was clicked + + didFreezeScanning(view) { + // The view was frozen + }, + + didPauseScanning(view) { + // The view was paused }, -}); + + didStopScanning(view) { + // The view stopped scanning + }, +}; + +barcodePickView.addListener(viewListener); ``` diff --git a/docs/sdks/cordova/matrixscan-pick/get-started.md b/docs/sdks/cordova/matrixscan-pick/get-started.md index 3d040269..3f7249de 100644 --- a/docs/sdks/cordova/matrixscan-pick/get-started.md +++ b/docs/sdks/cordova/matrixscan-pick/get-started.md @@ -16,7 +16,7 @@ In this guide you will learn step-by-step how to add MatrixScan Pick to your app The general steps are: -- Creating a new Data Capture Context instance +- Initializing the Data Capture Context - Configuring the Barcode Pick Mode - Setup the Barcode Pick View - Registering the Listener to notify about found items @@ -29,39 +29,42 @@ Before starting with adding a capture mode, make sure that you have a valid Scan You can retrieve your Scandit Data Capture SDK license key by signing in to [your Scandit account](https://ssl.scandit.com/dashboard/sign-in). ::: -## Create a Data Capture Context +## Initialize the Data Capture Context -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. +The first step to add capture capabilities to your application is to initialize the Data Capture Context with a valid Scandit Data Capture SDK license key. -```javascript -const dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +```js +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Pick Mode The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You can configure the supported Symbologies through its [`BarcodePickSettings`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-pick-settings.html), and set up the list of items that you want MatrixScan Pick to highlight. Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. -```javascript -const settings = BarcodePickSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +```js +const settings = new Scandit.BarcodePickSettings(); +settings.enableSymbology(Scandit.Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be picked and quantity to be picked for each item. -```javascript +```js const items = [ - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), - new BarcodePickProductQuantityToPick(3), - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3) -] + new Scandit.BarcodePickProduct(new Scandit.BarcodePickProductIdentifier("9783598215438"), new Scandit.BarcodePickProductQuantityToPick(3)), + new Scandit.BarcodePickProduct(new Scandit.BarcodePickProductIdentifier("9783598215414"), new Scandit.BarcodePickProductQuantityToPick(3)), +]; ``` Create the mode with the previously created settings: -```javascript -const mode = new BarcodePick(settings); +```js +const mode = new Scandit.BarcodePick(settings); ``` ## Setup the `BarcodePickView` @@ -79,15 +82,16 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Zoom button * Loading Dialog -```javascript -const viewSettings = new BarcodePickViewSettings(); +```js +const viewSettings = new Scandit.BarcodePickViewSettings(); // ... ``` Construct a new `BarcodePickView`. The `BarcodePickView` is automatically added to the provided parent view. -```javascript -const BarcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, BarcodePick, viewSettings); +```js +const barcodePickView = new Scandit.BarcodePickView({ context: DataCaptureContext.sharedInstance, barcodePick: mode, settings: viewSettings }); +barcodePickView.connectToElement(document.getElementById('html-element-id')); ``` ## Register the Listener @@ -98,13 +102,12 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/data-capture-sdk In this tutorial, we will then navigate back to the previous screen to finish the find session. -```javascript -BarcodePickView.BarcodePickViewUiListener = { - didTapFinishButton(foundItems: BarcodePickProduct[]) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. - } +```js +barcodePickView.uiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the finish button. + // It returns the list of all items that were found during the session. + }, }; ``` @@ -112,8 +115,8 @@ BarcodePickView.BarcodePickViewUiListener = { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. -```javascript -BarcodePickView.start(); +```js +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/docs/sdks/cordova/matrixscan/advanced.md b/docs/sdks/cordova/matrixscan/advanced.md index 9d7e3e78..c3e97222 100644 --- a/docs/sdks/cordova/matrixscan/advanced.md +++ b/docs/sdks/cordova/matrixscan/advanced.md @@ -24,11 +24,8 @@ As mentioned above, the advanced overlay combined with its [listener](https://do First of all, create a new instance of [BarcodeBatchAdvancedOverlay](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-batch-advanced-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchAdvancedOverlay) and add it to the [DataCaptureView](https://docs.scandit.com/data-capture-sdk/cordova/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). ```js -const overlay = - Scandit.BarcodeBatchAdvancedOverlay.withBarcodeBatchForView( - barcodeBatch, - view - ); +const overlay = new Scandit.BarcodeBatchAdvancedOverlay(barcodeBatch); +view.addOverlay(overlay); ``` At this point, you have two options. diff --git a/docs/sdks/cordova/matrixscan/get-started.md b/docs/sdks/cordova/matrixscan/get-started.md index 38e17ab5..ff09bff7 100644 --- a/docs/sdks/cordova/matrixscan/get-started.md +++ b/docs/sdks/cordova/matrixscan/get-started.md @@ -14,7 +14,7 @@ In this guide you will learn step-by-step how to add MatrixScan to your applicat The general steps are: - Include the ScanditBarcodeCapture library and its dependencies to your project, if any. -- Create a new [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext), initialized with your license key. +- Initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with your license key. - Create a [barcode tracking settings](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-batch-settings.html#class-scandit.datacapture.barcode.batch.BarcodeBatchSettings) instance where you enable the [barcode symbologies](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology) you want to read in your application. - Create a new [barcode tracking](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-batch.html#class-scandit.datacapture.barcode.batch.BarcodeBatch) object and initialize it with the settings created above. - Obtain a [camera](https://docs.scandit.com/data-capture-sdk/cordova/core/api/camera.html#class-scandit.datacapture.core.Camera) instance and set it as the frame source on the data capture context previously created. @@ -35,16 +35,18 @@ import InternalDependencies from '../../../partials/get-started/_internal-deps.m -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Batch Mode The main entry point for the Barcode Batch Mode is the [BarcodeBatch](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-batch.html#class-scandit.datacapture.barcode.batch.BarcodeBatch) object. It is configured through [BarcodeBatchSettings](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-batch-settings.html#class-scandit.datacapture.barcode.batch.BarcodeBatchSettings) and allows to register one or more [listeners](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/barcode-batch-listener.html#interface-scandit.datacapture.barcode.batch.IBarcodeBatchListener) that will get informed whenever a new frame has been processed. @@ -62,7 +64,7 @@ Next, create a [BarcodeBatch](https://docs.scandit.com/data-capture-sdk/cordova/ ```js const barcodeBatch = new Scandit.BarcodeBatch(settings); -context.addMode(barcodeBatch); +DataCaptureContext.sharedInstance.addMode(barcodeBatch); ``` ## Use the Built-in Camera @@ -81,7 +83,7 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeBatch.recommendedCameraSettings; +const cameraSettings = Scandit.BarcodeBatch.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -94,7 +96,7 @@ if (camera != null) { Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```js -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/data-capture-sdk/cordova/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.On](https://docs.scandit.com/data-capture-sdk/cordova/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): @@ -108,17 +110,15 @@ camera.switchToDesiredState(Scandit.FrameSourceState.On); When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/cordova/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = Scandit.DataCaptureView.forContext(DataCaptureContext.sharedInstance); view.connectToElement(htmlElement); ``` To visualize the results of Barcode Batch, first you need to add the following [overlay](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay): ```js -const overlay = Scandit.BarcodeBatchBasicOverlay.withBarcodeBatchForView( - barcodeBatch, - view -); +const overlay = new Scandit.BarcodeBatchBasicOverlay(barcodeBatch, Scandit.BarcodeBatchBasicOverlayStyle.Frame); +view.addOverlay(overlay); ``` Once the overlay has been added, you should implement the [BarcodeBatchBasicOverlayListener](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#interface-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener) interface. The method diff --git a/docs/sdks/cordova/sparkscan/advanced.md b/docs/sdks/cordova/sparkscan/advanced.md index 02cfaff9..4af10335 100644 --- a/docs/sdks/cordova/sparkscan/advanced.md +++ b/docs/sdks/cordova/sparkscan/advanced.md @@ -33,11 +33,29 @@ You may want to introduce logic in your app to show an error message when scanni - The color of the flashing screen upon scan. You can enable or disable the visual feedback via [SparkScanViewSettings.visualFeedbackEnabled](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view-settings.html#property-scandit.datacapture.barcode.spark.ui.SparkScanViewSettings.VisualFeedbackEnabled) and you can control the color via [SparkScanBarcodeFeedback](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-barcode-feedback.html#sparkscan-barcode-feedback). -An error example is here reported: +To emit an error, implement a [SparkScanFeedbackDelegate](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/spark-scan-feedback-delegate.html#interface-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate) and set it on the [SparkScanView](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view.html#property-scandit.datacapture.barcode.spark.ui.SparkScanView.FeedbackDelegate): ```js -self.sparkScanView.emitFeedback(SparkScanBarcodeErrorFeedback(message: "This code should not have been scanned", -resumeCapturingDelay: 6, visualFeedbackColor: UIColor.red)) +sparkScanView.feedbackDelegate = sparkScanFeedbackDelegate; +``` + +In the [feedbackForBarcode](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/spark-scan-feedback-delegate.html#method-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate.GetFeedbackForBarcode) callback you can return an error or a success feedback: + +```js +const sparkScanFeedbackDelegate = { + feedbackForBarcode: (barcode) => { + if (isValidBarcode(barcode)) { + return new Scandit.SparkScanBarcodeSuccessFeedback(); + } else { + return new Scandit.SparkScanBarcodeErrorFeedback( + 'This code should not have been scanned', + 60 * 1000, + Scandit.Color.fromHex('#FF0000'), + new Scandit.Brush(Scandit.Color.fromHex('#FF0000'), Scandit.Color.fromHex('#FF0000'), 1), + ); + } + }, +}; ``` You can have different error states triggered by different logic conditions. For example you can trigger an error state when a wrong barcode is scanned, and another one when a duplicate barcode is scanned. These errors can show different colors and have different timeouts. diff --git a/docs/sdks/cordova/sparkscan/get-started.md b/docs/sdks/cordova/sparkscan/get-started.md index 847c0ec7..df35819f 100644 --- a/docs/sdks/cordova/sparkscan/get-started.md +++ b/docs/sdks/cordova/sparkscan/get-started.md @@ -11,7 +11,7 @@ keywords: In this guide you will learn step-by-step how to add SparkScan to your application. The general steps are: -1. Create a new Data Capture Context instance. +1. Initialize the Data Capture Context. 2. Configure the Spark Scan Mode. 3. Create the SparkScanView with the desired settings and bind it to the application’s lifecycle. 4. Register the listener to be informed when new barcodes are scanned and update your data whenever this event occurs. @@ -26,14 +26,18 @@ In this guide you will learn step-by-step how to add SparkScan to your applicati Devices running the Scandit Data Capture SDK need to have a GPU or the performance will drastically decrease. ::: -## Create a New Data Capture Context Instance +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. -```sh -const context = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +```js +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the SparkScan Mode The SparkScan Mode is configured through [`SparkScanSettings`](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/spark-scan-settings.html#class-scandit.datacapture.barcode.spark.SparkScanSettings) and allows you to register one or more listeners that are informed whenever a new barcode is scanned. @@ -42,13 +46,13 @@ For this tutorial, we will set up SparkScan for scanning EAN13 codes. Change thi ```js const settings = new Scandit.SparkScanSettings(); -settings.enableSymbologies([Symbology.EAN13UPCA]); +settings.enableSymbologies([Scandit.Symbology.EAN13UPCA]); ``` Next, create a SparkScan instance with the settings initialized in the previous step: ```js -const sparkScan = Scandit.SparkScan.forSettings(settings); +const sparkScan = new Scandit.SparkScan(settings); ``` ## Setup the Spark Scan View @@ -69,13 +73,7 @@ By adding a `SparkScanView`, the scanning interface (camera preview and scanning Add a `SparkScanView` to your view hierarchy. Construct a new SparkScan view. The `SparkScan` view is automatically added to the provided parentView: ```js -const sparkScanComponent = ( - -); +const sparkScanView = Scandit.SparkScanView.forContext(DataCaptureContext.sharedInstance, sparkScan, viewSettings); ``` Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scandit.com/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view.html#method-scandit.datacapture.barcode.spark.ui.SparkScanView.StopScanning) in your app state handling logic. You have to call this for the correct functioning of the @@ -83,12 +81,12 @@ Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scan ```js componentWillUnmount() { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } handleAppStateChange = async (nextAppState) => { if (nextAppState.match(/inactive|background/)) { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } } ``` diff --git a/docs/sdks/flutter/barcode-capture/configure-barcode-symbologies.md b/docs/sdks/flutter/barcode-capture/configure-barcode-symbologies.md index a367b3f8..12e523e3 100644 --- a/docs/sdks/flutter/barcode-capture/configure-barcode-symbologies.md +++ b/docs/sdks/flutter/barcode-capture/configure-barcode-symbologies.md @@ -63,7 +63,7 @@ The following code shows how to enable color-inverted reading for Code 128: ```dart var settings = BarcodeCaptureSettings(); -var symbologySettings = settings.getSymbologySettings(Symbology.code128); +var symbologySettings = settings.settingsForSymbology(Symbology.code128); symbologySettings.isColorInvertedEnabled = true; ``` diff --git a/docs/sdks/flutter/barcode-capture/get-started.md b/docs/sdks/flutter/barcode-capture/get-started.md index 839aa6b7..15160f6a 100644 --- a/docs/sdks/flutter/barcode-capture/get-started.md +++ b/docs/sdks/flutter/barcode-capture/get-started.md @@ -15,7 +15,7 @@ In this guide you will learn step-by-step how to add Barcode Capture to your app The general steps are: - Include the ScanditBarcodeCapture library and its dependencies to your project, if any. -- Create a new [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) instance, initialized with your license key. +- Initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. - Create a [barcode capture settings](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-capture-settings.html#class-scandit.datacapture.barcode.BarcodeCaptureSettings) and enable the [barcode symbologies](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology) you want to read in your application. - Create a new [barcode capture mode](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-capture.html#class-scandit.datacapture.barcode.BarcodeCapture) instance and initialize it with the settings created above. - Register a [barcode capture listener](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-capture-listener.html#interface-scandit.datacapture.barcode.IBarcodeCaptureListener) to receive scan events. Process the successful scans according to your application’s needs, e.g. by looking up information in a database. After a successful scan, decide whether more codes will be scanned, or the scanning process should be stopped. @@ -39,14 +39,18 @@ runApp(MyApp()); } ``` -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```dart -var context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Scanning Behavior Barcode scanning is orchestrated by the [BarcodeCapture](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-capture.html#class-scandit.datacapture.barcode.BarcodeCapture) [data capture mode](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-mode.html#interface-scandit.datacapture.core.IDataCaptureMode). This class is the main entry point for scanning barcodes. It is configured through [BarcodeCaptureSettings](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-capture-settings.html#class-scandit.datacapture.barcode.BarcodeCaptureSettings) and allows to register one or more [listeners](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-capture-listener.html#interface-scandit.datacapture.barcode.IBarcodeCaptureListener) that will get informed whenever new codes have been recognized. @@ -71,7 +75,7 @@ Next, create a [BarcodeCapture](https://docs.scandit.com/data-capture-sdk/flutte ```dart var barcodeCapture = BarcodeCapture(settings); -context.addMode(barcodeCapture); +DataCaptureContext.sharedInstance.addMode(barcodeCapture); ``` ## Register the Barcode Capture Listener @@ -109,17 +113,17 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```dart -var cameraSettings = BarcodeCapture.recommendedCameraSettings; +var cameraSettings = BarcodeCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -var camera = Camera.defaultCamera..applySettings(cameraSettings); +var camera = Camera.defaultCamera?..applySettings(cameraSettings); ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```dart -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/data-capture-sdk/flutter/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.on](https://docs.scandit.com/data-capture-sdk/flutter/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): @@ -135,7 +139,7 @@ camera.switchToDesiredState(FrameSourceState.on); When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/flutter/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```dart -var dataCaptureView = DataCaptureView.forContext(dataCaptureContext); +var dataCaptureView = DataCaptureView.forContext(DataCaptureContext.sharedInstance); // Add the dataCaptureView to your widget tree ``` diff --git a/docs/sdks/flutter/barcode-generator.md b/docs/sdks/flutter/barcode-generator.md index 07ee93d1..f463033e 100644 --- a/docs/sdks/flutter/barcode-generator.md +++ b/docs/sdks/flutter/barcode-generator.md @@ -33,49 +33,25 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to your To generate barcodes, you need to create a [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). -With the context you can then instantiate a [`BarcodeGeneratorBuilder`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-generator-builder.html#class-scandit.datacapture.barcode.generator.BarcodeGeneratorBuilder), and use the method of [`BarcodeGenerator`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) for the symbology you are interested in, in this example Code 128. +With the context you can then use the static factory method on [`BarcodeGenerator`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) for the symbology you are interested in, in this example Code 128, to get a builder instance. You can configure the colors used in the resulting image: ```dart -class DataCaptureContext { - final String licenseKey; - - DataCaptureContext.forLicenseKey(this.licenseKey); -} - -class BarcodeGeneratorBuilder { - final DataCaptureContext context; - final Color backgroundColor; - final Color foregroundColor; - - BarcodeGeneratorBuilder._(this.context, this.backgroundColor, this.foregroundColor); - - factory BarcodeGeneratorBuilder.code128BarcodeGeneratorBuilder( - DataCaptureContext context) { - return BarcodeGeneratorBuilder._(context, Colors.white, Colors.black); - } - - BarcodeGeneratorBuilder withBackgroundColor(Color color) { - return BarcodeGeneratorBuilder._(context, color, foregroundColor); - } - - BarcodeGeneratorBuilder withForegroundColor(Color color) { - return BarcodeGeneratorBuilder._(context, backgroundColor, color); - } -} +var builder = BarcodeGenerator.code128BarcodeGeneratorBuilder(dataCaptureContext) + .withBackgroundColor(Colors.white) + .withForegroundColor(Colors.black); +var generator = builder.build(); ``` -When the builder is configured get the `BarcodeGenerator` and try to generate the image: +When the builder is configured, call `build()` to get the `BarcodeGenerator` and try to generate the image: ```dart try { - var generator = BarcodeGeneratorBuilder.build(); - var image = generator.generateFromData(dataString, 200); + var image = await generator.generateFromText(dataString, 200); // Use the image } catch (e) { debugPrint("Error generating barcode: $e"); - return Center(child: Text("Failed to generate barcode")); } ``` @@ -89,16 +65,21 @@ With the context you can then instantiate a [`QRCodeBarcodeGeneratorBuilder`](ht You can configure the colors used in the resulting image, and the two settings that can be configured for QR codes: [`QRCodeBarcodeGeneratorBuilder.errorCorrectionLevel`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithErrorCorrectionLevel) and [`QRCodeBarcodeGeneratorBuilder.versionNumber`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithVersionNumber). -When the builder is configured get the `BarcodeGenerator` and try to generate the image: +```dart +var builder = BarcodeGenerator.qrCodeBarcodeGeneratorBuilder(dataCaptureContext) + .withErrorCorrectionLevel(QrCodeErrorCorrectionLevel.high) + .withVersionNumber(4); +var generator = builder.build(); +``` + +When the builder is configured, call `build()` to get the `BarcodeGenerator` and try to generate the image: ```dart try { - var generator = BarcodeGeneratorBuilder.build(); - var image = generator.generateFromData(dataString, 200); + var image = await generator.generateFromText(dataString, 200); // Use the image } catch (e) { debugPrint("Error generating barcode: $e"); - return Center(child: Text("Failed to generate barcode")); } ``` diff --git a/docs/sdks/flutter/barcode-selection/get-started.md b/docs/sdks/flutter/barcode-selection/get-started.md index c6e04ea3..30fc7fc5 100644 --- a/docs/sdks/flutter/barcode-selection/get-started.md +++ b/docs/sdks/flutter/barcode-selection/get-started.md @@ -18,7 +18,7 @@ In this guide you will learn step-by-step how to add Barcode Selection to your a The general steps are: -- Create a new [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) instance, initialized with your license key. +- Initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. - Create a [barcode selection settings](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-selection-settings.html#class-scandit.datacapture.barcode.selection.BarcodeSelectionSettings) and choose the right configuration. - Create a new [barcode selection mode](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-selection.html#class-scandit.datacapture.barcode.selection.BarcodeSelection) instance and initialize it with the settings created above. - Register a [barcode selection listener](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-selection-listener.html#interface-scandit.datacapture.barcode.selection.IBarcodeSelectionListener) to receive scan events. Process the successful scans according to your application’s needs, e.g. by looking up information in a database. After a successful scan, decide whether more codes will be scanned, or the scanning process should be stopped. @@ -34,14 +34,18 @@ Before starting with adding a capture mode, make sure that you have a valid Scan You can retrieve your Scandit Data Capture SDK license key by signing in to [your account](https://ssl.scandit.com/dashboard/sign-in). ::: -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```dart -var context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Selection Behavior _Symbologies_ @@ -85,7 +89,7 @@ Next, create a [BarcodeSelection](https://docs.scandit.com/data-capture-sdk/flut ```dart var barcodeSelection = BarcodeSelection(settings); -context.addMode(barcodeSelection); +await DataCaptureContext.sharedInstance.addMode(barcodeSelection); ``` ## Register the Barcode Selection Listener @@ -124,23 +128,23 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```dart -var cameraSettings = BarcodeSelection.recommendedCameraSettings; +var cameraSettings = BarcodeSelection.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -var camera = Camera.defaultCamera..applySettings(cameraSettings); +var camera = Camera.defaultCamera?..applySettings(cameraSettings); ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```dart -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/data-capture-sdk/flutter/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.on](https://docs.scandit.com/data-capture-sdk/flutter/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): -```js +```dart camera.switchToDesiredState(FrameSourceState.on); ``` diff --git a/docs/sdks/flutter/id-capture/advanced.md b/docs/sdks/flutter/id-capture/advanced.md index 71d83aec..a281dacf 100644 --- a/docs/sdks/flutter/id-capture/advanced.md +++ b/docs/sdks/flutter/id-capture/advanced.md @@ -20,16 +20,16 @@ That means certain data from certain fields won’t be returned, even if it’s ```dart // Default value: -settings.anonymizationMode = IdAnonymizationMode.FIELDS_ONLY; +settings.anonymizationMode = IdAnonymizationMode.fieldsOnly; // Sensitive data is additionally covered with black boxes on returned images: -settings.anonymizationMode = IdAnonymizationMode.FIELDS_AND_IMAGES; +settings.anonymizationMode = IdAnonymizationMode.fieldsAndImages; // Only images are anonymized: -settings.anonymizationMode = IdAnonymizationMode.IMAGES_ONLY; +settings.anonymizationMode = IdAnonymizationMode.imagesOnly; // No anonymization: -settings.anonymizationMode = IdAnonymizationMode.NONE; +settings.anonymizationMode = IdAnonymizationMode.none; ``` ## Document Capture Zones @@ -42,12 +42,12 @@ To change this, use the `scannerType` method to set the scanner type to either [ The `FullDocumentScanner` extracts all document information by default. If using the `SingleSideScanner`, you can specify the document zones to extract: ```dart -// To extract data from barcodes on IDs -SingleSideScanner.barcode(true); -// To extract data from the visual inspection zone (VIZ) on IDs -SingleSideScanner.visualInspectionZone(true); -// To extract data from the machine-readable zone (MRZ) on IDs -SingleSideScanner.machineReadableZone(true); +// To extract data from barcodes on IDs: +settings.scanner = IdCaptureScanner(physicalDocumentScanner: SingleSideScanner(true, false, false)); +// To extract data from the visual inspection zone (VIZ) on IDs: +settings.scanner = IdCaptureScanner(physicalDocumentScanner: SingleSideScanner(false, false, true)); +// To extract data from the machine-readable zone (MRZ) on IDs: +settings.scanner = IdCaptureScanner(physicalDocumentScanner: SingleSideScanner(false, true, false)); ``` ## Configure Accepted and Rejected Documents @@ -59,14 +59,14 @@ These methods are used in conjunction with the [IdCaptureDocumentType](https://d For example, to accept only US Driver Licenses: ```dart -settings.acceptedDocuments.addAll([DRIVER_LICENSE, Region.US]); +settings.acceptedDocuments.addAll([DriverLicense(IdCaptureRegion.us)]); ``` Or to accept all Passports *except* those from the US: ```dart -settings.acceptedDocuments.addAll([PASSPORT]); -settings.rejectedDocuments.adAll([Region.US]); +settings.acceptedDocuments.addAll([Passport(IdCaptureRegion.any)]); +settings.rejectedDocuments.addAll([Passport(IdCaptureRegion.us)]); ``` ## ID Images diff --git a/docs/sdks/flutter/id-capture/get-started.md b/docs/sdks/flutter/id-capture/get-started.md index 686bf2fb..e5a1273e 100644 --- a/docs/sdks/flutter/id-capture/get-started.md +++ b/docs/sdks/flutter/id-capture/get-started.md @@ -13,7 +13,7 @@ This page will guide you through the process of adding ID Capture to your Flutte The general steps are: -- Creating a new Data Capture Context instance +- Initializing the Data Capture Context - Accessing a Camera - Configuring the Capture Settings - Implementing a Listener to Receive Scan Results @@ -53,14 +53,18 @@ await ScanditFlutterDataCaptureId.initialize(); runApp(MyApp()); } ``` -## Create the Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```dart -var context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Add the Camera You need to also create the [Camera](https://docs.scandit.com/data-capture-sdk/flutter/core/api/camera.html#class-scandit.datacapture.core.Camera): @@ -70,8 +74,8 @@ Camera? camera = Camera.defaultCamera; if (camera != null) { // Use the settings recommended by id capture. -camera.applySettings(IdCapture.recommendedCameraSettings); -context.setFrameSource(camera); +camera.applySettings(IdCapture.createRecommendedCameraSettings()); +DataCaptureContext.sharedInstance.setFrameSource(camera); } ``` @@ -87,14 +91,14 @@ By default, [anonymized data](./advanced.md#configure-data-anonymization) is not ```dart var settings = IdCaptureSettings(); -settings.scannerType( - SingleSideScanner // To scan only one-sided documents - // or - FullDocumentScanner // To scan both sides of the document -); - -settings.acceptedDocuments.addAll([PASSPORT, DRIVER_LICENSE]); -settings.rejectedDocuments.addAll([ID_CARD]); + +// To scan only one-sided documents: +settings.scanner = IdCaptureScanner(physicalDocumentScanner: SingleSideScanner(true, false, false)); +// To scan both sides of the document: +// settings.scanner = IdCaptureScanner(physicalDocumentScanner: FullDocumentScanner()); + +settings.acceptedDocuments.addAll([Passport(IdCaptureRegion.any), DriverLicense(IdCaptureRegion.any)]); +settings.rejectedDocuments.addAll([IdCard(IdCaptureRegion.any)]); ``` ## Implement the Listener @@ -118,7 +122,7 @@ Create a new ID Capture mode with the chosen settings. Then register the listene ```dart idCapture = IdCapture(settings); idCapture.addListener(this) -context.addMode(idCapture); +DataCaptureContext.sharedInstance.addMode(idCapture); ``` ## Set up Capture View and Overlay @@ -128,7 +132,7 @@ When using the built-in camera as [frameSource](https://docs.scandit.com/data-ca To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/flutter/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```dart -var dataCaptureView = DataCaptureView.forContext(dataCaptureContext); +var dataCaptureView = DataCaptureView.forContext(DataCaptureContext.sharedInstance); // Add the dataCaptureView to your widget tree ``` diff --git a/docs/sdks/flutter/label-capture/advanced.md b/docs/sdks/flutter/label-capture/advanced.md index 283c901d..7d0dcd99 100644 --- a/docs/sdks/flutter/label-capture/advanced.md +++ b/docs/sdks/flutter/label-capture/advanced.md @@ -69,53 +69,61 @@ You can also use `LabelCaptureBasicOverlay.setLabelBrush()` and `LabelCaptureBas For more advanced use cases, such as adding custom views or implementing Augmented Reality (AR) features, you can use the `LabelCaptureAdvancedOverlay`. The example below creates an advanced overlay, configuring it to display a styled warning message below expiry date fields when they’re close to expiring, while ignoring other fields. ```dart -final advancedOverlay = LabelCaptureAdvancedOverlay.newInstance( - labelCapture, - dataCaptureView, -); +final advancedOverlay = LabelCaptureAdvancedOverlay(labelCapture); +dataCaptureView.addOverlay(advancedOverlay); -advancedOverlay.addListener(LabelCaptureAdvancedOverlayListener( - viewForCapturedLabel: (overlay, capturedLabel) { +advancedOverlay.listener = MyAdvancedOverlayListener(); +``` + +Implement `LabelCaptureAdvancedOverlayListener` as a concrete class. The `widgetForCapturedLabel` and `widgetForCapturedLabelField` callbacks must return a `LabelCaptureAdvancedOverlayWidget` subclass (or `null` to show nothing): + +```dart +class MyAdvancedOverlayListener extends LabelCaptureAdvancedOverlayListener { + @override + Future widgetForCapturedLabel( + LabelCaptureAdvancedOverlay overlay, CapturedLabel capturedLabel) async { return null; // We only care about specific fields - }, - anchorForCapturedLabel: (overlay, capturedLabel) { + } + + @override + Future anchorForCapturedLabel( + LabelCaptureAdvancedOverlay overlay, CapturedLabel capturedLabel) async { return Anchor.center; - }, - offsetForCapturedLabel: (overlay, capturedLabel, view) { - return PointWithUnit.withPixel(0, 0); - }, - viewForCapturedLabelField: (overlay, labelField) { + } + + @override + Future offsetForCapturedLabel( + LabelCaptureAdvancedOverlay overlay, CapturedLabel capturedLabel) async { + return PointWithUnit(DoubleWithUnit(0, MeasureUnit.pixel), DoubleWithUnit(0, MeasureUnit.pixel)); + } + + @override + Future widgetForCapturedLabelField( + LabelCaptureAdvancedOverlay overlay, LabelField labelField) async { if (labelField.name.toLowerCase().contains("expiry") && labelField.type == LabelFieldType.text) { - final daysUntilExpiry = daysUntilExpiryFunction(labelField.text); // Your method const dayLimit = 3; if (daysUntilExpiry < dayLimit) { - return Container( - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - color: Colors.red, - child: Row( - mainAxisSize: MainAxisSize.min, - children: const [ - Icon(Icons.warning, color: Colors.white), - SizedBox(width: 8), - Text("Item expires soon!", style: TextStyle(color: Colors.white)), - ], - ), - ); + // Return your custom LabelCaptureAdvancedOverlayWidget subclass here } } - return null; - }, - anchorForCapturedLabelField: (overlay, labelField) { + } + + @override + Future anchorForCapturedLabelField( + LabelCaptureAdvancedOverlay overlay, LabelField labelField) async { return Anchor.bottomCenter; - }, - offsetForCapturedLabelField: (overlay, labelField, view) { - return PointWithUnit.withUnit(0, 22, MeasureUnit.dip); - }, -)); + } + + @override + Future offsetForCapturedLabelField( + LabelCaptureAdvancedOverlay overlay, LabelField labelField) async { + return PointWithUnit(DoubleWithUnit(0, MeasureUnit.dip), DoubleWithUnit(22, MeasureUnit.dip)); + } +} ``` ## Validation Flow @@ -127,20 +135,17 @@ Implementing a validation flow in your Smart Label Capture application differs f Validation flow uses a different overlay, the [LabelCaptureValidationFlowOverlay](https://docs.scandit.com/data-capture-sdk/flutter/label-capture/api/ui/label-capture-validation-flow-overlay.html). This overlay provides a user interface that guides users through the label capture process, including validation steps. ```dart -final validationFlowOverlay = LabelCaptureValidationFlowOverlay.newInstance( - context, - labelCapture, - dataCaptureView, -); +final validationFlowOverlay = LabelCaptureValidationFlowOverlay(labelCapture); +dataCaptureView.addOverlay(validationFlowOverlay); // Set the listener -validationFlowOverlay.addListener(MyValidationFlowListener()); +validationFlowOverlay.listener = MyValidationFlowListener(); ``` ### Adjust the Hint Messages ```dart -final validationSettings = LabelCaptureValidationFlowSettings.newInstance(); +final validationSettings = LabelCaptureValidationFlowSettings(); validationSettings.missingFieldsHintText = "Please add this field"; validationSettings.standbyHintText = "No label detected, camera paused"; @@ -159,9 +164,9 @@ To handle validation events, implement the [LabelCaptureValidationFlowOverlayLis ```dart -class MyValidationFlowListener extends LabelCaptureValidationFlowOverlayListener { +class MyValidationFlowListener extends LabelCaptureValidationFlowListener { @override - void onValidationFlowLabelCaptured(List fields) { + void didCaptureLabelWithFields(List fields) { String? barcodeData; String? expiryDate; diff --git a/docs/sdks/flutter/label-capture/get-started.md b/docs/sdks/flutter/label-capture/get-started.md index 35d9159e..947c98a6 100644 --- a/docs/sdks/flutter/label-capture/get-started.md +++ b/docs/sdks/flutter/label-capture/get-started.md @@ -13,7 +13,7 @@ In this guide you will learn step-by-step how to add Smart Label Capture to your The general steps are: -- Create a new Data Capture Context instance +- Initialize the Data Capture Context - Configure the LabelCapture mode - Define a listener to handle captured labels - Visualize the scan process @@ -34,14 +34,18 @@ import LabelCaptureModuleOverview from '../../../partials/get-started/_smart-lab -## Create a Data Capture Context +## Initialize the Data Capture Context -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. +The first step to add capture capabilities to your application is to initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```dart -var dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Label Capture Mode The main entry point for the Label Capture Mode is the [LabelCapture](https://docs.scandit.com/data-capture-sdk/flutter/label-capture/api/label-capture.html#class-scandit.datacapture.label.LabelCapture) object. @@ -74,7 +78,7 @@ final settings = LabelCaptureSettings.builder() final labelCapture = LabelCapture(settings); // Add the mode to the data capture context created earlier. -dataCaptureContext.addMode(labelCapture); +DataCaptureContext.sharedInstance.addMode(labelCapture); ``` ## Define a Listener to Handle Captured Labels @@ -90,6 +94,7 @@ Depending on your app architecture and whether you use dependency injection or n ```dart import 'dart:async'; +import 'package:collection/collection.dart'; import 'package:flutter/foundation.dart'; import 'package:scandit_flutter_datacapture_core/scandit_flutter_datacapture_core.dart'; import 'package:scandit_flutter_datacapture_label/scandit_flutter_datacapture_label.dart'; @@ -132,16 +137,14 @@ class _LabelCaptureListener extends LabelCaptureListener { final label = labels.first; // Extract the barcode field - final barcodeField = label.fields.firstWhere( + final barcodeField = label.fields.firstWhereOrNull( (field) => field.name == '', - orElse: () => null, ); final barcodeData = barcodeField?.barcode?.data; // Extract the expiry date field (optional) - final expiryDateField = label.fields.firstWhere( + final expiryDateField = label.fields.firstWhereOrNull( (field) => field.name == '', - orElse: () => null, ); final expiryDate = expiryDateField?.text; @@ -203,10 +206,8 @@ class _LabelCaptureScreenState extends State { _dataCaptureView = DataCaptureView.forContext(widget.context); // Create the overlay and add it to the DataCaptureView - final overlay = LabelCaptureBasicOverlay.newInstance( - widget.labelCapture, - _dataCaptureView, - ); + final overlay = LabelCaptureBasicOverlay(widget.labelCapture); + _dataCaptureView.addOverlay(overlay); // Optionally set a rectangular viewfinder overlay.viewfinder = RectangularViewfinder.withStyle( @@ -245,7 +246,7 @@ Future setupCamera(DataCaptureContext context) async { } // Apply recommended settings for LabelCapture - final settings = LabelCapture.recommendedCameraSettings; + final settings = LabelCapture.createRecommendedCameraSettings(); await camera.applySettings(settings); // Set camera as the frame source for the context diff --git a/docs/sdks/flutter/matrixscan-ar/get-started.md b/docs/sdks/flutter/matrixscan-ar/get-started.md index 6360bd51..6f66df24 100644 --- a/docs/sdks/flutter/matrixscan-ar/get-started.md +++ b/docs/sdks/flutter/matrixscan-ar/get-started.md @@ -16,7 +16,7 @@ In this guide you will learn step-by-step how to add MatrixScan AR to your appli The general steps are: -- Creating a new Data Capture Context instance +- Initializing the Data Capture Context - Configuring the Barcode AR Mode - Setup the Barcode AR View - Registering the Listener to notify about found items @@ -29,14 +29,18 @@ Before starting with adding a capture mode, make sure that you have a valid Scan You can retrieve your Scandit Data Capture SDK license key by signing in to [your Scandit account](https://ssl.scandit.com/dashboard/sign-in). ::: -## Create a Data Capture Context +## Initialize the Data Capture Context -The first step to add find capabilities to your application is to create a new [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add find capabilities to your application is to initialize the [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```dart -var dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode AR Mode The main entry point for the Barcode AR Mode is the `BarcodeAr` object. You can configure the supported Symbologies through its [`BarcodeArSettings`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-ar-settings.html), and set up the list of items that you want MatrixScan AR to highlight. @@ -52,7 +56,6 @@ The create the mode with the previously created settings: ```dart var mode = BarcodeAr(settings); -mode.setItemList(items); ``` ## Setup the BarcodeArView @@ -78,7 +81,7 @@ var viewSettings = BarcodeArViewSettings( Next, create a `BarcodeArView` instance with the Data Capture Context and the settings initialized in the previous step. The `BarcodeArView` is automatically added to the provided parent view. ```dart -var barcodeArView = BarcodeArView.forModeWithViewSettings(dataCaptureContext, barcodeAr, viewSettings); +var barcodeArView = BarcodeArView.forModeWithViewSettings(DataCaptureContext.sharedInstance, barcodeAr, viewSettings); ``` Connect the `BarcodeArView` to the Widget lifecycle. The widget is dependent on calling `widgetPaused` and `widgetResumed` to set up the camera and its overlays properly. diff --git a/docs/sdks/flutter/matrixscan-count/advanced.md b/docs/sdks/flutter/matrixscan-count/advanced.md index 911e15cf..0bca4582 100644 --- a/docs/sdks/flutter/matrixscan-count/advanced.md +++ b/docs/sdks/flutter/matrixscan-count/advanced.md @@ -54,22 +54,22 @@ In this case, you can filter the others out. This can be done by symbology, symb For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```dart -var settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +var settings = BarcodeCountSettings(); +settings.enableSymbology(Symbology.code128, true); Set excludedSymbologies = {}; excludedSymbologies.add(Symbology.pdf417); var filterSettings = settings.filterSettings; -filterSettings.excludedSymbologies(excludedSymbologies); +filterSettings.excludedSymbologies = excludedSymbologies; ``` Or, you want to exclude all the barcodes starting with 4 numbers: ```dart -var settings = new BarcodeCountSettings(); +var settings = BarcodeCountSettings(); var filterSettings = settings.filterSettings; -filterSettings.excludedCodesRegex("^1234.*"); +filterSettings.excludedCodesRegex = "^1234.*"; ``` By default the filters applied to the relevant barcodes are transparent, but you can use [`BarcodeFilterHighlightSettings`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-filter-highlight-settings.html#barcode-filter-highlight-settings) to change the color and level of transparency. diff --git a/docs/sdks/flutter/matrixscan-count/get-started.md b/docs/sdks/flutter/matrixscan-count/get-started.md index 997fe1aa..3ab8765d 100644 --- a/docs/sdks/flutter/matrixscan-count/get-started.md +++ b/docs/sdks/flutter/matrixscan-count/get-started.md @@ -13,7 +13,7 @@ In this guide you will learn step-by-step how to add MatrixScan Count to your ap The general steps are: -1. Create a new Data Capture Context instance +1. Initialize the Data Capture Context 2. Configure the Barcode Count Mode 3. Obtain camera instance and set frame source used 4. Register the listener to be informed when scanned phase is over @@ -23,14 +23,18 @@ The general steps are: 8. Reset Barcode Count mode 9. List and Exit callbacks -## Create A New Data Capture Context Instance +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. -```sh -var dataCaptureContext = DataCaptureContext.forLicenseKey('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +```dart +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure The Barcode Count Mode The main entry point for the Barcode Count Mode is the [BarcodeCount](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) object. It is configured through [BarcodeCountSettings](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-count-settings.html#class-scandit.datacapture.barcode.count.BarcodeCountSettings) and allows you to register one or more listeners that are informed whenever a scan phase has finished. @@ -38,7 +42,7 @@ The main entry point for the Barcode Count Mode is the [BarcodeCount](https://do For this tutorial, we will set up Barcode Count for tracking EAN13 codes. Change this to the correct symbologies for your use case (for example, Code 128, Code 39…). ```dart -var settings = new BarcodeCountSettings(); +var settings = BarcodeCountSettings(); settings.enableSymbology(Symbology.ean13Upca, true); ``` @@ -47,7 +51,7 @@ If you are sure that your environment will only have unique barcodes (i.e. no du ```dart var barcodeCount = BarcodeCount(settings); -dataCaptureContext.addMode(barcodeCount); +DataCaptureContext.sharedInstance.addMode(barcodeCount); ``` ## Obtain Camera Instance And Set Frame Source Used @@ -57,7 +61,7 @@ Our recommended camera settings should be used to achieve the best performance a Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```dart -dataCaptureContext.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` ## Register the Listener @@ -77,7 +81,7 @@ MatrixScan Count’s built-in AR user interface includes buttons and overlays th Add a [BarcodeCountView](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) to your view hierarchy: ```dart -var barcodeCountView = BarcodeCountView.forContextWithMode(dataCaptureContext, barcodeCount); +var barcodeCountView = BarcodeCountView.forContextWithMode(DataCaptureContext.sharedInstance, barcodeCount); ``` ## Set Up The Camera So That It Switches On When You Are In Scanning View @@ -101,8 +105,8 @@ The values captured as part of the scanning process are part of the [session](ht ```dart @override -void didScan(BarcodeCount barcodeCount, BarcodeCountSession session, Future Function() getFrameData) { - allRecognizedBarcodes = session.recognizedBarcodes.values; +Future didScan(BarcodeCount barcodeCount, BarcodeCountSession session, Future Function() getFrameData) async { + allRecognizedBarcodes = session.recognizedBarcodes; } ``` diff --git a/docs/sdks/flutter/matrixscan-find/get-started.md b/docs/sdks/flutter/matrixscan-find/get-started.md index 6e5d6dc8..8538d055 100644 --- a/docs/sdks/flutter/matrixscan-find/get-started.md +++ b/docs/sdks/flutter/matrixscan-find/get-started.md @@ -16,20 +16,24 @@ In this guide you will learn step-by-step how to add MatrixScan Find to your app The general steps are: -1. Create a new Data Capture Context instance. +1. Initialize the Data Capture Context. 2. Configure the Barcode Find Mode. 3. Setup the BarcodeFindView. 4. Register a listener to be notified with found items 5. Start searching -## Create a new Data Capture Context instance +## Initialize the Data Capture Context -The first step to add find capabilities to your application is to create a new [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add find capabilities to your application is to initialize the [DataCaptureContext](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```dart -var dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Find Mode The main entry point for the Barcode Find Mode is the [BarcodeFind](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-find.html#class-scandit.datacapture.barcode.find.BarcodeFind) object. You can configure the supported Symbologies through its [BarcodeFindSettings](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-find-settings.html#class-scandit.datacapture.barcode.find.BarcodeFindSettings), and set up the list of items that you want MatrixScan Find to highlight (e.g. a list of products). @@ -51,7 +55,7 @@ In this tutorial, let’s look up two items based on their EAN13 codes. We will var items = { BarcodeFindItem(BarcodeFindItemSearchOptions("9783598215438"), BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), -new BarcodeFindItem( +BarcodeFindItem( BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only }; ``` @@ -84,7 +88,7 @@ true // haptic enabled Construct a new BarcodeFindView. ```dart -var barcodeFindView = BarcodeFindView.forModeWithViewSettings(dataCaptureContext, barcodeFind, viewSettings); +var barcodeFindView = BarcodeFindView.forModeWithViewSettings(DataCaptureContext.sharedInstance, barcodeFind, viewSettings); ``` Connect the BarcodeFindView to the Widget lifecycle. The widget is dependent on calling widgetPaused and widgetResumed to set up the camera and its overlays properly. diff --git a/docs/sdks/flutter/matrixscan-pick/advanced.md b/docs/sdks/flutter/matrixscan-pick/advanced.md index a5a89db2..0b73134f 100644 --- a/docs/sdks/flutter/matrixscan-pick/advanced.md +++ b/docs/sdks/flutter/matrixscan-pick/advanced.md @@ -19,18 +19,27 @@ You may want more fine-grained knowledge over the different events happening dur To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/data-capture-sdk/android/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. ```dart -mode.addListener(this) - - class BarcodePickListenerImpl implements BarcodePickListener - { - @override - void onObservationStarted() { - // The mode was started - } - - @override - void onObservationStopped { - // The mode was stopped - } - } +barcodePickView.addListener(myListener); + +class BarcodePickViewListenerImpl implements BarcodePickViewListener { + @override + void didStartScanning(BarcodePickView view) { + // The view started scanning + } + + @override + void didFreezeScanning(BarcodePickView view) { + // The view was frozen + } + + @override + void didPauseScanning(BarcodePickView view) { + // The view was paused + } + + @override + void didStopScanning(BarcodePickView view) { + // The view stopped scanning + } +} ``` diff --git a/docs/sdks/flutter/matrixscan-pick/get-started.md b/docs/sdks/flutter/matrixscan-pick/get-started.md index 3c7c983c..f45492d4 100644 --- a/docs/sdks/flutter/matrixscan-pick/get-started.md +++ b/docs/sdks/flutter/matrixscan-pick/get-started.md @@ -16,7 +16,7 @@ In this guide you will learn step-by-step how to add MatrixScan Pick to your app The general steps are: -- Creating a new Data Capture Context instance +- Initializing the Data Capture Context - Configuring the Barcode Pick Mode - Setup the Barcode Pick View - Registering the Listener to notify about found items @@ -29,14 +29,18 @@ Before starting with adding a capture mode, make sure that you have a valid Scan You can retrieve your Scandit Data Capture SDK license key by signing in to [your Scandit account](https://ssl.scandit.com/dashboard/sign-in). ::: -## Create a Data Capture Context +## Initialize the Data Capture Context -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. +The first step to add capture capabilities to your application is to initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```dart -var dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Pick Mode The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You can configure the supported Symbologies through its [`BarcodePickSettings`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-pick-settings.html), and set up the list of items that you want MatrixScan Pick to highlight. @@ -52,19 +56,16 @@ Then you have to create the list of items that will be picked and quantity to be ```dart var items = { - new BarcodePickProduct( - BarcodePickProductIdentifier("9783598215438")), - BarcodePickProductQuantityToPick(3), - new BarcodePickProduct( - BarcodePickProductIdentifier("9783598215414")), - BarcodePickProductQuantityToPick(3) + BarcodePickProduct("9783598215438", 3), + BarcodePickProduct("9783598215414", 3), }; ``` -Create the mode with the previously created settings: +Create a product provider and the mode: ```dart -var mode = BarcodePick(settings); +var productProvider = BarcodePickAsyncMapperProductProvider(items, productProviderCallback); +var mode = BarcodePick(DataCaptureContext.sharedInstance, settings, productProvider); ``` ## Setup the `BarcodePickView` @@ -83,7 +84,7 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Loading Dialog ```dart -var viewSettings = new BarcodePickViewSettings( +var viewSettings = BarcodePickViewSettings( // ... ); ``` @@ -91,7 +92,7 @@ var viewSettings = new BarcodePickViewSettings( Construct a new `BarcodePickView`. ```dart -var BarcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, BarcodePick, viewSettings); +var barcodePickView = BarcodePickView.forModeWithViewSettings(DataCaptureContext.sharedInstance, mode, viewSettings); ``` Connect the `BarcodePickView` to the Widget lifecycle. The widget is dependent on calling `widgetPaused` and `widgetResumed` to set up the camera and its overlays properly. @@ -103,12 +104,12 @@ void didChangeAppLifecycleState(AppLifecycleState state) { // Resume finding by calling the BarcodePickView widgetResumed function. // Under the hood, it re-enables the BarcodePick mode and makes sure the view is properly // setup. - BarcodePickView.widgetResumed(); + barcodePickView.widgetResumed(); } else { // Pause finding by calling the BarcodePickView widgetPaused function. // Under the hood, it will disable the mode and free resources that are not needed in a // paused state. - BarcodePickView.widgetPaused(); + barcodePickView.widgetPaused(); } } ``` @@ -122,13 +123,11 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/data-capture-sdk In this tutorial, we will then navigate back to the previous screen to finish the session. ```dart -BarcodePickView.uiListener = this +barcodePickView.uiListener = this; @override -void didTapFinishButton(Set foundItems) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. +void didTapFinishButton(BarcodePickView view) { + // This method is called when the user presses the finish button. } ``` @@ -137,7 +136,7 @@ void didTapFinishButton(Set foundItems) { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. ```dart -BarcodePickView.start(); +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/docs/sdks/flutter/matrixscan/advanced.md b/docs/sdks/flutter/matrixscan/advanced.md index 0fd0cd14..0999ae69 100644 --- a/docs/sdks/flutter/matrixscan/advanced.md +++ b/docs/sdks/flutter/matrixscan/advanced.md @@ -30,7 +30,8 @@ As mentioned above, the advanced overlay combined with its [listener](https://do First of all, create a new instance of [BarcodeBatchAdvancedOverlay](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-batch-advanced-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchAdvancedOverlay) and add it to the [DataCaptureView](https://docs.scandit.com/data-capture-sdk/flutter/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). ```dart -var overlay = BarcodeBatchAdvancedOverlay.forView(barcodeBatch, dataCaptureView); +var overlay = BarcodeBatchAdvancedOverlay(barcodeBatch); +dataCaptureView.addOverlay(overlay); ``` At this point, you have two options. @@ -52,9 +53,8 @@ Using [BarcodeBatchAdvancedOverlayListener](https://docs.scandit.com/data-captur ```dart @override -Widget widgetForTrackedBarcode(BarcodeBatchAdvancedOverlay overlay, TrackedBarcode trackedBarcode) { -// Create and return the view you want to show for this tracked barcode. You can also return null, to have no view for -this barcode. +BarcodeBatchAdvancedOverlayWidget? widgetForTrackedBarcode(BarcodeBatchAdvancedOverlay overlay, TrackedBarcode trackedBarcode) { +// Create and return the widget you want to show for this tracked barcode. You can also return null, to have no widget for this barcode. return ARWidget(trackedBarcode.barcode.data); } @@ -84,7 +84,7 @@ The function [BarcodeBatchListener.didUpdateSession()](https://docs.scandit.com/ @override void didUpdateSession(BarcodeBatch barcodeBatch, BarcodeBatchSession session) { for (final trackedBarcode in session.addedTrackedBarcodes) { -Widget arWidget = ARWidget(trackedBarcode.barcode.data); +var arWidget = ARWidget(trackedBarcode.barcode.data); overlay.setWidgetForTrackedBarcode(arWidget, trackedBarcode); overlay.setAnchorForTrackedBarcode(Anchor.topCenter, trackedBarcode); overlay.setOffsetForTrackedBarcode( diff --git a/docs/sdks/flutter/matrixscan/get-started.md b/docs/sdks/flutter/matrixscan/get-started.md index bb233fc7..6f202a66 100644 --- a/docs/sdks/flutter/matrixscan/get-started.md +++ b/docs/sdks/flutter/matrixscan/get-started.md @@ -13,21 +13,25 @@ In this guide you will learn step-by-step how to add MatrixScan to your applicat The general steps are: -- Creating a new Data Capture Context instance +- Initializing the Data Capture Context - Configuring the MatrixScan mode - Using the built-in camera - Visualizing the scan process - Providing feedback - Disabling barcode tracking -## Create a Data Capture Context +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [data capture context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```dart -var context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure the Barcode Batch Mode The main entry point for the Barcode Batch Mode is the [BarcodeBatch](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-batch.html#class-scandit.datacapture.barcode.batch.BarcodeBatch) object. It is configured through [BarcodeBatchSettings](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-batch-settings.html#class-scandit.datacapture.barcode.batch.BarcodeBatchSettings) and allows to register one or more [listeners](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/barcode-batch-listener.html#interface-scandit.datacapture.barcode.batch.IBarcodeBatchListener) that will get informed whenever a new frame has been processed. @@ -45,7 +49,7 @@ Next, create a [BarcodeBatch](https://docs.scandit.com/data-capture-sdk/flutter/ ```dart var barcodeBatch = BarcodeBatch(settings); -dataCaptureContext.addMode(barcodeBatch); +DataCaptureContext.sharedInstance.addMode(barcodeBatch); ``` ## Use the Built-in Camera @@ -63,17 +67,17 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```dart -var cameraSettings = BarcodeBatch.recommendedCameraSettings; +var cameraSettings = BarcodeBatch.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -var camera = Camera.defaultCamera..applySettings(cameraSettings); +var camera = Camera.defaultCamera?..applySettings(cameraSettings); ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```dart -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/data-capture-sdk/flutter/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.on](https://docs.scandit.com/data-capture-sdk/flutter/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): @@ -89,14 +93,15 @@ camera.switchToDesiredState(FrameSourceState.on); When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/flutter/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```dart -var dataCaptureView = DataCaptureView.forContext(dataCaptureContext); +var dataCaptureView = DataCaptureView.forContext(DataCaptureContext.sharedInstance); // Add the dataCaptureView to your widget tree ``` To visualize the results of Barcode Batch, first you need to add the following [overlay](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay): ```dart -var overlay = BarcodeBatchBasicOverlay.withBarcodeBatchForView(barcodeBatch, dataCaptureView); +var overlay = BarcodeBatchBasicOverlay(barcodeBatch); +dataCaptureView.addOverlay(overlay); ``` Once the overlay has been added, you should implement the [BarcodeBatchBasicOverlayListener](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#interface-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener) interface. The method [BarcodeBatchBasicOverlayListener.brushForTrackedBarcode()](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#method-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener.BrushForTrackedBarcode) is invoked every time a new tracked barcode appears and it can be used to set a [brush](https://docs.scandit.com/data-capture-sdk/flutter/core/api/ui/brush.html#class-scandit.datacapture.core.ui.Brush) that will be used to highlight that specific barcode in the [overlay](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay). diff --git a/docs/sdks/flutter/sparkscan/get-started.md b/docs/sdks/flutter/sparkscan/get-started.md index 5ef7016e..08f4f364 100644 --- a/docs/sdks/flutter/sparkscan/get-started.md +++ b/docs/sdks/flutter/sparkscan/get-started.md @@ -11,7 +11,7 @@ keywords: This page describes the step-by-step instructions that helps you to add SparkScan to your application: -- Create a new Data Capture Context instance +- Initialize the Data Capture Context - 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 @@ -26,14 +26,18 @@ This page describes the step-by-step instructions that helps you to add SparkSca Devices running the Scandit Data Capture SDK need to have a GPU or the performance will drastically decrease. ::: -## Create a New Data Capture Context Instance +## Initialize the Data Capture Context -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. +The first step to add capture capabilities to your application is to initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```dart -var dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +await DataCaptureContext.initialize("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## 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. @@ -58,11 +62,6 @@ The SparkScan built-in user interface includes the camera preview and scanning U The [`SparkScanView`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView) appearance can be customized through [SparkScanViewSettings](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view-settings.html). -```dart -SparkScanViewSettings viewSettings = new SparkScanViewSettings(); -// setup the desired appearance settings by updating the fields in the object above -``` - See the [SparkScan Workflow Options](./advanced.md#workflow-options) section for more information. By adding a [`SparkScanView`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView), the scanning interface (camera preview and scanning UI elements) gets added automatically to your application. @@ -70,7 +69,7 @@ By adding a [`SparkScanView`](https://docs.scandit.com/data-capture-sdk/flutter/ You can add a [`SparkScanView`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView) to your view hierarchy: ```dart -var sparkScanView = SparkScanView.forContext(YOUR_WIDGET_TREE_BODY, widget.dataCaptureContext, sparkScan, null); +var sparkScanView = SparkScanView.forContext(YOUR_WIDGET_TREE_BODY, DataCaptureContext.sharedInstance, sparkScan, null); ``` Additionally, make sure to call [`SparkScanView.onPause()`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#method-scandit.datacapture.barcode.spark.ui.SparkScanView.OnPause) in your app state handling logic. You have to call this for the correct functioning of the [`SparkScanView`](https://docs.scandit.com/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView). @@ -101,11 +100,11 @@ Note that this list only contains one barcode entry. ```dart @override -void didScan(SparkScan sparkScan, SparkScanSession session, Future getFrameData()) { - if (session.newlyRecognizedBarcode.isEmpty) return; +Future didScan(SparkScan sparkScan, SparkScanSession session, Future getFrameData()) async { + if (session.newlyRecognizedBarcode == null) return; // Gather the recognized barcode - var barcode = session.newlyRecognizedBarcode[0]; + var barcode = session.newlyRecognizedBarcode!; // Do something with the recognized barcode } diff --git a/docs/sdks/flutter/test.md b/docs/sdks/flutter/test.md deleted file mode 100644 index b37bbcb6..00000000 --- a/docs/sdks/flutter/test.md +++ /dev/null @@ -1,27 +0,0 @@ -# Scandit Samples - -This repository contains both simple and advanced samples that show how you can use various features of the Scandit Data Capture SDK. The simple samples allow you to get going quickly, while the advanced samples show you how to use additional settings and setup the scanner for the best performance and user experience. - -For details about all available samples, see the documentation for your preferred framework: - -* [iOS](https://github.com/Scandit/datacapture-ios-samples) -* [Android](https://github.com/Scandit/datacapture-android-samples) -* [Web](https://github.com/Scandit/datacapture-web-samples) -* [React Native](https://github.com/Scandit/datacapture-react-native-samples) -* [Flutter](https://github.com/Scandit/datacapture-flutter-samples) -* [Capacitor](https://github.com/Scandit/datacapture-capacitor-samples) -* [Cordova](https://github.com/Scandit/datacapture-cordova-samples) -* [.NET](https://github.com/Scandit/datacapture-dotnet-samples/tree/master) -* [Titanium](https://github.com/Scandit/datacapture-titanium-samples) - -## Trial Signup - -To add the Scandit Data Capture SDK to your app, [sign up for your Scandit Developer Account](https://ssl.scandit.com/dashboard/sign-up?p=test) and get instant access to your license key. - -## Support - -Our support engineers can be reached at [support@scandit.com](mailto:support@scandit.com). - -## License - -[Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0) diff --git a/docs/sdks/react-native/barcode-capture/get-started.md b/docs/sdks/react-native/barcode-capture/get-started.md index b1f2d4a8..a2b69df0 100644 --- a/docs/sdks/react-native/barcode-capture/get-started.md +++ b/docs/sdks/react-native/barcode-capture/get-started.md @@ -205,7 +205,7 @@ When using the built-in camera there are recommended settings for each capture m ]}> ```ts - const cameraSettings = BarcodeCapture.recommendedCameraSettings; + const cameraSettings = BarcodeCapture.createRecommendedCameraSettings(); // cameraSettings.preferredResolution = VideoResolution.FullHD; // or adjust default camera settings const camera = Camera.withSettings(cameraSettings); @@ -220,7 +220,7 @@ When using the built-in camera there are recommended settings for each capture m ```js - const cameraSettings = BarcodeCapture.recommendedCameraSettings; + const cameraSettings = BarcodeCapture.createRecommendedCameraSettings(); // cameraSettings.preferredResolution = VideoResolution.FullHD; // or adjust default camera settings const camera = Camera.withSettings(cameraSettings); @@ -250,10 +250,8 @@ When using the built-in camera as frame source, you will typically want to displ To visualize the results of barcode scanning, the following [overlay](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-capture-overlay.html#class-scandit.datacapture.barcode.ui.BarcodeCaptureOverlay) can be added: ```js -const overlay = BarcodeCaptureOverlay.withBarcodeCaptureForView( - barcodeCapture, - view -); +const overlay = new BarcodeCaptureOverlay(barcodeCapture); +view.addOverlay(overlay); ``` ## Disabling Barcode Capture diff --git a/docs/sdks/react-native/barcode-generator.md b/docs/sdks/react-native/barcode-generator.md index 820bcd3e..e8f5ca34 100644 --- a/docs/sdks/react-native/barcode-generator.md +++ b/docs/sdks/react-native/barcode-generator.md @@ -32,24 +32,28 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to your ## Generating Barcodes -To generate barcodes, you need to create a [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). +To generate barcodes, you need to initialize the [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). With the context you can then instantiate a [`BarcodeGeneratorBuilder`](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#class-scandit.datacapture.barcode.generator.BarcodeGeneratorBuilder), and use the method of [`BarcodeGenerator`](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) for the symbology you are interested in, in this example Code 128. You can configure the colors used in the resulting image: ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.Code128BarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +const builder = BarcodeGenerator.code128BarcodeGeneratorBuilder(DataCaptureContext.sharedInstance) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + When the builder is configured get the `BarcodeGenerator` and try to generate the image: ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { @@ -62,26 +66,30 @@ See the complete [API reference](https://docs.scandit.com/data-capture-sdk/react ## Generating QR Codes -To generate barcodes, you need to create a [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). +To generate barcodes, you need to initialize the [`DataCaptureContext`](https://docs.scandit.com/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). With the context you can then instantiate a [`QRCodeBarcodeGeneratorBuilder`](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#class-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder) using the method of [`BarcodeGenerator`](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) specific for QR codes. You can configure the colors used in the resulting image, and the two settings that can be configured for QR codes: [`QRCodeBarcodeGeneratorBuilder.errorCorrectionLevel`](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithErrorCorrectionLevel) and [`QRCodeBarcodeGeneratorBuilder.versionNumber`](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithVersionNumber). ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.QrCodeBarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK) - .withErrorCorrectionLevel(Scandit.QrCodeErrorCorrectionLevel.MEDIUM) +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); +const builder = BarcodeGenerator.qrCodeBarcodeGeneratorBuilder(DataCaptureContext.sharedInstance) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')) + .withErrorCorrectionLevel(QrCodeErrorCorrectionLevel.Medium) .withVersionNumber(4); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + When the builder is configured get the `BarcodeGenerator` and try to generate the image: ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { diff --git a/docs/sdks/react-native/barcode-selection/get-started.md b/docs/sdks/react-native/barcode-selection/get-started.md index 46485cc8..adf17917 100644 --- a/docs/sdks/react-native/barcode-selection/get-started.md +++ b/docs/sdks/react-native/barcode-selection/get-started.md @@ -119,7 +119,7 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = BarcodeSelection.recommendedCameraSettings; +const cameraSettings = BarcodeSelection.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. diff --git a/docs/sdks/react-native/id-capture/advanced.md b/docs/sdks/react-native/id-capture/advanced.md index 28b8b096..770b9886 100644 --- a/docs/sdks/react-native/id-capture/advanced.md +++ b/docs/sdks/react-native/id-capture/advanced.md @@ -20,16 +20,16 @@ That means certain data from certain fields won’t be returned, even if it’s ```js // Default value: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_ONLY); +settings.anonymizationMode = IdAnonymizationMode.FieldsOnly; // Sensitive data is additionally covered with black boxes on returned images: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_AND_IMAGES); +settings.anonymizationMode = IdAnonymizationMode.FieldsAndImages; // Only images are anonymized: -settings.setAnyonymizationMode(IdAnonymizationMode.IMAGES_ONLY); +settings.anonymizationMode = IdAnonymizationMode.ImagesOnly; // No anonymization: -settings.setAnyonymizationMode(IdAnonymizationMode.NONE); +settings.anonymizationMode = IdAnonymizationMode.None; ``` ## Document Capture Zones @@ -43,11 +43,11 @@ The `FullDocumentScanner` extracts all document information by default. If using ```js // To extract data from barcodes on IDs -SingleSideScanner.barcode(true); +const scanner = new SingleSideScanner(true, false, false); // To extract data from the visual inspection zone (VIZ) on IDs -SingleSideScanner.visualInspectionZone(true); +const scanner = new SingleSideScanner(false, false, true); // To extract data from the machine-readable zone (MRZ) on IDs -SingleSideScanner.machineReadableZone(true); +const scanner = new SingleSideScanner(false, true, false); ``` ## Configure Accepted and Rejected Documents @@ -59,14 +59,14 @@ These methods are used in conjunction with the [IdCaptureDocumentType](https://d For example, to accept only US Driver Licenses: ```js -settings.acceptedDocuments(DRIVER_LICENSE, Region.US); +settings.acceptedDocuments = [new DriverLicense(IdCaptureRegion.Us)]; ``` Or to accept all Passports *except* those from the US: ```js -settings.acceptedDocuments(PASSPORT); -settings.rejectedDocuments(Region.US); +settings.acceptedDocuments = [new Passport(IdCaptureRegion.Any)]; +settings.rejectedDocuments = [new Passport(IdCaptureRegion.Us)]; ``` ## ID Images diff --git a/docs/sdks/react-native/id-capture/get-started.md b/docs/sdks/react-native/id-capture/get-started.md index 01a5e02f..4c90dfcc 100644 --- a/docs/sdks/react-native/id-capture/get-started.md +++ b/docs/sdks/react-native/id-capture/get-started.md @@ -52,7 +52,7 @@ You need to also create the [Camera](https://docs.scandit.com/data-capture-sdk/r const camera = Camera.default; context.setFrameSource(camera); -const cameraSettings = IdCapture.recommendedCameraSettings; +const cameraSettings = IdCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -73,8 +73,8 @@ By default, [anonymized data](./advanced.md#configure-data-anonymization) is not ```js const settings = new IdCaptureSettings(); -settings.scannerType = SingleSideScanner(); // To scan only one-sided documents -// settings.scannerType = FullDocumentScanner(); // To scan both sides of the document +settings.scanner = new SingleSideScanner(true, false, false); // To scan only one-sided documents +// settings.scanner = new FullDocumentScanner(); // To scan both sides of the document settings.acceptedDocuments.push( new DriverLicense(IdCaptureRegion.Any), @@ -96,9 +96,9 @@ For more specific information, use its non-null result properties (e.g. [Capture ```js const listener = { didCaptureId: (idCapture, session) => { - if (session.newlyCapturedId.isPassport() = true) { + if (session.newlyCapturedId.isPassport() === true) { // Handle the information extracted. - } else if (session.newlyCapturedId.isDriverLicense() = true) { + } else if (session.newlyCapturedId.isDriverLicense() === true) { // Handle the information extracted. } }, @@ -129,10 +129,7 @@ To do that, add a [DataCaptureView](https://docs.scandit.com/data-capture-sdk/re Then, add an instance of [IdCaptureOverlay](https://docs.scandit.com/data-capture-sdk/react-native/id-capture/api/ui/id-capture-overlay.html#class-scandit.datacapture.id.ui.IdCaptureOverlay) to the view: ```js -let overlay = IdCaptureOverlay.withIdCaptureForView( - idCapture, - this.viewRef.current -); +const overlay = new IdCaptureOverlay(idCapture); ``` The overlay chooses the displayed UI automatically, based on the selected [IdCaptureSettings](https://docs.scandit.com/data-capture-sdk/react-native/id-capture/api/id-capture-settings.html#class-scandit.datacapture.id.IdCaptureSettings). diff --git a/docs/sdks/react-native/matrixscan-ar/get-started.md b/docs/sdks/react-native/matrixscan-ar/get-started.md index 40d2b0a0..13932c4f 100644 --- a/docs/sdks/react-native/matrixscan-ar/get-started.md +++ b/docs/sdks/react-native/matrixscan-ar/get-started.md @@ -42,8 +42,8 @@ The main entry point for the Barcode AR Mode is the `BarcodeAr` object. You can Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. ```js -const settings = BarcodeArSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new BarcodeArSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` The create the mode with the previously created settings: @@ -73,30 +73,25 @@ const viewSettings = new BarcodeArViewSettings(); Next, create a `BarcodeArView` instance with the Data Capture Context and the settings initialized in the previous step. The `BarcodeArView` is automatically added to the provided parent view. ```js -let barcodeAr; +let barcodeArView; { barcodeArView = view; - // Handle the view as needed, for example - barcodeArView.startSearching(); }} >; ``` ## Register the Listener -The `BarcodeArView` displays a **Finish** button next to its shutter button. - -Register a [BarcodeArViewUiListener](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-ar-view.html#interface-scandit.datacapture.barcode.check.ui.IBarcodeArViewUiListener) to be notified what items have been found once the finish button is pressed. - -In this tutorial, we will then navigate back to the previous screen to finish the find session. +Register a [BarcodeArViewUiListener](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-ar-view.html#interface-scandit.datacapture.barcode.check.ui.IBarcodeArViewUiListener) to be notified when a highlighted barcode is tapped. ```js -barcodeArView.barcodeArViewUiListener = { - didTapFinishButton(foundItems: BarcodeArItem[]) { +barcodeArView.uiListener = { + didTapHighlightForBarcode(barcodeAr, barcode, highlight) { + // Handle the tapped barcode. }, }; ``` diff --git a/docs/sdks/react-native/matrixscan-count/advanced.md b/docs/sdks/react-native/matrixscan-count/advanced.md index 7fda0130..c1b7f53b 100644 --- a/docs/sdks/react-native/matrixscan-count/advanced.md +++ b/docs/sdks/react-native/matrixscan-count/advanced.md @@ -71,7 +71,7 @@ For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```js const settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +settings.enableSymbologies(enabledSymbologies); const excludedSymbologies = [Symbology.PDF417]; const filterSettings = settings.filterSettings; diff --git a/docs/sdks/react-native/matrixscan-count/get-started.md b/docs/sdks/react-native/matrixscan-count/get-started.md index d0f9fbd0..36b31230 100644 --- a/docs/sdks/react-native/matrixscan-count/get-started.md +++ b/docs/sdks/react-native/matrixscan-count/get-started.md @@ -13,7 +13,7 @@ In this guide you will learn step-by-step how to add MatrixScan Count to your ap The general steps are: -1. Create a new Data Capture Context instance +1. Initialize the Data Capture Context 2. Configure the Barcode Count Mode 3. Obtain camera instance and set frame source used 4. Register the listener to be informed when scanned phase is over @@ -23,16 +23,18 @@ The general steps are: 8. Reset Barcode Count mode 9. List and Exit callbacks -## Create A New Data Capture Context Instance +## Initialize the Data Capture Context -The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. +The first step to add capture capabilities to your application is to initialize the [Data Capture Context](https://docs.scandit.com/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) with a valid Scandit Data Capture SDK license key. ```js -const context = DataCaptureContext.forLicenseKey( - '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' -); +DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` +:::note +`DataCaptureContext` should be initialized only once. Use `DataCaptureContext.sharedInstance` to access it afterwards. +::: + ## Configure The Barcode Count Mode The main entry point for the Barcode Count Mode is the [BarcodeCount](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) object. It is configured through [BarcodeCountSettings](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/barcode-count-settings.html#class-scandit.datacapture.barcode.count.BarcodeCountSettings) and allows you to register one or more listeners that are informed whenever a scan phase has finished. @@ -48,7 +50,7 @@ If you are sure that your environment will only have unique barcodes (i.e. no du ```js const barcodeCount = new BarcodeCount(settings); -context.addMode(barcodeCount); +DataCaptureContext.sharedInstance.addMode(barcodeCount); ``` ## Obtain Camera Instance And Set Frame Source Used @@ -56,16 +58,18 @@ context.addMode(barcodeCount); Our recommended camera settings should be used to achieve the best performance and user experience. The following couple of lines show how to get the recommended settings for MatrixScan Count and create the camera from it: ```js -const cameraSettings = new CameraSettings(); +const cameraSettings = BarcodeCount.createRecommendedCameraSettings(); const camera = Camera.default; -camera.applySettings(cameraSettings); +if (camera != null) { + camera.applySettings(cameraSettings); +} ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/data-capture-sdk/react-native/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): ```js -context.setFrameSource(camera); +DataCaptureContext.sharedInstance.setFrameSource(camera); ``` ## Register the Listener @@ -83,7 +87,7 @@ Add a [BarcodeCountView](https://docs.scandit.com/data-capture-sdk/react-native/ ```js const barcodeCountViewComponent = ( - + ); ``` diff --git a/docs/sdks/react-native/matrixscan-find/advanced.md b/docs/sdks/react-native/matrixscan-find/advanced.md index ca55ec65..7fcfa672 100644 --- a/docs/sdks/react-native/matrixscan-find/advanced.md +++ b/docs/sdks/react-native/matrixscan-find/advanced.md @@ -24,11 +24,11 @@ mode.addListener({ // The mode was started }, - didPauseSearch(foundItems: BarcodeFindItem[]) { + didPauseSearch(foundItems) { // The mode was paused }, - didStopSearch(foundItems: BarcodeFindItem[]) { + didStopSearch(foundItems) { // The mode was stopped after the finish button was clicked }, }); diff --git a/docs/sdks/react-native/matrixscan-find/get-started.md b/docs/sdks/react-native/matrixscan-find/get-started.md index 18b669bc..e0131fba 100644 --- a/docs/sdks/react-native/matrixscan-find/get-started.md +++ b/docs/sdks/react-native/matrixscan-find/get-started.md @@ -37,8 +37,8 @@ For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change First create the settings: ```js -const settings = BarcodeFindSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new BarcodeFindSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be actively searched for. @@ -49,12 +49,13 @@ In this tutorial, let’s look up two items based on their EAN13 codes. We will const items = [ new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215438"), new BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), -new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for -display only +new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only ] +``` Create the mode with the previously created settings and set the items: +```js const mode = new BarcodeFind(settings); mode.setItemList(items); ``` @@ -75,9 +76,9 @@ const viewSettings = new BarcodeFindViewSettings(); Construct a new BarcodeFindView. The BarcodeFindView is automatically added to the provided parent view. ```js -let barcodeFind; +let barcodeFindView; { @@ -96,7 +97,7 @@ In this tutorial, we will then navigate back to the previous screen to finish th ```js barcodeFindView.barcodeFindViewUiListener = { - didTapFinishButton(foundItems: BarcodeFindItem[]) { + didTapFinishButton(foundItems) { // This method is called when the user presses the // finish button. It returns the list of all items that were found during // the session. diff --git a/docs/sdks/react-native/matrixscan-pick/advanced.md b/docs/sdks/react-native/matrixscan-pick/advanced.md index a611eba0..5a22f0d3 100644 --- a/docs/sdks/react-native/matrixscan-pick/advanced.md +++ b/docs/sdks/react-native/matrixscan-pick/advanced.md @@ -16,16 +16,26 @@ MatrixScan Pick is optimized by default for efficiency, accuracy, and a seamless You may want more fine-grained knowledge over the different events happening during the life of the `BarcodePick` mode, such as when the search starts, pauses, and stops. -To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/data-capture-sdk/android/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. +To do this, you can directly register a [`BarcodePickViewListener`](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-pick-view.html#interface-scandit.datacapture.barcode.pick.IBarcodePickViewListener) on the view itself, keeping in mind that these listeners are called from a background thread. -```javascript -mode.addListener({ - onObservationStarted() { - // The mode was started +```js +const viewListener = { + didStartScanning(view) { + // The view started scanning }, - - onObservationStopped(foundItems: BarcodeFindItem[]) { - // The mode was stopped after the finish button was clicked + + didFreezeScanning(view) { + // The view was frozen + }, + + didPauseScanning(view) { + // The view was paused }, -}); + + didStopScanning(view) { + // The view stopped scanning + }, +}; + +barcodePickView.addListener(viewListener); ``` diff --git a/docs/sdks/react-native/matrixscan-pick/get-started.md b/docs/sdks/react-native/matrixscan-pick/get-started.md index 0de2fad4..0bf176d1 100644 --- a/docs/sdks/react-native/matrixscan-pick/get-started.md +++ b/docs/sdks/react-native/matrixscan-pick/get-started.md @@ -41,24 +41,23 @@ The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. -```javascript -const settings = BarcodePickSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +```js +const settings = new BarcodePickSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be picked and quantity to be picked for each item. -```javascript +```js const items = [ - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), - new BarcodePickProductQuantityToPick(3), - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3) -] + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), new BarcodePickProductQuantityToPick(3)), + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3)), +]; ``` Create the mode with the previously created settings: -```javascript +```js const mode = new BarcodePick(settings); ``` @@ -77,25 +76,23 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Zoom button * Loading Dialog -```javascript +```js const viewSettings = new BarcodePickViewSettings(); // ... ``` Construct a new `BarcodePickView`. The `BarcodePickView` is automatically added to the provided parent view. -```javascript -let BarcodePick; +```js +let barcodePickView; { - BarcodePickView = view; - // Handle the view as needed, for example - BarcodePickView.start(); + barcodePickView = view; }} -> +/> ``` ## Register the Listener @@ -106,13 +103,12 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/data-capture-sdk In this tutorial, we will then navigate back to the previous screen to finish the find session. -```javascript -BarcodePickView.BarcodePickViewUiListener = { - didTapFinishButton(foundItems: BarcodePickProduct[]) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. - } +```js +barcodePickView.uiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the finish button. + // It returns the list of all items that were found during the session. + }, }; ``` @@ -120,8 +116,8 @@ BarcodePickView.BarcodePickViewUiListener = { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. -```javascript -BarcodePickView.start(); +```js +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/docs/sdks/react-native/matrixscan/advanced.md b/docs/sdks/react-native/matrixscan/advanced.md index a98fd8c9..5f93d5b3 100644 --- a/docs/sdks/react-native/matrixscan/advanced.md +++ b/docs/sdks/react-native/matrixscan/advanced.md @@ -34,10 +34,8 @@ First of all, create a new instance of [BarcodeBatchAdvancedOverlay](https://doc [DataCaptureView](https://docs.scandit.com/data-capture-sdk/react-native/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). ```js -const overlay = BarcodeBatchAdvancedOverlay.withBarcodeBatchForView( - barcodeBatch, - view -); +const overlay = new BarcodeBatchAdvancedOverlay(barcodeBatch); +view.addOverlay(overlay); ``` At this point, you have two options. diff --git a/docs/sdks/react-native/matrixscan/get-started.md b/docs/sdks/react-native/matrixscan/get-started.md index e1a722b4..7b81e918 100644 --- a/docs/sdks/react-native/matrixscan/get-started.md +++ b/docs/sdks/react-native/matrixscan/get-started.md @@ -60,7 +60,7 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = BarcodeBatch.recommendedCameraSettings; +const cameraSettings = BarcodeBatch.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -95,10 +95,8 @@ When using the built-in camera as frame source, you will typically want to displ To visualize the results of Barcode Batch, first you need to add the following [overlay](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay): ```js -const overlay = BarcodeBatchBasicOverlay.withBarcodeBatchForView( - barcodeBatch, - view -); +const overlay = new BarcodeBatchBasicOverlay(barcodeBatch, BarcodeBatchBasicOverlayStyle.Frame); +view.addOverlay(overlay); ``` Once the overlay has been added, you should implement the [BarcodeBatchBasicOverlayListener](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#interface-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener) interface. The method [BarcodeBatchBasicOverlayListener.brushForTrackedBarcode()](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#method-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener.BrushForTrackedBarcode) is invoked every time a new tracked barcode appears and it can be used to set a [brush](https://docs.scandit.com/data-capture-sdk/react-native/core/api/ui/brush.html#class-scandit.datacapture.core.ui.Brush) that will be used to highlight that specific barcode in the [overlay](https://docs.scandit.com/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay). diff --git a/docs/sdks/react-native/sparkscan/get-started.md b/docs/sdks/react-native/sparkscan/get-started.md index 0cf910c2..f74a786b 100644 --- a/docs/sdks/react-native/sparkscan/get-started.md +++ b/docs/sdks/react-native/sparkscan/get-started.md @@ -46,7 +46,7 @@ settings.enableSymbologies([Symbology.EAN13UPCA]); Next, create a SparkScan instance with the settings initialized in the previous step: ```js -const sparkScan = SparkScan.forSettings(settings); +const sparkScan = new SparkScan(settings); ``` ## Setup the Spark Scan View diff --git a/docs/sdks/titanium/barcode-capture/configure-barcode-symbologies.md b/docs/sdks/titanium/barcode-capture/configure-barcode-symbologies.md index 4d3ff3f2..578d7d64 100644 --- a/docs/sdks/titanium/barcode-capture/configure-barcode-symbologies.md +++ b/docs/sdks/titanium/barcode-capture/configure-barcode-symbologies.md @@ -42,12 +42,6 @@ If you want to read codes that are shorter/longer than the specified default ran The below lines of code show how to change the active symbol count for Code 128 to read codes with 6, 7 and 8 symbols. ```js -const settings = new ScanditBarcode.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - ScanditBarcode.Symbology.Code128 -); -symbologySettings.activeSymbolCounts = [6, 7, 8]; - const settings = new ScanditBarcode.BarcodeCaptureSettings(); const symbologySettings = settings.settingsForSymbology( ScanditBarcode.Symbology.Code128 diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md b/versioned_docs/version-6.28.7/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md index ee218017..26a5ea43 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md @@ -26,8 +26,8 @@ If you already know the names of the symbologies you want to scan/read, take a l The following lines of code show you how to enable scanning Code 128 codes for barcode capture: ```js -const settings = new Scandit.BarcodeCaptureSettings(); -settings.enableSymbology(Scandit.Symbology.Code128, true); +const settings = new BarcodeCaptureSettings(); +settings.enableSymbology(Symbology.Code128, true); ``` ## Configure the Active Symbol Count @@ -37,16 +37,8 @@ Barcode symbologies such as [Code 128](https://docs.scandit.com/6.28/data-captur The below lines of code show how to change the active symbol count for Code 128 to read codes with 6, 7 and 8 symbols. ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code128 -); -symbologySettings.activeSymbolCounts = [6, 7, 8]; - -const settings = new ScanditBarcode.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - ScanditBarcode.Symbology.Code128 -); +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code128); symbologySettings.activeSymbolCounts = [6, 7, 8]; ``` @@ -59,10 +51,8 @@ Calculating the active symbol count is symbology-specific as each symbology has Most barcodes are printed using dark ink on a bright background. Some symbologies allow the colors to be inverted and can also be printed using bright ink on a dark background. This is not possible for all symbologies as it could lead to false reads when the symbology is not designed for this use case. Which symbologies allow color inversion can be seen in the documentation on [symbology properties](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/symbology-properties.html). When you enable a symbology as described above, only dark-on-bright codes are enabled (see [SymbologySettings.isEnabled](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#property-scandit.datacapture.barcode.SymbologySettings.IsEnabled 'SymbologySettings.isEnabled property')). When you also want to read bright-on-dark codes, color-inverted reading for that symbology must also be enabled (see [SymbologySettings.isColorInvertedEnabled](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#property-scandit.datacapture.barcode.SymbologySettings.IsColorInvertedEnabled)): ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code128 -); +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code128); symbologySettings.isColorInvertedEnabled = true; ``` @@ -72,11 +62,9 @@ Some symbologies have a mandatory checksum that will always be enforced while ot [SymbologySettings.checksums](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#property-scandit.datacapture.barcode.SymbologySettings.Checksums): ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code39 -); -symbologySettings.checksums = [Scandit.Checksum.Mod43]; +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code39); +symbologySettings.checksums = [Checksum.Mod43]; ``` ## Enable Symbology-Specific Extensions @@ -86,9 +74,7 @@ Some symbologies allow further configuration. These configuration options are av To enable/disable a symbology extension, use [SymbologySettings.setExtensionEnabled()](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#method-scandit.datacapture.barcode.SymbologySettings.SetExtensionEnabled). ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code39 -); +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code39); symbologySettings.setExtensionEnabled('full_ascii', true); ``` diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/barcode-capture/get-started.md b/versioned_docs/version-6.28.7/sdks/capacitor/barcode-capture/get-started.md index 4eb26e73..fa34bbf4 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/barcode-capture/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/barcode-capture/get-started.md @@ -26,7 +26,7 @@ The general steps are: The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( +const context = DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -38,14 +38,14 @@ Barcode scanning is orchestrated by the [BarcodeCapture](https://docs.scandit.co For this tutorial, we will setup barcode scanning for a small list of different barcode types, called [symbologies](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology). The list of symbologies to enable is highly application specific. We recommend that you only enable the list of symbologies your application requires. ```js -const settings = new Scandit.BarcodeCaptureSettings(); +const settings = new BarcodeCaptureSettings(); settings.enableSymbologies([ - Scandit.Symbology.Code128, - Scandit.Symbology.Code39, - Scandit.Symbology.QR, - Scandit.Symbology.EAN8, - Scandit.Symbology.UPCE, - Scandit.Symbology.EAN13UPCA, + Symbology.Code128, + Symbology.Code39, + Symbology.QR, + Symbology.EAN8, + Symbology.UPCE, + Symbology.EAN13UPCA, ]); ``` @@ -54,7 +54,7 @@ If you are not disabling barcode capture immediately after having scanned the fi Next, create a [BarcodeCapture](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/barcode-capture.html#class-scandit.datacapture.barcode.BarcodeCapture) instance with the settings initialized in the previous step: ```js -const barcodeCapture = Scandit.BarcodeCapture.forContext(context, settings); +const barcodeCapture = BarcodeCapture.forContext(context, settings); ``` ## Register the Barcode Capture Listener @@ -93,11 +93,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeCapture.recommendedCameraSettings; +const cameraSettings = BarcodeCapture.recommendedCameraSettings; // Depending on the use case further camera settings adjustments can be made here. -const camera = Scandit.Camera.default; +const camera = Camera.default; if (camera) { camera.applySettings(cameraSettings); @@ -113,7 +113,7 @@ context.setFrameSource(camera); The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.On](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): ```js -camera.switchToDesiredState(Scandit.FrameSourceState.On); +camera.switchToDesiredState(FrameSourceState.On); ``` ## Use a Capture View to Visualize the Scan Process @@ -121,14 +121,14 @@ camera.switchToDesiredState(Scandit.FrameSourceState.On); When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = DataCaptureView.forContext(context); view.connectToElement(htmlElement); ``` To visualize the results of barcode scanning, the following [overlay](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-capture-overlay.html#class-scandit.datacapture.barcode.ui.BarcodeCaptureOverlay) can be added: ```js -const overlay = Scandit.BarcodeCaptureOverlay.withBarcodeCaptureForView( +const overlay = BarcodeCaptureOverlay.withBarcodeCaptureForView( barcodeCapture, view ); diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/barcode-selection/get-started.md b/versioned_docs/version-6.28.7/sdks/capacitor/barcode-selection/get-started.md index f6f8a11b..d2b0fab9 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/barcode-selection/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/barcode-selection/get-started.md @@ -33,7 +33,7 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to [you The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext 'data capture context class'). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( +const context = DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -47,7 +47,7 @@ Barcode selection is orchestrated by the [BarcodeSelection](https://docs.scandit For this tutorial, we will setup barcode scanning for a small list of different barcode types, called [symbologies](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology). The list of symbologies to enable is highly application specific. We recommend that you only enable the list of symbologies your application requires. ```js -const settings = new Scandit.BarcodeSelectionSettings(); +const settings = new BarcodeSelectionSettings(); settings.enableSymbologies([ Symbology.Code128, Symbology.EAN8, @@ -77,7 +77,7 @@ _Creating the mode_ Next, create a [BarcodeSelection](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/barcode-selection.html#class-scandit.datacapture.barcode.selection.BarcodeSelection) instance with the settings initialized in the previous step: ```js -const barcodeSelection = Scandit.BarcodeSelection.forContext(context, settings); +const barcodeSelection = BarcodeSelection.forContext(context, settings); ``` ## Register the Barcode Selection Listener @@ -116,11 +116,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeSelection.recommendedCameraSettings; +const cameraSettings = BarcodeSelection.recommendedCameraSettings; // Depending on the use case further camera settings adjustments can be made here. -const camera = Scandit.Camera.default; +const camera = Camera.default; if (camera) { camera.applySettings(cameraSettings); diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/id-capture/advanced.md b/versioned_docs/version-6.28.7/sdks/capacitor/id-capture/advanced.md index dcbc3e65..55c1e352 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/id-capture/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/id-capture/advanced.md @@ -20,10 +20,10 @@ First, enable scanning of both sides of documents in [IdCaptureSettings](https:/ ```js settings.supportedDocuments = [ - Scandit.IdDocumentType.IdCardVIZ, - Scandit.IdDocumentType.DLVIZ, + IdDocumentType.IdCardVIZ, + IdDocumentType.DLVIZ, ]; -settings.supportedSides = Scandit.SupportedSides.FrontAndBack; +settings.supportedSides = SupportedSides.FrontAndBack; ``` Start by scanning the front side of a document. After you receive the result in [IdCaptureListener](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/id-capture/api/id-capture-listener.html#interface-scandit.datacapture.id.IIdCaptureListener), inspect [VIZResult.isBackSideCaptureSupported](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/id-capture/api/viz-result.html#property-scandit.datacapture.id.VizResult.IsBackSideCaptureSupported). If scanning of the back side of your document is supported, flip the document and capture the back side as well. The next result that you receive is a combined result that contains the information from both sides. You may verify this by checking [VIZResult.capturedSides](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/id-capture/api/viz-result.html#property-scandit.datacapture.id.VizResult.CapturedSides). After both sides of the document are scanned, you may proceed with another document. diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/id-capture/get-started.md b/versioned_docs/version-6.28.7/sdks/capacitor/id-capture/get-started.md index 6ae39e90..42f33ccb 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/id-capture/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/id-capture/get-started.md @@ -38,7 +38,7 @@ Please note that your license may support only a subset of ID Capture features. The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( +const context = DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -48,10 +48,10 @@ const context = Scandit.DataCaptureContext.forLicenseKey( You need to also create the [Camera](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/camera.html#class-scandit.datacapture.core.Camera): ```js -const camera = Scandit.Camera.default; +const camera = Camera.default; context.setFrameSource(camera); -const cameraSettings = Scandit.IdCapture.recommendedCameraSettings; +const cameraSettings = IdCapture.recommendedCameraSettings; // Depending on the use case further camera settings adjustments can be made here. @@ -69,11 +69,11 @@ Using [IdDocumentType.DLVIZ](https://docs.scandit.com/6.28/data-capture-sdk/capa ::: ```js -const settings = new Scandit.IdCaptureSettings(); +const settings = new IdCaptureSettings(); settings.supportedDocuments = [ - Scandit.IdDocumentType.IdCardVIZ, - Scandit.IdDocumentType.AAMVABarcode, - Scandit.IdDocumentType.DLVIZ, + IdDocumentType.IdCardVIZ, + IdDocumentType.AAMVABarcode, + IdDocumentType.DLVIZ, ]; ``` @@ -97,7 +97,7 @@ const listener = { Create a new ID Capture mode with the chosen settings. Then register the listener: ```js -const idCapture = Scandit.IdCapture.forContext(context, settings); +const idCapture = IdCapture.forContext(context, settings); idCapture.addListener(listener); ``` @@ -106,17 +106,14 @@ idCapture.addListener(listener); When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = DataCaptureView.forContext(context); view.connectToElement(htmlElement); ``` Then create an instance of [IdCaptureOverlay](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/id-capture/api/ui/id-capture-overlay.html#class-scandit.datacapture.id.ui.IdCaptureOverlay) attached to the view: ```js -let overlay = Scandit.IdCaptureOverlay.withTextCaptureForView( - idCapture, - dataCaptureView -); +const overlay = IdCaptureOverlay.withIdCaptureForView(idCapture, view); ``` The overlay chooses the displayed UI automatically, based on the selected [IdCaptureSettings](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/id-capture/api/id-capture-settings.html#class-scandit.datacapture.id.IdCaptureSettings). @@ -126,7 +123,7 @@ The overlay chooses the displayed UI automatically, based on the selected [IdCap Finally, turn on the camera to start scanning: ```js -camera.switchToDesiredState(Scandit.FrameSourceState.On); +camera.switchToDesiredState(FrameSourceState.On); ``` And this is it. You can now scan documents. diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-count/advanced.md b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-count/advanced.md index f8e86208..98139eae 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-count/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-count/advanced.md @@ -36,15 +36,7 @@ barcodeCount.setBarcodeCountCaptureList(barcodeCountCaptureList); It can be difficult to reach the shutter button if the smart device is attached to the user’s wrist by a strap or similar. In this instance, you can enable a floating shutter button that can be positioned by the end user in a more ergonomically suitable position. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowFloatingShutterButton = true; - } - }} - /> -); +barcodeCountView.shouldShowFloatingShutterButton = true; ``` ## Filtering @@ -57,7 +49,7 @@ For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```js const settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +settings.enableSymbologies(enabledSymbologies); const excludedSymbologies = [Symbology.PDF417]; const filterSettings = settings.filterSettings; @@ -80,15 +72,7 @@ There are situations in which the user may find it helpful to clean up their scr If this is the case, you can enable the “Clear screen” button. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowClearHighlightsButton = true; - } - }} - /> -); +barcodeCountView.shouldShowClearHighlightsButton = true; ``` ## Customize Overlay Colors @@ -106,15 +90,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Notifications @@ -135,15 +111,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Disable UI Elements @@ -154,30 +122,14 @@ However, if you wish to disable UI elements you can do it as follows. Disable buttons: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowListButton = false; - view.shouldShowExitButton = false; - view.shouldShowShutterButton = false; - } - }} - /> -); +barcodeCountView.shouldShowListButton = false; +barcodeCountView.shouldShowExitButton = false; +barcodeCountView.shouldShowShutterButton = false; ``` Disable feedback and hints: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowUserGuidanceView = false; - view.shouldShowHints = false; - } - }} - /> -); +barcodeCountView.shouldShowUserGuidanceView = false; +barcodeCountView.shouldShowHints = false; ``` diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-count/get-started.md b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-count/get-started.md index 99acc172..d17ce867 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-count/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-count/get-started.md @@ -53,10 +53,12 @@ const barcodeCount = BarcodeCount.forContext(context, settings); Our recommended camera settings should be used to achieve the best performance and user experience. The following couple of lines show how to get the recommended settings for MatrixScan Count and create the camera from it: ```js -const cameraSettings = new CameraSettings(); +const cameraSettings = BarcodeCount.recommendedCameraSettings; const camera = Camera.default; -camera.applySettings(cameraSettings); +if (camera != null) { + camera.applySettings(cameraSettings); +} ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): @@ -79,9 +81,8 @@ MatrixScan Count’s built-in AR user interface includes buttons and overlays th Add a [BarcodeCountView](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) to your view hierarchy: ```js -const barcodeCountViewComponent = ( - -); +const barcodeCountView = BarcodeCountView.forContextWithMode(context, barcodeCount); +barcodeCountView.connectToElement(htmlElement); ``` ## Set Up The Camera So That It Switches On When You Are In Scanning View @@ -89,21 +90,15 @@ const barcodeCountViewComponent = ( The camera is not automatically turned on when you are in a scanning view. You need to set up the camera so that it switches on when needed and it switches off when not needed anymore. Similarly [BarcodeCount](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) should also be enabled and disabled. For instance, you should switch off the camera when the [BarcodeCountView](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is not visible anymore (including when the app goes in the background), similarly you want to switch on the camera when the [BarcodeCountView](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is visible (including when the app goes to the foreground). One way to achieve this is the following: ```js -componentDidMount() { -handleAppStateChangeSubscription = AppState.addEventListener('change', handleAppStateChange); -} - -componentWillUnmount() { -handleAppStateChangeSubscription.remove(); -} - -handleAppStateChange = async (nextAppState) => { -if (nextAppState.match(/inactive|background/)) { -camera.switchToDesiredState(FrameSourceState.Off); -} else { -camera.switchToDesiredState(FrameSourceState.On); -} -} +import { App } from '@capacitor/app'; + +App.addListener('appStateChange', ({ isActive }) => { + if (isActive) { + camera.switchToDesiredState(FrameSourceState.On); + } else { + camera.switchToDesiredState(FrameSourceState.Off); + } +}); ``` ## Store And Retrieve Scanned Barcodes @@ -147,13 +142,5 @@ const viewUiListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.uiListener = viewUiListener; - } - }} - /> -); +barcodeCountView.uiListener = viewUiListener; ``` diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-find/advanced.md b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-find/advanced.md index d84cb6e1..fc6f83e7 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-find/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-find/advanced.md @@ -22,11 +22,11 @@ mode.addListener({ // The mode was started }, - didPauseSearch(foundItems: BarcodeFindItem[]) { + didPauseSearch(foundItems) { // The mode was paused }, - didStopSearch(foundItems: BarcodeFindItem[]) { + didStopSearch(foundItems) { // The mode was stopped after the finish button was clicked }, }); diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-find/get-started.md b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-find/get-started.md index 18b3cfe4..1f4e890d 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-find/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-find/get-started.md @@ -39,8 +39,8 @@ For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change First create the settings: ```js -const settings = BarcodeFindSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new BarcodeFindSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be actively searched for. @@ -51,12 +51,13 @@ In this tutorial, let’s look up two items based on their EAN13 codes. We will const items = [ new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215438"), new BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), -new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for -display only +new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only ] +``` Create the mode with the previously created settings and set the items: +```js const mode = new BarcodeFind(settings); mode.setItemList(items); ``` @@ -77,17 +78,8 @@ const viewSettings = new BarcodeFindViewSettings(); Construct a new BarcodeFindView. The BarcodeFindView is automatically added to the provided parent view. ```js -let barcodeFind; - { - barcodeFindView = view; - // Handle the view as needed, for example - barcodeFindView.startSearching(); - }} ->; +const barcodeFindView = BarcodeFindView.forModeWithViewSettings(dataCaptureContext, mode, viewSettings); +barcodeFindView.connectToElement(htmlElement); ``` ## Register a listener to be notified with found items @@ -98,7 +90,7 @@ In this tutorial, we will then navigate back to the previous screen to finish th ```js barcodeFindView.barcodeFindViewUiListener = { - didTapFinishButton(foundItems: BarcodeFindItem[]) { + didTapFinishButton(foundItems) { // This method is called when the user presses the // finish button. It returns the list of all items that were found during // the session. diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-pick/advanced.md b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-pick/advanced.md index ac47d69c..a0666632 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-pick/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-pick/advanced.md @@ -14,16 +14,26 @@ MatrixScan Pick is optimized by default for efficiency, accuracy, and a seamless You may want more fine-grained knowledge over the different events happening during the life of the `BarcodePick` mode, such as when the search starts, pauses, and stops. -To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/6.28/data-capture-sdk/android/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. +To do this, you can directly register a [`BarcodePickViewListener`](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-pick-view.html#interface-scandit.datacapture.barcode.pick.IBarcodePickViewListener) on the view itself, keeping in mind that these listeners are called from a background thread. -```javascript -mode.addListener({ - onObservationStarted() { - // The mode was started +```js +const viewListener = { + didStartScanning(view) { + // The view started scanning }, - - onObservationStopped(foundItems: BarcodeFindItem[]) { - // The mode was stopped after the finish button was clicked + + didFreezeScanning(view) { + // The view was frozen + }, + + didPauseScanning(view) { + // The view was paused }, -}); + + didStopScanning(view) { + // The view stopped scanning + }, +}; + +barcodePickView.addListener(viewListener); ``` diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-pick/get-started.md b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-pick/get-started.md index a58cbefd..cfe2692e 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-pick/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan-pick/get-started.md @@ -31,7 +31,7 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to [you 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. -```javascript +```js const dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` @@ -41,19 +41,18 @@ The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. -```javascript -const settings = BarcodePickSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +```js +const settings = new BarcodePickSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be picked and quantity to be picked for each item. ```javascript const items = [ - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), - new BarcodePickProductQuantityToPick(3), - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3) -] + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), new BarcodePickProductQuantityToPick(3)), + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3)), +]; ``` Create the mode with the previously created settings: @@ -85,9 +84,9 @@ const viewSettings = new BarcodePickViewSettings(); Construct a new `BarcodePickView`. The `BarcodePickView` will be attached to the HTMLElement provided in the ConnectToElement function. ```javascript -const BarcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, BarcodePick, viewSettings); -// Connect the data capture view to the HTML element, so it can fill up its size and follow its position. -view.connectToElement(document.getElementById('html-element-id')); +const barcodePickView = new BarcodePickView({ context: dataCaptureContext, barcodePick: mode, settings: viewSettings }); +// Connect the view to the HTML element, so it can fill up its size and follow its position. +barcodePickView.connectToElement(document.getElementById('html-element-id')); ``` ## Register the Listener @@ -99,12 +98,11 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/6.28/data-captur In this tutorial, we will then navigate back to the previous screen to finish the find session. ```javascript -BarcodePickView.BarcodePickViewUiListener = { - didTapFinishButton(foundItems: BarcodePickProduct[]) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. - } +barcodePickView.uiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the finish button. + // It returns the list of all items that were found during the session. + }, }; ``` @@ -113,7 +111,7 @@ BarcodePickView.BarcodePickViewUiListener = { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. ```javascript -BarcodePickView.start(); +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan/advanced.md b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan/advanced.md index 388ea499..ec564496 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan/advanced.md @@ -19,7 +19,7 @@ First of all, create a new instance of [BarcodeTrackingAdvancedOverlay](https:// ```js const overlay = - Scandit.BarcodeTrackingAdvancedOverlay.withBarcodeTrackingForView( + BarcodeTrackingAdvancedOverlay.withBarcodeTrackingForView( barcodeTracking, view ); @@ -48,22 +48,22 @@ overlay.listener = { let element = document.createElement('span'); element.innerText = trackedBarcode.barcode.data; element.style.backgroundColor = '#FFFFFFFF'; - return Scandit.TrackedBarcodeView.withHTMLElement(element, null); + return TrackedBarcodeView.withHTMLElement(element, null); }, anchorForTrackedBarcode: (overlay, trackedBarcode) => { // As we want the view to be above the barcode, we anchor the view's center to the top-center of the barcode quadrilateral. // Use the function 'offsetForTrackedBarcode' below to adjust the position of the view by providing an offset. - return Scandit.Anchor.TopCenter; + return Anchor.TopCenter; }, offsetForTrackedBarcode: (overlay, trackedBarcode) => { // This is the offset that will be applied to the view. // You can use .fraction to give a measure relative to the view itself, the sdk will take care of transforming this into pixel size. // We now center horizontally and move up the view to make sure it's centered and above the barcode quadrilateral by half of the view's height. - return new Scandit.PointWithUnit( - new Scandit.NumberWithUnit(0, Scandit.MeasureUnit.Fraction), - new Scandit.NumberWithUnit(-1, Scandit.MeasureUnit.Fraction) + return new PointWithUnit( + new NumberWithUnit(0, MeasureUnit.Fraction), + new NumberWithUnit(-1, MeasureUnit.Fraction) ); }, }; @@ -79,20 +79,20 @@ didUpdateSession: (barcodeTracking, session) => { let element = document.createElement('span'); element.innerText = trackedBarcode.barcode.data; element.style.backgroundColor = '#FFFFFFFF'; - let trackedBarcodeView = Scandit.TrackedBarcodeView.withHTMLElement( + let trackedBarcodeView = TrackedBarcodeView.withHTMLElement( element, null ); window.overlay.setViewForTrackedBarcode(trackedBarcodeView, trackedBarcode); window.overlay.setAnchorForTrackedBarcode( - Scandit.Anchor.TopCenter, + Anchor.TopCenter, trackedBarcode ); window.overlay.setOffsetForTrackedBarcode( - new Scandit.PointWithUnit( - new Scandit.NumberWithUnit(0, Scandit.MeasureUnit.Fraction), - new Scandit.NumberWithUnit(-1, Scandit.MeasureUnit.Fraction) + new PointWithUnit( + new NumberWithUnit(0, MeasureUnit.Fraction), + new NumberWithUnit(-1, MeasureUnit.Fraction) ), trackedBarcode ); diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan/get-started.md b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan/get-started.md index c1e48fd0..f14797e7 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/matrixscan/get-started.md @@ -23,7 +23,7 @@ The general steps are: The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( +const context = DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -37,14 +37,14 @@ Most of the times, you will not need to implement a [BarcodeTrackingListener](ht For this tutorial, we will setup Barcode Tracking for tracking QR codes. ```js -const settings = new Scandit.BarcodeTrackingSettings(); -settings.enableSymbology(Scandit.Symbology.QR, true); +const settings = new BarcodeTrackingSettings(); +settings.enableSymbology(Symbology.QR, true); ``` Next, create a [BarcodeTracking](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/barcode-tracking.html#class-scandit.datacapture.barcode.tracking.BarcodeTracking) instance with the data capture context and the settings initialized in the previous steps: ```js -const barcodeTracking = Scandit.BarcodeTracking.forContext(context, settings); +const barcodeTracking = BarcodeTracking.forContext(context, settings); ``` ## Use the Built-in Camera @@ -62,11 +62,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeTracking.recommendedCameraSettings; +const cameraSettings = BarcodeTracking.recommendedCameraSettings; // Depending on the use case further camera settings adjustments can be made here. -const camera = Scandit.Camera.default; +const camera = Camera.default; if (camera != null) { camera.applySettings(cameraSettings); } @@ -81,7 +81,7 @@ context.setFrameSource(camera); The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.On](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): ```js -camera.switchToDesiredState(Scandit.FrameSourceState.On); +camera.switchToDesiredState(FrameSourceState.On); ``` There is a separate guide for [more advanced camera functionality](advanced.md). @@ -91,14 +91,14 @@ There is a separate guide for [more advanced camera functionality](advanced.md). When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = DataCaptureView.forContext(context); view.connectToElement(htmlElement); ``` To visualize the results of Barcode Tracking, first you need to add the following [overlay](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-tracking-basic-overlay.html#class-scandit.datacapture.barcode.tracking.ui.BarcodeTrackingBasicOverlay): ```js -const overlay = Scandit.BarcodeTrackingBasicOverlay.withBarcodeTrackingForView( +const overlay = BarcodeTrackingBasicOverlay.withBarcodeTrackingForView( barcodeTracking, view ); @@ -131,7 +131,7 @@ Barcode Tracking, unlike Barcode Capture, doesn’t emit feedback (sound or vibr with your own sound or vibration if you want. ```js -const feedback = Scandit.Feedback.defaultFeedback; +const feedback = Feedback.defaultFeedback; ``` Next, use this [feedback](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/feedback.html#class-scandit.datacapture.core.Feedback) in a [BarcodeTrackingListener](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/barcode-tracking-listener.html#interface-scandit.datacapture.barcode.tracking.IBarcodeTrackingListener): diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/sparkscan/advanced.md b/versioned_docs/version-6.28.7/sdks/capacitor/sparkscan/advanced.md index 3854db62..b7a62b7c 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/sparkscan/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/sparkscan/advanced.md @@ -26,11 +26,29 @@ You may want to introduce logic in your app to show an error message when scanni - The timeout of the error message: 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 - The color of the flashing screen upon scan. You can enable or disable the visual feedback via [SparkScanViewSettings.visualFeedbackEnabled](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-settings.html#property-scandit.datacapture.barcode.spark.ui.SparkScanViewSettings.VisualFeedbackEnabled) and you can control the color via [SparkScanViewSuccessFeedback](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-feedback.html#class-scandit.datacapture.barcode.spark.ui.SparkScanViewSuccessFeedback) and [SparkScanViewErrorFeedback](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-feedback.html#class-scandit.datacapture.barcode.spark.ui.SparkScanViewErrorFeedback). -An error example is here reported: +To emit an error, implement a [SparkScanFeedbackDelegate](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/spark-scan-feedback-delegate.html#interface-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate) and set it on the [SparkScanView](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view.html#property-scandit.datacapture.barcode.spark.ui.SparkScanView.FeedbackDelegate): ```js -self.sparkScanView.emitFeedback(SparkScanViewErrorFeedback(message: "This code should not have been scanned", -resumeCapturingDelay: 6, visualFeedbackColor: UIColor.red)) +sparkScanView.feedbackDelegate = sparkScanFeedbackDelegate; +``` + +In the [feedbackForBarcode](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/spark-scan-feedback-delegate.html#method-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate.GetFeedbackForBarcode) callback you can return an error or a success feedback: + +```js +const sparkScanFeedbackDelegate = { + feedbackForBarcode: (barcode) => { + if (isValidBarcode(barcode)) { + return new SparkScanBarcodeSuccessFeedback(); + } else { + return new SparkScanBarcodeErrorFeedback( + 'This code should not have been scanned', + 60 * 1000, + Color.fromHex('#FF0000'), + new Brush(Color.fromHex('#FF0000'), Color.fromHex('#FF0000'), 1), + ); + } + }, +}; ``` :::note diff --git a/versioned_docs/version-6.28.7/sdks/capacitor/sparkscan/get-started.md b/versioned_docs/version-6.28.7/sdks/capacitor/sparkscan/get-started.md index 4c3f8bb6..4c493265 100644 --- a/versioned_docs/version-6.28.7/sdks/capacitor/sparkscan/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/capacitor/sparkscan/get-started.md @@ -28,8 +28,8 @@ Devices running the Scandit Data Capture SDK need to have a GPU or the performan The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. -```sh -const context = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +```js +const context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` ## Configure the SparkScan Mode @@ -39,14 +39,14 @@ The SparkScan Mode is configured through [`SparkScanSettings`](https://docs.scan 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…). ```js -const settings = new Scandit.SparkScanSettings(); +const settings = new SparkScanSettings(); settings.enableSymbologies([Symbology.EAN13UPCA]); ``` Next, create a SparkScan instance with the settings initialized in the previous step: ```js -const sparkScan = Scandit.SparkScan.forSettings(settings); +const sparkScan = SparkScan.forSettings(settings); ``` ## Setup the Spark Scan View @@ -56,7 +56,7 @@ The SparkScan built-in user interface includes the camera preview and scanning U The [`SparkScanView`](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-settings.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView) appearance can be customized through [`SparkScanViewSettings`](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-settings.html#class-scandit.datacapture.barcode.spark.ui.SparkScanViewSettings). ```js -const viewSettings = new Scandit.SparkScanViewSettings(); +const viewSettings = new SparkScanViewSettings(); // setup the desired appearance settings by updating the fields in the object above ``` @@ -67,13 +67,7 @@ By adding a `SparkScanView`, the scanning interface (camera preview and scanning Add a `SparkScanView` to your view hierarchy. Construct a new SparkScan view. The `SparkScan` view is automatically added to the provided parentView: ```js -const sparkScanComponent = ( - -); +const sparkScanView = SparkScanView.forContext(context, sparkScan, viewSettings); ``` Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scandit.com/6.28/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view.html#method-scandit.datacapture.barcode.spark.ui.SparkScanView.StopScanning) in your app state handling logic. You have to call this for the correct functioning of the @@ -81,12 +75,12 @@ Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scan ```js componentWillUnmount() { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } handleAppStateChange = async (nextAppState) => { if (nextAppState.match(/inactive|background/)) { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } } ``` diff --git a/versioned_docs/version-6.28.7/sdks/cordova/id-capture/get-started.md b/versioned_docs/version-6.28.7/sdks/cordova/id-capture/get-started.md index 56534769..a87c7f2f 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/id-capture/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/id-capture/get-started.md @@ -152,10 +152,7 @@ view.connectToElement(htmlElement); Then create an instance of [IdCaptureOverlay](https://docs.scandit.com/6.28/data-capture-sdk/cordova/id-capture/api/ui/id-capture-overlay.html#class-scandit.datacapture.id.ui.IdCaptureOverlay) attached to the view: ```js -let overlay = Scandit.IdCaptureOverlay.withTextCaptureForView( - idCapture, - dataCaptureView -); +const overlay = Scandit.IdCaptureOverlay.withIdCaptureForView(idCapture, view); ``` The overlay chooses the displayed UI automatically, based on the selected [IdCaptureSettings](https://docs.scandit.com/6.28/data-capture-sdk/cordova/id-capture/api/id-capture-settings.html#class-scandit.datacapture.id.IdCaptureSettings). diff --git a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/advanced.md b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/advanced.md index 6416d7e6..f2c33b30 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/advanced.md @@ -1,9 +1,136 @@ --- displayed_sidebar: cordovaSidebar +sidebar_position: 3 +pagination_next: null +framework: cordova +keywords: + - cordova --- -# Page Unavailable +# Advanced Configurations -This functionality is not currently supported in the selected framework. +MatrixScan Count is optimized by default for efficiency, accuracy, and a seamless user experience. However, there are multiple advanced settings available to further customize MatrixScan Count to best fit your needs. ---- +## Scanning Against A List + +There is a function to set a list of expected barcodes if you are scanning against a manifest or item list. If this is used, a progress bar is added to the UI, so you can keep track of the process while scanning. + +When scanning against a list, the UI will also show red icons to mark scanned barcodes that aren't present on the list. + +```js +const barcodeCountCaptureListListener = { + didUpdateSession: (barcodeCountCaptureList, session) => { + // Handling the session + }, +}; + +const targetBarcodes = [Scandit.TargetBarcode.create('data', 1)]; +const barcodeCountCaptureList = Scandit.BarcodeCountCaptureList.create( + barcodeCountCaptureListListener, + targetBarcodes +); +barcodeCount.setBarcodeCountCaptureList(barcodeCountCaptureList); +``` + +## Strap Mode + +It can be difficult to reach the shutter button if the smart device is attached to the user's wrist by a strap or similar. In this instance, you can enable a floating shutter button that can be positioned by the end user in a more ergonomically suitable position. + +```js +barcodeCountView.shouldShowFloatingShutterButton = true; +``` + +## Filtering + +If you have several types of barcodes on your label/package, you may want to scan only one of them. + +In this case, you can filter the others out. This can be done by symbology, symbol count, or setting a regex. + +For example, you might want to scan only Code 128 barcodes and no PDF417 ones. + +```js +const settings = new Scandit.BarcodeCountSettings(); +settings.enableSymbologies(enabledSymbologies); + +const excludedSymbologies = [Scandit.Symbology.PDF417]; +const filterSettings = settings.filterSettings; +filterSettings.excludedSymbologies = excludedSymbologies; +``` + +Or, you want to exclude all the barcodes starting with 4 numbers: + +```js +const settings = new Scandit.BarcodeCountSettings(); + +const filterSettings = settings.filterSettings; +filterSettings.excludedCodesRegex = '^1234.*'; +``` + +## Clear Screen Button + +There are situations in which the user may find it helpful to clean up their screen (i.e. clear all the AR overlays) but keep the list of barcodes scanned. + +If this is the case, you can enable the "Clear screen" button. + +```js +barcodeCountView.shouldShowClearHighlightsButton = true; +``` + +## Customize Overlay Colors + +MatrixScan Count comes with recommended and user-tested AR overlays. However, if you wish to customize the overlay colors, once the overlay has been added, you can conform to the [BarcodeCountViewListener](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view-listener.html#interface-scandit.datacapture.barcode.count.ui.IBarcodeCountViewListener) interface. The methods [BarcodeCountViewListener.brushForRecognizedBarcode()](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view-listener.html#method-scandit.datacapture.barcode.count.ui.IBarcodeCountViewListener.BrushForRecognizedBarcode) and [BarcodeCountViewListener.brushForUnrecognizedBarcode()](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view-listener.html#method-scandit.datacapture.barcode.count.ui.IBarcodeCountViewListener.BrushForUnrecognizedBarcode) are invoked every time a new recognized or unrecognized barcode appears. These can be used to set a brush that will be used to highlight that specific barcode in the overlay. Keep in mind that these methods are relevant only when using the style [BarcodeCountViewStyle.Dot](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#value-scandit.datacapture.barcode.count.ui.BarcodeCountViewStyle.Dot). + +```js +const viewListener = { + brushForRecognizedBarcode(view, trackedBarcode) { + // Return a custom brush + }, + + brushForUnrecognizedBarcode(view, trackedBarcode) { + // Return a custom brush + }, +}; + +barcodeCountView.listener = viewListener; +``` + +## Notifications + +If you want to be notified when a user taps on an overlay, you need to implement the[BarcodeCountViewListener.didTapRecognizedBarcode()](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view-listener.html#method-scandit.datacapture.barcode.count.ui.IBarcodeCountViewListener.OnRecognizedBarcodeTapped) and [BarcodeCountViewListener.didTapUnrecognizedBarcode()](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view-listener.html#method-scandit.datacapture.barcode.count.ui.IBarcodeCountViewListener.OnUnrecognizedBarcodeTapped) methods. + +```js +const viewListener = { + didTapRecognizedBarcode: (view, trackedBarcode) => { + console.log( + `Tapped recognized barcode with data ${trackedBarcode.barcode.data}` + ); + }, + didTapUnrecognizedBarcode: (view, trackedBarcode) => { + console.log( + `Tapped unrecognized barcode with data ${trackedBarcode.barcode.data}` + ); + }, +}; + +barcodeCountView.listener = viewListener; +``` + +## Disable UI Elements + +The UI is an integral part of MatrixScan Count and we do not recommend that you use it without it. +However, if you wish to disable UI elements you can do it as follows. + +Disable buttons: + +```js +barcodeCountView.shouldShowListButton = false; +barcodeCountView.shouldShowExitButton = false; +barcodeCountView.shouldShowShutterButton = false; +``` + +Disable feedback and hints: + +```js +barcodeCountView.shouldShowUserGuidanceView = false; +barcodeCountView.shouldShowHints = false; +``` diff --git a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/get-started.md b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/get-started.md index 6416d7e6..4f97c3bc 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/get-started.md @@ -1,9 +1,145 @@ --- displayed_sidebar: cordovaSidebar +sidebar_position: 2 +framework: cordova +keywords: + - cordova --- -# Page Unavailable +# Get Started -This functionality is not currently supported in the selected framework. +In this guide you will learn step-by-step how to add MatrixScan Count to your application. ---- +The general steps are: + +1. Create a new Data Capture Context instance +2. Configure the Barcode Count Mode +3. Obtain camera instance and set frame source used +4. Register the listener to be informed when scanned phase is over +5. Set capture view and AR overlays +6. Set up the camera so that it switches on when you are in scanning view +7. Store and retrieve scanned barcodes +8. Reset Barcode Count mode +9. List and Exit callbacks + +## 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](https://docs.scandit.com/6.28/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. + +```js +const context = Scandit.DataCaptureContext.forLicenseKey( + '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' +); +``` + +## Configure The Barcode Count Mode + +The main entry point for the Barcode Count Mode is the [BarcodeCount](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) object. It is configured through [BarcodeCountSettings](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count-settings.html#class-scandit.datacapture.barcode.count.BarcodeCountSettings) and allows you to register one or more listeners that are informed whenever a scan phase has finished. + +For this tutorial, we will set up Barcode Count for tracking EAN13 codes. Change this to the correct symbologies for your use case (for example, Code 128, Code 39…). + +```js +const settings = new Scandit.BarcodeCountSettings(); +settings.enableSymbologies([Scandit.Symbology.EAN13UPCA]); +``` + +If you are sure that your environment will only have unique barcodes (i.e. no duplicated values), you can also enable [BarcodeCountSettings.expectsOnlyUniqueBarcodes](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count-settings.html#property-scandit.datacapture.barcode.count.BarcodeCountSettings.ExpectsOnlyUniqueBarcodes). This option improves scanning performance as long as you are sure that no duplicates will be present. Next, create a [BarcodeCount](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) instance with the [Data Capture Context](https://docs.scandit.com/6.28/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) and the settings initialized in the previous step: + +```js +const barcodeCount = Scandit.BarcodeCount.forContext(context, settings); +``` + +## Obtain Camera Instance And Set Frame Source Used + +Our recommended camera settings should be used to achieve the best performance and user experience. The following couple of lines show how to get the recommended settings for MatrixScan Count and create the camera from it: + +```js +const cameraSettings = Scandit.BarcodeCount.recommendedCameraSettings; + +const camera = Scandit.Camera.default; +if (camera != null) { + camera.applySettings(cameraSettings); +} +``` + +Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/6.28/data-capture-sdk/cordova/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): + +```js +context.setFrameSource(camera); +``` + +## Register the Listener + +To keep track of the barcodes that have been scanned, implement the [BarcodeCountListener](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count-listener.html#interface-scandit.datacapture.barcode.count.IBarcodeCountListener) interface and register the listener. + +[BarcodeCountListener.didScan()](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count-listener.html#method-scandit.datacapture.barcode.count.IBarcodeCountListener.OnScan) is called when the scan phase has finished and results can be retrieved from [BarcodeCountSession](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count-session.html#class-scandit.datacapture.barcode.count.BarcodeCountSession). + +## Set Capture View And AR Overlays + +MatrixScan Count's built-in AR user interface includes buttons and overlays that guide the user through the capturing process. By adding a +[BarcodeCountView](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) the scanning interface (camera preview and scanning UI elements) will be added automatically to your application. + +Add a [BarcodeCountView](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) to your view hierarchy: + +```js +const barcodeCountView = Scandit.BarcodeCountView.forContextWithMode(context, barcodeCount); +barcodeCountView.connectToElement(htmlElement); +``` + +## Set Up The Camera So That It Switches On When You Are In Scanning View + +The camera is not automatically turned on when you are in a scanning view. You need to set up the camera so that it switches on when needed and it switches off when not needed anymore. Similarly [BarcodeCount](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) should also be enabled and disabled. For instance, you should switch off the camera when the [BarcodeCountView](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is not visible anymore (including when the app goes in the background), similarly you want to switch on the camera when the [BarcodeCountView](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is visible (including when the app goes to the foreground). One way to achieve this is the following: + +```js +document.addEventListener('pause', () => { + camera.switchToDesiredState(Scandit.FrameSourceState.Off); +}, false); + +document.addEventListener('resume', () => { + camera.switchToDesiredState(Scandit.FrameSourceState.On); +}, false); +``` + +## Store And Retrieve Scanned Barcodes + +The values captured as part of the scanning process are part of the [session](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count-session.html#class-scandit.datacapture.barcode.count.BarcodeCountSession), and the session is not accessible outside [BarcodeCountListener.didScan()](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count-listener.html#method-scandit.datacapture.barcode.count.IBarcodeCountListener.OnScan). Therefore, we recommend that you store the values to present a list, for example when the user taps the list icon. To do this, make a copy of [BarcodeCountSession.recognizedBarcodes](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count-session.html#property-scandit.datacapture.barcode.count.BarcodeCountSession.RecognizedBarcodes): + +```js +const listener = { + didScan: (barcodeCapture, session, getFrameData) => { + const allRecognizedBarcodes = session.recognizedBarcodes; + + // Handle barcodes + }, +}; + +barcodeCount.addListener(listener); +``` + +## Reset Barcode Count Mode + +When the scanning process is over, you need to reset the mode to make it ready for the next process. This clears the list of barcodes scanned and all the AR overlays. + +To reset Barcode Count's scanning process, you need to call the [BarcodeCount.reset()](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-count.html#method-scandit.datacapture.barcode.count.BarcodeCount.Reset) method. + +```js +barcodeCount.reset(); +``` + +## List And Exit Callbacks + +The UI includes two icons (buttons) named "List" and "Exit". The SDK provides the callbacks so you can add the desired action when those icons are tapped by the user. + +```js +const viewUiListener = { + didTapListButton: (view) => { + // Show the current progress but the order is not completed + }, + + didTapExitButton: (view) => { + // The order is completed + }, +}; + +barcodeCountView.uiListener = viewUiListener; +``` diff --git a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/intro.md b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/intro.md index 6416d7e6..a2a40d76 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/intro.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-count/intro.md @@ -1,9 +1,38 @@ --- -displayed_sidebar: cordovaSidebar +sidebar_position: 1 +pagination_prev: null +framework: cordova +keywords: + - cordova --- -# Page Unavailable +# About MatrixScan Count -This functionality is not currently supported in the selected framework. +MatrixScan Count is our pre-built scan and count solution for counting and receiving multiple items at once. It fits on top of any smartphone application, providing an intuitive user interface for simple, fast and ergonomic scanning. MatrixScan Count enables the accurate scanning and counting of multiple items at once via smart devices, speeding counting workflows by up to 10 times. The solution is designed to boost worker productivity, reduce human error and maintain accurate stock levels. ---- +MatrixScan Count bundles multiple scanning features together and addresses many common challenges associated with scanning on smart devices. It is designed to be easily integrated into any application, and can be customized to fit your specific needs. + +## UI Overview + +MatrixScan Count includes pre-built and pre-tested user interface (UI) elements and interactions in workflows. These UI elements are intentionally minimalistic, meant to be overlayed on any application without the need to adapt the existing app while offering the best user experience. + +The UI workflow is designed to be as simple and ergonomic as possible, and includes the following elements: + +- A **shutter button** the user operates in order to initiate scanning. The user is guided to “Tap shutter to scan items”. +- A **loading indicator** is momentarily present, indicating to hold still while scanning is in progress. + - An initial calibration may be triggered after the scanning phase if the user stands too far away from or too close to the items. +- **Feedback** is overlaid as augmented reality (AR) icons on top of scanned barcodes - indicating either successful scans, unscannable or items that should be not be present. A button counter badge and progress bar provide further confirmation of scans. + - The counter badge counts the number of codes scanned. + - The progress bar replaces the counter badge if the user is are scanning against a list of expected codes. It shows how many of the expected codes have been detected. + +Upon completing the scanning process, if all items have been successfully scanned, you can advance the user to the next scan automatically. Next steps may be finalizing order receipt if all items are present, reviewing the scan list to identify items that shouldn’t be present, or moving on to the next order. + +:::note +MatrixScan Count does not include a UI for reviewing the scan list, but a recommended UI for this process can be seen in our Receiving Sample. +::: + +## Supported Symbologies + +MatrixScan Count supports all [symbologies](../../../barcode-symbologies.md) **except** DotCode, MaxiCode and postal codes (KIX, RM4SCC). + +If you are not familiar with the symbologies that are relevant for your use case, you can use capture presets that are tailored for different verticals (e.g. retail, logistics, etc.). diff --git a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/advanced.md b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/advanced.md index 6416d7e6..ad038e99 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/advanced.md @@ -1,9 +1,54 @@ --- -displayed_sidebar: cordovaSidebar +description: "MatrixScan Find is optimized by default for efficiency, accuracy, and a seamless user experience. However, there are multiple advanced settings available to further customize MatrixScan Find to best fit your needs. " + +sidebar_position: 3 +pagination_next: null +framework: cordova +keywords: + - cordova --- -# Page Unavailable +# Advanced Configurations -This functionality is not currently supported in the selected framework. +MatrixScan Find is optimized by default for efficiency, accuracy, and a seamless user experience. However, there are multiple advanced settings available to further customize MatrixScan Find to best fit your needs. ---- +## Set up a listener on the BarcodeFind mode + +You may want more fine-grained knowledge over the different events happening during the life of the BarcodeFind mode, such as when the search starts, pauses and stops. To do this, you can directly register a [BarcodeFindListener](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-find-listener.html#interface-scandit.datacapture.barcode.find.IBarcodeFindListener) on the mode itself. + +Be aware that these listeners will be called from a background thread. + +```js +mode.addListener({ + didStartSearch() { + // The mode was started + }, + + didPauseSearch(foundItems) { + // The mode was paused + }, + + didStopSearch(foundItems) { + // The mode was stopped after the finish button was clicked + }, +}); +``` + +## UI configuration + +The [BarcodeFindView](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-find-view.html#class-scandit.datacapture.barcode.find.ui.BarcodeFindView) will by default show a set of UI elements, which can be optionally hidden: + +- A play/pause button +- A finish button +- A searched items carousel +- Guidance hints + +There is also a progress bar but this is hidden by default. + +Each of these elements can be shown or hidden at will. + +```js +barcodeFindView.shouldShowCarousel = false; +barcodeFindView.shouldShowProgressBar = true; +// … +``` diff --git a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/get-started.md b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/get-started.md index 6416d7e6..9ab3410e 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/get-started.md @@ -1,9 +1,111 @@ --- -displayed_sidebar: cordovaSidebar +description: "In this guide you will learn step-by-step how to add MatrixScan Find to your application. Implementing MatrixScan Find involves two primary elements: " + +sidebar_position: 2 +framework: cordova +keywords: + - cordova --- -# Page Unavailable +# Get Started -This functionality is not currently supported in the selected framework. +In this guide you will learn step-by-step how to add MatrixScan Find to your application. Implementing MatrixScan Find involves two primary elements: ---- +- Barcode Find: The data capture mode that is used for search and find functionality. +- A Barcode Find View: The pre-built UI elements used to highlight found items. + +The general steps are: + +1. Create a new Data Capture Context instance. +2. Configure the Barcode Find Mode. +3. Setup the BarcodeFindView. +4. Register a listener to be notified with found items +5. Start searching + +## Create a new Data Capture Context instance + +The first step to add find capabilities to your application is to create a new [DataCaptureContext](https://docs.scandit.com/6.28/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. + +```js +const dataCaptureContext = Scandit.DataCaptureContext.forLicenseKey( + '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' +); +``` + +## Configure the Barcode Find Mode + +The main entry point for the Barcode Find Mode is the [BarcodeFind](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-find.html#class-scandit.datacapture.barcode.find.BarcodeFind) object. You can configure the supported Symbologies through its [BarcodeFindSettings](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/barcode-find-settings.html#class-scandit.datacapture.barcode.find.BarcodeFindSettings), and set up the list of items that you want MatrixScan Find to highlight (e.g. a list of products). + +For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change this to the correct symbologies for your use case (e.g. Code 128, Code 39…). + +First create the settings: + +```js +const settings = new Scandit.BarcodeFindSettings(); +settings.enableSymbology(Scandit.Symbology.EAN13UPCA, true); +``` + +Then you have to create the list of items that will be actively searched for. + +In this tutorial, let's look up two items based on their EAN13 codes. We will attach to the first item some optional information that can be used by the BarcodeFindView to display extra information. + +```js +const items = [ +new Scandit.BarcodeFindItem(new Scandit.BarcodeFindItemSearchOptions("9783598215438"), +new Scandit.BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), +new Scandit.BarcodeFindItem(new Scandit.BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only +] +``` + +Create the mode with the previously created settings and set the items: + +```js +const mode = new Scandit.BarcodeFind(settings); +mode.setItemList(items); +``` + +## Setup the BarcodeFindView + +MatrixScan Find's built-in AR user interface includes buttons and overlays that guide the user through the searching process. By adding a [BarcodeFindView](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-find-view.html#class-scandit.datacapture.barcode.find.ui.BarcodeFindView), the scanning interface (camera preview and searching UI elements) will be added automatically to your application. + +The BarcodeFindView appearance can be customized through [BarcodeFindViewSettings](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-find-view-settings.html#class-scandit.datacapture.barcode.find.ui.BarcodeFindViewSettings): + +- Colors of dots in augmented reality overlay +- Enable sound and haptic alerts + +```js +const viewSettings = new Scandit.BarcodeFindViewSettings(); +``` + +Construct a new BarcodeFindView. The BarcodeFindView is automatically added to the provided parent view. + +```js +const barcodeFindView = Scandit.BarcodeFindView.forModeWithViewSettings(dataCaptureContext, mode, viewSettings); +barcodeFindView.connectToElement(htmlElement); +``` + +## Register a listener to be notified with found items + +The BarcodeFindView displays next to its shutter button a handy "finish" button. Register a [BarcodeFindViewUiListener](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-find-view.html#interface-scandit.datacapture.barcode.find.ui.IBarcodeFindViewUiListener) to be notified what items have been found once the finish button is pressed. + +In this tutorial, we will then navigate back to the previous screen to finish the find session. + +```js +barcodeFindView.barcodeFindViewUiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the + // finish button. It returns the list of all items that were found during + // the session. + }, +}; +``` + +## Start searching + +As soon as everything is set up, control the [BarcodeFindView](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-find-view.html#class-scandit.datacapture.barcode.find.ui.BarcodeFindView) to start the search. + +```js +barcodeFindView.startSearching(); +``` + +This is the equivalent of pressing the "Play" button programmatically. It will start the search process, turn on the camera and hide the item carousel. diff --git a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/intro.md b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/intro.md index 6416d7e6..07ded3de 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/intro.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-find/intro.md @@ -1,9 +1,34 @@ --- -displayed_sidebar: cordovaSidebar +sidebar_position: 1 +pagination_prev: null +framework: cordova +keywords: + - cordova --- -# Page Unavailable +# About MatrixScan Find -This functionality is not currently supported in the selected framework. +MatrixScan Find is our pre-built UI that uses augmented reality overlays to highlight items that match predefined criteria. This is distinct from MatrixScan AR that is fully customizable, MatrixScan Find enables you to add a search and find experience with augmented reality to an existing native app with just a few lines of code. ---- +MatrixScan Find bundles multiple scanning features together and addresses many common challenges associated with scanning on smart devices. It is designed to be easily integrated into any application, and can be customized to fit your specific needs. + +## UI Overview + +MatrixScan Find includes pre-built and pre-tested user interface (UI) elements and interactions in workflows. These UI elements are intentionally minimalistic, meant to be overlayed on any application without the need to adapt the existing app while offering the best user experience. + +The UI workflow is designed to be as simple and ergonomic as possible, and includes the following elements: + +![MatrixScan Find UI](/img/matrixscan-find/ui-overview.png) + +- A **shutter button** the user operates in order to initiate scanning and searching for items. +- **Feedback** is overlaid as to highlight items with obvious and colorful visual dots on screen. +- When paused, MatrixScan Find showcases a **carousel** showing all the items that are currently being searched for, with a check mark showing those that have been found. + - In active search mode the carousel is hidden to free up more screen space for tracking items. + +Upon completing the scanning process, if all items have been successfully scanned, you can advance the user to the next scan automatically. Next steps may be finalizing order receipt if all items are present, reviewing the scan list to identify items that shouldn’t be present, or moving on to the next order. + +## Supported Symbologies + +MatrixScan Find supports all [symbologies](../../../barcode-symbologies.md) **except** DotCode, MaxiCode and postal codes (KIX, RM4SCC). + +If you are not familiar with the symbologies that are relevant for your use case, you can use capture presets that are tailored for different verticals (e.g. retail, logistics, etc.). diff --git a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-pick/advanced.md b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-pick/advanced.md index 05c95a44..3a2a3538 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-pick/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-pick/advanced.md @@ -14,16 +14,26 @@ MatrixScan Pick is optimized by default for efficiency, accuracy, and a seamless You may want more fine-grained knowledge over the different events happening during the life of the `BarcodePick` mode, such as when the search starts, pauses, and stops. -To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/6.28/data-capture-sdk/android/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. +To do this, you can directly register a [`BarcodePickViewListener`](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-pick-view.html#interface-scandit.datacapture.barcode.pick.IBarcodePickViewListener) on the view itself, keeping in mind that these listeners are called from a background thread. -```javascript -mode.addListener({ - onObservationStarted() { - // The mode was started +```js +const viewListener = { + didStartScanning(view) { + // The view started scanning }, - - onObservationStopped(foundItems: BarcodeFindItem[]) { - // The mode was stopped after the finish button was clicked + + didFreezeScanning(view) { + // The view was frozen + }, + + didPauseScanning(view) { + // The view was paused }, -}); + + didStopScanning(view) { + // The view stopped scanning + }, +}; + +barcodePickView.addListener(viewListener); ``` diff --git a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-pick/get-started.md b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-pick/get-started.md index 9264df75..8f04034b 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-pick/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/matrixscan-pick/get-started.md @@ -31,8 +31,8 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to [you 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. -```javascript -const dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +```js +const dataCaptureContext = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` ## Configure the Barcode Pick Mode @@ -41,25 +41,24 @@ The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. -```javascript -const settings = BarcodePickSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +```js +const settings = new Scandit.BarcodePickSettings(); +settings.enableSymbology(Scandit.Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be picked and quantity to be picked for each item. ```javascript const items = [ - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), - new BarcodePickProductQuantityToPick(3), - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3) -] + new Scandit.BarcodePickProduct(new Scandit.BarcodePickProductIdentifier("9783598215438"), new Scandit.BarcodePickProductQuantityToPick(3)), + new Scandit.BarcodePickProduct(new Scandit.BarcodePickProductIdentifier("9783598215414"), new Scandit.BarcodePickProductQuantityToPick(3)), +]; ``` Create the mode with the previously created settings: ```javascript -const mode = new BarcodePick(settings); +const mode = new Scandit.BarcodePick(settings); ``` ## Setup the `BarcodePickView` @@ -78,14 +77,15 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Loading Dialog ```javascript -const viewSettings = new BarcodePickViewSettings(); +const viewSettings = new Scandit.BarcodePickViewSettings(); // ... ``` Construct a new `BarcodePickView`. The `BarcodePickView` is automatically added to the provided parent view. ```javascript -const BarcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, BarcodePick, viewSettings); +const barcodePickView = new Scandit.BarcodePickView({ context: dataCaptureContext, barcodePick: mode, settings: viewSettings }); +barcodePickView.connectToElement(document.getElementById('html-element-id')); ``` ## Register the Listener @@ -97,12 +97,11 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/6.28/data-captur In this tutorial, we will then navigate back to the previous screen to finish the find session. ```javascript -BarcodePickView.BarcodePickViewUiListener = { - didTapFinishButton(foundItems: BarcodePickProduct[]) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. - } +barcodePickView.uiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the finish button. + // It returns the list of all items that were found during the session. + }, }; ``` @@ -111,7 +110,7 @@ BarcodePickView.BarcodePickViewUiListener = { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. ```javascript -BarcodePickView.start(); +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/versioned_docs/version-6.28.7/sdks/cordova/sparkscan/advanced.md b/versioned_docs/version-6.28.7/sdks/cordova/sparkscan/advanced.md index 1e09ad53..ec5e4746 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/sparkscan/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/sparkscan/advanced.md @@ -26,11 +26,29 @@ You may want to introduce logic in your app to show an error message when scanni - The timeout of the error message: 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 - The color of the flashing screen upon scan. You can enable or disable the visual feedback via [SparkScanViewSettings.visualFeedbackEnabled](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view-settings.html#property-scandit.datacapture.barcode.spark.ui.SparkScanViewSettings.VisualFeedbackEnabled) and you can control the color via [SparkScanViewSuccessFeedback](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view-feedback.html#class-scandit.datacapture.barcode.spark.ui.SparkScanViewSuccessFeedback) and [SparkScanViewErrorFeedback](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view-feedback.html#class-scandit.datacapture.barcode.spark.ui.SparkScanViewErrorFeedback). -An error example is here reported: +To emit an error, implement a [SparkScanFeedbackDelegate](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/spark-scan-feedback-delegate.html#interface-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate) and set it on the [SparkScanView](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view.html#property-scandit.datacapture.barcode.spark.ui.SparkScanView.FeedbackDelegate): ```js -self.sparkScanView.emitFeedback(SparkScanViewErrorFeedback(message: "This code should not have been scanned", -resumeCapturingDelay: 6, visualFeedbackColor: UIColor.red)) +sparkScanView.feedbackDelegate = sparkScanFeedbackDelegate; +``` + +In the [feedbackForBarcode](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/spark-scan-feedback-delegate.html#method-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate.GetFeedbackForBarcode) callback you can return an error or a success feedback: + +```js +const sparkScanFeedbackDelegate = { + feedbackForBarcode: (barcode) => { + if (isValidBarcode(barcode)) { + return new Scandit.SparkScanBarcodeSuccessFeedback(); + } else { + return new Scandit.SparkScanBarcodeErrorFeedback( + 'This code should not have been scanned', + 60 * 1000, + Scandit.Color.fromHex('#FF0000'), + new Scandit.Brush(Scandit.Color.fromHex('#FF0000'), Scandit.Color.fromHex('#FF0000'), 1), + ); + } + }, +}; ``` :::note diff --git a/versioned_docs/version-6.28.7/sdks/cordova/sparkscan/get-started.md b/versioned_docs/version-6.28.7/sdks/cordova/sparkscan/get-started.md index 9fa2a677..a4c42327 100644 --- a/versioned_docs/version-6.28.7/sdks/cordova/sparkscan/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/cordova/sparkscan/get-started.md @@ -28,7 +28,7 @@ Devices running the Scandit Data Capture SDK need to have a GPU or the performan The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/6.28/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. -```sh +```js const context = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` @@ -40,7 +40,7 @@ For this tutorial, we will set up SparkScan for scanning EAN13 codes. Change thi ```js const settings = new Scandit.SparkScanSettings(); -settings.enableSymbologies([Symbology.EAN13UPCA]); +settings.enableSymbologies([Scandit.Symbology.EAN13UPCA]); ``` Next, create a SparkScan instance with the settings initialized in the previous step: @@ -67,13 +67,7 @@ By adding a `SparkScanView`, the scanning interface (camera preview and scanning Add a `SparkScanView` to your view hierarchy. Construct a new SparkScan view. The `SparkScan` view is automatically added to the provided parentView: ```js -const sparkScanComponent = ( - -); +const sparkScanView = Scandit.SparkScanView.forContext(context, sparkScan, viewSettings); ``` Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scandit.com/6.28/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view.html#method-scandit.datacapture.barcode.spark.ui.SparkScanView.StopScanning) in your app state handling logic. You have to call this for the correct functioning of the @@ -81,12 +75,12 @@ Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scan ```js componentWillUnmount() { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } handleAppStateChange = async (nextAppState) => { if (nextAppState.match(/inactive|background/)) { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } } ``` diff --git a/versioned_docs/version-6.28.7/sdks/flutter/barcode-capture/configure-barcode-symbologies.md b/versioned_docs/version-6.28.7/sdks/flutter/barcode-capture/configure-barcode-symbologies.md index dab60041..7d67a1a0 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/barcode-capture/configure-barcode-symbologies.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/barcode-capture/configure-barcode-symbologies.md @@ -46,7 +46,7 @@ Most barcodes are printed using dark ink on a bright background. Some symbologie ```dart var settings = BarcodeCaptureSettings(); -var symbologySettings = settings.getSymbologySettings(Symbology.code128); +var symbologySettings = settings.settingsForSymbology(Symbology.code128); symbologySettings.isColorInvertedEnabled = true; ``` diff --git a/versioned_docs/version-6.28.7/sdks/flutter/barcode-capture/get-started.md b/versioned_docs/version-6.28.7/sdks/flutter/barcode-capture/get-started.md index bd84692d..820c6f3f 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/barcode-capture/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/barcode-capture/get-started.md @@ -110,7 +110,7 @@ var cameraSettings = BarcodeCapture.recommendedCameraSettings; // Depending on the use case further camera settings adjustments can be made here. -var camera = Camera.defaultCamera..applySettings(cameraSettings); +var camera = Camera.defaultCamera?..applySettings(cameraSettings); ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/6.28/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): diff --git a/versioned_docs/version-6.28.7/sdks/flutter/barcode-selection/get-started.md b/versioned_docs/version-6.28.7/sdks/flutter/barcode-selection/get-started.md index d4ca6973..e0cd366d 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/barcode-selection/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/barcode-selection/get-started.md @@ -121,7 +121,7 @@ var cameraSettings = BarcodeSelection.recommendedCameraSettings; // Depending on the use case further camera settings adjustments can be made here. -var camera = Camera.defaultCamera..applySettings(cameraSettings); +var camera = Camera.defaultCamera?..applySettings(cameraSettings); ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/6.28/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): @@ -133,7 +133,7 @@ context.setFrameSource(camera); The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/6.28/data-capture-sdk/flutter/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.on](https://docs.scandit.com/6.28/data-capture-sdk/flutter/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): -```js +```dart camera.switchToDesiredState(FrameSourceState.on); ``` diff --git a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-count/advanced.md b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-count/advanced.md index 6702fecf..460c810a 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-count/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-count/advanced.md @@ -40,22 +40,22 @@ In this case, you can filter the others out. This can be done by symbology, symb For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```dart -var settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +var settings = BarcodeCountSettings(); +settings.enableSymbology(Symbology.code128, true); Set excludedSymbologies = {}; excludedSymbologies.add(Symbology.pdf417); var filterSettings = settings.filterSettings; -filterSettings.excludedSymbologies(excludedSymbologies); +filterSettings.excludedSymbologies = excludedSymbologies; ``` Or, you want to exclude all the barcodes starting with 4 numbers: ```dart -var settings = new BarcodeCountSettings(); +var settings = BarcodeCountSettings(); var filterSettings = settings.filterSettings; -filterSettings.excludedCodesRegex("^1234.*"); +filterSettings.excludedCodesRegex = "^1234.*"; ``` ## Clear Screen Button diff --git a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-count/get-started.md b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-count/get-started.md index a9e34718..b7ae2209 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-count/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-count/get-started.md @@ -25,7 +25,7 @@ The general steps are: The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/6.28/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. -```sh +```dart var dataCaptureContext = DataCaptureContext.forLicenseKey('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` @@ -36,7 +36,7 @@ The main entry point for the Barcode Count Mode is the [BarcodeCount](https://do For this tutorial, we will set up Barcode Count for tracking EAN13 codes. Change this to the correct symbologies for your use case (for example, Code 128, Code 39…). ```dart -var settings = new BarcodeCountSettings(); +var settings = BarcodeCountSettings(); settings.enableSymbology(Symbology.ean13Upca, true); ``` @@ -98,8 +98,8 @@ The values captured as part of the scanning process are part of the [session](ht ```dart @override -void didScan(BarcodeCount barcodeCount, BarcodeCountSession session, Future Function() getFrameData) { - allRecognizedBarcodes = session.recognizedBarcodes.values; +Future didScan(BarcodeCount barcodeCount, BarcodeCountSession session, Future Function() getFrameData) async { + allRecognizedBarcodes = session.recognizedBarcodes; } ``` diff --git a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-find/get-started.md b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-find/get-started.md index e6cfd0e3..9b7d00ee 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-find/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-find/get-started.md @@ -49,7 +49,7 @@ In this tutorial, let’s look up two items based on their EAN13 codes. We will var items = { BarcodeFindItem(BarcodeFindItemSearchOptions("9783598215438"), BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), -new BarcodeFindItem( +BarcodeFindItem( BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only }; ``` diff --git a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-pick/advanced.md b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-pick/advanced.md index a2ad6bd1..99901b96 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-pick/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-pick/advanced.md @@ -17,18 +17,27 @@ You may want more fine-grained knowledge over the different events happening dur To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/6.28/data-capture-sdk/android/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. ```dart -mode.addListener(this) - - class BarcodePickListenerImpl implements BarcodePickListener - { - @override - void onObservationStarted() { - // The mode was started - } - - @override - void onObservationStopped { - // The mode was stopped - } - } +barcodePickView.addListener(myListener); + +class BarcodePickViewListenerImpl implements BarcodePickViewListener { + @override + void didStartScanning(BarcodePickView view) { + // The view started scanning + } + + @override + void didFreezeScanning(BarcodePickView view) { + // The view was frozen + } + + @override + void didPauseScanning(BarcodePickView view) { + // The view was paused + } + + @override + void didStopScanning(BarcodePickView view) { + // The view stopped scanning + } +} ``` diff --git a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-pick/get-started.md b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-pick/get-started.md index 7d390354..a824f649 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-pick/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan-pick/get-started.md @@ -50,19 +50,16 @@ Then you have to create the list of items that will be picked and quantity to be ```dart var items = { - new BarcodePickProduct( - BarcodePickProductIdentifier("9783598215438")), - BarcodePickProductQuantityToPick(3), - new BarcodePickProduct( - BarcodePickProductIdentifier("9783598215414")), - BarcodePickProductQuantityToPick(3) + BarcodePickProduct("9783598215438", 3), + BarcodePickProduct("9783598215414", 3), }; ``` -Create the mode with the previously created settings: +Create a product provider and the mode: ```dart -var mode = BarcodePick(settings); +var productProvider = BarcodePickAsyncMapperProductProvider(items, productProviderCallback); +var mode = BarcodePick(dataCaptureContext, settings, productProvider); ``` ## Setup the `BarcodePickView` @@ -81,7 +78,7 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Loading Dialog ```dart -var viewSettings = new BarcodePickViewSettings( +var viewSettings = BarcodePickViewSettings( // ... ); ``` @@ -89,7 +86,7 @@ var viewSettings = new BarcodePickViewSettings( Construct a new `BarcodePickView`. ```dart -var BarcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, BarcodePick, viewSettings); +var barcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, mode, viewSettings); ``` Connect the `BarcodePickView` to the Widget lifecycle. The widget is dependent on calling `widgetPaused` and `widgetResumed` to set up the camera and its overlays properly. @@ -101,12 +98,12 @@ void didChangeAppLifecycleState(AppLifecycleState state) { // Resume finding by calling the BarcodePickView widgetResumed function. // Under the hood, it re-enables the BarcodePick mode and makes sure the view is properly // setup. - BarcodePickView.widgetResumed(); + barcodePickView.widgetResumed(); } else { // Pause finding by calling the BarcodePickView widgetPaused function. // Under the hood, it will disable the mode and free resources that are not needed in a // paused state. - BarcodePickView.widgetPaused(); + barcodePickView.widgetPaused(); } } ``` @@ -120,13 +117,11 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/6.28/data-captur In this tutorial, we will then navigate back to the previous screen to finish the session. ```dart -BarcodePickView.uiListener = this +barcodePickView.uiListener = this; @override -void didTapFinishButton(Set foundItems) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. +void didTapFinishButton(BarcodePickView view) { + // This method is called when the user presses the finish button. } ``` @@ -135,7 +130,7 @@ void didTapFinishButton(Set foundItems) { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. ```dart -BarcodePickView.start(); +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan/advanced.md b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan/advanced.md index 35a6922d..b2096719 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan/advanced.md @@ -28,7 +28,7 @@ As mentioned above, the advanced overlay combined with its [listener](https://do First of all, create a new instance of [BarcodeTrackingAdvancedOverlay](https://docs.scandit.com/6.28/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-tracking-advanced-overlay.html#class-scandit.datacapture.barcode.tracking.ui.BarcodeTrackingAdvancedOverlay) and add it to the [DataCaptureView](https://docs.scandit.com/6.28/data-capture-sdk/flutter/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). ```dart -var overlay = BarcodeTrackingAdvancedOverlay.forView(barcodeTracking, dataCaptureView); +var overlay = BarcodeTrackingAdvancedOverlay.withBarcodeTrackingForView(barcodeTracking, dataCaptureView); ``` At this point, you have two options. @@ -50,9 +50,8 @@ Using [BarcodeTrackingAdvancedOverlayListener](https://docs.scandit.com/6.28/dat ```dart @override -Widget widgetForTrackedBarcode(BarcodeTrackingAdvancedOverlay overlay, TrackedBarcode trackedBarcode) { -// Create and return the view you want to show for this tracked barcode. You can also return null, to have no view for -this barcode. +BarcodeTrackingAdvancedOverlayWidget? widgetForTrackedBarcode(BarcodeTrackingAdvancedOverlay overlay, TrackedBarcode trackedBarcode) { +// Create and return the widget you want to show for this tracked barcode. You can also return null, to have no widget for this barcode. return ARWidget(trackedBarcode.barcode.data); } @@ -82,7 +81,7 @@ The function [BarcodeTrackingListener.didUpdateSession()](https://docs.scandit.c @override void didUpdateSession(BarcodeTracking barcodeTracking, BarcodeTrackingSession session) { for (final trackedBarcode in session.addedTrackedBarcodes) { -Widget arWidget = ARWidget(trackedBarcode.barcode.data); +var arWidget = ARWidget(trackedBarcode.barcode.data); overlay.setWidgetForTrackedBarcode(arWidget, trackedBarcode); overlay.setAnchorForTrackedBarcode(Anchor.topCenter, trackedBarcode); overlay.setOffsetForTrackedBarcode( diff --git a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan/get-started.md b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan/get-started.md index 7d1cb365..b1c2a6cd 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/matrixscan/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/matrixscan/get-started.md @@ -64,7 +64,7 @@ var cameraSettings = BarcodeTracking.recommendedCameraSettings; // Depending on the use case further camera settings adjustments can be made here. -var camera = Camera.defaultCamera..applySettings(cameraSettings); +var camera = Camera.defaultCamera?..applySettings(cameraSettings); ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/6.28/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): diff --git a/versioned_docs/version-6.28.7/sdks/flutter/sparkscan/get-started.md b/versioned_docs/version-6.28.7/sdks/flutter/sparkscan/get-started.md index 585f441b..097468d2 100644 --- a/versioned_docs/version-6.28.7/sdks/flutter/sparkscan/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/flutter/sparkscan/get-started.md @@ -56,11 +56,6 @@ The SparkScan built-in user interface includes the camera preview and scanning U The [`SparkScanView`](https://docs.scandit.com/6.28/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView) appearance can be customized through [SparkScanViewSettings](https://docs.scandit.com/6.28/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#class-scandit.datacapture.barcode.spark.ui.SparkScanViewSetttings). -```dart -SparkScanViewSettings viewSettings = new SparkScanViewSettings(); -// setup the desired appearance settings by updating the fields in the object above -``` - See the [SparkScan Workflow Options](./intro.md#workflow-options) section for more information. By adding a [`SparkScanView`](https://docs.scandit.com/6.28/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView), the scanning interface (camera preview and scanning UI elements) gets added automatically to your application. @@ -99,11 +94,11 @@ Note that this list only contains one barcode entry. ```dart @override -void didScan(SparkScan sparkScan, SparkScanSession session, Future getFrameData()) { - if (session.newlyRecognizedBarcode.isEmpty) return; +Future didScan(SparkScan sparkScan, SparkScanSession session, Future getFrameData()) async { + if (session.newlyRecognizedBarcode == null) return; // Gather the recognized barcode - var barcode = session.newlyRecognizedBarcode[0]; + var barcode = session.newlyRecognizedBarcode!; // Do something with the recognized barcode } diff --git a/versioned_docs/version-6.28.7/sdks/react-native/barcode-generator.md b/versioned_docs/version-6.28.7/sdks/react-native/barcode-generator.md index 66832a6b..685c053c 100644 --- a/versioned_docs/version-6.28.7/sdks/react-native/barcode-generator.md +++ b/versioned_docs/version-6.28.7/sdks/react-native/barcode-generator.md @@ -1,9 +1,94 @@ --- +description: "The Barcode Generator is a simple tool to generate barcodes directly from the Scandit SDK. In this guide, we will show you how to use the Barcode Generator to generate barcodes and QR codes. " + displayed_sidebar: reactnativeSidebar +sidebar_label: Get Started +pagination_prev: null +pagination_next: null --- -# Page Unavailable +# Barcode Generator + +The Barcode Generator is a simple tool to generate barcodes directly from the Scandit SDK. In this guide, we will show you how to use the Barcode Generator to generate barcodes and QR codes. + +The Barcode Generator supports the following formats: + +* Code 39 +* Code 128 +* EAN 13 +* UPCA +* ITF +* QR +* DataMatrix + +## Prerequisites + +Before starting with adding a capture mode, make sure that you have a valid Scandit Data Capture SDK license key and that you added the necessary dependencies. If you have not done that yet, check out this [guide](/sdks/react-native/add-sdk). + +:::tip +You can retrieve your Scandit Data Capture SDK license key by signing in to your account [Dashboard](https://ssl.scandit.com/dashboard/sign-in). +::: + +## Generating Barcodes + +To generate barcodes, you need to create a [`DataCaptureContext`](https://docs.scandit.com/6.28/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). + +With the context you can then instantiate a [`BarcodeGeneratorBuilder`](https://docs.scandit.com/6.28/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#class-scandit.datacapture.barcode.generator.BarcodeGeneratorBuilder), and use the method of [`BarcodeGenerator`](https://docs.scandit.com/6.28/data-capture-sdk/react-native/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) for the symbology you are interested in, in this example Code 128. + +You can configure the colors used in the resulting image: + +```javascript +const dataCaptureContext = DataCaptureContext.forLicenseKey(licenseKey); +const builder = BarcodeGenerator.code128BarcodeGeneratorBuilder(dataCaptureContext) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')); +``` + +When the builder is configured get the `BarcodeGenerator` and try to generate the image: + +```javascript +try { + const generator = builder.build(); + const image = await generator.generate(dataString, 200); + // Use the image +} catch (error) { + // Handle the error + console.error(error); +} +``` + +See the complete [API reference](https://docs.scandit.com/6.28/data-capture-sdk/react-native/barcode-capture/api/barcode-generator.html) for more information. + +## Generating QR Codes + +To generate barcodes, you need to create a [`DataCaptureContext`](https://docs.scandit.com/6.28/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). + +With the context you can then instantiate a [`QRCodeBarcodeGeneratorBuilder`](https://docs.scandit.com/6.28/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#class-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder) using the method of [`BarcodeGenerator`](https://docs.scandit.com/6.28/data-capture-sdk/react-native/barcode-capture/api/barcode-generator.html#class-scandit.datacapture.barcode.generator.BarcodeGenerator) specific for QR codes. + +You can configure the colors used in the resulting image, and the two settings that can be configured for QR codes: [`QRCodeBarcodeGeneratorBuilder.errorCorrectionLevel`](https://docs.scandit.com/6.28/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithErrorCorrectionLevel) and [`QRCodeBarcodeGeneratorBuilder.versionNumber`](https://docs.scandit.com/6.28/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithVersionNumber). + +```javascript +const dataCaptureContext = DataCaptureContext.forLicenseKey(licenseKey); +const builder = BarcodeGenerator.qrCodeBarcodeGeneratorBuilder(dataCaptureContext) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')) + .withErrorCorrectionLevel(QrCodeErrorCorrectionLevel.Medium) + .withVersionNumber(4); +``` + +When the builder is configured get the `BarcodeGenerator` and try to generate the image: + +```javascript +try { + const generator = builder.build(); + const image = await generator.generate(dataString, 200); + // Use the image +} catch (error) { + // Handle the error + console.error(error); +} +``` + +See the complete [API reference](https://docs.scandit.com/6.28/data-capture-sdk/react-native/barcode-capture/api/barcode-generator.html) for more information. -This functionality is not currently supported in the selected framework. ---- diff --git a/versioned_docs/version-6.28.7/sdks/react-native/id-capture/get-started.md b/versioned_docs/version-6.28.7/sdks/react-native/id-capture/get-started.md index eaf03797..949f4ef2 100644 --- a/versioned_docs/version-6.28.7/sdks/react-native/id-capture/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/react-native/id-capture/get-started.md @@ -133,10 +133,7 @@ When using the built-in camera as frame source, you will typically want to displ Then create an instance of [IdCaptureOverlay](https://docs.scandit.com/6.28/data-capture-sdk/react-native/id-capture/api/ui/id-capture-overlay.html#class-scandit.datacapture.id.ui.IdCaptureOverlay) attached to the view: ```js -let overlay = IdCaptureOverlay.withTextCaptureForView( - idCapture, - this.viewRef.current -); +const overlay = IdCaptureOverlay.withIdCaptureForView(idCapture, this.viewRef.current); ``` The overlay chooses the displayed UI automatically, based on the selected diff --git a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-count/advanced.md b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-count/advanced.md index 7436da92..51b48b21 100644 --- a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-count/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-count/advanced.md @@ -57,7 +57,7 @@ For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```js const settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +settings.enableSymbologies(enabledSymbologies); const excludedSymbologies = [Symbology.PDF417]; const filterSettings = settings.filterSettings; diff --git a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-count/get-started.md b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-count/get-started.md index e63645f6..3f868aaa 100644 --- a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-count/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-count/get-started.md @@ -53,10 +53,12 @@ const barcodeCount = BarcodeCount.forContext(context, settings); Our recommended camera settings should be used to achieve the best performance and user experience. The following couple of lines show how to get the recommended settings for MatrixScan Count and create the camera from it: ```js -const cameraSettings = new CameraSettings(); +const cameraSettings = BarcodeCount.recommendedCameraSettings; const camera = Camera.default; -camera.applySettings(cameraSettings); +if (camera != null) { + camera.applySettings(cameraSettings); +} ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/6.28/data-capture-sdk/react-native/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): diff --git a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-find/advanced.md b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-find/advanced.md index 1d765204..51fa1e90 100644 --- a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-find/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-find/advanced.md @@ -22,11 +22,11 @@ mode.addListener({ // The mode was started }, - didPauseSearch(foundItems: BarcodeFindItem[]) { + didPauseSearch(foundItems) { // The mode was paused }, - didStopSearch(foundItems: BarcodeFindItem[]) { + didStopSearch(foundItems) { // The mode was stopped after the finish button was clicked }, }); diff --git a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-find/get-started.md b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-find/get-started.md index cdf12f2e..9c05a73d 100644 --- a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-find/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-find/get-started.md @@ -39,8 +39,8 @@ For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change First create the settings: ```js -const settings = BarcodeFindSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new BarcodeFindSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be actively searched for. @@ -51,12 +51,13 @@ In this tutorial, let’s look up two items based on their EAN13 codes. We will const items = [ new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215438"), new BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), -new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for -display only +new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only ] +``` Create the mode with the previously created settings and set the items: +```js const mode = new BarcodeFind(settings); mode.setItemList(items); ``` @@ -77,9 +78,9 @@ const viewSettings = new BarcodeFindViewSettings(); Construct a new BarcodeFindView. The BarcodeFindView is automatically added to the provided parent view. ```js -let barcodeFind; +let barcodeFindView; { @@ -98,7 +99,7 @@ In this tutorial, we will then navigate back to the previous screen to finish th ```js barcodeFindView.barcodeFindViewUiListener = { - didTapFinishButton(foundItems: BarcodeFindItem[]) { + didTapFinishButton(foundItems) { // This method is called when the user presses the // finish button. It returns the list of all items that were found during // the session. diff --git a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-pick/advanced.md b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-pick/advanced.md index 722b9df4..03923c02 100644 --- a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-pick/advanced.md +++ b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-pick/advanced.md @@ -14,16 +14,26 @@ MatrixScan Pick is optimized by default for efficiency, accuracy, and a seamless You may want more fine-grained knowledge over the different events happening during the life of the `BarcodePick` mode, such as when the search starts, pauses, and stops. -To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/6.28/data-capture-sdk/android/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. +To do this, you can directly register a [`BarcodePickViewListener`](https://docs.scandit.com/6.28/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-pick-view.html#interface-scandit.datacapture.barcode.pick.IBarcodePickViewListener) on the view itself, keeping in mind that these listeners are called from a background thread. -```javascript -mode.addListener({ - onObservationStarted() { - // The mode was started +```js +const viewListener = { + didStartScanning(view) { + // The view started scanning }, - - onObservationStopped(foundItems: BarcodeFindItem[]) { - // The mode was stopped after the finish button was clicked + + didFreezeScanning(view) { + // The view was frozen + }, + + didPauseScanning(view) { + // The view was paused }, -}); + + didStopScanning(view) { + // The view stopped scanning + }, +}; + +barcodePickView.addListener(viewListener); ``` diff --git a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-pick/get-started.md b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-pick/get-started.md index 26a33359..73e6f2a4 100644 --- a/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-pick/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/react-native/matrixscan-pick/get-started.md @@ -31,7 +31,7 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to [you 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. -```javascript +```js const dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` @@ -41,19 +41,18 @@ The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. -```javascript -const settings = BarcodePickSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +```js +const settings = new BarcodePickSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be picked and quantity to be picked for each item. ```javascript const items = [ - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), - new BarcodePickProductQuantityToPick(3), - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3) -] + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), new BarcodePickProductQuantityToPick(3)), + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3)), +]; ``` Create the mode with the previously created settings: @@ -85,17 +84,15 @@ const viewSettings = new BarcodePickViewSettings(); Construct a new `BarcodePickView`. The `BarcodePickView` is automatically added to the provided parent view. ```javascript -let BarcodePick; +let barcodePickView; { - BarcodePickView = view; - // Handle the view as needed, for example - BarcodePickView.start(); + barcodePickView = view; }} -> +/> ``` ## Register the Listener @@ -107,12 +104,11 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/6.28/data-captur In this tutorial, we will then navigate back to the previous screen to finish the find session. ```javascript -BarcodePickView.BarcodePickViewUiListener = { - didTapFinishButton(foundItems: BarcodePickProduct[]) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. - } +barcodePickView.uiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the finish button. + // It returns the list of all items that were found during the session. + }, }; ``` @@ -121,7 +117,7 @@ BarcodePickView.BarcodePickViewUiListener = { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. ```javascript -BarcodePickView.start(); +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/versioned_docs/version-6.28.7/sdks/react-native/sparkscan/get-started.md b/versioned_docs/version-6.28.7/sdks/react-native/sparkscan/get-started.md index a16a8225..022d0811 100644 --- a/versioned_docs/version-6.28.7/sdks/react-native/sparkscan/get-started.md +++ b/versioned_docs/version-6.28.7/sdks/react-native/sparkscan/get-started.md @@ -28,7 +28,7 @@ Android devices running the Scandit Data Capture SDK need to have a GPU or the p The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/6.28/data-capture-sdk/react-native/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. -```sh +```js const context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` diff --git a/versioned_docs/version-6.28.7/sdks/titanium/barcode-capture/configure-barcode-symbologies.md b/versioned_docs/version-6.28.7/sdks/titanium/barcode-capture/configure-barcode-symbologies.md index f525f410..b312b5ab 100644 --- a/versioned_docs/version-6.28.7/sdks/titanium/barcode-capture/configure-barcode-symbologies.md +++ b/versioned_docs/version-6.28.7/sdks/titanium/barcode-capture/configure-barcode-symbologies.md @@ -29,6 +29,14 @@ Barcode symbologies such as [Code 128](https://docs.scandit.com/6.28/data-captur The below lines of code show how to change the active symbol count for Code 128 to read codes with 6, 7 and 8 symbols. +```js +const settings = new ScanditBarcode.BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology( + ScanditBarcode.Symbology.Code128 +); +symbologySettings.activeSymbolCounts = [6, 7, 8]; +``` + ## Calculate the Active Symbol Count Calculating the active symbol count is symbology-specific as each symbology has a different symbol definition. To understand what a symbology’s default active symbol count range is and to learn how to compute the active symbol count for a particular symbology, consult the documentation on [symbology properties](https://docs.scandit.com/6.28/data-capture-sdk/titanium/barcode-capture/symbology-properties.html). As an alternative, you can also use the Scandit Demo App in the [iOS App Store](https://itunes.apple.com/us/app/scandit-barcode-scanner-demo/id453880584), or [Android Play Store](https://play.google.com/store/apps/details?id=com.scandit.demoapp). After you have installed the app, select the “Any Code” mode and scan the codes you are interested in. The active symbol count will appear on the result screen. diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md b/versioned_docs/version-7.6.7/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md index a70555de..eff72673 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/barcode-capture/configure-barcode-symbologies.md @@ -23,8 +23,8 @@ import EnableSymbologies from '../../../partials/configure-symbologies/_enable-s The following lines of code show you how to enable scanning Code 128 codes for barcode capture: ```js -const settings = new Scandit.BarcodeCaptureSettings(); -settings.enableSymbology(Scandit.Symbology.Code128, true); +const settings = new BarcodeCaptureSettings(); +settings.enableSymbology(Symbology.Code128, true); ``` import CapturePresents from '../../../partials/configure-symbologies/_capture-presents.mdx' @@ -42,16 +42,8 @@ If you want to read codes that are shorter/longer than the specified default ran The below lines of code show how to change the active symbol count for Code 128 to read codes with 6, 7 and 8 symbols. ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code128 -); -symbologySettings.activeSymbolCounts = [6, 7, 8]; - -const settings = new ScanditBarcode.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - ScanditBarcode.Symbology.Code128 -); +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code128); symbologySettings.activeSymbolCounts = [6, 7, 8]; ``` @@ -68,10 +60,8 @@ This is not possible for all symbologies as it could lead to false reads when th When you enable a symbology as described above, only dark-on-bright codes are enabled (see [SymbologySettings.isEnabled](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#property-scandit.datacapture.barcode.SymbologySettings.IsEnabled 'SymbologySettings.isEnabled property')). When you also want to read bright-on-dark codes, color-inverted reading for that symbology must also be enabled (see [SymbologySettings.isColorInvertedEnabled](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#property-scandit.datacapture.barcode.SymbologySettings.IsColorInvertedEnabled)): ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code128 -); +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code128); symbologySettings.isColorInvertedEnabled = true; ``` @@ -85,11 +75,9 @@ You can enforce a specific checksum by setting it through [SymbologySettings.checksums](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/symbology-settings.html#property-scandit.datacapture.barcode.SymbologySettings.Checksums): ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code39 -); -symbologySettings.checksums = [Scandit.Checksum.Mod43]; +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code39); +symbologySettings.checksums = [Checksum.Mod43]; ``` ## Enable Symbology-Specific Extensions @@ -103,10 +91,8 @@ To enable/disable a symbology extension, use [SymbologySettings.setExtensionEnab The following code shows how to enable the full ASCII extension for Code 39. ```js -const settings = new Scandit.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - Scandit.Symbology.Code39 -); +const settings = new BarcodeCaptureSettings(); +const symbologySettings = settings.settingsForSymbology(Symbology.Code39); symbologySettings.setExtensionEnabled('full_ascii', true); ``` diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/barcode-capture/get-started.md b/versioned_docs/version-7.6.7/sdks/capacitor/barcode-capture/get-started.md index ac41f780..4c5df814 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/barcode-capture/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/barcode-capture/get-started.md @@ -28,7 +28,7 @@ The general steps are: The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( +const context = DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -40,14 +40,14 @@ Barcode scanning is orchestrated by the [BarcodeCapture](https://docs.scandit.co For this tutorial, we will setup barcode scanning for a small list of different barcode types, called [symbologies](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology). The list of symbologies to enable is highly application specific. We recommend that you only enable the list of symbologies your application requires. ```js -const settings = new Scandit.BarcodeCaptureSettings(); +const settings = new BarcodeCaptureSettings(); settings.enableSymbologies([ - Scandit.Symbology.Code128, - Scandit.Symbology.Code39, - Scandit.Symbology.QR, - Scandit.Symbology.EAN8, - Scandit.Symbology.UPCE, - Scandit.Symbology.EAN13UPCA, + Symbology.Code128, + Symbology.Code39, + Symbology.QR, + Symbology.EAN8, + Symbology.UPCE, + Symbology.EAN13UPCA, ]); ``` @@ -56,7 +56,7 @@ If you are not disabling barcode capture immediately after having scanned the fi Next, create a [BarcodeCapture](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/barcode-capture.html#class-scandit.datacapture.barcode.BarcodeCapture) instance with the settings initialized in the previous step: ```js -const barcodeCapture = Scandit.BarcodeCapture.forContext(context, settings); +const barcodeCapture = BarcodeCapture.forContext(context, settings); ``` ## Register the Barcode Capture Listener @@ -89,7 +89,7 @@ The example below will only scan barcodes beginning with the digits `09` and ign ```js ... if (!barcode.data || !barcode.data.startsWith('09:')) { - window.overlay.brush = Scandit.Brush.transparent; + window.overlay.brush = Brush.transparent; return; } ... @@ -110,11 +110,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeCapture.recommendedCameraSettings; +const cameraSettings = BarcodeCapture.recommendedCameraSettings; // Depending on the use case further camera settings adjustments can be made here. -const camera = Scandit.Camera.default; +const camera = Camera.default; if (camera) { camera.applySettings(cameraSettings); @@ -130,7 +130,7 @@ context.setFrameSource(camera); The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.On](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): ```js -camera.switchToDesiredState(Scandit.FrameSourceState.On); +camera.switchToDesiredState(FrameSourceState.On); ``` ## Use a Capture View to Visualize the Scan Process @@ -138,14 +138,14 @@ camera.switchToDesiredState(Scandit.FrameSourceState.On); When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = DataCaptureView.forContext(context); view.connectToElement(htmlElement); ``` To visualize the results of barcode scanning, the following [overlay](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-capture-overlay.html#class-scandit.datacapture.barcode.ui.BarcodeCaptureOverlay) can be added: ```js -const overlay = Scandit.BarcodeCaptureOverlay.withBarcodeCaptureForView( +const overlay = BarcodeCaptureOverlay.withBarcodeCaptureForView( barcodeCapture, view ); diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/barcode-generator.md b/versioned_docs/version-7.6.7/sdks/capacitor/barcode-generator.md index 5cf56b05..4cc3b42c 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/barcode-generator.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/barcode-generator.md @@ -38,17 +38,17 @@ With the context you can then instantiate a [`BarcodeGeneratorBuilder`](https:// You can configure the colors used in the resulting image: ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.Code128BarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK); +const dataCaptureContext = DataCaptureContext.forLicenseKey(licenseKey); +const builder = BarcodeGenerator.code128BarcodeGeneratorBuilder(dataCaptureContext) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')); ``` When the builder is configured get the `BarcodeGenerator` and try to generate the image: ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { @@ -68,11 +68,11 @@ With the context you can then instantiate a [`QRCodeBarcodeGeneratorBuilder`](ht You can configure the colors used in the resulting image, and the two settings that can be configured for QR codes: [`QRCodeBarcodeGeneratorBuilder.errorCorrectionLevel`](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithErrorCorrectionLevel) and [`QRCodeBarcodeGeneratorBuilder.versionNumber`](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithVersionNumber). ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.QrCodeBarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK) - .withErrorCorrectionLevel(Scandit.QrCodeErrorCorrectionLevel.MEDIUM) +const dataCaptureContext = DataCaptureContext.forLicenseKey(licenseKey); +const builder = BarcodeGenerator.qrCodeBarcodeGeneratorBuilder(dataCaptureContext) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')) + .withErrorCorrectionLevel(QrCodeErrorCorrectionLevel.Medium) .withVersionNumber(4); ``` @@ -80,7 +80,7 @@ When the builder is configured get the `BarcodeGenerator` and try to generate th ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/barcode-selection/get-started.md b/versioned_docs/version-7.6.7/sdks/capacitor/barcode-selection/get-started.md index 5dceb420..d4af8343 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/barcode-selection/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/barcode-selection/get-started.md @@ -35,7 +35,7 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to [you The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext 'data capture context class'). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( +const context = DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -49,7 +49,7 @@ Barcode selection is orchestrated by the [BarcodeSelection](https://docs.scandit For this tutorial, we will setup barcode scanning for a small list of different barcode types, called [symbologies](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/symbology.html#enum-scandit.datacapture.barcode.Symbology). The list of symbologies to enable is highly application specific. We recommend that you only enable the list of symbologies your application requires. ```js -const settings = new Scandit.BarcodeSelectionSettings(); +const settings = new BarcodeSelectionSettings(); settings.enableSymbologies([ Symbology.Code128, Symbology.EAN8, @@ -79,7 +79,7 @@ _Creating the mode_ Next, create a [BarcodeSelection](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/barcode-selection.html#class-scandit.datacapture.barcode.selection.BarcodeSelection) instance with the settings initialized in the previous step: ```js -const barcodeSelection = Scandit.BarcodeSelection.forContext(context, settings); +const barcodeSelection = BarcodeSelection.forContext(context, settings); ``` ## Register the Barcode Selection Listener @@ -118,11 +118,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeSelection.recommendedCameraSettings; +const cameraSettings = BarcodeSelection.recommendedCameraSettings; // Depending on the use case further camera settings adjustments can be made here. -const camera = Scandit.Camera.default; +const camera = Camera.default; if (camera) { camera.applySettings(cameraSettings); diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/getting-started.md b/versioned_docs/version-7.6.7/sdks/capacitor/getting-started.md index 32f29c40..2255a8db 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/getting-started.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/getting-started.md @@ -95,10 +95,9 @@ Next, you need to configure your desired settings for SparkScan, such as the sym ```js const settings = new SparkScanSettings(); -settings.enabledSymbologies = [Symbology.EAN13, Symbology.Code128]; +settings.enableSymbologies([Symbology.EAN13UPCA, Symbology.Code128]); settings.codeDuplicateFilter = 0; -settings.ScanIntention = ScanIntention.Smart; -await sparkScan.applySettings(settings); +settings.scanIntention = ScanIntention.Smart; ``` In this example, we're: @@ -107,15 +106,13 @@ In this example, we're: - Setting the code duplicate filter to 0, meaning the same code can be reported multiple times - Using the Smart [scan intention](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/scan-intention.html#enum-scandit.datacapture.core.ScanIntention) algorithm, to reduce the likelihood of unintended scans -Lastly, we apply the settings to the SparkScan instance. - ### 4. Setup the SparkScanView Now we'll create and configure the scanner view and it's settings. This is done via the `SparkScanView` and `SparkScanViewSettings` classes: ```js const viewSettings = new SparkScanViewSettings(); -viewSettings.defaultScanningMode = SparkScanScanningModeTarget; +viewSettings.defaultScanningMode = new SparkScanScanningModeTarget(SparkScanScanningBehavior.Single); viewSettings.soundEnabled = true; viewSettings.hapticEnabled = false; ``` @@ -129,25 +126,19 @@ In this example, we're: Next, we create the `SparkScanView` instance, adding the scanning interface to the application: ```js -const sparkScanComponent = ( - -); +const sparkScanView = SparkScanView.forContext(context, sparkScan, viewSettings); ``` In your application's state handling logic, you must also call the `stopScanning` method when the scanner is no longer needed: ```js componentWillUnmount() { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } handleAppStateChange = async (nextAppState) => { if (nextAppState.match(/inactive|background/)) { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } }; ``` diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/id-capture/advanced.md b/versioned_docs/version-7.6.7/sdks/capacitor/id-capture/advanced.md index 89913776..db168922 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/id-capture/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/id-capture/advanced.md @@ -20,16 +20,16 @@ That means certain data from certain fields won’t be returned, even if it’s ```js // Default value: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_ONLY); +settings.anonymizationMode = IdAnonymizationMode.FieldsOnly; // Sensitive data is additionally covered with black boxes on returned images: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_AND_IMAGES); +settings.anonymizationMode = IdAnonymizationMode.FieldsAndImages; // Only images are anonymized: -settings.setAnyonymizationMode(IdAnonymizationMode.IMAGES_ONLY); +settings.anonymizationMode = IdAnonymizationMode.ImagesOnly; // No anonymization: -settings.setAnyonymizationMode(IdAnonymizationMode.NONE); +settings.anonymizationMode = IdAnonymizationMode.None; ``` ## ID Images @@ -45,13 +45,13 @@ For the full frame of the document, you can use [`setShouldPassImageTypeToResult ```js // Holder's picture as printed on a document: -settings.setShouldPassImageTypeToResult(ImageType.FACE); +settings.setShouldPassImageTypeToResult(IdImageType.Face, true); // Cropped image of a document: -settings.setShouldPassImageTypeToResult(ImageType.CROPPED_DOCUMENT); +settings.setShouldPassImageTypeToResult(IdImageType.CroppedDocument, true); // Full camera frame that contains the document: -settings.setShouldPassImageTypeToResult(ImageType.FULL_FRAME); +settings.setShouldPassImageTypeToResult(IdImageType.Frame, true); ``` ## Callbacks and Scanning Workflows diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/id-capture/get-started.md b/versioned_docs/version-7.6.7/sdks/capacitor/id-capture/get-started.md index 6e6c3c4b..e9d65c62 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/id-capture/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/id-capture/get-started.md @@ -45,7 +45,7 @@ import IdModuleOverview from '../../../partials/get-started/_id-module-overview- The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( +const context = DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -55,10 +55,10 @@ const context = Scandit.DataCaptureContext.forLicenseKey( You need to also create the [Camera](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/camera.html#class-scandit.datacapture.core.Camera): ```js -const camera = Scandit.Camera.default; +const camera = Camera.default; context.setFrameSource(camera); -const cameraSettings = Scandit.IdCapture.recommendedCameraSettings; +const cameraSettings = IdCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -78,32 +78,33 @@ By default, [anonymized data](./advanced.md#configure-data-anonymization) is not ::: ```ts -const settings = new Scandit.IdCaptureSettings(); +const settings = new IdCaptureSettings(); // Documents from any region: -settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.AnyRegion)); +settings.acceptedDocuments.push(new IdCard(IdCaptureRegion.Any)); // Only documents issued by a specific country: -settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.Germany)); +settings.acceptedDocuments.push(new IdCard(IdCaptureRegion.Germany)); // Regional documents: -settings.acceptedDocuments.push(new Scandit.RegionSpecific.ApecBusinessTravelCard()); +settings.acceptedDocuments.push(new RegionSpecific(RegionSpecificSubtype.ApecBusinessTravelCard)); // Reject passports from certain regions: -settings.rejectedDocuments.push(new Scandit.Passport(Scandit.Region.Cuba)); +settings.rejectedDocuments.push(new Passport(IdCaptureRegion.Cuba)); // To scan only one-sided documents and a given zone: -settings.scannerType = new Scandit.SingleSideScanner({ barcode: true }); +settings.scannerType = new SingleSideScanner(true, false, false); // or -settings.scannerType = new Scandit.SingleSideScanner({ machineReadableZone: true }); +settings.scannerType = new SingleSideScanner(false, true, false); // or -settings.scannerType = new Scandit.SingleSideScanner({ visualInspectionZone: true }); +settings.scannerType = new SingleSideScanner(false, false, true); // To scan both sides of the document: -settings.scannerType = new Scandit.FullDocumentScanner(); +settings.scannerType = new FullDocumentScanner(); ``` Create a new ID Capture mode with the chosen settings: ```ts -const idCapture = Scandit.IdCapture.forContext(context, settings); +const idCapture = new IdCapture(settings); +context.addMode(idCapture); ``` ## Implement the Listener @@ -153,11 +154,11 @@ You may wish to implement the follow-up action based on the reason of failure: ```ts onIdRejected: (data, reason) => { - if (reason === Scandit.RejectionReason.Timeout) { + if (reason === RejectionReason.Timeout) { // Ask the user to retry, or offer alternative input method. - } else if (reason === Scandit.RejectionReason.DocumentExpired) { + } else if (reason === RejectionReason.DocumentExpired) { // Ask the user to provide alternative document. - } else if (reason === Scandit.RejectionReason.HolderUnderage) { + } else if (reason === RejectionReason.HolderUnderage) { // Reject the process. } } @@ -170,17 +171,15 @@ When using the built-in camera as [frameSource](https://docs.scandit.com/7.6/dat To do that, add a [DataCaptureView](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = DataCaptureView.forContext(context); view.connectToElement(htmlElement); ``` Then create an instance of [IdCaptureOverlay](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/id-capture/api/ui/id-capture-overlay.html#class-scandit.datacapture.id.ui.IdCaptureOverlay) attached to the view: ```js -let overlay = Scandit.IdCaptureOverlay.withTextCaptureForView( - idCapture, - dataCaptureView -); +const overlay = new IdCaptureOverlay(idCapture); +view.addOverlay(overlay); ``` The overlay chooses the displayed UI automatically, based on the selected [IdCaptureSettings](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/id-capture/api/id-capture-settings.html#class-scandit.datacapture.id.IdCaptureSettings). @@ -192,7 +191,7 @@ If you prefer to show a different UI or to temporarily hide it, set the appropri Finally, turn on the camera to start scanning: ```js -camera.switchToDesiredState(Scandit.FrameSourceState.On); +camera.switchToDesiredState(FrameSourceState.On); ``` And this is it. You can now scan documents. diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-count/advanced.md b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-count/advanced.md index 92c481f1..e21a5909 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-count/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-count/advanced.md @@ -50,15 +50,7 @@ import Totes from '../../../partials/count/_tote-mapping.mdx' It can be difficult to reach the shutter button if the smart device is attached to the user’s wrist by a strap or similar. In this instance, you can enable a floating shutter button that can be positioned by the end user in a more ergonomically suitable position. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowFloatingShutterButton = true; - } - }} - /> -); +barcodeCountView.shouldShowFloatingShutterButton = true; ``` ## Filtering @@ -71,7 +63,7 @@ For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```js const settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +settings.enableSymbologies(enabledSymbologies); const excludedSymbologies = [Symbology.PDF417]; const filterSettings = settings.filterSettings; @@ -98,15 +90,7 @@ There are situations in which the user may find it helpful to clean up their scr If this is the case, you can enable the “Clear screen” button. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowClearHighlightsButton = true; - } - }} - /> -); +barcodeCountView.shouldShowClearHighlightsButton = true; ``` ## Customize Overlay Colors @@ -124,15 +108,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Notifications @@ -153,15 +129,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Disable UI Elements @@ -172,30 +140,14 @@ However, if you wish to disable UI elements you can do it as follows. Disable buttons: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowListButton = false; - view.shouldShowExitButton = false; - view.shouldShowShutterButton = false; - } - }} - /> -); +barcodeCountView.shouldShowListButton = false; +barcodeCountView.shouldShowExitButton = false; +barcodeCountView.shouldShowShutterButton = false; ``` Disable feedback and hints: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowUserGuidanceView = false; - view.shouldShowHints = false; - } - }} - /> -); +barcodeCountView.shouldShowUserGuidanceView = false; +barcodeCountView.shouldShowHints = false; ``` diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-count/get-started.md b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-count/get-started.md index 08410ecd..2f49d0b1 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-count/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-count/get-started.md @@ -55,10 +55,12 @@ const barcodeCount = BarcodeCount.forContext(context, settings); Our recommended camera settings should be used to achieve the best performance and user experience. The following couple of lines show how to get the recommended settings for MatrixScan Count and create the camera from it: ```js -const cameraSettings = new CameraSettings(); +const cameraSettings = BarcodeCount.createRecommendedCameraSettings(); const camera = Camera.default; -camera.applySettings(cameraSettings); +if (camera != null) { + camera.applySettings(cameraSettings); +} ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): @@ -81,9 +83,8 @@ MatrixScan Count’s built-in AR user interface includes buttons and overlays th Add a [BarcodeCountView](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) to your view hierarchy: ```js -const barcodeCountViewComponent = ( - -); +const barcodeCountView = BarcodeCountView.forContextWithMode(context, barcodeCount); +barcodeCountView.connectToElement(htmlElement); ``` ## Set Up The Camera So That It Switches On When You Are In Scanning View @@ -91,21 +92,15 @@ const barcodeCountViewComponent = ( The camera is not automatically turned on when you are in a scanning view. You need to set up the camera so that it switches on when needed and it switches off when not needed anymore. Similarly [BarcodeCount](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) should also be enabled and disabled. For instance, you should switch off the camera when the [BarcodeCountView](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is not visible anymore (including when the app goes in the background), similarly you want to switch on the camera when the [BarcodeCountView](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is visible (including when the app goes to the foreground). One way to achieve this is the following: ```js -componentDidMount() { -handleAppStateChangeSubscription = AppState.addEventListener('change', handleAppStateChange); -} - -componentWillUnmount() { -handleAppStateChangeSubscription.remove(); -} - -handleAppStateChange = async (nextAppState) => { -if (nextAppState.match(/inactive|background/)) { -camera.switchToDesiredState(FrameSourceState.Off); -} else { -camera.switchToDesiredState(FrameSourceState.On); -} -} +import { App } from '@capacitor/app'; + +App.addListener('appStateChange', ({ isActive }) => { + if (isActive) { + camera.switchToDesiredState(FrameSourceState.On); + } else { + camera.switchToDesiredState(FrameSourceState.Off); + } +}); ``` ## Store And Retrieve Scanned Barcodes @@ -149,13 +144,5 @@ const viewUiListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.uiListener = viewUiListener; - } - }} - /> -); +barcodeCountView.uiListener = viewUiListener; ``` diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-find/advanced.md b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-find/advanced.md index 56264196..1adadbc6 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-find/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-find/advanced.md @@ -24,11 +24,11 @@ mode.addListener({ // The mode was started }, - didPauseSearch(foundItems: BarcodeFindItem[]) { + didPauseSearch(foundItems) { // The mode was paused }, - didStopSearch(foundItems: BarcodeFindItem[]) { + didStopSearch(foundItems) { // The mode was stopped after the finish button was clicked }, }); diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-find/get-started.md b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-find/get-started.md index 8e940be8..9853eb0e 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-find/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-find/get-started.md @@ -41,8 +41,8 @@ For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change First create the settings: ```js -const settings = BarcodeFindSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new BarcodeFindSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be actively searched for. @@ -80,17 +80,8 @@ const viewSettings = new BarcodeFindViewSettings(); Construct a new BarcodeFindView. The BarcodeFindView is automatically added to the provided parent view. ```js -let barcodeFind; - { - barcodeFindView = view; - // Handle the view as needed, for example - barcodeFindView.startSearching(); - }} ->; +const barcodeFindView = new BarcodeFindView({ context: dataCaptureContext, barcodeFind: mode, viewSettings }); +barcodeFindView.connectToElement(htmlElement); ``` ## Register a listener to be notified with found items @@ -101,7 +92,7 @@ In this tutorial, we will then navigate back to the previous screen to finish th ```js barcodeFindView.barcodeFindViewUiListener = { - didTapFinishButton(foundItems: BarcodeFindItem[]) { + didTapFinishButton(foundItems) { // This method is called when the user presses the // finish button. It returns the list of all items that were found during // the session. diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-pick/advanced.md b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-pick/advanced.md index 51985ab8..d1cea121 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-pick/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-pick/advanced.md @@ -16,16 +16,26 @@ MatrixScan Pick is optimized by default for efficiency, accuracy, and a seamless You may want more fine-grained knowledge over the different events happening during the life of the `BarcodePick` mode, such as when the search starts, pauses, and stops. -To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. +To do this, you can directly register a [`BarcodePickViewListener`](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-pick-view.html#interface-scandit.datacapture.barcode.pick.IBarcodePickViewListener) on the view itself, keeping in mind that these listeners are called from a background thread. -```javascript -mode.addListener({ - onObservationStarted() { - // The mode was started +```js +const viewListener = { + didStartScanning(view) { + // The view started scanning }, - - onObservationStopped(foundItems: BarcodeFindItem[]) { - // The mode was stopped after the finish button was clicked + + didFreezeScanning(view) { + // The view was frozen + }, + + didPauseScanning(view) { + // The view was paused }, -}); + + didStopScanning(view) { + // The view stopped scanning + }, +}; + +barcodePickView.addListener(viewListener); ``` diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-pick/get-started.md b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-pick/get-started.md index fa010dc2..a92c5760 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-pick/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan-pick/get-started.md @@ -33,7 +33,7 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to [you 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. -```javascript +```js const dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` @@ -43,24 +43,23 @@ The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. -```javascript -const settings = BarcodePickSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +```js +const settings = new BarcodePickSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be picked and quantity to be picked for each item. -```javascript +```js const items = [ - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), - new BarcodePickProductQuantityToPick(3), - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3) -] + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), new BarcodePickProductQuantityToPick(3)), + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3)), +]; ``` Create the mode with the previously created settings: -```javascript +```js const mode = new BarcodePick(settings); ``` @@ -79,17 +78,17 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Zoom button * Loading Dialog -```javascript +```js const viewSettings = new BarcodePickViewSettings(); // ... ``` Construct a new `BarcodePickView`. The `BarcodePickView` will be attached to the HTMLElement provided in the ConnectToElement function. -```javascript -const BarcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, BarcodePick, viewSettings); -// Connect the data capture view to the HTML element, so it can fill up its size and follow its position. -view.connectToElement(document.getElementById('html-element-id')); +```js +const barcodePickView = new BarcodePickView({ context: dataCaptureContext, barcodePick: mode, settings: viewSettings }); +// Connect the view to the HTML element, so it can fill up its size and follow its position. +barcodePickView.connectToElement(document.getElementById('html-element-id')); ``` ## Register the Listener @@ -100,13 +99,12 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/7.6/data-capture In this tutorial, we will then navigate back to the previous screen to finish the find session. -```javascript -BarcodePickView.BarcodePickViewUiListener = { - didTapFinishButton(foundItems: BarcodePickProduct[]) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. - } +```js +barcodePickView.uiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the finish button. + // It returns the list of all items that were found during the session. + }, }; ``` @@ -114,8 +112,8 @@ BarcodePickView.BarcodePickViewUiListener = { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. -```javascript -BarcodePickView.start(); +```js +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan/advanced.md b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan/advanced.md index dfa5a61b..676d13dc 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan/advanced.md @@ -18,11 +18,8 @@ As mentioned above, the advanced overlay combined with its [listener](https://do First of all, create a new instance of [BarcodeBatchAdvancedOverlay](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-advanced-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchAdvancedOverlay) and add it to the [DataCaptureView](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). ```js -const overlay = - Scandit.BarcodeBatchAdvancedOverlay.withBarcodeBatchForView( - barcodeBatch, - view - ); +const overlay = new BarcodeBatchAdvancedOverlay(barcodeBatch); +view.addOverlay(overlay); ``` At this point, you have two options. @@ -48,22 +45,22 @@ overlay.listener = { let element = document.createElement('span'); element.innerText = trackedBarcode.barcode.data; element.style.backgroundColor = '#FFFFFFFF'; - return Scandit.TrackedBarcodeView.withHTMLElement(element, null); + return TrackedBarcodeView.withHTMLElement(element, null); }, anchorForTrackedBarcode: (overlay, trackedBarcode) => { // As we want the view to be above the barcode, we anchor the view's center to the top-center of the barcode quadrilateral. // Use the function 'offsetForTrackedBarcode' below to adjust the position of the view by providing an offset. - return Scandit.Anchor.TopCenter; + return Anchor.TopCenter; }, offsetForTrackedBarcode: (overlay, trackedBarcode) => { // This is the offset that will be applied to the view. // You can use .fraction to give a measure relative to the view itself, the sdk will take care of transforming this into pixel size. // We now center horizontally and move up the view to make sure it's centered and above the barcode quadrilateral by half of the view's height. - return new Scandit.PointWithUnit( - new Scandit.NumberWithUnit(0, Scandit.MeasureUnit.Fraction), - new Scandit.NumberWithUnit(-1, Scandit.MeasureUnit.Fraction) + return new PointWithUnit( + new NumberWithUnit(0, MeasureUnit.Fraction), + new NumberWithUnit(-1, MeasureUnit.Fraction) ); }, }; @@ -79,20 +76,20 @@ didUpdateSession: (barcodeBatch, session) => { let element = document.createElement('span'); element.innerText = trackedBarcode.barcode.data; element.style.backgroundColor = '#FFFFFFFF'; - let trackedBarcodeView = Scandit.TrackedBarcodeView.withHTMLElement( + let trackedBarcodeView = TrackedBarcodeView.withHTMLElement( element, null ); window.overlay.setViewForTrackedBarcode(trackedBarcodeView, trackedBarcode); window.overlay.setAnchorForTrackedBarcode( - Scandit.Anchor.TopCenter, + Anchor.TopCenter, trackedBarcode ); window.overlay.setOffsetForTrackedBarcode( - new Scandit.PointWithUnit( - new Scandit.NumberWithUnit(0, Scandit.MeasureUnit.Fraction), - new Scandit.NumberWithUnit(-1, Scandit.MeasureUnit.Fraction) + new PointWithUnit( + new NumberWithUnit(0, MeasureUnit.Fraction), + new NumberWithUnit(-1, MeasureUnit.Fraction) ), trackedBarcode ); diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan/get-started.md b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan/get-started.md index 28937254..d00b1600 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/matrixscan/get-started.md @@ -23,7 +23,7 @@ The general steps are: The first step to add capture capabilities to your application is to create a new [data capture context](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const context = Scandit.DataCaptureContext.forLicenseKey( +const context = DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -37,14 +37,15 @@ Most of the times, you will not need to implement a [BarcodeBatchListener](https For this tutorial, we will setup Barcode Batch for tracking QR codes. ```js -const settings = new Scandit.BarcodeBatchSettings(); -settings.enableSymbology(Scandit.Symbology.QR, true); +const settings = new BarcodeBatchSettings(); +settings.enableSymbology(Symbology.QR, true); ``` Next, create a [BarcodeBatch](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/barcode-batch.html#class-scandit.datacapture.barcode.batch.BarcodeBatch) instance with the data capture context and the settings initialized in the previous steps: ```js -const barcodeBatch = Scandit.BarcodeBatch.forContext(context, settings); +const barcodeBatch = new BarcodeBatch(settings); +context.addMode(barcodeBatch); ``` ## Use the Built-in Camera @@ -62,11 +63,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeBatch.recommendedCameraSettings; +const cameraSettings = BarcodeBatch.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -const camera = Scandit.Camera.default; +const camera = Camera.default; if (camera != null) { camera.applySettings(cameraSettings); } @@ -81,7 +82,7 @@ context.setFrameSource(camera); The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.On](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): ```js -camera.switchToDesiredState(Scandit.FrameSourceState.On); +camera.switchToDesiredState(FrameSourceState.On); ``` There is a separate guide for [more advanced camera functionality](advanced.md). @@ -91,17 +92,15 @@ There is a separate guide for [more advanced camera functionality](advanced.md). When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a [DataCaptureView](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView) to your view hierarchy: ```js -const view = Scandit.DataCaptureView.forContext(context); +const view = DataCaptureView.forContext(context); view.connectToElement(htmlElement); ``` To visualize the results of Barcode Batch, first you need to add the following [overlay](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay): ```js -const overlay = Scandit.BarcodeBatchBasicOverlay.withBarcodeBatchForView( - barcodeBatch, - view -); +const overlay = new BarcodeBatchBasicOverlay(barcodeBatch, BarcodeBatchBasicOverlayStyle.Frame); +view.addOverlay(overlay); ``` Once the overlay has been added, you should implement the [BarcodeBatchBasicOverlayListener](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#interface-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener) interface. The method [BarcodeBatchBasicOverlayListener.brushForTrackedBarcode()](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#method-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener.BrushForTrackedBarcode) is invoked every time a new tracked barcode appears and it can be used to set a [brush](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/ui/brush.html#class-scandit.datacapture.core.ui.Brush) that will be used to highlight that specific barcode in the [overlay](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay). @@ -131,7 +130,7 @@ Barcode Batch, unlike Barcode Capture, doesn’t emit feedback (sound or vibrati with your own sound or vibration if you want. ```js -const feedback = Scandit.Feedback.defaultFeedback; +const feedback = Feedback.defaultFeedback; ``` Next, use this [feedback](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/feedback.html#class-scandit.datacapture.core.Feedback) in a [BarcodeBatchListener](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/barcode-batch-listener.html#interface-scandit.datacapture.barcode.batch.IBarcodeBatchListener): diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/sparkscan/advanced.md b/versioned_docs/version-7.6.7/sdks/capacitor/sparkscan/advanced.md index f23ce809..b82b4e64 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/sparkscan/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/sparkscan/advanced.md @@ -31,11 +31,29 @@ You may want to introduce logic in your app to show an error message when scanni - The color of the flashing screen upon scan. You can enable or disable the visual feedback via [SparkScanViewSettings.visualFeedbackEnabled](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-settings.html#property-scandit.datacapture.barcode.spark.ui.SparkScanViewSettings.VisualFeedbackEnabled) and you can control the color via [SparkScanBarcodeFeedback](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-barcode-feedback.html#sparkscan-barcode-feedback). -An error example is here reported: +To emit an error, implement a [SparkScanFeedbackDelegate](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/spark-scan-feedback-delegate.html#interface-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate) and set it on the [SparkScanView](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view.html#property-scandit.datacapture.barcode.spark.ui.SparkScanView.FeedbackDelegate): ```js -self.sparkScanView.emitFeedback(SparkScanBarcodeErrorFeedback(message: "This code should not have been scanned", -resumeCapturingDelay: 6, visualFeedbackColor: UIColor.red)) +sparkScanView.feedbackDelegate = sparkScanFeedbackDelegate; +``` + +In the [feedbackForBarcode](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/spark-scan-feedback-delegate.html#method-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate.GetFeedbackForBarcode) callback you can return an error or a success feedback: + +```js +const sparkScanFeedbackDelegate = { + feedbackForBarcode: (barcode) => { + if (isValidBarcode(barcode)) { + return new SparkScanBarcodeSuccessFeedback(); + } else { + return new SparkScanBarcodeErrorFeedback( + 'This code should not have been scanned', + 60 * 1000, + Color.fromHex('#FF0000'), + new Brush(Color.fromHex('#FF0000'), Color.fromHex('#FF0000'), 1), + ); + } + }, +}; ``` You can have different error states triggered by different logic conditions. For example you can trigger an error state when a wrong barcode is scanned, and another one when a duplicate barcode is scanned. These errors can show different colors and have different timeouts. diff --git a/versioned_docs/version-7.6.7/sdks/capacitor/sparkscan/get-started.md b/versioned_docs/version-7.6.7/sdks/capacitor/sparkscan/get-started.md index b670a9c6..9e8741d3 100644 --- a/versioned_docs/version-7.6.7/sdks/capacitor/sparkscan/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/capacitor/sparkscan/get-started.md @@ -28,8 +28,8 @@ Devices running the Scandit Data Capture SDK need to have a GPU or the performan The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. -```sh -const context = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +```js +const context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` ## Configure the SparkScan Mode @@ -39,14 +39,14 @@ The SparkScan Mode is configured through [`SparkScanSettings`](https://docs.scan 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…). ```js -const settings = new Scandit.SparkScanSettings(); +const settings = new SparkScanSettings(); settings.enableSymbologies([Symbology.EAN13UPCA]); ``` Next, create a SparkScan instance with the settings initialized in the previous step: ```js -const sparkScan = Scandit.SparkScan.forSettings(settings); +const sparkScan = SparkScan.forSettings(settings); ``` ## Setup the Spark Scan View @@ -56,7 +56,7 @@ The SparkScan built-in user interface includes the camera preview and scanning U The [`SparkScanView`](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-settings.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView) appearance can be customized through [`SparkScanViewSettings`](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view-settings.html#class-scandit.datacapture.barcode.spark.ui.SparkScanViewSettings). ```js -const viewSettings = new Scandit.SparkScanViewSettings(); +const viewSettings = new SparkScanViewSettings(); // setup the desired appearance settings by updating the fields in the object above ``` @@ -67,13 +67,7 @@ By adding a `SparkScanView`, the scanning interface (camera preview and scanning Add a `SparkScanView` to your view hierarchy. Construct a new SparkScan view. The `SparkScan` view is automatically added to the provided parentView: ```js -const sparkScanComponent = ( - -); +const sparkScanView = SparkScanView.forContext(context, sparkScan, viewSettings); ``` Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scandit.com/7.6/data-capture-sdk/capacitor/barcode-capture/api/ui/spark-scan-view.html#method-scandit.datacapture.barcode.spark.ui.SparkScanView.StopScanning) in your app state handling logic. You have to call this for the correct functioning of the @@ -81,12 +75,12 @@ Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scan ```js componentWillUnmount() { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } handleAppStateChange = async (nextAppState) => { if (nextAppState.match(/inactive|background/)) { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } } ``` diff --git a/versioned_docs/version-7.6.7/sdks/cordova/barcode-generator.md b/versioned_docs/version-7.6.7/sdks/cordova/barcode-generator.md index 4589e66f..4f53b62e 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/barcode-generator.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/barcode-generator.md @@ -38,17 +38,17 @@ With the context you can then instantiate a [`BarcodeGeneratorBuilder`](https:// You can configure the colors used in the resulting image: ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.Code128BarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK); +const dataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); +const builder = Scandit.BarcodeGenerator.code128BarcodeGeneratorBuilder(dataCaptureContext) + .withBackgroundColor(Scandit.Color.fromHex('#ffffff')) + .withForegroundColor(Scandit.Color.fromHex('#000000')); ``` When the builder is configured get the `BarcodeGenerator` and try to generate the image: ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { @@ -68,11 +68,11 @@ With the context you can then instantiate a [`QRCodeBarcodeGeneratorBuilder`](ht You can configure the colors used in the resulting image, and the two settings that can be configured for QR codes: [`QRCodeBarcodeGeneratorBuilder.errorCorrectionLevel`](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithErrorCorrectionLevel) and [`QRCodeBarcodeGeneratorBuilder.versionNumber`](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithVersionNumber). ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.QrCodeBarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK) - .withErrorCorrectionLevel(Scandit.QrCodeErrorCorrectionLevel.MEDIUM) +const dataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); +const builder = Scandit.BarcodeGenerator.qrCodeBarcodeGeneratorBuilder(dataCaptureContext) + .withBackgroundColor(Scandit.Color.fromHex('#ffffff')) + .withForegroundColor(Scandit.Color.fromHex('#000000')) + .withErrorCorrectionLevel(Scandit.QrCodeErrorCorrectionLevel.Medium) .withVersionNumber(4); ``` @@ -80,7 +80,7 @@ When the builder is configured get the `BarcodeGenerator` and try to generate th ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { diff --git a/versioned_docs/version-7.6.7/sdks/cordova/id-capture/advanced.md b/versioned_docs/version-7.6.7/sdks/cordova/id-capture/advanced.md index 1308fdbb..0d6e9a51 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/id-capture/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/id-capture/advanced.md @@ -20,16 +20,16 @@ That means certain data from certain fields won’t be returned, even if it’s ```js // Default value: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_ONLY); +settings.anonymizationMode = Scandit.IdAnonymizationMode.FieldsOnly; // Sensitive data is additionally covered with black boxes on returned images: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_AND_IMAGES); +settings.anonymizationMode = Scandit.IdAnonymizationMode.FieldsAndImages; // Only images are anonymized: -settings.setAnyonymizationMode(IdAnonymizationMode.IMAGES_ONLY); +settings.anonymizationMode = Scandit.IdAnonymizationMode.ImagesOnly; // No anonymization: -settings.setAnyonymizationMode(IdAnonymizationMode.NONE); +settings.anonymizationMode = Scandit.IdAnonymizationMode.None; ``` ## ID Images @@ -45,13 +45,13 @@ For the full frame of the document, you can use [`setShouldPassImageTypeToResult ```js // Holder's picture as printed on a document: -settings.setShouldPassImageTypeToResult(ImageType.FACE); +settings.setShouldPassImageTypeToResult(Scandit.IdImageType.Face, true); // Cropped image of a document: -settings.setShouldPassImageTypeToResult(ImageType.CROPPED_DOCUMENT); +settings.setShouldPassImageTypeToResult(Scandit.IdImageType.CroppedDocument, true); // Full camera frame that contains the document: -settings.setShouldPassImageTypeToResult(ImageType.FULL_FRAME); +settings.setShouldPassImageTypeToResult(Scandit.IdImageType.Frame, true); ``` ## Callbacks and Scanning Workflows diff --git a/versioned_docs/version-7.6.7/sdks/cordova/id-capture/get-started.md b/versioned_docs/version-7.6.7/sdks/cordova/id-capture/get-started.md index dfb3d55e..fef8dea0 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/id-capture/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/id-capture/get-started.md @@ -59,7 +59,7 @@ You need to also create the [Camera](https://docs.scandit.com/7.6/data-capture-s const camera = Scandit.Camera.default; context.setFrameSource(camera); -const cameraSettings = Scandit.IdCapture.recommendedCameraSettings; +const cameraSettings = Scandit.IdCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -82,20 +82,20 @@ By default, [anonymized data](./advanced.md#configure-data-anonymization) is not const settings = new Scandit.IdCaptureSettings(); // Documents from any region: -settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.AnyRegion)); +settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.IdCaptureRegion.Any)); // Only documents issued by a specific country: -settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.Germany)); +settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.IdCaptureRegion.Germany)); // Regional documents: -settings.acceptedDocuments.push(new Scandit.RegionSpecific.ApecBusinessTravelCard()); +settings.acceptedDocuments.push(new Scandit.RegionSpecific(Scandit.RegionSpecificSubtype.ApecBusinessTravelCard)); // Reject passports from certain regions: -settings.rejectedDocuments.push(new Scandit.Passport(Scandit.Region.Cuba)); +settings.rejectedDocuments.push(new Scandit.Passport(Scandit.IdCaptureRegion.Cuba)); // To scan only one-sided documents and a given zone: -settings.scannerType = new Scandit.SingleSideScanner({ barcode: true }); +settings.scannerType = new Scandit.SingleSideScanner(true, false, false); // or -settings.scannerType = new Scandit.SingleSideScanner({ machineReadableZone: true }); +settings.scannerType = new Scandit.SingleSideScanner(false, true, false); // or -settings.scannerType = new Scandit.SingleSideScanner({ visualInspectionZone: true }); +settings.scannerType = new Scandit.SingleSideScanner(false, false, true); // To scan both sides of the document: settings.scannerType = new Scandit.FullDocumentScanner(); @@ -104,7 +104,8 @@ settings.scannerType = new Scandit.FullDocumentScanner(); Create a new ID Capture mode with the chosen settings: ```ts -const idCapture = Scandit.IdCapture.forContext(context, settings); +const idCapture = new Scandit.IdCapture(settings); +context.addMode(idCapture); ``` ## Implement the Listener @@ -178,10 +179,8 @@ view.connectToElement(htmlElement); Then create an instance of [IdCaptureOverlay](https://docs.scandit.com/7.6/data-capture-sdk/cordova/id-capture/api/ui/id-capture-overlay.html#class-scandit.datacapture.id.ui.IdCaptureOverlay) attached to the view: ```js -let overlay = Scandit.IdCaptureOverlay.withTextCaptureForView( - idCapture, - dataCaptureView -); +const overlay = new Scandit.IdCaptureOverlay(idCapture); +view.addOverlay(overlay); ``` The overlay chooses the displayed UI automatically, based on the selected [IdCaptureSettings](https://docs.scandit.com/7.6/data-capture-sdk/cordova/id-capture/api/id-capture-settings.html#class-scandit.datacapture.id.IdCaptureSettings). diff --git a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-count/advanced.md b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-count/advanced.md index 9d2105b9..b8200067 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-count/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-count/advanced.md @@ -25,8 +25,8 @@ const barcodeCountCaptureListListener = { }, }; -const targetBarcodes = [TargetBarcode.create('data', 1)]; -const barcodeCountCaptureList = BarcodeCountCaptureList.create( +const targetBarcodes = [Scandit.TargetBarcode.create('data', 1)]; +const barcodeCountCaptureList = Scandit.BarcodeCountCaptureList.create( barcodeCountCaptureListListener, targetBarcodes ); @@ -50,15 +50,7 @@ import Totes from '../../../partials/count/_tote-mapping.mdx' It can be difficult to reach the shutter button if the smart device is attached to the user’s wrist by a strap or similar. In this instance, you can enable a floating shutter button that can be positioned by the end user in a more ergonomically suitable position. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowFloatingShutterButton = true; - } - }} - /> -); +barcodeCountView.shouldShowFloatingShutterButton = true; ``` ## Filtering @@ -70,10 +62,10 @@ In this case, you can filter the others out. This can be done by symbology, symb For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```js -const settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +const settings = new Scandit.BarcodeCountSettings(); +settings.enableSymbologies(enabledSymbologies); -const excludedSymbologies = [Symbology.PDF417]; +const excludedSymbologies = [Scandit.Symbology.PDF417]; const filterSettings = settings.filterSettings; filterSettings.excludedSymbologies = excludedSymbologies; ``` @@ -81,7 +73,7 @@ filterSettings.excludedSymbologies = excludedSymbologies; Or, you want to exclude all the barcodes starting with 4 numbers: ```js -const settings = new BarcodeCountSettings(); +const settings = new Scandit.BarcodeCountSettings(); const filterSettings = settings.filterSettings; filterSettings.excludedCodesRegex = '^1234.*'; @@ -98,15 +90,7 @@ There are situations in which the user may find it helpful to clean up their scr If this is the case, you can enable the “Clear screen” button. ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowClearHighlightsButton = true; - } - }} - /> -); +barcodeCountView.shouldShowClearHighlightsButton = true; ``` ## Customize Overlay Colors @@ -124,15 +108,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Notifications @@ -153,15 +129,7 @@ const viewListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.listener = viewListener; - } - }} - /> -); +barcodeCountView.listener = viewListener; ``` ## Disable UI Elements @@ -172,30 +140,14 @@ However, if you wish to disable UI elements you can do it as follows. Disable buttons: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowListButton = false; - view.shouldShowExitButton = false; - view.shouldShowShutterButton = false; - } - }} - /> -); +barcodeCountView.shouldShowListButton = false; +barcodeCountView.shouldShowExitButton = false; +barcodeCountView.shouldShowShutterButton = false; ``` Disable feedback and hints: ```js -const barcodeCountViewComponent = ( - { - if (view) { - view.shouldShowUserGuidanceView = false; - view.shouldShowHints = false; - } - }} - /> -); +barcodeCountView.shouldShowUserGuidanceView = false; +barcodeCountView.shouldShowHints = false; ``` diff --git a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-count/get-started.md b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-count/get-started.md index df562cb4..199700bf 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-count/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-count/get-started.md @@ -28,7 +28,7 @@ The general steps are: The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/7.6/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const context = DataCaptureContext.forLicenseKey( +const context = Scandit.DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -40,14 +40,14 @@ The main entry point for the Barcode Count Mode is the [BarcodeCount](https://do For this tutorial, we will set up Barcode Count for tracking EAN13 codes. Change this to the correct symbologies for your use case (for example, Code 128, Code 39…). ```js -const settings = new BarcodeCountSettings(); -settings.enableSymbologies([Symbology.EAN13UPCA]); +const settings = new Scandit.BarcodeCountSettings(); +settings.enableSymbologies([Scandit.Symbology.EAN13UPCA]); ``` If you are sure that your environment will only have unique barcodes (i.e. no duplicated values), you can also enable [BarcodeCountSettings.expectsOnlyUniqueBarcodes](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/barcode-count-settings.html#property-scandit.datacapture.barcode.count.BarcodeCountSettings.ExpectsOnlyUniqueBarcodes). This option improves scanning performance as long as you are sure that no duplicates will be present. Next, create a [BarcodeCount](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) instance with the [Data Capture Context](https://docs.scandit.com/7.6/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) and the settings initialized in the previous step: ```js -const barcodeCount = BarcodeCount.forContext(context, settings); +const barcodeCount = Scandit.BarcodeCount.forContext(context, settings); ``` ## Obtain Camera Instance And Set Frame Source Used @@ -55,10 +55,12 @@ const barcodeCount = BarcodeCount.forContext(context, settings); Our recommended camera settings should be used to achieve the best performance and user experience. The following couple of lines show how to get the recommended settings for MatrixScan Count and create the camera from it: ```js -const cameraSettings = new CameraSettings(); +const cameraSettings = Scandit.BarcodeCount.createRecommendedCameraSettings(); -const camera = Camera.default; -camera.applySettings(cameraSettings); +const camera = Scandit.Camera.default; +if (camera != null) { + camera.applySettings(cameraSettings); +} ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/7.6/data-capture-sdk/cordova/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): @@ -81,9 +83,8 @@ MatrixScan Count’s built-in AR user interface includes buttons and overlays th Add a [BarcodeCountView](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) to your view hierarchy: ```js -const barcodeCountViewComponent = ( - -); +const barcodeCountView = Scandit.BarcodeCountView.forContextWithMode(context, barcodeCount); +barcodeCountView.connectToElement(htmlElement); ``` ## Set Up The Camera So That It Switches On When You Are In Scanning View @@ -91,21 +92,13 @@ const barcodeCountViewComponent = ( The camera is not automatically turned on when you are in a scanning view. You need to set up the camera so that it switches on when needed and it switches off when not needed anymore. Similarly [BarcodeCount](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/barcode-count.html#class-scandit.datacapture.barcode.count.BarcodeCount) should also be enabled and disabled. For instance, you should switch off the camera when the [BarcodeCountView](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is not visible anymore (including when the app goes in the background), similarly you want to switch on the camera when the [BarcodeCountView](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-count-view.html#class-scandit.datacapture.barcode.count.ui.BarcodeCountView) is visible (including when the app goes to the foreground). One way to achieve this is the following: ```js -componentDidMount() { -handleAppStateChangeSubscription = AppState.addEventListener('change', handleAppStateChange); -} - -componentWillUnmount() { -handleAppStateChangeSubscription.remove(); -} +document.addEventListener('pause', () => { + camera.switchToDesiredState(Scandit.FrameSourceState.Off); +}, false); -handleAppStateChange = async (nextAppState) => { -if (nextAppState.match(/inactive|background/)) { -camera.switchToDesiredState(FrameSourceState.Off); -} else { -camera.switchToDesiredState(FrameSourceState.On); -} -} +document.addEventListener('resume', () => { + camera.switchToDesiredState(Scandit.FrameSourceState.On); +}, false); ``` ## Store And Retrieve Scanned Barcodes @@ -149,13 +142,5 @@ const viewUiListener = { }, }; -const barcodeCountViewComponent = ( - { - if (view) { - view.uiListener = viewUiListener; - } - }} - /> -); +barcodeCountView.uiListener = viewUiListener; ``` diff --git a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-find/advanced.md b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-find/advanced.md index 5063fdab..4ecff349 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-find/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-find/advanced.md @@ -24,11 +24,11 @@ mode.addListener({ // The mode was started }, - didPauseSearch(foundItems: BarcodeFindItem[]) { + didPauseSearch(foundItems) { // The mode was paused }, - didStopSearch(foundItems: BarcodeFindItem[]) { + didStopSearch(foundItems) { // The mode was stopped after the finish button was clicked }, }); diff --git a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-find/get-started.md b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-find/get-started.md index 4158a988..27933622 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-find/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-find/get-started.md @@ -27,7 +27,7 @@ The general steps are: The first step to add find capabilities to your application is to create a new [DataCaptureContext](https://docs.scandit.com/7.6/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. ```js -const dataCaptureContext = DataCaptureContext.forLicenseKey( +const dataCaptureContext = Scandit.DataCaptureContext.forLicenseKey( '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' ); ``` @@ -41,8 +41,8 @@ For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change First create the settings: ```js -const settings = BarcodeFindSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new Scandit.BarcodeFindSettings(); +settings.enableSymbology(Scandit.Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be actively searched for. @@ -51,16 +51,16 @@ In this tutorial, let’s look up two items based on their EAN13 codes. We will ```js const items = [ -new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215438"), -new BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), -new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only +new Scandit.BarcodeFindItem(new Scandit.BarcodeFindItemSearchOptions("9783598215438"), +new Scandit.BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), +new Scandit.BarcodeFindItem(new Scandit.BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only ] ``` Create the mode with the previously created settings and set the items: ```js -const mode = new BarcodeFind(settings); +const mode = new Scandit.BarcodeFind(settings); mode.setItemList(items); ``` @@ -74,23 +74,14 @@ The BarcodeFindView appearance can be customized through [BarcodeFindViewSetting - Enable sound and haptic alerts ```js -const viewSettings = new BarcodeFindViewSettings(); +const viewSettings = new Scandit.BarcodeFindViewSettings(); ``` Construct a new BarcodeFindView. The BarcodeFindView is automatically added to the provided parent view. ```js -let barcodeFind; - { - barcodeFindView = view; - // Handle the view as needed, for example - barcodeFindView.startSearching(); - }} ->; +const barcodeFindView = new Scandit.BarcodeFindView({ context: dataCaptureContext, barcodeFind: mode, viewSettings }); +barcodeFindView.connectToElement(htmlElement); ``` ## Register a listener to be notified with found items @@ -101,7 +92,7 @@ In this tutorial, we will then navigate back to the previous screen to finish th ```js barcodeFindView.barcodeFindViewUiListener = { - didTapFinishButton(foundItems: BarcodeFindItem[]) { + didTapFinishButton(foundItems) { // This method is called when the user presses the // finish button. It returns the list of all items that were found during // the session. diff --git a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-pick/advanced.md b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-pick/advanced.md index 952e2d03..138e8312 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-pick/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-pick/advanced.md @@ -16,16 +16,26 @@ MatrixScan Pick is optimized by default for efficiency, accuracy, and a seamless You may want more fine-grained knowledge over the different events happening during the life of the `BarcodePick` mode, such as when the search starts, pauses, and stops. -To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. +To do this, you can directly register a [`BarcodePickViewListener`](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-pick-view.html#interface-scandit.datacapture.barcode.pick.IBarcodePickViewListener) on the view itself, keeping in mind that these listeners are called from a background thread. -```javascript -mode.addListener({ - onObservationStarted() { - // The mode was started +```js +const viewListener = { + didStartScanning(view) { + // The view started scanning }, - - onObservationStopped(foundItems: BarcodeFindItem[]) { - // The mode was stopped after the finish button was clicked + + didFreezeScanning(view) { + // The view was frozen + }, + + didPauseScanning(view) { + // The view was paused }, -}); + + didStopScanning(view) { + // The view stopped scanning + }, +}; + +barcodePickView.addListener(viewListener); ``` diff --git a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-pick/get-started.md b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-pick/get-started.md index b2d893fd..6a375729 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-pick/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan-pick/get-started.md @@ -33,8 +33,8 @@ You can retrieve your Scandit Data Capture SDK license key by signing in to [you 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. -```javascript -const dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); +```js +const dataCaptureContext = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` ## Configure the Barcode Pick Mode @@ -43,25 +43,24 @@ The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. -```javascript -const settings = BarcodePickSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +```js +const settings = new Scandit.BarcodePickSettings(); +settings.enableSymbology(Scandit.Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be picked and quantity to be picked for each item. -```javascript +```js const items = [ - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), - new BarcodePickProductQuantityToPick(3), - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3) -] + new Scandit.BarcodePickProduct(new Scandit.BarcodePickProductIdentifier("9783598215438"), new Scandit.BarcodePickProductQuantityToPick(3)), + new Scandit.BarcodePickProduct(new Scandit.BarcodePickProductIdentifier("9783598215414"), new Scandit.BarcodePickProductQuantityToPick(3)), +]; ``` Create the mode with the previously created settings: -```javascript -const mode = new BarcodePick(settings); +```js +const mode = new Scandit.BarcodePick(settings); ``` ## Setup the `BarcodePickView` @@ -79,15 +78,16 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Zoom button * Loading Dialog -```javascript -const viewSettings = new BarcodePickViewSettings(); +```js +const viewSettings = new Scandit.BarcodePickViewSettings(); // ... ``` Construct a new `BarcodePickView`. The `BarcodePickView` is automatically added to the provided parent view. -```javascript -const BarcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, BarcodePick, viewSettings); +```js +const barcodePickView = new Scandit.BarcodePickView({ context: dataCaptureContext, barcodePick: mode, settings: viewSettings }); +barcodePickView.connectToElement(document.getElementById('html-element-id')); ``` ## Register the Listener @@ -98,13 +98,12 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/7.6/data-capture In this tutorial, we will then navigate back to the previous screen to finish the find session. -```javascript -BarcodePickView.BarcodePickViewUiListener = { - didTapFinishButton(foundItems: BarcodePickProduct[]) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. - } +```js +barcodePickView.uiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the finish button. + // It returns the list of all items that were found during the session. + }, }; ``` @@ -112,8 +111,8 @@ BarcodePickView.BarcodePickViewUiListener = { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. -```javascript -BarcodePickView.start(); +```js +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan/advanced.md b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan/advanced.md index 2bd78013..1243112e 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan/advanced.md @@ -24,11 +24,8 @@ As mentioned above, the advanced overlay combined with its [listener](https://do First of all, create a new instance of [BarcodeBatchAdvancedOverlay](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-batch-advanced-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchAdvancedOverlay) and add it to the [DataCaptureView](https://docs.scandit.com/7.6/data-capture-sdk/cordova/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). ```js -const overlay = - Scandit.BarcodeBatchAdvancedOverlay.withBarcodeBatchForView( - barcodeBatch, - view - ); +const overlay = new Scandit.BarcodeBatchAdvancedOverlay(barcodeBatch); +view.addOverlay(overlay); ``` At this point, you have two options. diff --git a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan/get-started.md b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan/get-started.md index df9bfe39..72b6710a 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/matrixscan/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/matrixscan/get-started.md @@ -61,7 +61,8 @@ settings.enableSymbology(Scandit.Symbology.QR, true); Next, create a [BarcodeBatch](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/barcode-batch.html#class-scandit.datacapture.barcode.batch.BarcodeBatch) instance with the data capture context and the settings initialized in the previous steps: ```js -const barcodeBatch = Scandit.BarcodeBatch.forContext(context, settings); +const barcodeBatch = new Scandit.BarcodeBatch(settings); +context.addMode(barcodeBatch); ``` ## Use the Built-in Camera @@ -80,7 +81,7 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = Scandit.BarcodeBatch.recommendedCameraSettings; +const cameraSettings = Scandit.BarcodeBatch.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -114,10 +115,8 @@ view.connectToElement(htmlElement); To visualize the results of Barcode Batch, first you need to add the following [overlay](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay): ```js -const overlay = Scandit.BarcodeBatchBasicOverlay.withBarcodeBatchForView( - barcodeBatch, - view -); +const overlay = new Scandit.BarcodeBatchBasicOverlay(barcodeBatch, Scandit.BarcodeBatchBasicOverlayStyle.Frame); +view.addOverlay(overlay); ``` Once the overlay has been added, you should implement the [BarcodeBatchBasicOverlayListener](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#interface-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener) interface. The method diff --git a/versioned_docs/version-7.6.7/sdks/cordova/sparkscan/advanced.md b/versioned_docs/version-7.6.7/sdks/cordova/sparkscan/advanced.md index a5417167..df7a0f05 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/sparkscan/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/sparkscan/advanced.md @@ -33,11 +33,29 @@ You may want to introduce logic in your app to show an error message when scanni - The color of the flashing screen upon scan. You can enable or disable the visual feedback via [SparkScanViewSettings.visualFeedbackEnabled](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view-settings.html#property-scandit.datacapture.barcode.spark.ui.SparkScanViewSettings.VisualFeedbackEnabled) and you can control the color via [SparkScanBarcodeFeedback](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-barcode-feedback.html#sparkscan-barcode-feedback). -An error example is here reported: +To emit an error, implement a [SparkScanFeedbackDelegate](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/spark-scan-feedback-delegate.html#interface-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate) and set it on the [SparkScanView](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view.html#property-scandit.datacapture.barcode.spark.ui.SparkScanView.FeedbackDelegate): ```js -self.sparkScanView.emitFeedback(SparkScanBarcodeErrorFeedback(message: "This code should not have been scanned", -resumeCapturingDelay: 6, visualFeedbackColor: UIColor.red)) +sparkScanView.feedbackDelegate = sparkScanFeedbackDelegate; +``` + +In the [feedbackForBarcode](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/spark-scan-feedback-delegate.html#method-scandit.datacapture.barcode.spark.feedback.ISparkScanFeedbackDelegate.GetFeedbackForBarcode) callback you can return an error or a success feedback: + +```js +const sparkScanFeedbackDelegate = { + feedbackForBarcode: (barcode) => { + if (isValidBarcode(barcode)) { + return new Scandit.SparkScanBarcodeSuccessFeedback(); + } else { + return new Scandit.SparkScanBarcodeErrorFeedback( + 'This code should not have been scanned', + 60 * 1000, + Scandit.Color.fromHex('#FF0000'), + new Scandit.Brush(Scandit.Color.fromHex('#FF0000'), Scandit.Color.fromHex('#FF0000'), 1), + ); + } + }, +}; ``` You can have different error states triggered by different logic conditions. For example you can trigger an error state when a wrong barcode is scanned, and another one when a duplicate barcode is scanned. These errors can show different colors and have different timeouts. diff --git a/versioned_docs/version-7.6.7/sdks/cordova/sparkscan/get-started.md b/versioned_docs/version-7.6.7/sdks/cordova/sparkscan/get-started.md index 1897016e..aafc579e 100644 --- a/versioned_docs/version-7.6.7/sdks/cordova/sparkscan/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/cordova/sparkscan/get-started.md @@ -30,7 +30,7 @@ Devices running the Scandit Data Capture SDK need to have a GPU or the performan The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/7.6/data-capture-sdk/cordova/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. -```sh +```js const context = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --"); ``` @@ -42,7 +42,7 @@ For this tutorial, we will set up SparkScan for scanning EAN13 codes. Change thi ```js const settings = new Scandit.SparkScanSettings(); -settings.enableSymbologies([Symbology.EAN13UPCA]); +settings.enableSymbologies([Scandit.Symbology.EAN13UPCA]); ``` Next, create a SparkScan instance with the settings initialized in the previous step: @@ -69,13 +69,7 @@ By adding a `SparkScanView`, the scanning interface (camera preview and scanning Add a `SparkScanView` to your view hierarchy. Construct a new SparkScan view. The `SparkScan` view is automatically added to the provided parentView: ```js -const sparkScanComponent = ( - -); +const sparkScanView = Scandit.SparkScanView.forContext(context, sparkScan, viewSettings); ``` Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scandit.com/7.6/data-capture-sdk/cordova/barcode-capture/api/ui/spark-scan-view.html#method-scandit.datacapture.barcode.spark.ui.SparkScanView.StopScanning) in your app state handling logic. You have to call this for the correct functioning of the @@ -83,12 +77,12 @@ Additionally, make sure to call [SparkScanView.stopScanning()](https://docs.scan ```js componentWillUnmount() { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } handleAppStateChange = async (nextAppState) => { if (nextAppState.match(/inactive|background/)) { -sparkScanComponent.stopScanning(); +sparkScanView.stopScanning(); } } ``` diff --git a/versioned_docs/version-7.6.7/sdks/flutter/barcode-capture/configure-barcode-symbologies.md b/versioned_docs/version-7.6.7/sdks/flutter/barcode-capture/configure-barcode-symbologies.md index 6deff92f..3efac7f8 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/barcode-capture/configure-barcode-symbologies.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/barcode-capture/configure-barcode-symbologies.md @@ -63,7 +63,7 @@ The following code shows how to enable color-inverted reading for Code 128: ```dart var settings = BarcodeCaptureSettings(); -var symbologySettings = settings.getSymbologySettings(Symbology.code128); +var symbologySettings = settings.settingsForSymbology(Symbology.code128); symbologySettings.isColorInvertedEnabled = true; ``` diff --git a/versioned_docs/version-7.6.7/sdks/flutter/barcode-capture/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/barcode-capture/get-started.md index 9d6d3d7b..c11aea67 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/barcode-capture/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/barcode-capture/get-started.md @@ -108,11 +108,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```dart -var cameraSettings = BarcodeCapture.recommendedCameraSettings; +var cameraSettings = BarcodeCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -var camera = Camera.defaultCamera..applySettings(cameraSettings); +var camera = Camera.defaultCamera?..applySettings(cameraSettings); ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/7.6/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): diff --git a/versioned_docs/version-7.6.7/sdks/flutter/barcode-selection/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/barcode-selection/get-started.md index 6bc8d233..655eefeb 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/barcode-selection/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/barcode-selection/get-started.md @@ -119,11 +119,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```dart -var cameraSettings = BarcodeSelection.recommendedCameraSettings; +var cameraSettings = BarcodeSelection.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -var camera = Camera.defaultCamera..applySettings(cameraSettings); +var camera = Camera.defaultCamera?..applySettings(cameraSettings); ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/7.6/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): @@ -135,7 +135,7 @@ context.setFrameSource(camera); The camera is off by default and must be turned on. This is done by calling [FrameSource.switchToDesiredState()](https://docs.scandit.com/7.6/data-capture-sdk/flutter/core/api/frame-source.html#method-scandit.datacapture.core.IFrameSource.SwitchToDesiredStateAsync) with a value of [FrameSourceState.on](https://docs.scandit.com/7.6/data-capture-sdk/flutter/core/api/frame-source.html#value-scandit.datacapture.core.FrameSourceState.On): -```js +```dart camera.switchToDesiredState(FrameSourceState.on); ``` diff --git a/versioned_docs/version-7.6.7/sdks/flutter/id-capture/advanced.md b/versioned_docs/version-7.6.7/sdks/flutter/id-capture/advanced.md index f02a7859..9c7c3352 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/id-capture/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/id-capture/advanced.md @@ -20,16 +20,16 @@ That means certain data from certain fields won’t be returned, even if it’s ```dart // Default value: -settings.anonymizationMode = IdAnonymizationMode.FIELDS_ONLY; +settings.anonymizationMode = IdAnonymizationMode.fieldsOnly; // Sensitive data is additionally covered with black boxes on returned images: -settings.anonymizationMode = IdAnonymizationMode.FIELDS_AND_IMAGES; +settings.anonymizationMode = IdAnonymizationMode.fieldsAndImages; // Only images are anonymized: -settings.anonymizationMode = IdAnonymizationMode.IMAGES_ONLY; +settings.anonymizationMode = IdAnonymizationMode.imagesOnly; // No anonymization: -settings.anonymizationMode = IdAnonymizationMode.NONE; +settings.anonymizationMode = IdAnonymizationMode.none; ``` ## Document Capture Zones @@ -42,12 +42,12 @@ To change this, use the `scannerType` method to set the scanner type to either [ The `FullDocumentScanner` extracts all document information by default. If using the `SingleSideScanner`, you can specify the document zones to extract: ```dart -// To extract data from barcodes on IDs -SingleSideScanner.barcode(true); -// To extract data from the visual inspection zone (VIZ) on IDs -SingleSideScanner.visualInspectionZone(true); -// To extract data from the machine-readable zone (MRZ) on IDs -SingleSideScanner.machineReadableZone(true); +// To extract data from barcodes on IDs: +settings.scanner = IdCaptureScanner(physicalDocumentScanner: SingleSideScanner(true, false, false)); +// To extract data from the visual inspection zone (VIZ) on IDs: +settings.scanner = IdCaptureScanner(physicalDocumentScanner: SingleSideScanner(false, false, true)); +// To extract data from the machine-readable zone (MRZ) on IDs: +settings.scanner = IdCaptureScanner(physicalDocumentScanner: SingleSideScanner(false, true, false)); ``` ## Configure Accepted and Rejected Documents @@ -59,14 +59,14 @@ These methods are used in conjunction with the [IdCaptureDocumentType](https://d For example, to accept only US Driver Licenses: ```dart -settings.acceptedDocuments.addAll([DRIVER_LICENSE, Region.US]); +settings.acceptedDocuments.addAll([DriverLicense(IdCaptureRegion.us)]); ``` Or to accept all Passports *except* those from the US: ```dart -settings.acceptedDocuments.addAll([PASSPORT]); -settings.rejectedDocuments.adAll([Region.US]); +settings.acceptedDocuments.addAll([Passport(IdCaptureRegion.any)]); +settings.rejectedDocuments.addAll([Passport(IdCaptureRegion.us)]); ``` ## ID Images diff --git a/versioned_docs/version-7.6.7/sdks/flutter/id-capture/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/id-capture/get-started.md index 29d1bdbf..6dbb7e7c 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/id-capture/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/id-capture/get-started.md @@ -70,7 +70,7 @@ Camera? camera = Camera.defaultCamera; if (camera != null) { // Use the settings recommended by id capture. -camera.applySettings(IdCapture.recommendedCameraSettings); +camera.applySettings(IdCapture.createRecommendedCameraSettings()); context.setFrameSource(camera); } ``` @@ -87,14 +87,14 @@ By default, [anonymized data](./advanced.md#configure-data-anonymization) is not ```dart var settings = IdCaptureSettings(); -settings.scannerType( - SingleSideScanner // To scan only one-sided documents - // or - FullDocumentScanner // To scan both sides of the document -); - -settings.acceptedDocuments.addAll([PASSPORT, DRIVER_LICENSE]); -settings.rejectedDocuments.addAll([ID_CARD]); + +// To scan only one-sided documents: +settings.scanner = IdCaptureScanner(physicalDocumentScanner: SingleSideScanner(true, false, false)); +// To scan both sides of the document: +// settings.scanner = IdCaptureScanner(physicalDocumentScanner: FullDocumentScanner()); + +settings.acceptedDocuments.addAll([Passport(IdCaptureRegion.any), DriverLicense(IdCaptureRegion.any)]); +settings.rejectedDocuments.addAll([IdCard(IdCaptureRegion.any)]); ``` ## Implement the Listener diff --git a/versioned_docs/version-7.6.7/sdks/flutter/label-capture/advanced.md b/versioned_docs/version-7.6.7/sdks/flutter/label-capture/advanced.md index e0e60a3e..3375d81e 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/label-capture/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/label-capture/advanced.md @@ -69,68 +69,63 @@ For more advanced use cases, such as adding custom views or implementing Augment ```dart // Create the advanced overlay. -final advancedOverlay = LabelCaptureAdvancedOverlay.newInstance( - labelCapture, - dataCaptureView, -); +final advancedOverlay = LabelCaptureAdvancedOverlay(labelCapture); +dataCaptureView.addOverlay(advancedOverlay); -// Create a custom listener class that implements LabelCaptureAdvancedOverlayListener. +// Set the listener on the advanced overlay. +advancedOverlay.listener = MyAdvancedOverlayListener(); +``` + +Implement `LabelCaptureAdvancedOverlayListener` as a concrete class. The `widgetForCapturedLabel` and `widgetForCapturedLabelField` callbacks must return a `LabelCaptureAdvancedOverlayWidget` subclass (or `null` to show nothing): + +```dart class MyAdvancedOverlayListener implements LabelCaptureAdvancedOverlayListener { @override - Widget? viewForCapturedLabel(LabelCaptureAdvancedOverlay overlay, CapturedLabel label) { + Future widgetForCapturedLabel( + LabelCaptureAdvancedOverlay overlay, CapturedLabel capturedLabel) async { return null; // We only care about specific fields. } @override - Anchor anchorForCapturedLabel(LabelCaptureAdvancedOverlay overlay, CapturedLabel label) { + Future anchorForCapturedLabel( + LabelCaptureAdvancedOverlay overlay, CapturedLabel capturedLabel) async { return Anchor.center; } @override - PointWithUnit offsetForCapturedLabel( - LabelCaptureAdvancedOverlay overlay, CapturedLabel label, Widget? view) { - return PointWithUnit(0, 0, MeasureUnit.pixel); + Future offsetForCapturedLabel( + LabelCaptureAdvancedOverlay overlay, CapturedLabel capturedLabel) async { + return PointWithUnit(DoubleWithUnit(0, MeasureUnit.pixel), DoubleWithUnit(0, MeasureUnit.pixel)); } @override - Widget? viewForCapturedLabelField(LabelCaptureAdvancedOverlay overlay, LabelField field) { - if (field.name.toLowerCase().contains('expiry') && field.type == LabelFieldType.text) { + Future widgetForCapturedLabelField( + LabelCaptureAdvancedOverlay overlay, LabelField labelField) async { + if (labelField.name.toLowerCase().contains('expiry') && + labelField.type == LabelFieldType.text) { // Your method to calculate days until expiry. - final daysUntilExpiry = calculateDaysUntilExpiry(field.text); + final daysUntilExpiry = calculateDaysUntilExpiry(labelField.text); const dayLimit = 3; if (daysUntilExpiry < dayLimit) { - return Container( - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - color: Colors.red, - child: Row( - mainAxisSize: MainAxisSize.min, - children: const [ - Icon(Icons.warning, color: Colors.white), - SizedBox(width: 8), - Text('Item expires soon!', style: TextStyle(color: Colors.white)), - ], - ), - ); + // Return your custom LabelCaptureAdvancedOverlayWidget subclass here } } return null; } @override - Anchor anchorForCapturedLabelField(LabelCaptureAdvancedOverlay overlay, LabelField field) { + Future anchorForCapturedLabelField( + LabelCaptureAdvancedOverlay overlay, LabelField labelField) async { return Anchor.bottomCenter; } @override - PointWithUnit offsetForCapturedLabelField( - LabelCaptureAdvancedOverlay overlay, LabelField field, Widget? view) { - return PointWithUnit(0, 22, MeasureUnit.dip); + Future offsetForCapturedLabelField( + LabelCaptureAdvancedOverlay overlay, LabelField labelField) async { + return PointWithUnit(DoubleWithUnit(0, MeasureUnit.dip), DoubleWithUnit(22, MeasureUnit.dip)); } } - -// Set the listener on the advanced overlay. -advancedOverlay.listener = MyAdvancedOverlayListener(); ``` ## Validation Flow @@ -143,11 +138,8 @@ Validation flow uses a different overlay, the [LabelCaptureValidationFlowOverlay ```dart // Create the validation flow overlay. -final validationFlowOverlay = LabelCaptureValidationFlowOverlay.newInstance( - dataCaptureContext, - labelCapture, - dataCaptureView, -); +final validationFlowOverlay = LabelCaptureValidationFlowOverlay(labelCapture); +dataCaptureView.addOverlay(validationFlowOverlay); // Set the listener. validationFlowOverlay.listener = MyValidationFlowListener(); @@ -177,9 +169,9 @@ To handle validation events, implement the [LabelCaptureValidationFlowOverlayLis ```dart // Create a custom listener class that implements LabelCaptureValidationFlowOverlayListener. -class MyValidationFlowListener implements LabelCaptureValidationFlowOverlayListener { +class MyValidationFlowListener implements LabelCaptureValidationFlowListener { @override - void didCompleteLabelCapture(List fields) { + void didCaptureLabelWithFields(List fields) { String? barcodeData; String? expiryDate; diff --git a/versioned_docs/version-7.6.7/sdks/flutter/label-capture/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/label-capture/get-started.md index 11713e58..fc5aac70 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/label-capture/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/label-capture/get-started.md @@ -169,10 +169,8 @@ class _LabelCaptureScreenState extends State { _dataCaptureView = DataCaptureView.forContext(widget.context); // Create the overlay and add it to the DataCaptureView - final overlay = LabelCaptureBasicOverlay.newInstance( - widget.labelCapture, - _dataCaptureView, - ); + final overlay = LabelCaptureBasicOverlay(widget.labelCapture); + _dataCaptureView.addOverlay(overlay); // Optionally set a rectangular viewfinder overlay.viewfinder = RectangularViewfinder.withStyle( @@ -211,7 +209,7 @@ Future setupCamera(DataCaptureContext context) async { } // Apply recommended settings for LabelCapture - final settings = LabelCapture.recommendedCameraSettings; + final settings = LabelCapture.createRecommendedCameraSettings(); await camera.applySettings(settings); // Set camera as the frame source for the context diff --git a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-ar/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-ar/get-started.md index 62d41929..4405c4c1 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-ar/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-ar/get-started.md @@ -52,7 +52,6 @@ The create the mode with the previously created settings: ```dart var mode = BarcodeAr(settings); -mode.setItemList(items); ``` ## Setup the BarcodeArView diff --git a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-count/advanced.md b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-count/advanced.md index 29a4bfab..81344819 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-count/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-count/advanced.md @@ -54,22 +54,22 @@ In this case, you can filter the others out. This can be done by symbology, symb For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```dart -var settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +var settings = BarcodeCountSettings(); +settings.enableSymbology(Symbology.code128, true); Set excludedSymbologies = {}; excludedSymbologies.add(Symbology.pdf417); var filterSettings = settings.filterSettings; -filterSettings.excludedSymbologies(excludedSymbologies); +filterSettings.excludedSymbologies = excludedSymbologies; ``` Or, you want to exclude all the barcodes starting with 4 numbers: ```dart -var settings = new BarcodeCountSettings(); +var settings = BarcodeCountSettings(); var filterSettings = settings.filterSettings; -filterSettings.excludedCodesRegex("^1234.*"); +filterSettings.excludedCodesRegex = "^1234.*"; ``` By default the filters applied to the relevant barcodes are transparent, but you can use [`BarcodeFilterHighlightSettings`](https://docs.scandit.com/7.6/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-filter-highlight-settings.html#barcode-filter-highlight-settings) to change the color and level of transparency. diff --git a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-count/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-count/get-started.md index 2d07133b..8777a2ae 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-count/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-count/get-started.md @@ -27,7 +27,7 @@ The general steps are: The first step to add capture capabilities to your application is to create a new [Data Capture Context](https://docs.scandit.com/7.6/data-capture-sdk/flutter/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext). The context expects a valid Scandit Data Capture SDK license key during construction. -```sh +```dart var dataCaptureContext = DataCaptureContext.forLicenseKey('-- ENTER YOUR SCANDIT LICENSE KEY HERE --'); ``` @@ -38,7 +38,7 @@ The main entry point for the Barcode Count Mode is the [BarcodeCount](https://do For this tutorial, we will set up Barcode Count for tracking EAN13 codes. Change this to the correct symbologies for your use case (for example, Code 128, Code 39…). ```dart -var settings = new BarcodeCountSettings(); +var settings = BarcodeCountSettings(); settings.enableSymbology(Symbology.ean13Upca, true); ``` @@ -100,8 +100,8 @@ The values captured as part of the scanning process are part of the [session](ht ```dart @override -void didScan(BarcodeCount barcodeCount, BarcodeCountSession session, Future Function() getFrameData) { - allRecognizedBarcodes = session.recognizedBarcodes.values; +Future didScan(BarcodeCount barcodeCount, BarcodeCountSession session, Future Function() getFrameData) async { + allRecognizedBarcodes = session.recognizedBarcodes; } ``` diff --git a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-find/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-find/get-started.md index 39f8c1b5..96464bfe 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-find/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-find/get-started.md @@ -51,7 +51,7 @@ In this tutorial, let’s look up two items based on their EAN13 codes. We will var items = { BarcodeFindItem(BarcodeFindItemSearchOptions("9783598215438"), BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), -new BarcodeFindItem( +BarcodeFindItem( BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only }; ``` diff --git a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-pick/advanced.md b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-pick/advanced.md index c442c876..c2d264f1 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-pick/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-pick/advanced.md @@ -19,18 +19,27 @@ You may want more fine-grained knowledge over the different events happening dur To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/7.6/data-capture-sdk/android/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. ```dart -mode.addListener(this) - - class BarcodePickListenerImpl implements BarcodePickListener - { - @override - void onObservationStarted() { - // The mode was started - } - - @override - void onObservationStopped { - // The mode was stopped - } - } +barcodePickView.addListener(myListener); + +class BarcodePickViewListenerImpl implements BarcodePickViewListener { + @override + void didStartScanning(BarcodePickView view) { + // The view started scanning + } + + @override + void didFreezeScanning(BarcodePickView view) { + // The view was frozen + } + + @override + void didPauseScanning(BarcodePickView view) { + // The view was paused + } + + @override + void didStopScanning(BarcodePickView view) { + // The view stopped scanning + } +} ``` diff --git a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-pick/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-pick/get-started.md index e4b72aa1..31c58fe2 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-pick/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan-pick/get-started.md @@ -52,19 +52,16 @@ Then you have to create the list of items that will be picked and quantity to be ```dart var items = { - new BarcodePickProduct( - BarcodePickProductIdentifier("9783598215438")), - BarcodePickProductQuantityToPick(3), - new BarcodePickProduct( - BarcodePickProductIdentifier("9783598215414")), - BarcodePickProductQuantityToPick(3) + BarcodePickProduct("9783598215438", 3), + BarcodePickProduct("9783598215414", 3), }; ``` -Create the mode with the previously created settings: +Create a product provider and the mode: ```dart -var mode = BarcodePick(settings); +var productProvider = BarcodePickAsyncMapperProductProvider(items, productProviderCallback); +var mode = BarcodePick(dataCaptureContext, settings, productProvider); ``` ## Setup the `BarcodePickView` @@ -83,7 +80,7 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Loading Dialog ```dart -var viewSettings = new BarcodePickViewSettings( +var viewSettings = BarcodePickViewSettings( // ... ); ``` @@ -91,7 +88,7 @@ var viewSettings = new BarcodePickViewSettings( Construct a new `BarcodePickView`. ```dart -var BarcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, BarcodePick, viewSettings); +var barcodePickView = BarcodePickView.forModeWithViewSettings(dataCaptureContext, mode, viewSettings); ``` Connect the `BarcodePickView` to the Widget lifecycle. The widget is dependent on calling `widgetPaused` and `widgetResumed` to set up the camera and its overlays properly. @@ -103,12 +100,12 @@ void didChangeAppLifecycleState(AppLifecycleState state) { // Resume finding by calling the BarcodePickView widgetResumed function. // Under the hood, it re-enables the BarcodePick mode and makes sure the view is properly // setup. - BarcodePickView.widgetResumed(); + barcodePickView.widgetResumed(); } else { // Pause finding by calling the BarcodePickView widgetPaused function. // Under the hood, it will disable the mode and free resources that are not needed in a // paused state. - BarcodePickView.widgetPaused(); + barcodePickView.widgetPaused(); } } ``` @@ -122,13 +119,11 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/7.6/data-capture In this tutorial, we will then navigate back to the previous screen to finish the session. ```dart -BarcodePickView.uiListener = this +barcodePickView.uiListener = this; @override -void didTapFinishButton(Set foundItems) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. +void didTapFinishButton(BarcodePickView view) { + // This method is called when the user presses the finish button. } ``` @@ -137,7 +132,7 @@ void didTapFinishButton(Set foundItems) { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. ```dart -BarcodePickView.start(); +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan/advanced.md b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan/advanced.md index e25ba6f3..3a6713b5 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan/advanced.md @@ -30,7 +30,7 @@ As mentioned above, the advanced overlay combined with its [listener](https://do First of all, create a new instance of [BarcodeBatchAdvancedOverlay](https://docs.scandit.com/7.6/data-capture-sdk/flutter/barcode-capture/api/ui/barcode-batch-advanced-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchAdvancedOverlay) and add it to the [DataCaptureView](https://docs.scandit.com/7.6/data-capture-sdk/flutter/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). ```dart -var overlay = BarcodeBatchAdvancedOverlay.forView(barcodeBatch, dataCaptureView); +var overlay = BarcodeBatchAdvancedOverlay.withBarcodeBatchForView(barcodeBatch, dataCaptureView); ``` At this point, you have two options. @@ -52,9 +52,8 @@ Using [BarcodeBatchAdvancedOverlayListener](https://docs.scandit.com/7.6/data-ca ```dart @override -Widget widgetForTrackedBarcode(BarcodeBatchAdvancedOverlay overlay, TrackedBarcode trackedBarcode) { -// Create and return the view you want to show for this tracked barcode. You can also return null, to have no view for -this barcode. +BarcodeBatchAdvancedOverlayWidget? widgetForTrackedBarcode(BarcodeBatchAdvancedOverlay overlay, TrackedBarcode trackedBarcode) { +// Create and return the widget you want to show for this tracked barcode. You can also return null, to have no widget for this barcode. return ARWidget(trackedBarcode.barcode.data); } @@ -84,7 +83,7 @@ The function [BarcodeBatchListener.didUpdateSession()](https://docs.scandit.com/ @override void didUpdateSession(BarcodeBatch barcodeBatch, BarcodeBatchSession session) { for (final trackedBarcode in session.addedTrackedBarcodes) { -Widget arWidget = ARWidget(trackedBarcode.barcode.data); +var arWidget = ARWidget(trackedBarcode.barcode.data); overlay.setWidgetForTrackedBarcode(arWidget, trackedBarcode); overlay.setAnchorForTrackedBarcode(Anchor.topCenter, trackedBarcode); overlay.setOffsetForTrackedBarcode( diff --git a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan/get-started.md index 2a7379ab..e12ccf71 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/matrixscan/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/matrixscan/get-started.md @@ -62,11 +62,11 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```dart -var cameraSettings = BarcodeBatch.recommendedCameraSettings; +var cameraSettings = BarcodeBatch.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. -var camera = Camera.defaultCamera..applySettings(cameraSettings); +var camera = Camera.defaultCamera?..applySettings(cameraSettings); ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/7.6/data-capture-sdk/flutter/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): diff --git a/versioned_docs/version-7.6.7/sdks/flutter/sparkscan/get-started.md b/versioned_docs/version-7.6.7/sdks/flutter/sparkscan/get-started.md index e1a8c82e..b3b263bd 100644 --- a/versioned_docs/version-7.6.7/sdks/flutter/sparkscan/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/flutter/sparkscan/get-started.md @@ -58,11 +58,6 @@ The SparkScan built-in user interface includes the camera preview and scanning U The [`SparkScanView`](https://docs.scandit.com/7.6/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView) appearance can be customized through [SparkScanViewSettings](https://docs.scandit.com/7.6/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view-settings.html). -```dart -SparkScanViewSettings viewSettings = new SparkScanViewSettings(); -// setup the desired appearance settings by updating the fields in the object above -``` - See the [SparkScan Workflow Options](./intro.md#workflow-options) section for more information. By adding a [`SparkScanView`](https://docs.scandit.com/7.6/data-capture-sdk/flutter/barcode-capture/api/ui/spark-scan-view.html#class-scandit.datacapture.barcode.spark.ui.SparkScanView), the scanning interface (camera preview and scanning UI elements) gets added automatically to your application. @@ -101,11 +96,11 @@ Note that this list only contains one barcode entry. ```dart @override -void didScan(SparkScan sparkScan, SparkScanSession session, Future getFrameData()) { - if (session.newlyRecognizedBarcode.isEmpty) return; +Future didScan(SparkScan sparkScan, SparkScanSession session, Future getFrameData()) async { + if (session.newlyRecognizedBarcode == null) return; // Gather the recognized barcode - var barcode = session.newlyRecognizedBarcode[0]; + var barcode = session.newlyRecognizedBarcode!; // Do something with the recognized barcode } diff --git a/versioned_docs/version-7.6.7/sdks/react-native/barcode-generator.md b/versioned_docs/version-7.6.7/sdks/react-native/barcode-generator.md index 350ee738..0ce1f2f7 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/barcode-generator.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/barcode-generator.md @@ -38,17 +38,17 @@ With the context you can then instantiate a [`BarcodeGeneratorBuilder`](https:// You can configure the colors used in the resulting image: ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.Code128BarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK); +const dataCaptureContext = DataCaptureContext.forLicenseKey(licenseKey); +const builder = BarcodeGenerator.code128BarcodeGeneratorBuilder(dataCaptureContext) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')); ``` When the builder is configured get the `BarcodeGenerator` and try to generate the image: ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { @@ -68,11 +68,11 @@ With the context you can then instantiate a [`QRCodeBarcodeGeneratorBuilder`](ht You can configure the colors used in the resulting image, and the two settings that can be configured for QR codes: [`QRCodeBarcodeGeneratorBuilder.errorCorrectionLevel`](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithErrorCorrectionLevel) and [`QRCodeBarcodeGeneratorBuilder.versionNumber`](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/barcode-generator-builder.html#method-scandit.datacapture.barcode.generator.QrCodeBarcodeGeneratorBuilder.WithVersionNumber). ```javascript -const DataCaptureContext = Scandit.DataCaptureContext.forLicenseKey(licenseKey); -const builder = new Scandit.BarcodeGenerator.QrCodeBarcodeGeneratorBuilder(dataCaptureContext) - .withBackgroundColor(Color.WHITE) - .withForegroundColor(Color.BLACK) - .withErrorCorrectionLevel(Scandit.QrCodeErrorCorrectionLevel.MEDIUM) +const dataCaptureContext = DataCaptureContext.forLicenseKey(licenseKey); +const builder = BarcodeGenerator.qrCodeBarcodeGeneratorBuilder(dataCaptureContext) + .withBackgroundColor(Color.fromHex('#ffffff')) + .withForegroundColor(Color.fromHex('#000000')) + .withErrorCorrectionLevel(QrCodeErrorCorrectionLevel.Medium) .withVersionNumber(4); ``` @@ -80,7 +80,7 @@ When the builder is configured get the `BarcodeGenerator` and try to generate th ```javascript try { - const generator = await builder.build(); + const generator = builder.build(); const image = await generator.generate(dataString, 200); // Use the image } catch (error) { diff --git a/versioned_docs/version-7.6.7/sdks/react-native/id-capture/advanced.md b/versioned_docs/version-7.6.7/sdks/react-native/id-capture/advanced.md index 4d5df81f..a9fc782c 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/id-capture/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/id-capture/advanced.md @@ -20,16 +20,16 @@ That means certain data from certain fields won’t be returned, even if it’s ```js // Default value: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_ONLY); +settings.anonymizationMode = IdAnonymizationMode.FieldsOnly; // Sensitive data is additionally covered with black boxes on returned images: -settings.setAnyonymizationMode(IdAnonymizationMode.FIELDS_AND_IMAGES); +settings.anonymizationMode = IdAnonymizationMode.FieldsAndImages; // Only images are anonymized: -settings.setAnyonymizationMode(IdAnonymizationMode.IMAGES_ONLY); +settings.anonymizationMode = IdAnonymizationMode.ImagesOnly; // No anonymization: -settings.setAnyonymizationMode(IdAnonymizationMode.NONE); +settings.anonymizationMode = IdAnonymizationMode.None; ``` ## Document Capture Zones @@ -43,11 +43,11 @@ The `FullDocumentScanner` extracts all document information by default. If using ```js // To extract data from barcodes on IDs -SingleSideScanner.barcode(true); +const scanner = new SingleSideScanner(true, false, false); // To extract data from the visual inspection zone (VIZ) on IDs -SingleSideScanner.visualInspectionZone(true); +const scanner = new SingleSideScanner(false, false, true); // To extract data from the machine-readable zone (MRZ) on IDs -SingleSideScanner.machineReadableZone(true); +const scanner = new SingleSideScanner(false, true, false); ``` ## Configure Accepted and Rejected Documents @@ -59,14 +59,14 @@ These methods are used in conjunction with the [IdCaptureDocumentType](https://d For example, to accept only US Driver Licenses: ```js -settings.acceptedDocuments(DRIVER_LICENSE, Region.US); +settings.acceptedDocuments = [new DriverLicense(IdCaptureRegion.Us)]; ``` Or to accept all Passports *except* those from the US: ```js -settings.acceptedDocuments(PASSPORT); -settings.rejectedDocuments(Region.US); +settings.acceptedDocuments = [new Passport(IdCaptureRegion.Any)]; +settings.rejectedDocuments = [new Passport(IdCaptureRegion.Us)]; ``` ## ID Images diff --git a/versioned_docs/version-7.6.7/sdks/react-native/id-capture/get-started.md b/versioned_docs/version-7.6.7/sdks/react-native/id-capture/get-started.md index 1c9a54c9..30d413d4 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/id-capture/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/id-capture/get-started.md @@ -52,7 +52,7 @@ You need to also create the [Camera](https://docs.scandit.com/7.6/data-capture-s const camera = Camera.default; context.setFrameSource(camera); -const cameraSettings = IdCapture.recommendedCameraSettings; +const cameraSettings = IdCapture.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -73,8 +73,8 @@ By default, [anonymized data](./advanced.md#configure-data-anonymization) is not ```js const settings = new IdCaptureSettings(); -settings.scannerType = SingleSideScanner(); // To scan only one-sided documents -// settings.scannerType = FullDocumentScanner(); // To scan both sides of the document +settings.scannerType = new SingleSideScanner(true, false, false); // To scan only one-sided documents +// settings.scannerType = new FullDocumentScanner(); // To scan both sides of the document settings.acceptedDocuments.push( new DriverLicense(IdCaptureRegion.Any), @@ -96,9 +96,9 @@ For more specific information, use its non-null result properties (e.g. [Capture ```js const listener = { didCaptureId: (idCapture, session) => { - if (session.newlyCapturedId.isPassport() = true) { + if (session.newlyCapturedId.isPassport() === true) { // Handle the information extracted. - } else if (session.newlyCapturedId.isDriverLicense() = true) { + } else if (session.newlyCapturedId.isDriverLicense() === true) { // Handle the information extracted. } }, diff --git a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-ar/get-started.md b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-ar/get-started.md index 78c60b42..8c168464 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-ar/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-ar/get-started.md @@ -42,8 +42,8 @@ The main entry point for the Barcode AR Mode is the `BarcodeAr` object. You can Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. ```js -const settings = BarcodeArSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new BarcodeArSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` The create the mode with the previously created settings: @@ -73,30 +73,25 @@ const viewSettings = new BarcodeArViewSettings(); Next, create a `BarcodeArView` instance with the Data Capture Context and the settings initialized in the previous step. The `BarcodeArView` is automatically added to the provided parent view. ```js -let barcodeAr; +let barcodeArView; { barcodeArView = view; - // Handle the view as needed, for example - barcodeArView.startSearching(); }} >; ``` ## Register the Listener -The `BarcodeArView` displays a **Finish** button next to its shutter button. - -Register a [BarcodeArViewUiListener](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-ar-view.html#interface-scandit.datacapture.barcode.check.ui.IBarcodeArViewUiListener) to be notified what items have been found once the finish button is pressed. - -In this tutorial, we will then navigate back to the previous screen to finish the find session. +Register a [BarcodeArViewUiListener](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-ar-view.html#interface-scandit.datacapture.barcode.check.ui.IBarcodeArViewUiListener) to be notified when a highlighted barcode is tapped. ```js -barcodeArView.barcodeArViewUiListener = { - didTapFinishButton(foundItems: BarcodeArItem[]) { +barcodeArView.uiListener = { + didTapHighlightForBarcode(barcodeAr, barcode, highlight) { + // Handle the tapped barcode. }, }; ``` diff --git a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-count/advanced.md b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-count/advanced.md index 72263439..9b4cfd53 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-count/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-count/advanced.md @@ -71,7 +71,7 @@ For example, you might want to scan only Code 128 barcodes and no PDF417 ones. ```js const settings = new BarcodeCountSettings(); -barcodeCountSettings.enableSymbologies(enabledSymbologies); +settings.enableSymbologies(enabledSymbologies); const excludedSymbologies = [Symbology.PDF417]; const filterSettings = settings.filterSettings; diff --git a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-count/get-started.md b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-count/get-started.md index 195ee53e..6062c9a1 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-count/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-count/get-started.md @@ -55,10 +55,12 @@ const barcodeCount = BarcodeCount.forContext(context, settings); Our recommended camera settings should be used to achieve the best performance and user experience. The following couple of lines show how to get the recommended settings for MatrixScan Count and create the camera from it: ```js -const cameraSettings = new CameraSettings(); +const cameraSettings = BarcodeCount.createRecommendedCameraSettings(); const camera = Camera.default; -camera.applySettings(cameraSettings); +if (camera != null) { + camera.applySettings(cameraSettings); +} ``` Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to [DataCaptureContext.setFrameSource()](https://docs.scandit.com/7.6/data-capture-sdk/react-native/core/api/data-capture-context.html#method-scandit.datacapture.core.DataCaptureContext.SetFrameSourceAsync): diff --git a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-find/advanced.md b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-find/advanced.md index ca254eb9..1fc2af02 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-find/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-find/advanced.md @@ -24,11 +24,11 @@ mode.addListener({ // The mode was started }, - didPauseSearch(foundItems: BarcodeFindItem[]) { + didPauseSearch(foundItems) { // The mode was paused }, - didStopSearch(foundItems: BarcodeFindItem[]) { + didStopSearch(foundItems) { // The mode was stopped after the finish button was clicked }, }); diff --git a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-find/get-started.md b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-find/get-started.md index 7224a804..b48a4bd6 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-find/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-find/get-started.md @@ -37,8 +37,8 @@ For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change First create the settings: ```js -const settings = BarcodeFindSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +const settings = new BarcodeFindSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be actively searched for. @@ -49,12 +49,13 @@ In this tutorial, let’s look up two items based on their EAN13 codes. We will const items = [ new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215438"), new BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)), -new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for -display only +new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for display only ] +``` Create the mode with the previously created settings and set the items: +```js const mode = new BarcodeFind(settings); mode.setItemList(items); ``` @@ -75,9 +76,9 @@ const viewSettings = new BarcodeFindViewSettings(); Construct a new BarcodeFindView. The BarcodeFindView is automatically added to the provided parent view. ```js -let barcodeFind; +let barcodeFindView; { @@ -96,7 +97,7 @@ In this tutorial, we will then navigate back to the previous screen to finish th ```js barcodeFindView.barcodeFindViewUiListener = { - didTapFinishButton(foundItems: BarcodeFindItem[]) { + didTapFinishButton(foundItems) { // This method is called when the user presses the // finish button. It returns the list of all items that were found during // the session. diff --git a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-pick/advanced.md b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-pick/advanced.md index a32826a5..380593ee 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-pick/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-pick/advanced.md @@ -16,16 +16,26 @@ MatrixScan Pick is optimized by default for efficiency, accuracy, and a seamless You may want more fine-grained knowledge over the different events happening during the life of the `BarcodePick` mode, such as when the search starts, pauses, and stops. -To do this, you can directly register a [`BarcodePickListener`](https://docs.scandit.com/7.6/data-capture-sdk/android/barcode-capture/api/barcode-pick-listener.html#interface-scandit.datacapture.barcode.pick.IBarcodePickListener) on the mode itself, keeping in mind that these listeners are called from a background thread. +To do this, you can directly register a [`BarcodePickViewListener`](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-pick-view.html#interface-scandit.datacapture.barcode.pick.IBarcodePickViewListener) on the view itself, keeping in mind that these listeners are called from a background thread. -```javascript -mode.addListener({ - onObservationStarted() { - // The mode was started +```js +const viewListener = { + didStartScanning(view) { + // The view started scanning }, - - onObservationStopped(foundItems: BarcodeFindItem[]) { - // The mode was stopped after the finish button was clicked + + didFreezeScanning(view) { + // The view was frozen + }, + + didPauseScanning(view) { + // The view was paused }, -}); + + didStopScanning(view) { + // The view stopped scanning + }, +}; + +barcodePickView.addListener(viewListener); ``` diff --git a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-pick/get-started.md b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-pick/get-started.md index fe64ed9b..9de88c75 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-pick/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan-pick/get-started.md @@ -41,24 +41,23 @@ The main entry point for the Barcode Pick Mode is the `BarcodePick` object. You Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case. -```javascript -const settings = BarcodePickSettings(); -settings.enableSymbology(Symbology.ean13Upca, true); +```js +const settings = new BarcodePickSettings(); +settings.enableSymbology(Symbology.EAN13UPCA, true); ``` Then you have to create the list of items that will be picked and quantity to be picked for each item. -```javascript +```js const items = [ - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), - new BarcodePickProductQuantityToPick(3), - new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3) -] + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"), new BarcodePickProductQuantityToPick(3)), + new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3)), +]; ``` Create the mode with the previously created settings: -```javascript +```js const mode = new BarcodePick(settings); ``` @@ -77,25 +76,23 @@ The `BarcodePickView` appearance can be customized through [`BarcodePickViewSett * Zoom button * Loading Dialog -```javascript +```js const viewSettings = new BarcodePickViewSettings(); // ... ``` Construct a new `BarcodePickView`. The `BarcodePickView` is automatically added to the provided parent view. -```javascript -let BarcodePick; +```js +let barcodePickView; { - BarcodePickView = view; - // Handle the view as needed, for example - BarcodePickView.start(); + barcodePickView = view; }} -> +/> ``` ## Register the Listener @@ -106,13 +103,12 @@ Register a [BarcodePickViewUiListener](https://docs.scandit.com/7.6/data-capture In this tutorial, we will then navigate back to the previous screen to finish the find session. -```javascript -BarcodePickView.BarcodePickViewUiListener = { - didTapFinishButton(foundItems: BarcodePickProduct[]) { - // This method is called when the user presses the - // finish button. It returns the list of all items that were found during - // the session. - } +```js +barcodePickView.uiListener = { + didTapFinishButton(foundItems) { + // This method is called when the user presses the finish button. + // It returns the list of all items that were found during the session. + }, }; ``` @@ -120,8 +116,8 @@ BarcodePickView.BarcodePickViewUiListener = { With everything configured, you can now start searching for items. This is done by calling `BarcodePickView.start()`. -```javascript -BarcodePickView.start(); +```js +barcodePickView.start(); ``` This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel. diff --git a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan/advanced.md b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan/advanced.md index f42f8101..fd68dd61 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan/advanced.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan/advanced.md @@ -34,10 +34,8 @@ First of all, create a new instance of [BarcodeBatchAdvancedOverlay](https://doc [DataCaptureView](https://docs.scandit.com/7.6/data-capture-sdk/react-native/core/api/ui/data-capture-view.html#class-scandit.datacapture.core.ui.DataCaptureView). ```js -const overlay = BarcodeBatchAdvancedOverlay.withBarcodeBatchForView( - barcodeBatch, - view -); +const overlay = new BarcodeBatchAdvancedOverlay(barcodeBatch); +view.addOverlay(overlay); ``` At this point, you have two options. diff --git a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan/get-started.md b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan/get-started.md index e380fc90..62339846 100644 --- a/versioned_docs/version-7.6.7/sdks/react-native/matrixscan/get-started.md +++ b/versioned_docs/version-7.6.7/sdks/react-native/matrixscan/get-started.md @@ -41,7 +41,8 @@ settings.enableSymbology(Symbology.QR, true); Next, create a [BarcodeBatch](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/barcode-batch.html#class-scandit.datacapture.barcode.batch.BarcodeBatch) instance with the data capture context and the settings initialized in the previous steps: ```js -const barcodeBatch = BarcodeBatch.forContext(context, settings); +const barcodeBatch = new BarcodeBatch(settings); +context.addMode(barcodeBatch); ``` ## Use the Built-in Camera @@ -59,7 +60,7 @@ In Android, the user must explicitly grant permission for each app to access cam When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it: ```js -const cameraSettings = BarcodeBatch.recommendedCameraSettings; +const cameraSettings = BarcodeBatch.createRecommendedCameraSettings(); // Depending on the use case further camera settings adjustments can be made here. @@ -94,10 +95,8 @@ When using the built-in camera as frame source, you will typically want to displ To visualize the results of Barcode Batch, first you need to add the following [overlay](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay): ```js -const overlay = BarcodeBatchBasicOverlay.withBarcodeBatchForView( - barcodeBatch, - view -); +const overlay = new BarcodeBatchBasicOverlay(barcodeBatch, BarcodeBatchBasicOverlayStyle.Frame); +view.addOverlay(overlay); ``` Once the overlay has been added, you should implement the [BarcodeBatchBasicOverlayListener](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#interface-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener) interface. The method [BarcodeBatchBasicOverlayListener.brushForTrackedBarcode()](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-batch-basic-overlay-listener.html#method-scandit.datacapture.barcode.batch.ui.IBarcodeBatchBasicOverlayListener.BrushForTrackedBarcode) is invoked every time a new tracked barcode appears and it can be used to set a [brush](https://docs.scandit.com/7.6/data-capture-sdk/react-native/core/api/ui/brush.html#class-scandit.datacapture.core.ui.Brush) that will be used to highlight that specific barcode in the [overlay](https://docs.scandit.com/7.6/data-capture-sdk/react-native/barcode-capture/api/ui/barcode-batch-basic-overlay.html#class-scandit.datacapture.barcode.batch.ui.BarcodeBatchBasicOverlay). diff --git a/versioned_docs/version-7.6.7/sdks/titanium/barcode-capture/configure-barcode-symbologies.md b/versioned_docs/version-7.6.7/sdks/titanium/barcode-capture/configure-barcode-symbologies.md index 453e9bf6..ad4ff4ea 100644 --- a/versioned_docs/version-7.6.7/sdks/titanium/barcode-capture/configure-barcode-symbologies.md +++ b/versioned_docs/version-7.6.7/sdks/titanium/barcode-capture/configure-barcode-symbologies.md @@ -42,12 +42,6 @@ If you want to read codes that are shorter/longer than the specified default ran The below lines of code show how to change the active symbol count for Code 128 to read codes with 6, 7 and 8 symbols. ```js -const settings = new ScanditBarcode.BarcodeCaptureSettings(); -const symbologySettings = settings.settingsForSymbology( - ScanditBarcode.Symbology.Code128 -); -symbologySettings.activeSymbolCounts = [6, 7, 8]; - const settings = new ScanditBarcode.BarcodeCaptureSettings(); const symbologySettings = settings.settingsForSymbology( ScanditBarcode.Symbology.Code128