This document provides support and recommendations on how to integrate the Tire Size scanner into web pages or web applications to achieve the best possible usability and user experience.
Extract the Parameters (Width, Ratio …) of the Tire Size
Beside the scanned result string, the SDK also returns the different parameters of the Tire Size string (width, ratio, diameter, load index, speed rating …). A detailed overview of all fields can be found here.
How to access the different fields is described here in the documentation - there you can also find an update guide, if you used the Tire Size scanner already before SDK version 42 and want to use this feature.
Best Practices for User Guidance
Provide a possibility to replace the manual input by scanning (call to action)
In the workflow where the user is supposed to enter the tire size, ideally a button should be placed to allow the user to use the scanner instead. The button should clearly communicate to the user what to expect.
Provide information about how the scanner works and what the user has to do
For an end-user / self-service application, it is important to provide guidance to the user before the user uses the scanner. For this purpose, a tutorial video, a tutorial animation, a tutorial graphic or a short written tutorial is suitable.
In any case, you should communicate to the user what information they should be looking for on the tire, an example image of a tire size is definitely very helpful at this point. A realistic expectation should also be communicated that scanning may take a little longer (which is the case on older devices).
While the user is looking at the instructions, the scanner can already be loaded and initialized in the background (does not work with a redirect in between). For example, the instructions can be displayed one visible layer above the scanner.
Reduce the Initialisation Time of the Scanner
The Anyline JavaScript SDK has a pre-loading functionality, more details about this can be found in the documentation. It is even better if the scanner is already initialized (hidden) "under" an instruction overlay to keep the effective waiting time for the user as short as possible.
User Guidance & Elements in the ScanView
ScanView Setup
The user should be able to cancel the scanning process at any time in order to make the entry manually instead. In the end, there is always a possibility that the user just does not like the scanning process and prefers to enter the data manually, especially if they are a domain expert.
Although the scanning process is very simple, some users may certainly feel overwhelmed with the functionality. We recommend therefore that after about 10-15 seconds a message is displayed asking if the user wants to return to manual input, in case the device is too slow or the user is not able to perform the scan successfully.
Providing a Textual Tire Size Example
In order to provide the best usability for every user, even if they have absolutely no affinity for tires, we recommend providing guidance in the ScanView. That is, to communicate during the scan process what the user should look for.
We recommend showing a picture of a tire size or to give a textual example of a Tire Size.
Example:
Cancel Option
The user should be able to cancel the scanning process at any time in order to make the entry manually instead. In the end, there is always a possibility that the user just does not like the scanning process and prefers to enter the data manually, especially if they are a domain expert.
Although the scanning process is very simple, some users may certainly feel overwhelmed with the functionality. We recommend therefore that after about 10-15 seconds a message is displayed asking if the user wants to return to manual input, in case the device is too slow or the user is not able to perform the scan successfully.
Flash/Torchlight Usage
Since tires often have to be scanned in low light conditions, the user should have the possibility to use the Flashlight. Unfortunately, iPhones block access to the Flashlight API of the browser, so the use of the flash is only possible on Android phones, which is a technical limitation that has nothing to do with Anyline.
However, since iPhones are equipped with a very good camera anyway, which also works well in low-light conditions, this is not a strong limitation. Therefore, we recommend that the option to turn on the flash is only visible on Android. Example code for flashlight usage can be found in the SDK example code.
Lock Screen Orientation & Full Screen Mode
We generally recommend activating the "Full Screen Mode" in the browser and fixing the screen orientation when scanning. This way, the user has the full screen available for scanning and the screen cannot rotate during scanning. This is very easy to implement using JavaScript, you can find information about the browser API here.
For locking the screen orientation in the web browser activating the "Full Screen Mode" before is mandatory.
You can also use this SDK feature (Example 2) to lock the screen orientation. If you want to be in full control and don’t want to use the SDK API, you can also find an example implementation (Example 2).
Example 1:
// import the Web SDK
const { init, errorCodes } = window.anylinejs;
// if copied into node_modules
// import { init, errorCodes } from 'anyline-js';
// create a view configuration
const viewConfig = {
...
};
const anylicense = 'xxxxxxx-your-license-xxxxxxx';
// access the container you want to mount the Web SDK into
const root = document.getElementById('root');
// initialize the Web SDK with optional presets
// presets will override some dimension configuration of your viewConfig and modules in the Web SDK config
const Anyline = init({
lockPortraitOrientation: {
// set the element which will be used for fullscreen mode.
element: root,
// enable lock screen orientation
lock: true,
},
preset: 'germanid',
viewConfig,
license: anylicense,
element: root,
});
Anyline.startScanning();
Anyline.onResult = function(result) {
console.log('Anyline has result: ', result);
};
Example 2:
// (A) LOCK SCREEN ORIENTATION
function lock (orientation) { // 'portrait' or 'landscape'
// (A1) GO INTO FULL SCREEN FIRST
try {
let de = document.documentElement;
if (de.requestFullscreen) { de.requestFullscreen(); }
else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); }
else if (de.webkitRequestFullscreen) { de.webkitRequestFullscreen(); }
else if (de.msRequestFullscreen) { de.msRequestFullscreen(); }
// (A2) THEN LOCK ORIENTATION
screen.orientation.lock(orientation);
} catch (e) {
// not supported in the browser
}
}
// (B) UNLOCK SCREEN ORIENTATION
function unlock () {
// (B1) UNLOCK FIRST
try {
screen.orientation.unlock();
// (B2) THEN EXIT FULL SCREEN
if (document.exitFullscreen) { document.exitFullscreen(); }
else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
else if (document.msExitFullscreen) { document.msExitFullscreen(); }
} catch (e) {
// not supported in the browser
}
}
Unfortunately, Apple/iPhones (iOS) only offer this API starting with iOS 16.4 (in Safari only) that means locking the screen orientation on iOS is in some cases not possible. On Android this API is fully supported.
In this manner, the screen orientation could theoretically be forced to "landscape mode", if desired.
Position and Size of the Cutout
Result Object of the SDK
Example
Updating to the Newest Version
Updating to the latest version is very easy and does not take much time. Provided you integrate the Anyline JavaScript SDK with NPM (Node Package Manager), you need to update as usual (like any other dependency). If you manage your dependency manually, you must replace all the JavaScript files with the latest ones. The latest version can always be found in the Anyline GitHub repository. If the JavaScript SDK is obtained via CDN, only the version number in the links must be adjusted.
