QR bar-code as a popular form of 2-dimensional bar-code, has sprout into many new daily usages. The designer of QR Code has put in effective graphic patterns that makes QR code looks cool and works robustly. Here I just want to share about the world's largest QR code in the record, a grassland maze that forms a QR code. I guess only some one from a plane are able to make a scan of this code and read it out! The ISO standard No. 18004:2006 is the latest definition of QR code. The most identifiable pattern is the three square patterns at the three corners of the code, and this gives the barcode scanners a reliable way to identify the dimensions of the code in both X and Y axis. The small black squares and their neighboring white squares represent binary bits for the information to be encoded. In order to ensure robust reading of encoded information, redundant bits are added. Error correction encoding is used for generating redundant bits, in particular, the standard specifies Reed-Solomon Code.
There are already widely available encoding implementations for generating QR code. However, for a stand-alone implementation in JavaScript, there are not many. I found it a cool exercise to implement this QR code and purely in JavaScript! Check out this page for the two good Javascript books that got me hands dirty into this project. Months later, a couple of weekends well spent without going out to enjoy the beaches, finally a working stand-alone JavaScript implementation is at my hand. I am surprised that despite all the criticisms about JavaScript language, at about 1200 lines of code, I can implement everything needed from scratch. This includes the Galois Field arithmetic, Reed Solomon encoding, and the QR code pattern encoding. I have written this JavaScript General Notes page to document my preparations about the language for starting this project. It includes the topic of choosing a modular programming pattern for making fairly sizable programs with JavaScript. Also described how to use the TypedArray to implement a binary byte pool and format a print-out of hexadecimal values of the bytes in the pool. This offers a quick way of debugging my JavaScript code. Another necessary preparation is to implement Reed-Solomon code in the language, and this is documented in my Reed-Solomon Code Notes page.
There are 40 different sizes of QR Code referred in the ISO standard as Version 1, Version 2 ... Version 40. The smallest QR Code, Version 1, sizes as 21x21 small blocks. And the largest QR Code, Version 40, has 177x177 blocks. The following figure shows the structure of QR Codes of different versions. As shown in the figure,a QR Code is composed of a number of regions that form different patterns of blocks. Each of these special regions are specially designed by the standard to serve a given purpose. They are finder pattern, timing pattern, alignment pattern, version information pattern, format information pattern, and finally the main encoding region.
Finder pattern - consist of three identical regions at the three corners of the QR code, as illustrated in the figure in black color. Each one is called in the standard as a Position Detection Patterns, and are located at the upper left, upper right and lower left corners. Each Posotion Detection Pattern can be viewed as three superimposed concentric squares which are 7x7 dark, 5x5 light and 3x3 dark, respectively. A scanner identifies the three Position Detection Patterns comprising the finder pattern, then can unambiguously determine the location and orientation of the symbol in the field of view.
Timing pattern - shown in Figure as black and white blocks, which forms 7-th row and 7-th column in a QR Code. It indicates the size of each block in the code.
Alignment patterns - shown in Figure as red blocks. Each alignment pattern a specially formed 5x5 blocks shown in Figure. The number of the patterns is determined by the version number. Only Version 1 code does not have alignment pattern.
Version information pattern - shown in Figure as green blocks. There are two 3x6 blocks of pattern, and they are identical. For each 18 blocks, the version number between 1 to 40. (18,6) BCH code is used on the 18 blocks. Small QR Codes of version 1 to 6 do not have version information pattern.
Format information pattern - shown in Figure as blue blocks. There are 15 blue blocks on the top-left corner, and they together encodes the format information of the QR Code. There are also 15 blue blocks together at the other two corners, they together form an identical copy of the first 15 blue blocks. Using 15 blocks, error correction level (among L, M, Q, H) is encoded. Also encoded in is the choice among 7 different mask patterns. (15,5) BCH code is used on the 15 blocks.
Encoding region - shown in previous Figure as grey area of blocks. In actual QR Code, each dark block represent a bit 1, and each white block represent a bit 0. The next Figure shows in color of the blocks in the encoding region. QR Code symbols are placed one by one in the encoding region. Each symbol is a byte, hence represented by 8 blocks. By default, a symbol is positioned in a two-block wide column. The 1st symbol is always placed at the bottom-right corner of the encoding region. Next symbol is placed on the top, and thus going up-wards, until reaching the upper boundary of the encoding region. Next symbol is then placed on the left, and further next symbols are placed down-wards. Thus, the placement direction is alternating. The next figure, each same-color 8-block pattern represent a QR Code symbol. Notice that how each pattern will need to skip the blocks that is occupied for alignment patterns or Version information patterns.