Page Comparison

Introduction

...

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.

...

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

Providing a Textual Tire Size Example

Expand
title Click to expand
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

Flash/Torchlight Usage

Lock Screen Orientation & Full Screen Mode

// 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);
};

// (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
  }
}

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.

...

Links to Documentation

...