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.

  • Kotlin

  • Swift

val svConfig = TireTreadScanViewConfig()

TireTreadScanView(
    config = svConfig,
    onScanAborted = onScanAborted,
    onScanProcessCompleted = showResult,
    callback = null,
    onError = { measurementUUID, exception -> /* Handle initialization error */ }
)
let svConfig = TireTreadScanViewConfig()

TireTreadScanViewKt.TireTreadScanView(
    context: self,
    config: svConfig,
    onScanAborted: onScanAborted,
    onScanProcessCompleted: showResult,
    callback: nil
) { measurementUUID, error in
    // Handle initialization error
}

While ready out of the box, the Default UI is also customizable.

By providing a custom DefaultUiConfig object to the TireTreadScanViewConfig you can customize the texts, and also hide default elements as needed:

  • Kotlin

  • Swift

  • JSON

val customConfig = DefaultUiConfig().apply {
    distanceIndicatorConfig.textMoveAway = "Afaste o dispositivo"
    distanceIndicatorConfig.textMoveCloser = "Aproxime o dispositivo"
    distanceIndicatorConfig.textOk = "Mantenha a distância"
}

val svConfig = TireTreadScanViewConfig().apply {
    defaultUiConfig = customConfig
}

TireTreadScanView(
    config = svConfig,
    onScanAborted = onScanAborted,
    onScanProcessCompleted = showResult,
    callback = null,
    onError = { measurementUUID, exception -> /* Handle initialization error */ }
)
let customUiConfig = DefaultUiConfig()
customUiConfig.distanceIndicatorConfig.textMoveAway = "Afaste o dispositivo"
customUiConfig.distanceIndicatorConfig.textMoveCloser = "Aproxime o dispositivo"
customUiConfig.distanceIndicatorConfig.textOk = "Mantenha a distância"

let svConfig = TireTreadScanViewConfig().apply {
    defaultUiConfig = customUiConfig
}

TireTreadScanViewKt.TireTreadScanView(
    context: self,
    config: svConfig,
    onScanAborted: onScanAborted,
    onScanProcessCompleted: showResult,
    callback: nil
) { measurementUUID, error in
    // Handle initialization error
}
{
  "defaultUiConfig": {
    "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": {
      "text": "Toque na tela para iniciar o processo."
    },
    "uploadViewConfig": {
      "text": "Enviando imagens, aguarde..."
    },
    "orientationWarningConfig": {
      "text": "Oriente o dispositivo para o modo paisagem"
    }
  }
}

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 DefaultUiConfig class:

Element Property Name

Distance Indicator

distanceIndicatorConfig

Focus Point Tooltip

focusPointTooltipConfig

Tap to Start Scanning Tooltip

tapToStartScanningTooltipConfig

Tire Ovelay

tireOverlayConfig

Upload View

uploadViewConfig

Orientation Warning

orientationWarningConfig

Countdown

countdownConfig

Scan Direction

scanDirectionConfig

Tire Width Input

tireWidthInputConfig

Missing Permission

missingPermissionConfig