Default UI - Customizing
In the Scan Process page, we learned how to configure the TireTreadScanView
. Without specifying any properties, the Default UI is automatically active.
-
Android
-
iOS
TireTreadScanView(
onScanAborted = ::onScanAborted,
onScanProcessCompleted = ::showResult,
callback = null,
onError = { measurementUUID, exception ->
/* Handle initialization error */
finish()
})
TireTreadScanViewKt.TireTreadScanView(
onScanAborted: onScanAborted,
onScanProcessCompleted: showResult,
callback: nil
) { measurementUUID, error in
print("Initialization failed: \(error)")
DispatchQueue.main.async {
self.navigationController?.popViewController(animated: true)
}
}
While ready out of the box, the Default UI is also customizable.
By providing a custom UiConfig
object to the TireTreadConfig
you can customize the texts, and also hide default elements as needed:
-
Android
-
iOS
-
JSON
val customUiConfig = UIConfig().apply {
orientationWarningConfig.text = "Gire o dispositivo para o modo paisagem"
orientationWarningConfig.rotationLockHint = "Certifique-se de que a rotação automática está ativa"
}
val customConfig = TireTreadConfig().apply {
uiConfig = customUiConfig
}
TireTreadScanView(
config = customConfig,
onScanAborted = ::onScanAborted,
onScanProcessCompleted = ::openResultScreen,
callback = null,
onError = { measurementUUID, exception ->
/* Handle initialization error */
finish()
})
let customUiConfig = UIConfig();
customUiConfig.orientationWarningConfig.text = "Gire o dispositivo para o modo paisagem"
customUiConfig.orientationWarningConfig.rotationLockHint = "Certifique-se de que a rotação automática está ativa"
let customConfig = TireTreadConfig()
customConfig.uiConfig = customUiConfig
TireTreadScanViewKt.TireTreadScanView(
config: customConfig,
onScanAborted: onScanAborted,
onScanProcessCompleted: showResult,
callback: nil
) { measurementUUID, error in
print("Initialization failed: \(error)")
DispatchQueue.main.async {
self.navigationController?.popViewController(animated: true)
}
{
"uiConfig": {
"distanceIndicatorConfig": {
"textOk": "Mantenha a distância.",
"textMoveCloser": "Chegue mais perto.",
"textMoveAway": "Aumente a distância."
},
"focusPointTooltipConfig": {
"text": "Mova o dispositivo para frente e para trás para detectar o pneu."
},
"tapToStartScanningTooltipConfig": {
"textOk": "Toque na tela para iniciar o processo.",
"textNotOkMetric": "Mantenha o aparelho a cerca de 20cm de distância do pneu."
},
"uploadViewConfig": {
"text": "Enviando imagens, aguarde..."
},
"orientationWarningConfig": {
"text": "Gire o dispositivo para o modo paisagem",
"rotationLockHint": "Certifique-se de que a rotação automática está ativa"
}
}
}
// In you code:
TireTreadScanView(
config = "custom_ui.json",
onScanAborted = ::onScanAborted,
...
If any element information is not provided, its default value will be used. |
Here are the Default UI elements that can be customized, and their respective property names within the
UIConfig
class:
Element | Property Name |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|