QR code Tutorial

by David Swink, FCTA, 08/04/2024

As the current FCTA webmaster, I thought it might be useful to perhaps create the now-fashionable QR codes, to encourage smartphone users to access selected material on our web site. There are many online sites that offer to create QRCode images for you -- often for free. However, having worked decoded the one-dimentional barcode images years ago, the engineer in me wondered how hard it would be to encode/decode a QRCode manually. And so I found a site that provided an extensive tutorial. This tutorial was quite instructive, went into great detail, and was quite understandable ... up until it wasn't. Here's a summary:

Introduction:
A QR code (quick-response code) is a type of two-dimensional matrix barcode, invented in 1994, by Japanese company Denso Wave for labelling automobile parts. Inspired by the black counters and the white counters played on a Go board, it features black squares on a white background, readable by imaging devices like smartphone cameras, and distinguished by donut-like markers on three corners of the image so the reader is properly oriented.

Information Capacity:
To efficiently store data, QR codes use four standardized modes of encoding: 1. numeric (7089 max), 2. alphanumeric (half-ASCII, 4296 max), 3. byte or binary (full-ASCII, 2953 max), and 4. kanji (Japanese, 1817 max). (The most widely used is the byte/binary mode, the one that will be discussed here.)

There are 40 different version settings, which determine the number of "pixels" in the image's width and height -- from v1 (21x21), v2 (25x25), v3 (29x29), increasing by 4 pixels each all the way up to v40 (177x177).

Data Representation:
The byte mode of encoding text for QR codes utilizes the ASCII character set, and all data and error correction codes are expressed in sequential binary bits. The data to be stored is expressed in order: version number, character count, the data message, terminator bits (if needed), and pad bytes (if needed). Pretty simple up to now; but then things get complicated and quite messy.


One might have thought that the data just described would be easily found in a local area within the QRCode matrix by the well-trained eye. Not so!

1. Extensive error correction encoding is now added, and the method of producing it is way beyond manual computation.

2. The error correction binary is interspersed with the data massage bytes, and is much more numerous than the latter.

3. And the final ordering of the byte data is really complex: proceeding in a sequental fashion from the lower right of the matrix like a giant sine wave (more like a farmer plowing a field with a two-blade plow). Each north and south traverse grabs two east-west bits times the remainder of the north-south byte axis by two bits. So in a travel analogy, the trip starts in Miami, goes up to New York City, across to Buffalo, down to Tallahassee, across to Mobile, up to Cleveland, etc, etc, until it gets to San Diego.

Conclusion:
So while a barcode is quite straightforward and easy to encode or decode manually, not so the two-dimensional QR codes with complex data layouts combined with sophisticated error correction encoding. This means that QR code creation requires complex programming, available on selected computer servers that have been laboriously set up for such a purpose. Hence those online QR code providers -- some free, some for a price. Thus chastened, the author resigned himself to a free online option, with a follow-on attempt to depict the returned QRCode binary image in HTML.

Trying It:
The following first displays the QR code image for "https://fcta.org/books/", using a free online QRCode generator. It is followed by attempts to emulate the image using stock ASCII characters, then Unicode characters. The character renditions may or may not be interpreted properly by a smartphone reader, since the QRCode "pixels" are somewhat compromised in blackness or squareness.

via QRCode generator

... emulated in ASCII 

 #######   # # # # ####### 
 #     # # #  # #  #     # 
 # ### #     ##  # # ### # 
 # ### # ### ####  # ### # 
 # ### #  #    #   # ### # 
 #     # ## ###### #     # 
 ####### # # # # # ####### 
          ###    #         
 ##### #### # # ### # # #  
 ##     ## # #   ## ##   # 
  ## ##### #  ##  ## # #   
 #  #   ##   ##  #         
 # #   #  ## #### ##### ## 
 # #  # #      # #  ##  #  
 # #  ##########  ## # ### 
 #  ##    ### #         ## 
 #    ####  ###########  # 
         ##  # # #   #   # 
 ####### ### ##### # # ### 
 #     #  #  ## ##   ##    
 # ### # ###  # #######    
 # ### # ####  ### # #  ## 
 # ### # ## ####  #  # # # 
 #     # ## ## ## ##### #  
 ####### ##   #   #    ###
... and Unicode 

 ███████   █ █ █ █ ███████ 
 █     █ █ █  █ █  █     █ 
 █ ███ █     ██  █ █ ███ █ 
 █ ███ █ ███ ████  █ ███ █ 
 █ ███ █  █    █   █ ███ █ 
 █     █ ██ ██████ █     █ 
 ███████ █ █ █ █ █ ███████ 
          ███    █         
 █████ ████ █ █ ███ █ █ █  
 ██     ██ █ █   ██ ██   █ 
  ██ █████ █  ██  ██ █ █   
 █  █   ██   █  █         
 █ █   █  ██ ████ █████ ██ 
 █ █  █ █      █ █  ██  █  
 █ █  ██████████  ██ █ ███ 
 █  ██    ███ █         ██ 
 █    ████  ███████████  █ 
         ██  █ █ █   █   █ 
 ███████ ███ █████ █ █ ███ 
 █     █  █  ██ ██   ██    
 █ ███ █ ███  █ ███████    
 █ ███ █ ████  ███ █ █  ██ 
 █ ███ █ ██ ████  █  █ █ █ 
 █     █ ██ ██ ██ █████ █  
 ███████ ██   █   █    ███