Difference between revisions of "QR Codes"

From CompSciWiki
Jump to: navigation, search
m
Line 1: Line 1:
 
===Step 0: What are QR Codes? Why should I care?===
 
===Step 0: What are QR Codes? Why should I care?===
  
[[Image:Chart.png|frame|a qr code for the URL www.cs.umanitoba.ca]] QR codes ("quick read' codes) are two-dimensional barcodes which are readable by many smartphones. There are apps for reading QR codes for iOS (iPhone), Android and Blackberry, for instance. Many organizations now use QRcodes to allow people with smartphones to link directly to webpages by scanning a QR code. This process is known as [http://en.wikipedia.org/wiki/Mobile_tagging mobile tagging].    In general, a QR code represents a block of text -- this will usually be a URL that the user can visit, but could be any text at all.  
+
[[Image:Chart.png|frame|a qr code for the URL www.cs.umanitoba.ca]] QR codes ("quick response" codes) are two-dimensional barcodes which are readable by many smartphones. There are apps for reading QR codes for iOS (iPhone), Android and Blackberry, for instance. Many organizations now use QRcodes to allow people with smartphones to link directly to webpages by scanning a QR code. This process is known as [http://en.wikipedia.org/wiki/Mobile_tagging mobile tagging].    In general, a QR code represents a block of text -- this will usually be a URL that the user can visit, but could be any text at all.  
  
 
In this lab, we will show how to create QR codes that could be decoded by a QR code-reading app.  But since we won't be able to print our QR codes, this might be a bit artificial.  
 
In this lab, we will show how to create QR codes that could be decoded by a QR code-reading app.  But since we won't be able to print our QR codes, this might be a bit artificial.  

Revision as of 09:56, 7 December 2010

Step 0: What are QR Codes? Why should I care?

a qr code for the URL www.cs.umanitoba.ca
QR codes ("quick response" codes) are two-dimensional barcodes which are readable by many smartphones. There are apps for reading QR codes for iOS (iPhone), Android and Blackberry, for instance. Many organizations now use QRcodes to allow people with smartphones to link directly to webpages by scanning a QR code. This process is known as mobile tagging. In general, a QR code represents a block of text -- this will usually be a URL that the user can visit, but could be any text at all.

In this lab, we will show how to create QR codes that could be decoded by a QR code-reading app. But since we won't be able to print our QR codes, this might be a bit artificial.

Step 1: Get QR Code Library

Like the Twitter lab, we need some extra libraries before we can do QR code generation. You can find the zxing library ("zebra crossing") here.

Step 2: Generate the QR Code

	       QRCode qr = new QRCode();
		try {
			Encoder.encode("text to encode", ErrorCorrectionLevel.H, qr);
		} catch (WriterException e) {
			e.printStackTrace();
		}

The code creates a QR code which represents the text "text to encode". The new QR code is stored in the variable qr. The second parameter of the encode method is the correction level (H is high in this case): the QR code has an error correction ability so that even if some of the barcode is read improperly, the entire message can be decoded.

Step 3: Extract the QR Code as a 2-D array

Since the QR code is a grid of black and white squares, the easiest way to visualize it is as a two-dimensional array ...

	               ByteMatrix bmat = qr.getMatrix();
			byte[][] x = bmat.getArray();
			for (int i = 0; i < x.length; i++) {
				for (int j = 0; j < x[i].length; j++) {
					System.out.print(x[i][j] + " " );
					
				}
				System.out.println();
			}

This code uses a two-dimensional array (notice that the variable x has two sets of []). The array is of type byte, which is like int, but can store a smaller range of numbers.

When you run this block of code, the output should be a matrix of 0s and 1s. Notice that there are two nested for loops which print out the entire two-dimensional array.

Step 4: change to an image

Now let's convert this to an image so we can display it. There is a small hitch to converting to an image that I haven't been able to figure out. But it's solved with this code:

public BitMatrix convert(ByteMatrix bMat) {
		BitMatrix output = new BitMatrix(bMat.getWidth(),bMat.getHeight());
		for (int i = 0; i < bMat.getHeight(); i++) {
			for (int j = 0; j < bMat.getWidth(); j++) {
				if (bMat.get(i,j)==1) 
					output.set(i, j);
			}
		}
		return output;
	}

Add this code to your program to convert from a ByteMatrix to a BitMatrix, as follows:

BitMatrix bitM = convert(bmat);

After this, the zxing package allows you to create an image from a BitMatrix. Define image to be a variable of type BufferedImage (you need to import java.awt.image.*;). Then use this line:

image = MatrixToImageWriter.toBufferedImage(bitM);

After this, we can use the tools from the GUI Extra Labs to display the image. A full example is here.

Step 5: Scale the Image

You'll notice that if you run the code as given, the QR image is really small!! So we need to scale it. To do so, we can write a little method that replaces every 1 in the image with a square of a bigger size. Here's a method that does that!

	public BitMatrix scale(BitMatrix b, int scale) {
		BitMatrix output = new BitMatrix(b.getWidth()*scale, b.getHeight()*scale);
		
		for (int i = 0; i < b.getHeight(); i++) {
			for (int j = 0; j < b.getWidth(); j++) {
				if (b.get(i,j))
					output.setRegion(i*scale, j*scale, scale, scale);
			}
		}
		return output;
		
	}

Notice that is uses the methods setRegion which sets an entire square region to 1s. It also uses the method get method, which determines whether an element of the bitmatrix is 0 or 1. You can see the entire documentation for BitMatrix is here.