Add QR codes to your Raspberry Pi and Arduino projects

Lead Image © nrey, 123RF.com

QR Codes

Create a web page to generate your own QR codes, use MIT's App Inventor to build an Android QR code reader, and finally, put QR codes on your Pi and Android sensors with links to documentation or real-time web data.

The typical UPC-A barcode is a series of contrasting strips that encode a 12-digit number, whereas a QR (quick response) code [1] is a matrix of small squares that can represent up to 4,296 characters.

For your Raspberry Pi or Arduino projects, you can use QR codes to document what the module is doing, link to web URLs, or display a message, like "if lost, please call …."

Create Your Own QR Codes

A number of different tools are available to create your own QR codes. One of the simplest methods is to use the Google Chart API [2], which you call with

http://chart.apis.google.com/chart?

followed by required and optional parameters.

The important parameters are:

  • cht=qr, the chart type
  • chs=<width>x<height>, the chart size
  • chl=<data>, the data or URL to encode

An example of encoding "Hello World" in a 100x100 QR code would be:

http://chart.apis.google.com/chart?chl=Hello+World&chs=100x100&cht=qr

Listing 1 is a simple web form you can use to create QR codes [3], and Figure 1 shows the web page and an example QR code image. After the image is generated, you can print the image, cut it to size, and tape it to your equipment. If you have a number of Arduino or Pi modules, QR codes could be an easy way to determine what is loaded on each module.

Listing 1

Make_QR_Code.htm

<html>
<head>
  <title>Create QR Codes</title>
</head>
<body>
<h1>Create QR Codes</h1>
<form action="http://chart.apis.google.com/chart" method="get">
  Text to embed in QR Code</br>
  <textarea name="chl" style="height:100px;width:300px;"></textarea>
  </br>Image Size :</br>
  <select name="chs">
    <option value="100x100">100x100</option>
    <option value="150x150">150x150</option>
    <option value="200x200">200x200</option>
    <option value="250x250">250x250</option>
    <option value="300x300" selected>300x300</option>
    <option value="350x350">350x350</option>
    <option value="400x400">400x400</option>
    <option value="500x500">500x500</option>
  </select>
  <input type="hidden" name="cht" value="qr"></br>
  <p><input type="submit" value="Create QR Code"></p>
</form>
</body>
</html>
Figure 1: Web QR code generator.

Create Your Own QR Reader App

A number of QR reader applications are available in the various app stores; however, if you want to create your own custom QR reader app, then MIT's App Inventer [4], a cloud-based web app, is a great option for Android smartphones and tablets. If you have an iOS device, check out the Kino App Inventor [5], and if you have a Windows phone, look at Windows Phone App Studio [6].

To use App Inventor, you need a Google account and a browser. For this exercise, I used the same Google account I use with my Android phone, but you could use a GMail or Google+ account, too.

In App Inventor, you work in two screens to create a phone app [7]. The first screen is accessed by pressing the Designer button in the upper right corner (Figure 2). From the Designer screen, you can create the layout and the look and feel of the application. For the second screen, click on the Blocks button, which takes you to the Blocks screen, where you can create the logic or program for your app. App Inventor programming is similar to programming in Scratch.

Figure 2: App Inventer Designer layout.

In the Designer screen, you simply select the item you want from the User Interface Palette and drop it into the middle Viewer pane. Once a component is put into the Viewer window, that component is given a default name and properties. In the Components and Properties windows, you can rename a component and change things like the text, color, and sizing.

For this application, I used the following components:

  • a Button to start QR scanning
  • a TextBox to show QR scan results
  • a Button to call a browser if the QR code is a web link
  • a BarcodeScanner to turn on the camera and process the QR code
  • an ActivityStarter to launch the web browser

The logic (Figure 3) starts by defining the camera to be used for the QR scanning and sets ActivityStarter.Action to a browser (android.intent.action.VIEW).

Figure 3: App Inventer logic.

The BarcodeScanner1.AfterScan block puts the decoded QR data into the textbox. If the QR code starts with "http" then the "open link" button is enabled.

Buy this article as PDF

Express-Checkout as PDF

Pages: 6

Price $2.95
(incl. VAT)

Buy Raspberry Pi Geek

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content