User Interface

To the Camera UI, you can add as many text and graphic elements as needed.

Usage

Use the uiCustomizationLayer property:

JavaScript

DocumentReader.setConfig({
    processParams: {
      uiCustomizationLayer: {
        "objects": [
          {
            "label": {
              "text": "Place the document\ninside the camera frame",
              "position": {"h": 1.0, "v": 1.0},
              "background": "#00FFFFFF",
              "fontColor": "#FFEB6517",
              "fontSize": 18,
              "alignment": "center"
            }
          }
        ]
      }
    },
}, function (m) { }, function (e) { console.log(e); });

Examples

#1#2

View JSON

JSON Structure

The JSON with all possible params can be found here.

objects
└── label
└── image

Name	Description
`label`	Text elements
`image`	Graphic elements

Label

Adds text elements to the UI.

label
└── text
└── fontStyle
└── fontColor
└── fontSize
└── fontName
└── alignment
└── background
└── borderRadius
└── padding
|   └── start
|   └── end
|   └── top
|   └── bottom
└── margin
|   └── start
|   └── end
|   └── top
|   └── bottom
└── size
|   └── width
|   └── height
└── position
|   └── h
|   └── v

Name	Description
`text`	Text
`fontStyle`	Defines whether a font should be styled with a normal, italic, or bold face. Possible values: `normal` - the text is shown normally `italic` - the text is shown in italics `bold` - the text is shown in bold weight
`fontColor`	Font color, hex
`fontSize`	Font size, dp - Android, pt - iOS
`fontName`	Font name
`alignment`	Defines how text aligns in the space it appears: `center` - align the text in the center of the container `left` - align the text on the left edge of the container `right` - align the text on the right edge of the container
`background`	Background color, hex
`borderRadius`	Defines the radius of the element's corners, lets you add rounded corners to elements
`padding`	The space between an element's border and the element's content
`margin`	The space around an element's border
`size`	Size: `width` - Width, dpi `height` - Height, dpi
`position`	Position: `h` - Horizontal positioning `v` - Vertical positioning The value should be in a range from 0 to 2

Warning

If both position and margin are used, position has the priority.

Image

Adds graphic elements to the UI.

image
└── data
└── name
└── background
└── borderRadius
└── contentMode
└── padding
|   └── start
|   └── end
|   └── left
|   └── right
|   └── top
|   └── bottom
└── margin
|   └── start
|   └── end
|   └── top
|   └── bottom
└── size
|   └── width
|   └── height
└── position
|   └── h
|   └── v

Name	Description
`data`	Image in the Base64 format
`name`	File name (for Android: the file is taken from the `drawable` folder)
`background`	Background color, hex
`borderRadius`	Defines the radius of the element's corners, lets you add rounded corners to elements
`contentMode`	Defines how a view adjusts its content when its size changes: `fill` - scale the content to fit the size of itself by changing the aspect ratio of the content if necessary `crop` - scale the content to fit the size of the view by maintaining the aspect ratio `center` - center the content in the view’s bounds, keeping the proportions the same
`padding`	The space between an element's border and the element's content
`margin`	The space around an element's border
`size`	Size: `width` - Width, dpi `height` - Height, dpi
`position`	Position: `h` - Horizontal positioning `v` - Vertical positioning The value should be in a range from 0 to 2