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
|   └── left
|   └── right
|   └── top
|   └── bottom
└── margin
|   └── start
|   └── end
|   └── left
|   └── right
|   └── top
|   └── bottom
└── size
|   └── width
|   └── height
└── alpha
└── 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
`alpha`	The alpha channel value, represents transparency or opacity of a color for each pixel. Can be any value between 0 and 1, where 0 is for full transparency and 1 is for full opacity.
`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
|   └── left
|   └── right
|   └── top
|   └── bottom
└── size
|   └── width
|   └── height
└── alpha
└── 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
`alpha`	The alpha channel value, represents transparency or opacity of a color for each pixel. Can be any value between 0 and 1, where 0 is for full transparency and 1 is for full opacity.
`position`	Position: `h` - Horizontal positioning `v` - Vertical positioning The value should be in a range from 0 to 2.