Tyre Scanner

About

The CaRool Tyre Scanner provides a simple way to get your tyre reference from a picture.

Iframe Integration

The CaRool Tyre Scanner can be integrated through an iFrame by loading your version of the Tyre Scanner with this url : https://<your-company>.ca-rool.com/#/scanner

Prerequisites

To use our Tyre Scanner you need to

• Provide camera access to the iFrame thanks to this tag

<iframe allow=camera>

• add the following meta tag for a correct rendering

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

• The Self Check Driver application will automatically adapt his size to the available space given by the iframe. Therefor our advice is to use dynamic sizing for the iframe like 'flex css' and avoid fixed sizing for better integration.

Pass data to Tyre Scanner

Query Parameters

You can pass data to the Tyre Scanner using query parameters. Warning all query parameters must be encoded to be properly used.

Parameters	Value	Comments
license	String	License with any of the validated country format
licenseCountryCode	String	ISO 3166-1 - alpha 2 code (eg: fr) - Used to ensure license format is correct
embedded	Boolean	Set this value to true to set the application as ‘embedded’ and disable various UI features

URL Path

The default URL to access your version of the Self Check Driver is has follows https://<your-company>.ca-rool.com/#/scanner

However you can add some option to this url:

Parameters	Value	Comments	Example
campaign	String	If you need to manage a campaign for a specific link	https://<your-company>.ca-rool.com/#/scanner/<campaign>
subcompany	String	If you need to manage subcompany with dedicated configuration	https://<your-company>.ca-rool.com/#/scanner/company/<subcompany>

Get data from Tyre Scanner

To be notified about what is happening inside the Tyre Scanner you can listen for events.

<script type="text/javascript">
    window.addEventListener('message', (message) => {
        if (message.data.type === 'onFinished') {
            console.log('onFinished', message.data.data)
        }
        if (message.data.type === 'onError') {
            console.log('onError', message.data.error)
        }
        if (message.data.type === 'onStarted') {
            console.log('onError', message.data.data)
        }
    });
</script>

Structures

Messages Structures

{
  type: string,
  data: {
    action: string,
    data: object,
    error: string
  }
}

type	Comments
onFinished	Occurs when an action finished
onError	Occurs when an error happened
onStarted	Occurs when an action is loaded

action	Comments
analysis	Occurs when something happens during the analysis process
license	Occurs when the license view is opened
tutorial	Occurs when the tutorial view is opened
photoshoot	Occurs when the photoshoot view is opened and at every photoshoot step changes. Extra data : `{step: {position: number, type: 'WEAR' OR 'REFERENCE'}}
send	Occurs when the send view is opened

data	Comments
recommendations	Recommendations made by the Tyre Scanner or empty structure ({}) if no recommendation could be done
predictions	Predictions made by the Tyre Scanner or empty structure ({}) if no predictions could be done

error	Comments
NO_RECOMMENDATIONS	No recommendations could be done due to an error

Recommendations Structures

{
  front: {
    width: number,
    ratio: number,
    diameter: number,
    loadIndex: number,
    speedIndex: string,
    isZr: false
  },
  rear: {
    width: number,
    ratio: number,
    diameter: number,
    loadIndex: number,
    speedIndex: string,
    isZr: boolean
  }
}

Predictions Structures

{
  front: {
    width: number,
    ratio: number,
    diameter: number,
    loadIndex: number,
    speedIndex: string,
    isZr: boolean,
    brandName: string,
    productName: string,
    productKeyword: string
    threePmsf: boolean,
    season: string,
    runOnFlat: boolean
  },
  rear: {
    width: number,
    ratio: number,
    diameter: number,
    loadIndex: number,
    speedIndex: string,
    isZr: boolean,
    brandName: string,
    productName: string,
    productKeyword: string
    threePmsf: boolean,
    season: string,
    runOnFlat: boolean
  }
}

Customisation

Your version of the Tyre Scanner can be fully customized to your need. Below you can find the list of options to communicate to the CaRool Team if you want another behavior than the default one.
If you need extra customisation which is not in the list below please contact us.

Configuration	Options
Theming	A primary and secondary colors can be used to fully customised the UI of your Tyre Scanner
Logo	Your logo (svg) and favicon (ico, png) can be used
Font	Customized font (normal and bold)
Languages	Supported languages
License Countries	The list of authorized license countries
Not supported Image	Custom Not Supported image for the 'browser not supported' page