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.

TireTreadScanView setup, with default configuration
  • 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:

TireTreadScanView setup, with custom UI configuration
  • 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

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