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:

Configuring a ViewConfig with 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

text

The text displayed in the label

textColor

A hex string denoting the color of the label text

backgroundColor

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

image

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

text

The text displayed in the feedback label

image

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

format

(none)

Fired when a result format is different than expected

brightness

too_high

Fired when too much light is being received with the image

brightness

too_low

Fired when the image is too dark to be processed

distance

(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 format and distance feedback are currently only supported for the TIN/DOT scanning capability.

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
{
    "licenseKey": "YOUR_LICENSE_KEY",
    "options": {
-        "instruction": {
-          "text": "Please make sure the entire DOT number is inside the cutout.",
-          "textColor": "FFFFFF"
-        },
-        "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"
            }
        }
    }
}
After - UI Feedback Config with tin_with_instruction_overlay_image_text_sound_feedback preset
{
    "licenseKey": "YOUR_LICENSE_KEY",
    "options": {
    },
    "viewPluginConfig": {
        "pluginConfig": {
            "id": "TIRE",
            "cancelOnResult": true,
            "tinConfig": {
                "scanMode": "DOT",
                "upsideDownMode": "AUTO"
            }
        },
+     "uiFeedbackConfig": {
+       "presets": [
+         {
+           "presetName": "tin_with_instruction_overlay_image_text_sound_feedback",
+           "presetAttributes": [
+             {
+               "attributeName": "instruction_text",
+               "attributeValue": "Please make sure the entire DOT number is inside the cutout."
+             },
+             {
+               "attributeName": "left_overlay_image",
+               "attributeValue": "dot_overlay"
+             },
+             {
+               "attributeName": "lighting_toodark_image",
+               "attributeValue": "ic_too_dark"
+             },
+             {
+               "attributeName": "lighting_toobright_image",
+               "attributeValue": "ic_too_bright"
+             },
+             {
+               "attributeName": "distance_moveback_image",
+               "attributeValue": "ic_move_back"
+             },
+             {
+               "attributeName": "distance_movecloser_image",
+               "attributeValue": "ic_move_closer"
+             },
+             {
+               "attributeName": "format_wrong_image",
+               "attributeValue": "ic_wrong_format"
+             },
+             {
+               "attributeName": "date_wrong_image",
+               "attributeValue": "ic_wrong_date"
+             },
+             {
+               "attributeName": "lighting_toodark_text",
+               "attributeValue": "Too dark"
+             },
+             {
+               "attributeName": "lighting_toobright_text",
+               "attributeValue": "Too bright"
+             },
+             {
+               "attributeName": "distance_moveback_text",
+               "attributeValue": "Position cutout correctly"
+             },
+             {
+               "attributeName": "distance_movecloser_text",
+               "attributeValue": "Position cutout correctly"
+             },
+             {
+               "attributeName": "format_wrong_text",
+               "attributeValue": "Wrong format detected"
+             },
+             {
+               "attributeName": "date_wrong_text",
+               "attributeValue": "Wrong date detected"
+             },
+             {
+               "attributeName": "lighting_toodark_sound",
+               "attributeValue": "info_sound_TIN.wav"
+             },
+             {
+               "attributeName": "lighting_toobright_sound",
+               "attributeValue": "info_sound_TIN.wav"
+             },
+             {
+               "attributeName": "distance_moveback_sound",
+               "attributeValue": "info_sound_TIN.wav"
+             },
+             {
+               "attributeName": "distance_movecloser_sound",
+               "attributeValue": "info_sound_TIN.wav"
+             },
+             {
+               "attributeName": "format_wrong_sound",
+               "attributeValue": "info_sound_TIN.wav"
+             },
+             {
+               "attributeName": "date_wrong_sound",
+               "attributeValue": "info_sound_TIN.wav"
+             }
+           ]
+         }
+       ]
+     }
    }
}

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, reach out to us via https://support.anyline.com.