UI Elements (deprecated)
UI Elements was deprecated in version 51.4.0, and replaced with UI Feedback config, which offers a wider range of possibilities to customize the scanning experience for your end users. It is highly recommended to update your TIN view config to take advantage of this feature. For more details look at migrating deprecated UI Elements. |
The deprecated UI elements are still present in the latest version and not yet removed to not break any existing implementation. |
Android UI elements (deprecated)
The following controls are available on Android: Instruction Label, Cutout Image, and Feedback. As an example on Android:
Instruction Label
, Cutout Image
and a Feedback
user interface{
"licenseKey": "YOUR_LICENSE_KEY",
"options": {
"instruction": {
"text": "Please make sure the entire DOT number is inside the cutout.",
"textColor": "000000",
"backgroundColor": "FF007ACC"
},
"imageCutout": {
"image": "dot_overlay"
},
"feedback": {
"format": {
"text": "Wrong format detected",
"image": "ic_wrong_format"
},
"brightness": {
"too_high": {
"text": "Too bright",
"image": "ic_too_bright"
},
"too_low": {
"text": "Too dark",
"image": "ic_too_dark"
}
},
"distance": {
"text": "Position cutout correctly",
"image": "ic_move_back"
},
"sound": "info_sound_TIN.wav"
}
},
"viewPluginConfig": {
"pluginConfig": {
"id": "TIRE",
"cancelOnResult": true,
"tinConfig": {
"scanMode": "DOT",
"upsideDownMode": "AUTO"
}
}
}
}
Instruction Label
The instruction label is a static text label that can be configured to provide specific instructions to the user. It appears directly above the cutout box in the scan view. Configure it with the instruction
node.
Key | Value |
---|---|
|
The text displayed in the label |
|
A hex string denoting the color of the label text |
|
A hex string indicating the color of the label background. The default is empty (transparent color). |
Cutout Image
The cutout image is a static image view that is shown inside the cutout area. It is aligned on the left and fits the whole height of the cutout area (keeping image aspect). Configure it with the imageCutout
node.
Key | Value |
---|---|
|
The name of the image located on the drawable resources folder |
Feedback
The feedback element is meant to provide the user real-time feedback about environment conditions (brightness, distance) or content (format). It appears directly below the cutout box in the scan view. Each feedback
element can be designed with a text or/and an image:
Key | Value |
---|---|
|
The text displayed in the feedback label |
|
The name of the image located on the drawable resources folder |
Each feedback notification is kept on the screen for 2 seconds. If within this period a new notification was received, the feedback output is overwritten and the screen timeout is renewed. |
Feedback |
Variant |
Value |
|
(none) |
Fired when a result format is different than expected |
|
|
Fired when too much light is being received with the image |
|
|
Fired when the image is too dark to be processed |
|
(none) |
Fired when the contours detected are to small or out of bounds of cutout |
Finally, a sound file can be configured for each feedback notification received. Configure it with the sound
node.
If a feedback sound is configured, the .wav file must be present on the assets folder of the app. |
If any of the feedback resources (images or sounds) are not available at runtime, the plugin will ignore them and continue its execution without breaking or throwing an exception. |
The following image files are deployed as default on the plugin and can be used on your app: dot_overlay , ic_wrong_format , ic_too_bright , ic_too_dark , ic_move_back , as well as the sound file info_sound_TIN.wav
|
The |
Migrating deprecated UI Elements to new UI Feedback Config for TIN/DOT
Below is a demonstration on how to replace your deprecated UI Elements with the new tin_with_instruction_overlay_image_text_sound_feedback
preset for UI Feedback Config feature.
Before - deprecated UI Elements
|
After - UI Feedback Config with
tin_with_instruction_overlay_image_text_sound_feedback preset
|
Applying this change will make your application behave the same as before. Be aware that new images have been included to make visual feedback even more intuitive for users. To apply the new available resources, refer to TIN Preset usage sample |
Get help
If there is anything you are missing, you require support, or want to provide us with feedback, please reach out to us via https://support.anyline.com, where you either may find helpful information in our Knowledge Base or you can open a Support Ticket for more specific inquiries. In order to better assist you, please include any code of your Anyline integration and any ScanViewConfig you are using. |