QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Create a Barcode Scanner Application using Intel XDK and PHP

Create a Barcode Scanner Application using Intel XDK and PHP

barcode-intel-xdk

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

barcode_types

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>";

?>

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);

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>

Here is the images of the app
IMG_0489
IMG_0488

Nov 12, 2014Narayan Prusty
Vibrating Phone using Intel XDKUsing Intel XDK Find if App is Running in Emulator or Device
Comments: 19
  1. vishal
    5 years ago

    sir could u please tell me where to write the php code to include the barcode library..
    thanks in advance

    ReplyCancel
  2. subin
    6 years ago

    Please help . Can i Scan a qrcode from gallery ?

    ReplyCancel
  3. Vinicius
    6 years ago

    What is fastclick.js?

    ReplyCancel
  4. David
    6 years ago

    First of all thanks. But I’m getting an error after building the app in XDK – “intel.xdk.device.scanBarcode is not a function”. Works on test mode. I added the intel xdk device plugin.

    ReplyCancel
    • David
      6 years ago

      Seems like barcode isn’t supported anymore by xdk device plugin. However the new plugin doesn’t work in my app at all.

      ReplyCancel
  5. Richard
    6 years ago

    Hi Narayan,
    Thank you for sharing this excellent article, i need to solve a problem where i can be able to scan numbers without a QR or Barcode e.g numbers on a scratch card and cop them to the dial pad . Can this be possible?? Thank you

    ReplyCancel
  6. charles
    6 years ago

    how do I go about displaying the information from the barcode scanner on a label???

    ReplyCancel
  7. Zack
    7 years ago

    Hi Narayan,
    I’ve done app using qrcode reader. The qrcode provides a link with parameters to an aspx web page. The parameters and the response works fine from a normal web page url. The result is suppose to return some text and an image. I have made no changes to your qrcode example with the XDK settings of your sample. From XDK I get the correct results only if I do not include the image response. If I include image, I get a blank page.
    Am I missing a setting in XDK perhaps

    ReplyCancel
  8. Jitender
    7 years ago

    From where will I get the js files used in bardcode scan sample code?

    Jitender

    ReplyCancel
  9. Https://theworldoftankshack.wordpress.com
    7 years ago

    Magnificent goods from you, man. I’ve take into account your stuff previous to and you are simply extremely fantastic.
    I really like what you’ve acquired here, certainly like what you’re stating and the best way wherein you are saying it.
    You are making it enjoyable and you continue to take care of to keep it wise.
    I cant wait to read much more from you. This is actually a great website.

    ReplyCancel
  10. Jay Forest
    7 years ago

    Narayan, worked great for me! The only question I have is how do I change or remove the url in the pop up (index.html). Either all of it or just the extention (.html). Thanks so much!

    ReplyCancel
  11. Zack Snyders
    7 years ago

    Hi Narayan, please assist me a little more…

    I got your module working file as a full html page on mobile. I now hoever want to make the QR module part of an Intel XDk App Designer page. It is a multi page app and I am missing something. I believe that the functions should be within the index_user_scripts.js within a button event.Example as I am trying to use it below, but nothing happens. WOuld really appreciate your help. I am sure if I can get this working all the other similar pages I want to code within the app will work similar.

    kind regards

    Code as in Intel XDk Index_user_scripts.js

    /* button #scan */

    $(document).on(“click”, “#scan”, function(evt)

    {

    /* your code goes here */

    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);

    });

    This is the code related to the button in the index.html:

    Scan

    ReplyCancel
  12. Zack Snyders
    7 years ago

    No, I used a different library. Will first try this and get back. Thanks

    ReplyCancel
  13. Zack Snyders
    7 years ago

    Hi,
    I successfully tested example with 1st QR code which contains a download link. However QR 2, that contains multiple lines of text, does not scan. No error or anything. It does scan correctly with a free QR scanner I downloaded on my phone. Would appreciate your help with this.
    regards

    ReplyCancel
    • Narayan Prusty
      7 years ago

      Did you use the above mentioned PHP library to generate the barcode.

      ReplyCancel
  14. Richard Bline
    7 years ago

    Hello.

    I tried using the code but something did not work for me. It is the first time I use Intel XDK. Me just a blank screen appears with a button “scan” but the button can not be pressed more and nothing happens. Please help.

    ReplyCancel
    • Narayan Prusty
      7 years ago

      You need to use Intel APP Preview to test the app or else build it and test it. It will not work in emulator.

      And also make sure you have included camera plugin in your app.

      ReplyCancel
    • Recall
      7 years ago

      Ok, I’ve tested it.
      You must also add the “Device” plugin on the right side at “featured & custom cordova plugins” this plugin includes the api method “intel.xdk.device.scanBarcode”. So the barcode scan works.

      But the scan box in the camera view is very small, is there an option to make it bigger?
      Now I must take the phone 15-20cm away from the qr code to fit it in the scan box.

      ReplyCancel
      • Narayan Prusty
        7 years ago

        No you cannot make it bigger. Atleast not without writing your own plugin.

        ReplyCancel

Leave a Reply to Narayan Prusty Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 20 Comments Cordova, Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is Barcode?
  • Where is Barcode used?
  • Generating Barcode In PHP
  • Scanning Barcode using Intel XDK
Related Articles
  • Uploading Files and Showing Progress using Intel XDK
  • Create a Intel XDK APP with PHP and MySQL Backend
  • Authenticating using Touch ID in Intel XDK
  • Share Button for Intel XDK APP
  • Intel XDK Programming Guide to Background Execution
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license