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:
<TITLE> Event Attendee Tracker</TITLE>
<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>
scanner.decodeEvent = 'doScan(%json)'; //setup event handler
scanner.enable(); //enable the scanner - the first available scanner will be enabled
document.getElementById("scanInfo").innerHTML = scanData.data; //show barcode data
scanner.decodeEvent = 'doScan(%json)';
|data||The data decoded by the scanner or imaging device|
|source||The source device and human readable decoder type of the decoded barcode or symbol|
|type||Hex value representing the decoder type|
|time||The time at which the decode occurred (hh:mm:ss)|
|length||The length of the decoded barcode or symbol|
|event||The 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.
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:
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:
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.