Classic UI - Customizing

In the Scan Process page, we learned how to configure the scan UI. To use the Classic UI, set the appearance property to Classic in your UIConfig.

Starting a scan with default configuration
  • Android

  • iOS

AnylineTireTreadScanner().scan(this, TireTreadConfig()) { outcome ->
    when (outcome) {
        is CompletedOutcome -> {
            // Scan completed -- use outcome.measurementUUID to fetch results
        }
        is AbortedOutcome -> {
            // User aborted the scan
        }
        is FailedOutcome -> {
            Log.e("MY_APP", "Scan failed: ${outcome.error.message}")
        }
    }
}
AnylineTireTreadScanner().scan(from: self, config: TireTreadConfig()) { outcome in
    switch outcome {
    case let completed as CompletedOutcome:
        // Scan completed -- use completed.measurementUUID to fetch results
    case let aborted as AbortedOutcome:
        // User aborted the scan
    case let failed as FailedOutcome:
        print("Scan failed: \(failed.error.message)")
    default:
        break
    }
}

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

By providing a custom UiConfig object to the TireTreadConfig you can customize the texts:

Starting a scan with custom UI configuration
  • Android

  • iOS

  • JSON

val config = TireTreadConfig().apply {
    uiConfig.apply {
        orientationWarningConfig.text = "Gire o dispositivo para o modo paisagem"
        orientationWarningConfig.rotationLockHint = "Certifique-se de que a rotação automática está ativa"
    }
}

AnylineTireTreadScanner().scan(this, config) { outcome ->
    when (outcome) {
        is CompletedOutcome -> openResultScreen(outcome.measurementUUID)
        is AbortedOutcome -> finish()
        is FailedOutcome -> {
            Log.e("MY_APP", "Scan failed: ${outcome.error.message}")
            finish()
        }
    }
}
let config = TireTreadConfig()
config.uiConfig.orientationWarningConfig.text = "Gire o dispositivo para o modo paisagem"
config.uiConfig.orientationWarningConfig.rotationLockHint = "Certifique-se de que a rotação automática está ativa"

AnylineTireTreadScanner().scan(from: self, config: config) { outcome in
    switch outcome {
    case let completed as CompletedOutcome:
        self.openResultScreen(uuid: completed.measurementUUID)
    case let aborted as AbortedOutcome:
        self.navigationController?.popViewController(animated: true)
    case let failed as FailedOutcome:
        print("Scan failed: \(failed.error.message)")
        self.navigationController?.popViewController(animated: true)
    default:
        break
    }
}
{
  "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"
    }
  }
}

If any element information is not provided, its default value will be used.

Here are the Classic 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

Upload View

uploadViewConfig

Orientation Warning

orientationWarningConfig

Tire Width Input

tireWidthInputConfig

Missing Permission

missingPermissionConfig