evrythng-scan.js v2.0

With the release of evrythng-scan.js version 2.0 we have made some improvements to the JavaScript SDK that might break code that uses the following functionality. In each case, you're shown how to change your old code to the new style of using a particular feature.

See the release notes for more information.

📘

Note

If you currently include a specific (that is, not the latest bundle) version of the SDK in your application, you can safely continue to use it without modifying your app until you can migrate your code to the new version.

API Status
Stable: /scan/identifications
Deprecated: /scan/recognitions

Scan Type Is No Longer Supported

The type of identifier to search for in the scanned image (QR code, barcode, and so on) was previously specified with the type option:

Scan.setup({
  type: 'qrcode'
});

In version 2.0, the type of identifier is now specified using a filter parameter (see all available options) that tells the Identifier Recognition API which method of recognition to use, as well as the type of identifier it's to look for. For example, to look for only 2D QR codes:

// As an object
app.scan({
  filter: {
    method: ‘2d’,
    type: ‘qr_code’
  }
}).then(console.log);

// As a query parameter string
app.scan({
  filter: ‘method=2d&type=qr_code’
}).then(console.log);

Scan Actions Will No Longer Be Created Automatically

In the past, a developer could instruct the SDK to create a scans action when a scan resulting in a redirection was performed by the end user in the following manner:

app.scan({
  createScanAction: true
}).then(console.log);

In version 2.0, this option is replaced with explicitly creating a scans type action using thng.action() when a scan is successful. Because actions can't be created by an application resource, the createAnonymousUser option is required. For example:

app.scan({
  filter: {
    method: '2d',
    type: 'qr_code'
  },
  createAnonymousUser: true
}).then((res) => {
  const result = res[0].results[0];

  // Action created as a User
  return result.thng.action('scans').create();
}).catch((error) => {
  // Report an unrecognised scan
  console.log(error);

  // Get the error code
  if(error.status === 404) {
    console.log(‘Image was not recognised!’);
  }
});

Other Unsupported Options

Redirect

Previously, developers could specify to automatically redirect the user to the redirection associated with the scanned code using the redirect option:

app.scan({
  redirect: true
}).then(console.log);

In version 2.0, this is done explicitly using the result of the scan using app.redirect():

app.scan({
  filter: {
    method: '2d',
    type: 'qr_code'
  }
}).then((res) => {
  const result = res[0].results[0];

  // Get the first redirection set on the resource
  const redirection = result.redirections[0];
  
  // Send the user to the destination URL, or choose your own
  app.redirect(redirection);
}).catch((error) => {
  // Report an unrecognised scan
  console.log(error);
});

Threshold

In previous SDK versions, the threshold option specified how much a recognition result’s confidence score could deviate from the strongest to be included in the scan response.

app.scan({
  threshold: 25
}).then(console.log);

In version 2.0, a similar operation is done using score in the filter parameter to return results above a certain confidence score. The score for each result is included in the scan response. For example, to request only results over 75%:

app.scan({
  filter: {
    method: 'ir',
    score: '>=75’
  }
}).then(console.log);

Timeout

The timeout option was previously used to limit the time to wait for a response from the API:

app.scan({
  type: ‘objpic’,
  timeout: 1000
}).then(console.log);

In version 2.0, use the timeout option with EVT.setup() from evrythng.js instead:

EVT.setup({
  timeout: 1000
});

app.scan({
  filter: {
    method: '2d',
    type: 'qr_code'
  }
}).then((res) => {
    // Use the result
  console.log(res);
}).catch((error) => {
  // Report an error
  console.log(res);
});

Spinner

The default addition of a spinner to the app’s UI when a request is pending has been removed in version 2.0. You can now add the spinner to your own element or leave it hidden entirely. For an element to show the spinner:

<!-- An example element to attach the spinner to -->
<div id="my-spinner-element" class="bigbox">
  Spinner should go here
</div>

This was previously specified using the spinner object:

// The default values
const options = {
  spinner: {
    enabled: true,
    appendTo: document.getElementById('my-spinner-element'),
    options: {
      length: 30,
      radius: 48,
      hwaccel: true
    }
  }
};

EVT.Scan.setup(options);

This functionality can be replicated in version 2.0 using the spin.js library to display the spinner on an HTML element of your choice. In browser applications, use a CDN link (for example, this spin.js script) in a <script> tag to include it:

// Use your custom element ID for your layout
const target = document.getElementById('my-spinner-element');
const spinner = new Spinner().spin(target); 

app.scan().then(console.log).catch(console.log).then(() => spinner.stop());