With the release of evrythng-scan.js version 2.0 we have made some improvements to the JavaScript SDK that may break some code that uses the following functionality. In each case, you will be shown how to adapt any old code into the new style of using a particular feature.

See the release notes for information on the rationale behind the changes.

📘

Note

If you currently include a specific (i.e: not the 'latest' bundle) version of the SDK in your application you may safely continue to use it without modifying your app, until such time as you are able to migrate your code to the new version.

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

Scan type is no longer supported

Specifying the type of identifier to search for in the scanned image (QR code, barcode etc.) 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 should 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 request the SDK 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() once a scan is successful. Since actions cannot be created by an application resource, the createAnonymousUser option is required. An example is shown below:

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 should be 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 was used to specify how much a recognition result’s confidence score may 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 should be done using score in the 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 taken 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 some 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 choosing. In browser applications, use a CDN link (example) 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());