User Interface

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

Usage

Use the uiCustomizationLayer property:

JavaScript

// allows you to depersonalize the document's data
DocumentReader.setConfig({
    customization: {
        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"
              }
            }
          ]
        }
    },
}, (str) => { console.log(str) }, (error) => { console.log(error) });

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