User Interface
To the Camera UI, you can add as many text and graphic elements as needed.
Usage
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
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:
|
fontColor |
Font color, hex. |
fontSize |
Font size, dp - Android, pt - iOS. |
fontName |
Font name. |
alignment |
Defines how text aligns in the space it appears:
|
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:
|
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:
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:
|
padding |
The space between an element's border and the element's content. |
margin |
The space around an element's border. |
size |
Size:
|
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:
The value should be in a range from 0 to 2. |