Best Practices: Integration of the Tire Size Scanner - Web SDK (AnylineJS)

• 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.

• 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:

• 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.
  

• 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.
  

• 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.

• You can also use this SDK feature (code below) 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 at the end of the document.

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

• As described in the section above, the result string can be split into the individual parameters or noise can be removed. The string can also be put into a structured format (e.g. by inserting spaces at selected positions). If the result string is to be displayed to the user, it improves readability if structure is brought in.

• Even though the Anyline SDK allows you to freely change the position of the cutout, we recommend placing the cutout in the centre. Depending on the device, the camera usually focuses primarily on the centre of the image by default. Especially for an end-user application that is supposed to work on a large number of devices, we therefore recommend placing the cutout in the centre.