UI Feedback
UI feedback elements can enhance the scanning experience, by informing the user about environmental conditions detected during scanning. Incorporating such elements during the scanning experience can be beneficial in many ways. For example incorporating visual cues (such as images or text) next to the cutout within the scan view can guide the user on how or what to scan.
Quick Start
viewConfigimport { init, uiFeedbackPresets } from '@anyline/anyline-js'
const anyline = init({
// ...
viewConfig: {
uiFeedback: {
dynamic: uiFeedbackPresets.tin,
static: "Place entire TIN inside the cutout"
}
}
// ...
})
Available UI Feedback
Static Feedback
Is constantly displayed, for cases such as placing text above the cutout to give instructions about scanning process to the user.
Available Static Feedback:
| Feedback Type | Available for presets |
|---|---|
instruction text displayed above the cutout. |
Available for all presets |
Dynamic Feedback
Available for selected presets and gives real-time feedback about the scanning process, such as whether the brightness of the environment is insufficient, or whether the device is located too far from the target.
| Feedback Type | Available for presets |
|---|---|
brightness |
|
distance |
|
Customising UiFeedback elements
You can alternatively provide your own images, and choose which types of feedback will be enabled. Below example will only show guidance for feedback about lighting, therefore omitting feedback for distance.
import { init, UiFeedbackConfig } from '@anyline/anyline-js'
const customUiConfig: UiFeedbackConfig = {
presetName: 'tin',
lighting: {
imageTooDark: {
src: 'your_image_path_here.png',
alt: 'too dark'
},
imageTooBright: {
src: 'your_image_path_here.png',
alt: 'too bright'
},
}
};
const anyline = init({
// ...
viewConfig: {
uiFeedback: {
dynamic: customUiConfig
}
}
// ...
})Bundled Assets
The following image assets, along with their default alt text, are included with the SDK bundle and can be used with your app by referencing these names within the preset:
| Image | Name |
|---|---|
|
|
|
|
|
|
|
|