User Interface

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

Usage

Swift

let jsonString = "{ \"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\" } } ] }"

if let data = jsonString.data(using: String.Encoding.utf8) {
    do {
        let json = try JSONSerialization.jsonObject(with: data, options: .mutableContainers) as? [String:Any]
        DocReader.shared.customization.customUILayerJSON = json
    } catch {
        print("Something went wrong")
    }
}

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