JavaScript-Based Quick Response Code Generator Interface


314_Table_1Quick response code, or QR code in short, is a special bar code that is usually displayed as a matrix of black modules arranged in a square pattern (data codes) and used to store data in a secured manner. These patterns can be read by using QR code readers that can be downloaded on mobile phones that have a camera (for scanning the code) and a pre-activated general packet radio service (GPRS) setting. (GPRS is used to browse the Internet on mobile phones.)

Once the QR reader on the mobile phone is launched, the program activates the camera on the device. When the mobile is brought near the code and the code is focused between the black squares (three large and one small), the data gets displayed on the screen.

Fig. 1: Structure of a QR code (Image courtesy: Wikipedia, under Creative Commons Free Licence GNU GPL)

The QR code follows the Reed-Solomon error-correction algorithm and hence is less susceptible to errors as it follows parity check. The encoded information can be made up of four modes of data: numeric, alphanumeric, byte/binary and Kanji.

Explore Circuits and Projects Explore Videos and Tutorials

The QR code was first designed for the automotive industry. Now QR codes are used everywhere starting from products to webpages, advertising, mobile money transactions and goods inventories. Storing URLs, these can be found on magazines, buses and business cards. These have even found applications in Google-powered Android smart phones.

Presented here is a QR code generator interface. The software code written in JavaScript generates HTML QR codes upon feeding the data.

Table I shows how much information you can store in just one QR code symbol.

The QR code matrix depicted in the program can generate a 33×33 matrix truncated to 60 characters only. The code word so generated is 8-bit long and uses Reed-Solomon error-correcting coding technique with four levels of error correction: Level L (7 per cent), M (15 per cent), Q (25 per cent) and H (70 per cent). The percentages in brackets indicate the restoration factor. (For further details of the Reed-Solomon error-correction coding technique, visit page.)

Arduino Projects: Fancy Lights Controller
Fig. 2: Various versions of QR codes (Images courtesy: Wikipedia)
Fig. 2: Various versions of QR codes (Images courtesy: Wikipedia)


The alphanumeric characters and their corresponding codes are given in Table II.

Fig. 1 depicts the structure of a QR code. Fig. 2 shows the various versions.

The program
The program QR_33.htm is coded in JavaScript language to generate mask patterns and data patterns. The QR pattern is obtained by using the data that has to be encoded. The program generates a data matrix of 8-bit length scattered over a square area of 33 blocks vertical and 33 blocks horizontal. Modes are then defined first and later their corresponding data matrix array. The BCH code is also defined in the code so that there is no parity error in the generated code.

In the next part, the four error checker units L, M, Q and H are defined. The source code has been explained at places where the new functions have been declared to get a quick understanding. More details on the QR code can be found at (Denso Wave’s website). These QR codes have data encoded on both dimensions (horizontally and vertically) unlike single UPC/EAN bar codes that have data only in the horizontal direction. Hence QR codes are more efficient as these can encode data more securely in a compact grid.

Disclaimer. QR code is a 2D matrix bar code invented by Toyota’s subsidiary Denso Wave. The QR code generated in this program using JavaScript follows the rules of the original program; QR code has a free-to-use global licence. The generation of code in real time may be dependent on any other software or hardware. This program only depicts how one can create such a matrix code using JavaScript.

6 DIYs For A Supersonic Soldering Station
Fig. 3: Program output screenshot of QR code generator interface at start-up
Fig. 4: Program-generated ‘EFY Enterprises Pvt Ltd’ text QR code shown on the left side

Download source code: click here

The author and the publisher of this program are not responsible for any mistake whatsoever and disclaim such matters pertaining to real-time usage of this program. One can use this code freely but should abide by the rules laid out at Denso Wave’s official site mentioned in the documentation of this article. The images are from Wikipedia, except for the screenshots that were generated by the QR_33.htm program.

Note. The given source code has not been colour-coded. This program has been tested on Internet Explorer 8 browser, which comes pre-installed with Windows 7 operating system. To view the colour-coded version, open the QR_33.htm code using ‘Internet Explorer 8.’ Press ‘F12’ key once the program is loaded. A ‘Developer Tool’ window then opens. In this window you can see the colour-coded version under ‘Script’ tab.

Testing steps
1. Run the QR_33.htm code (refer Fig. 3). Enter the data (EFY Enterprises Pvt Ltd)to be encoded and press ‘Generate’ button (refer Fig. 4).
2. Save it to the hard disk drive using ‘Save’ button.
3. Magnify the browser window to 1000 per cent.
4. Take a screenshot using ‘Prt Sc’ key or ‘Print Screen’ key and save the result as an image.
5. Insert the image in a Word document/Paint and crop the image to view only the code, excluding the window borders.
6. Print the code using monochrome/colour inkjet/dot-matrix/laser printer.
7. Hold the printed page in ambient light.
8. Open the QR reader app on the mobile phone having camera support. (The mobile camera can be of any resolution.) We have tested this project using Sony Ericsson WT19i mobile phone with Neoreader QR reader apps.
9. Focus the camera on the QR code image by keeping enough space all around (to be checked on the viewfinder/display).
10. Click after focusing on the image blocks (the blocks should be clearly visible).

Simple Parking Counter

The program on the mobile phone will now process the QR code and display the ‘EFY Enterprises Pvt Ltd’ encoded text directly on the mobile screen.

The author is a B.Tech in electronics and communications engineering, likes coding and has keen interest in space technology (satellite communications) and mobile communication