This post is a part 22 of Intel XDK Complete Tutorial post series.
In this tutorial we will learn Intel XDK barcode API. Before we proceed with building a application using Intel XDK barcode API we first need to learn what barcode is and how we can generate barcodes using PHP.
What is Barcode?
A barcode is a machine generated image representing a string. This image is generated using Barcode encoding algorithm. When this image is decoded by using barcode algorithm we get the string. Every barcode represents a unique string. Barcode image can be scanned into a digital device(i.e., computer, mobile etc) for decoding using Barcode Reader. Barcodes come in many different representations
Each of this type has its own encoding and decoding algorithms. Most barcode scanners are limited to scanning only one type of barcode representation.
Where is Barcode used?
Barcode is used wherever we don’t want to type a string, rather we scan a image and get the string into input. They are used in shopping malls, websites, bookstores etc.
In bookstores barcode represents the ISBN of the book. Therefore while purchasing the book the book seller doesn’t have to type the ISBN instead scan it.
In websites barcode represents the URL of the webpage. Therefore if we want to open the webpage in phone then we can just scan the barcode image and open the URL, no need to type the whole URL.
Generating Barcode In PHP
We will be generating QR Code(a type of barcode) because Intel XDK Barcode API understands and decodes QR Code. We will be using PHP QR Code library to generate the QR Code image of a string.
This code generates a QR Code
View Demo
<?php
include("qrcode.php");
$qr = new qrcode();
$qr->text("QNimate");
echo "<p><img src='".$qr->get_link()."' border='0'/></p>";
?>
include("qrcode.php");
$qr = new qrcode();
$qr->text("QNimate");
echo "<p><img src='".$qr->get_link()."' border='0'/></p>";
?>
Scanning Barcode using Intel XDK
Intel XDK barcode API uses the camera to scan the barcode. Here is the JavaScript code to open the camera to scan the barcode and decode the message.
intel.xdk.device.scanBarcode() is the function which launches the camera to scan the barcode. intel.xdk.device.barcode.scan is the event which is fired after the scan is completed. To use this api you must include Intel XDK Device Plugin in your app.
This is how the API works.
function scanNow()
{
//this function launches the QR Code scanner. This function must be called inside a event handler.
intel.xdk.device.scanBarcode();
}
//this event is fired when scanning is completed
document.addEventListener("intel.xdk.device.barcode.scan",function(evt){
if (evt.success == true) {
//successful scan
var string = evt.codedata;
}
else
{
//failed scan
alert("Please try again");
}
},false);
{
//this function launches the QR Code scanner. This function must be called inside a event handler.
intel.xdk.device.scanBarcode();
}
//this event is fired when scanning is completed
document.addEventListener("intel.xdk.device.barcode.scan",function(evt){
if (evt.success == true) {
//successful scan
var string = evt.codedata;
}
else
{
//failed scan
alert("Please try again");
}
},false);
Here is the complete code for the application:
<!DOCTYPE html>
<html>
<head>
<title>Blank Hybrid App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="scanNow();">Scan</button>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function scanNow()
{
//this function launches the QR Code scanner.
intel.xdk.device.scanBarcode();
}
//this event is fired when scanning is completed
document.addEventListener("intel.xdk.device.barcode.scan",function(evt){
if (evt.success == true) {
//successful scan
alert(evt.codedata);
}
else
{
//failed scan
alert("Please try again");
}
},false);
</script>
</body>
</html>
<html>
<head>
<title>Blank Hybrid App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="scanNow();">Scan</button>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function scanNow()
{
//this function launches the QR Code scanner.
intel.xdk.device.scanBarcode();
}
//this event is fired when scanning is completed
document.addEventListener("intel.xdk.device.barcode.scan",function(evt){
if (evt.success == true) {
//successful scan
alert(evt.codedata);
}
else
{
//failed scan
alert("Please try again");
}
},false);
</script>
</body>
</html>
Here is the images of the app
