View Configuration

This section gives information on how to implement the Anyline View Configuration in iOS.

Create AnylineViewPlugin via View Configuration

With Anyline 6, with the View Configuration, you can also define the Scan Plugin and declare the parameters specifics for the Scan Plugin.

With the Anyline View Configuration, you can define the Look & Feel of your scanning app.

The configuration parameters define the visual information presented to the user, as well as the scan settings (like the resolution, etc.) and feedback that is presented to the user.

Anyline View Configuration Parameters

The full parameter list of the configuration can be found at Anyline View Configuration

captureResolution

The captureResolution is set to 1080 on iOS, as this setting provides the best results.

How to add the View Configuration

On iOS, there are two ways of setting the configuration in your code

Load View Configuration via JSON

If you want to use the default plugin-view-configurations, you don’t have to do anything, since the appropriate view configuration is loaded from the AnylineResources.bundle automatically.

However, if you would like to override this with your own configuration, you can load the configuration json file with the follwing code inside ViewDidLoad:

Load the View Configuration via JSON
//Get the filePath of the Configuration JSON file
NSString *confPath = [[NSBundle mainBundle] pathForResource:@"vin_capture_config" ofType:@"json"];
//Initiate the ALScanViewPluginConfig with the JSON file
ALScanViewPluginConfig *scanViewPluginConfig = [ALScanViewPluginConfig configurationFromJsonFilePath:confPath];

//Initiate the ScanViewPlugin with the previously created ALScanViewPluginConfig
self.vinScanViewPlugin = [[ALOCRScanViewPlugin alloc] initWithScanPlugin:self.vinScanPlugin
                                                    scanViewPluginConfig:scanViewPluginConfig];

Set Flash and Camera Config Anyline

The flash and the camera configuration can be contained within the View Configuration JSON.

Example of Flash and Camera Configuration
...

"camera": {
    "captureResolution": "1080",
    "pictureResolution": "1080"
},
"flash": {
    "mode": "manual",
    "alignment": "bottom_right"
},

...

After you created a complete JSON View Configuration, you can set the filePath with the Anyline ScanVie if you do not want to use the default configuration.

Set Flash and Camera Config via JSON
ALFlashButtonConfig *flashConf = [[ALFlashButtonConfig alloc] initWithJsonFilePath:confPath];
ALCameraConfig *cameraConf = [[ALCameraConfig alloc] initWithJsonFilePath:confPath];

self.scanView = [[ALScanView alloc] initWithFrame:frame scanViewPlugin:self.scanViewPlugin cameraConfig:cameraConf flashButtonConfig:flashConf];

If you want to manipulate the flash or camera configuration in your code, you can also use the defaultConfigurations.

Load default and manipulate Flash or Camera Config via code.
ALFlashButtonConfig *flashConf = [ALFlashButtonConfig defaultFlashConfig];
ALCameraConfig *cameraConf = [[ALCameraConfig defaultCameraConfig];;

self.scanView = [[ALScanView alloc] initWithFrame:frame scanViewPlugin:self.scanViewPlugin cameraConfig:cameraConf flashButtonConfig:flashConf];

Create Anyline use case via JSON

With the View Configuration JSON also the whole Anyline scan use case can be loaded and initiated. For this step the JSON file has to include the ``plugin``field inside the ``viewPlugin` field.

Example for ViewPlugin with Plugin
...

"viewPlugin": {
"plugin" : {
  "id" : "OCR_RECORD",
  "ocrPlugin" : {
    "scanMode" : "LINE",
    "languages" : ["eng_no_dict.traineddata", "deu.traineddata"],
    "charWhitelist": "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-.",
    "minCharHeight":15,
    "maxCharHeight":70,
    "minConfidence": 75,
    "removeSmallContours":false
  }
},

...

After you created a complete JSON View Configuration, you can create the Anyline scan use case by loading the filePath with the Anyline ScanView.

Init ScanView via JSON
NSString *confPath = [[NSBundle mainBundle] pathForResource:@"vin_capture_config" ofType:@"json"];
self.scanView = [ALScanView scanViewForFrame:frame configDict:confPath licenseKey:kVINLicenseKey delegate:self error:&error];

Set the Configuration on the ScanViewPlugin Object

The View Configuration can be set on the View object directly.

Set the Properties in the Code

Error

Currently flashImage is not supported on iOS.

The view exposes the following properties, which can be set in the code:

iOS Parameter Description View Configuration Parameter
strokeWidth Sets the width of the views border viewPlugin.cutoutConfig.strokeWidth
strokeColor Sets the color of the views border viewPlugin.cutoutConfig.strokeColor
cornerRadius Sets the corner radius of the views border viewPlugin.cutoutConfig.cornerRadius
outerColor Sets the color of the space surrounding the view viewPlugin.cutoutConfig.outerColor
outerAlpha Sets the alpha of the space surrounding the view viewPlugin.cutoutConfig.outerAlpha
flashImage Sets image used to toggle the flash flash.imageOn
flashButtonAlignment Sets the alignment of the flash button flash.alignment
flashStatus Flag to check the status of the flash -
cancelOnResult true, if Anyline should stop scanning once a result was found viewPlugin.cancelOnResult
beepOnResult true, if there should be a beep when a result was found viewPlugin.scanFeedback.beepOnResult
blinkOnResult true, if there should be a blinking alarm when a result was found viewPlugin.scanFeedback.blinkAnimationOnResult
vibrateOnResult true, if there should be a vibration alarm when a result was found viewPlugin.scanFeedback.vibrateOnResult
flashButtonAlignment

The flashButtonAlignment property allows the following values when set in the code:

Value Description
ALFlashAlignmentTop Aligned at top, centered horizontally
ALFlashAlignmentTopLeft Aligned at top left corner
ALFlashAlignmentTopRight Aligned at top right corner
ALFlashAlignmentBottom Aligned at bottom, centered horizontally
ALFlashAlignmentBottomLeft Aligned at bottom left corner
ALFlashAlignmentBottomRight Aligned at bottom right corner

Set the Properties in the Storyboard

The View Configuration can also be set via the Storyboard.

You can do so by following these steps:

  • Select View from the object library
  • Drag it onto the view of your view controller
  • Change the class to the name of the Plugins you want to use
Set the View Configuration in the Storyboard
Change the View Configuration

The parameters of the View Configuration can be changed in the attributes inspector.

Set the View Configuration Parameters in the Storyboard

Creating the View Property

Next you have to define the IBOutlet of the View in the interface of the ViewController.

Define the View Outlet
@interface MainViewController : UIViewController

// The Anyline plugin used for OCR
@property (nonatomic, strong) ALOCRScanViewPlugin *vinScanViewPlugin;
@property (nonatomic, strong) ALOCRScanPlugin *vinScanPlugin;

// This property has to be linked to the Storyboard
@property (weak, nonatomic) IBOutlet ALScanView *scanView;

@end

Connecting the ScanView to your ViewController

Simply drag the connector of your property to the newly created view.

Connect the ScanView to the View Controller