Anyline View Configuration

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.

This section shows an example and lists all parameters with their description.
If you are looking for a How-To on loading the Anyline View Configuration on your platform, please refer to the following sections:

Example

This is a full example of a view configuration. You can just copy and paste this to your application.

View Configuration Example
{
      "captureResolution": "720",
      "pictureResolution": "1080",
      "cutout": {
          "width": 540,
          "maxWidthPercent": "80%",
          "maxHeightPercent": "80%",
          "ratioFromSize": {
              "width": 125,
              "height": 85
          },
          "alignment": "center",  
          "offset": {
              "x": 0,
              "y": 0
          },
          "outerColor": "000000",
          "outerAlpha": 0.3,
          "style": "rect",
          "strokeColor": "FFFFFF",
          "feedbackStrokeColor": "000066",
          "strokeWidth": 2,
          "cornerRadius": 4,
          "image":"Overlay",
          "cropPadding": {
              "x": 0,
              "y": 0
          },
          "cropOffset": {
              "x": 0,
              "y": 0
          }
      },
      "flash": {
          "mode": "manual",
          "alignment": "bottom_right",
          "imageOn": "ic_flash_on",
          "imageOff": "ic_flash_off",
          "imageAuto": "ic_flash_auto",
          "offset": {
                "x": 10,
                "y": -10
          }
      },
      "beepOnResult": false,
      "vibrateOnResult": true,
      "blinkAnimationOnResult": true,
      "cancelOnResult": true,
      "visualFeedback": {
            "style": "RECT",
            "strokeColor": "0099FF",
            "strokeWidth": 2,
            "fillColor": "AA0099FF",
            "cornerRadius": 2,
            "redrawTimeout": 200,
            "animation": "TRAVERSE_MULTI",
            "animationDuration": 75
      }
}

Full Parameter List

Warning

Some of the following parameters, like flash, beepOnResult and so on, will only have an effect if the device has a flash or built in speakers.

captureResolution

Defines the width of the frames that are processed in the SDK.

Range Unit JSON-Type Default Mandatory
480, 720, 1080, ... Pixel String 720

Aspect Ratio

The aspect ratio is always 16:9, so a value of 480 results in a resolution of 480x854.

Android

The capture resolution is more like a suggestion, because the available preview resolutions vary from device to device. If the preferred resolution is available, it is used. Otherwise the highest available resolution smaller than the desired value is used.

iOS

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

pictureResolution

Defines the resolution of the full picture taken from the camera (optional). This parameter is only of interest when using the Document module.
Default is set to the maximum available resolution of the device.

Range Unit JSON-Type Default Mandatory
1080, 1260, ... Pixel String max

Aspect Ratio

The aspect ratio is always 16:9, so a value of 480 results in a resolution of 480x854.

Android

The picture resolution is more like a suggestion, because the available picture resolutions vary from device to device. If the preferred resolution is available, it is used. Otherwise the lowest available resolution bigger than the desired value is used.

iOS

The highest possible resolution for iOS is 1080. However if you specify a higher value for picture resolution we will return a high resolution photo of the found document as result. Therefore it is also possible to specify “photo” as value if you want to get a high resolution result.

cutout

The following parameters define the look of the overlay-cutout, which is used to guide the user to target the item to scan.
The Anyline SDK only receives the part of the image inside the cutout. So anything outside of the cutout cannot be scanned.

Cutout and Focus

Please keep in mind that there is a relationship between the size of the cutout, and how close/far the user will hold the phone from the object. Choosing a cutout that is too large for a small object, will intuitively force the user to move closer with the phone to the object. This may result in an incorrectly set focus on some devices, as the minimal distance between the object and the camera needs to be up to ~12cm in auto-focus mode in some cases, and ~7.5cm in macro- or continuous focus mode.

cutout.width

Specifies the width of the cutout. If this is bigger than the width of the view, it will be limited to the view’s width.

Range Unit JSON-Type Default Mandatory
- Pixel Integer -

Preview-Width and Display-Width

Android devices may have a 720p preview but only a 540p wide display. If a width of 600 is specified, the cutout will still only be 540

cutout.maxWidthPercent

Specifies the maximum width of the cutout in percent.

This represents the desired width if the cutout.width parameter is not used.

Range Unit JSON-Type Default Mandatory
1% - 100% Percent String 100%

cutout.maxHeightPercent

Specifies the maximum height of the cutout in percent.

Range Unit JSON-Type Default Mandatory
1% - 100% Percent String 100%

Why width, maxWidth and maxHeight but no height?

The form of the cutout can be defined by the ratio, so there is no direct need for width AND height parameter. But if there is only one width parameter where % or pixel value is allowed, it is not possible to limit the height to a certain percentage. That limits the usability in landscape mode quite a bit.

cutout.ratioFromSize

Defines the ratio of the cutout.

These parameters, together with cutout.width or cutout.maxWidthPercent set, define the full size of the cutout.

cutout.ratioFromSize.width
Range Unit JSON-Type Default Mandatory
- Pixel Integer -
cutout.ratioFromSize.height
Range Unit JSON-Type Default Mandatory
- Pixel Integer -

cutout.alignment

Specifies where in the preview the cutout will be positioned.

Range Unit JSON-Type Default Mandatory
see below - String center
Value Description
top The cutout is placed at the top border of the view
top_half The cutout is placed in the top half of the view
center The cutout is centered in the view vertically and horizontally
bottom The cutout is placed at lower border of the cutout is at the lower border of the view
bottom_half The cutout is placed at the same as top half just from below: offsetY = (viewHeight - cutoutHeight) / 3 * 2

cutout.offset

Moves the cutout in x and y direction by the specified pixel value. Put negative values to move left or up, positive values to move right or down. The offset is limited to move the cutout to the start/end of the view.

cutout.offset.x
Range Unit JSON-Type Default Mandatory
- Pixel Integer 0
cutout.offset.y
Range Unit JSON-Type Default Mandatory
- Pixel Integer 0

cutout.outerColor

Specifies the color of the area outside of the cutout.

Range Unit JSON-Type Default Mandatory
000000 - FFFFFF Hex-RGB String TRANSPARENT

cutout.outerAlpha

Defines the alpha value for the color outside of the cutout.

Range Unit JSON-Type Default Mandatory
0.0 - 1.0 - Float 0.0

cutout.style

Defines what should be drawn as a cutout as an overlay.

In case of rect, the overlay can be customised with cutout.strokeColor, cutout.strokeWidth, and cutout.cornerRadius.

In case of image, the provided image has to be set with the cutout.image parameter.

The image will be drawn as an overlay, the bounds of the cutout to which the frame will be cropped, are determined by cutout.width, cutout.maxWidthPercent, cutout.maxHeightPercent, and cutout.ratioFromSize parameters.

Range Unit JSON-Type Default Mandatory
rect or image - String rect

cutout.image

Sets the filename of the image to be used if cutout.style is set to image.

Range Unit JSON-Type Default Mandatory
- - String -

Warning

The file extension has to be ommitted in this parameter

Android: Where to put the image?

The image has to be placed inside the res/drawable folder on Android

iOS: Where to put the image?

The image has to be placed somewhere in the main bundle

cutout.strokeColor

Defines the color of the cutout overlay stroke if cutout.style is set to rect

Range Unit JSON-Type Default Mandatory
00000000 - FFFFFFFF Hex-ARGB String FFFFFF

cutout.strokeWidth

Sets the stroke width of the cutout overlay stroke if cutout.style is set to rect.

Range Unit JSON-Type Default Mandatory
- dp / Pixel Integer 2

Android

This parameters Unit is density-independent pixel (dp)

iOS

This parameters Unit is pixel

cutout.cornerRadius

Sets the corner radius of the cutout overlay if cutout.style is set to rect.

Range Unit JSON-Type Default Mandatory
- dp / Pixel Integer 8

Android

This parameters Unit is density-independent pixel (dp)

iOS

This parameters Unit is pixel

cutout.cropPadding

Adds an inside padding to the crop of the image, relative to the cutout size. If not set, the crop size correspond to the cutout size.

The values are subtracted on both sides of the cutout:
cropWidth = cutoutWidth - 2 * cropPadding.x

cutout.cropPadding.x
Range Unit JSON-Type Default Mandatory
- Pixel Integer 0
cutout.cropPadding.y
Range Unit JSON-Type Default Mandatory
- Pixel Integer 0

Warning

This should only be used in combination with a fixed cutout.width

Tip: Enlarge the crop size

Setting a negative value enlarges the crop area.

cutout.cropOffset

Moves the crop area to the left and up (positive value) or to the right and down (negative values), relative to the cutout position.

cutout.cropOffset.x
Range Unit JSON-Type Default Mandatory
- Pixel Integer 0
cutout.cropOffset.y
Range Unit JSON-Type Default Mandatory
- Pixel Integer 0

Warning

This should only be used in combination with a fixed cutout.width

flash

Defines the settings for adding a view that provides a simple on/off/auto flash button functionality.

flash.mode

Specifies which options the flash view provides.

Value Description
none The flash view is not used, and not displayed
manual The flash can be toggled manually (default is off)
auto If an AnylineView is used for scanning, the flash will bet turned on automatically if the ambient light is too dark. Otherwise this mode has no effect.

flash.alignment

Defines where the flash view will be displayed.

Value Description
top The flash view will be displayed at the top, centered horizontally
top_left The flash view will be displayed in the top left corner
top_right The flash view will be displayed in the top right corner
bottom The flash view will be displayed at the bottom, centered horizontally
bottom_left The flash view will be displayed in the bottom left corner
bottom_right The flash view will be displayed in the bottom right corner

flash.imageOn

Sets the filename of the image to be used if the flash is turned on.

Range Unit JSON-Type Default Mandatory
- - String -

Warning

The file extension has to be ommitted in this parameter

Android: Where to put the image?

The image has to be placed inside the res/drawable folder on Android

iOS: Where to put the image?

The image has to be placed somewhere in the main bundle

flash.imageOff

Sets the filename of the image to be used if the flash is turned off.

Range Unit JSON-Type Default Mandatory
- - String -

Warning

The file extension has to be ommitted in this parameter

Android: Where to put the image?

The image has to be placed inside the res/drawable folder on Android

iOS: Where to put the image?

The image has to be placed somewhere in the main bundle

flash.imageAuto

Sets the filename of the image to be used if the flash is set to auto.

Range Unit JSON-Type Default Mandatory
- - String -

Warning

The file extension has to be ommitted in this parameter

Android: Where to put the image?

The image has to be placed inside the res/drawable folder on Android

iOS: Where to put the image?

The image has to be placed somewhere in the main bundle

flash.offset

Moves the flash view to the left and up (positive value) or to the right and down (negative values), relative to the flash.alignment.

flash.offset.x
Range Unit JSON-Type Default Mandatory
- dpi / Pixel Integer 0

Android

This parameters Unit is density-independent pixel (dp)

iOS

This parameters Unit is pixel
flash.offset.y
Range Unit JSON-Type Default Mandatory
- dpi / Pixel Integer 0

Android

This parameters Unit is density-independent pixel (dp)

iOS

This parameters Unit is pixel

beepOnResult

Defines if a beep sound should be played by the SDK when a result is found.

Range Unit JSON-Type Default Mandatory
true or false boolean boolean false

vibrateOnResult

Defines if a vibration should be triggered by the SDK when a result is found.

Range Unit JSON-Type Default Mandatory
true or false boolean boolean false

blinkAnimationOnResult

Defines if the display should flash shortly when a result is found.

Range Unit JSON-Type Default Mandatory
true or false boolean boolean true

cancelOnResult

Specifies if the scanning process should stop once a result is found and returned.

Range Unit JSON-Type Default Mandatory
true or false boolean boolean true

visualFeedback

This parameters define the behaviour of the visual feedback presented to the user in the cutout.
The feedback is used to present the detected symbols back to the user, which helps to improve the scanning experience and to ensure a correct positioning of the camera

visualFeedback.style

Defines the style of visual user feedback to be used

Value Description Example
RECT Displays one rectangle around all detected contours that are processed within this frame Visual Feedback Style RECT
CONTOUR_RECT Draws a rectangle around each detected contour within the currently processed frame Visual Feedback Style CONTOUR_RECT
CONTOUR_POINT Draws a point underneath each detected contour within the currently processed frame Visual Feedback Style CONTOUR_POINT
CONTOUR_UNDERLINE Underlines each detected contour within the currently processed frame Visual Feedback Style CONTOUR_UNDERLINE

Android

For reasons of backward compatibility, this configuration correlates with the onTextOutlineDetected callback:

  • If the callback returns true and no visual feedback was defined in the config, nothing will be drawn.
  • If the callback returns true and a visualFeedback is defined, the feedback will be drawn anyways, since the feedback config was explicitly added.
  • If the callback returns false and there is no visual feedback config, the standard RECT will be drawn.
  • If the callback returns false and there is a feedback config defined, the specified config will be drawn.

visualFeedback.strokeColor

Defines the color that is used to draw the visual feedback

Range Unit JSON-Type Default Mandatory
00000000 - FFFFFFFF Hex-ARGB String AA0099FF

visualFeedback.strokeWidth

Sets the stroke width used to draw the visual feedback

Range Unit JSON-Type Default Mandatory
- dp / Pixel Integer 2

Android

This parameters Unit is density-independent pixel (dp)

iOS

This parameters Unit is pixel

visualFeedback.fillColor

This defines the color the rectangle is filled with in RECT and CONTOUR_RECT visualFeedback.style mode. This setting is ignored for styles CONTOUR_POINT and CONTOUR_UNDERLINE

Range Unit JSON-Type Default Mandatory
00000000 - FFFFFFFF Hex-ARGB String TRANSPARENT

visualFeedback.cornerRadius

Defines the corner radius of the rect in visualFeedback.style RECT. This setting will be ignored for all other feedback styles

Range Unit JSON-Type Default Mandatory
- dp / Pixel Integer cutout.cornerRadius

Android

This parameters Unit is density-independent pixel (dp)

iOS

This parameters Unit is pixel

visualFeedback.animation

iOS

As of version 3.12, this parameter is only implemented for Android

Adds animations to the visual feedback. This is only valid for visualFeedback.style CONTOUR_POINT and CONTOUR_UNDERLINE. For other styles, this parameter is ignored, and a default default animation is presented.

Value CONTOUR_POINT CONTOUR_UNDERLINE
TRAVERSE_SINGLE Visual Feedback Animation TRAVERSE_SINGLE Visual Feedback Animation TRAVERSE_SINGLE
TRAVERSE_MULTI Visual Feedback Animation TRAVERSE_MULTI Visual Feedback Animation TRAVERSE_MULTI
KITT Visual Feedback Animation KITT Visual Feedback Animation KITT
BLINK Visual Feedback Animation BLINK Visual Feedback Animation BLINK
RESIZE Visual Feedback Animation RESIZE Visual Feedback Animation RESIZE
PULSE Visual Feedback Animation PULSE Visual Feedback Animation PULSE
PULSE_RANDOM Visual Feedback Animation PULSE_RANDOM Visual Feedback Animation PULSE_RANDOM

Android Camera API 2 & Animation

On Android devices using the Android Camera API 2, adding an animation to the visual feedback may result in performance issues. See Camera API 2 and Visual Feedback Animations for more details.

default animation

If no visualFeedback.animation is spedified, the following default animations are used.

Value Description Example
RECT The rect is animated from the cutout to the found text area within the
specified animation time
Visual Feedback Style RECT default animation
CONTOUR_RECT No animation. The found contour rects are drawn when found.
The animation time specifies how often new contour rects are drawn.
In this case the new found rects are only drawn every 100ms
Visual Feedback Style CONTOUR_RECT default animation
CONTOUR_POINT No animation. The contour points are drawn as soon as contours
are found. The animation time specifies how often new contour
points are drawn. In this case the new points are only drawn every 100ms
Visual Feedback Style CONTOUR_POINT default animation
CONTOUR_UNDERLINE No animation. The contours underlines are drawn as soon as
contours are found. The animation time specifies how often new
contour underlines are drawn. In this case the new underlines are only drawn every 100ms
Visual Feedback Style CONTOUR_UNDERLINE default animation

The example below shows a visualFeedback config for different styles and animations. Change the style/animation parameter to get the different results shown above.

visualFeedback.animation Example
 "visualFeedback": {
  "animation": "pulse",
  "style": "contour_point",
  "animationDuration": 300,
  "strokeColor": "0099FF",
  "strokeWidth": 2
}

visualFeedback.animationDuration

Defines the duration of the animation when a rect is animated to the next detected rect. This is only used in visualFeedback.style RECT.

Range Unit JSON-Type Default Mandatory
- ms Integer 75

visualFeedback.redrawTimeout

Deprecated since version 3.6: Use visualFeedback.animationDuration (with no visualFeedback.animation specified) instead

Defines the timeout between redrawing the updated visual feedback. This is only used in style visualFeedback.style CONTOUR_RECT, CONTOUR_UNDERLINE and CONTOUR_POINT

Range Unit JSON-Type Default Mandatory
- ms Integer 0