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 and 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:

                     Event Attendee Tracker



session selector goes here


session detail to be displayed here


scanned in data goes here


Let's dissect the code for a minute before we copy it to the device and give it a try. The

section of the page has four
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() 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
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 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. and how to save all of this data that we are scanning in.

Submitted by Anonymous (not verified) on May 04, 2019 Permalink

Hey Rob, I used my HTC Viva (Opal) and a scanner app called i-nigma to scan your QR Code, it showed the version 2.1 but it grabbed only your email and your website. It didn't grab your Name, Title and ORG. The nice thing however is that i-nigma gave the option to save the info into Contacts on the phone (which I did), but of course, only email and URL were saved. Just wanted to let you know.