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 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());
Updated over 4 years ago