In this part of the blog series, we will build a simple Hello Scan application and run it on the mobile device. By now you should have RhoElements installed and made adjustments to the config.xml to point to the application that we are going to build. In this section we will setup placeholders for our content, turn the scanner on and handle the decode event when scanning a QR Code barcode.

 

So let's get started. Using your editor of choice, create a new HTML file called index.html:

 

 

<!DOCTYPE html>

<HTML>

<HEAD>

                    <TITLE> Event Attendee Tracker</TITLE>

</HEAD>

<BODY >

          <div id="header">Title and exit button goes here</div>

          <div id="selector">session selector goes here</div>

          <div id="sessionInfo">session detail to be displayed here</div>

          <div id="scanInfo">scanned in data goes here</div>

          <button onClick="enableScanner()">Enable Scanner</button>

</BODY>

<script>

function enableScanner()

{

          scanner.decodeEvent = 'doScan(%json)';  //setup event handler

          scanner.enable(); //enable the scanner - the first available scanner will be enabled

}

 

 

function doScan(scanData)

{

          document.getElementById("scanInfo").innerHTML = scanData.data; //show barcode data

}

</script>

</HTML>

 

Let's dissect the code for a minute before we copy it to the device and give it a try. The <BODY> section of the page has four <DIV> containers that we will expand on later so we just have placeholders right now. The onClick event for the Enable Scanner button calls up the javascript function enableScanner(). In this function we have two lines:

 

scanner.decodeEvent = 'doScan(%json)';

scanner.enable();

 

scanner.enable() is pretty straight forward, it is a method to the scanner object to enable the scanner. Enabling a scanner doesn't mean that the laser or aimer is actually on ready for bar codes. It means that the scanner is 'active' waiting for the scan key to be triggered. Before we enable the scanner we define what happens when a bar code is read by adding the scanner.decodeEvent line. This line basically sets a property of the scanner object to call a javascript function that is called doScan and it will pass a json object that holds the scan data. JSON stands for Javascript Object Notation is a lightweight data-interchange format that is completely language independant and allows to define an object using simple text. In the case of the scanner object, the JSON object that will be sent for the decode event has 6 properties:

 

JSON Property
Description
dataThe data decoded by the scanner or imaging device
sourceThe source device and human readable decoder type of the decoded barcode or symbol
typeHex value representing the decoder type
timeThe time at which the decode occurred (hh:mm:ss)
lengthThe length of the decoded barcode or symbol
eventThe type of event which has occurred at the scanner. This field will be either 'Decode' for barcode scanning or a message from a Bluetooth scanner

 

In the doScan() function, the scanData variable is really the JSON object that comes from the scan event. For now we just display the data that was decoded by using the data property. Remember in this example we are expecting a QR Code. The QR code is that 2-dimensional bar code that you have been seeing pop up all over the place. Typically to get you to a website or an app download from your phone. In this case, we will be formatting our bar code data using a vCard format. vCard is a commonly recognized format for holding contact information. Below is the vCard QR Code for my contact information. For testing you can google "QR Code vCard Generator" and create your own. On the device side, you will not be able to use a laser scanner to read this bar code. You will need something that has a 2-D Imager scanner or a device that has a camera. In the case of the ES400 device that I am using, it only has a camera, so the camera will appear as the default 'scanner'. In the case of let's say a MC75 that has both an imager scanner and a camera, the imager will appear as the default scanner. If you want to use a specific scanner in the device, please reference the enumScannerEvent in the help file for more information.

 

 

RobGalvinvCard.PNG

 

That is pretty much it on this simple code. Let's copy it to the device in the location that we specified in the config.xml file. Recall it was \RhoApps\MyFirstApp - you will have to create this folder if it doesn't exist already.

 

Once you have it copied to the device, simply relaunch RhoElements from the Start menu. You should see the following:

rho-hellowscan1.PNG

 

Now press the scan trigger button on the device. What happened? Nothing - that is because the scanner is not enabled. Now press the Enable Scanner button in the application and then press the scan trigger button on the device. You should now see the scan aimer come up (in my case for the ES400, it was the on screen viewfinder). Scan in the QR Code above and you should see:

 

rho-hellowscan2.PNG

Notice that the JSON.data object contains the full VCARD object. In our example we will save this entire structure in the database but will parse out the name and company and display it to the attendee who is running the app.

 

That is your first Hello Scan RhoElements application. Continue to the next part of the series where we will talk about WebSQL and how to save all of this data that we are scanning in.