The Demo

Scan 1 of the 4 QR codes below with your mobile device. Here’s an Android Barcode app and a couple iPhone apps if you don’t already have one.

The resulting link will take you to an augmented reality image marker. It doesn’t mean much by itself, but take a look at what can be done with this “QR to AR” method:

The Overview

NOTE: If you are totally unfamiliar with augmented reality, check out these previous posts: Augmented Reality and Augmented Reality with Away3dlite.

What’s one of the biggest blockers to augmented reality taking off? The difficulty in distributing the augmented reality markers necessary to make the technology work. If you’ve seen an augmented reality site, you’ve read the off-putting instructions to print an image to a sheet of paper to hold in front of your webcam. If you are a massive publication like Esquire, then its not so big of an issue.

But if you have no problem distributing AR markers, you probably aren’t reading this and don’t need my help. But if you do, you might want to try the “QR to AR” method of distribution shown at the top of this post. You should always offer the method of printing your AR marker, but with the widespread use of mobile technology, this is another viable method.

In short, the positive is that this method is easy to distribute and is more likely to be tried than with the “print this marker” method. The negative is that augmented reality is already a technology that depends heavily on a quality image. Consider the following when attempting to use the “QR to AR” method:

• Mobile phones can add difficulty with their reflective and glowing surface
• Good lighting and webcam quality is critical for the best possible augmented reality experience
• Disable auto-orient on your device, if possible, otherwise the image will turn when your phone does

This isn’t necessarily meant as a practical solution to augmented reality marker distribution and use, just a simple attempt to think outside the box. Hopefully it encourages people smarter than me to think of even more clever ways to bring augmented reality to the masses.

Special thanks to all techs involved here: FLARManager, FLARToolkit, Away3D, and my trusty Droid X using the .

The Generator

Text for QR Code:

The Overview

QR codes are basically just bar codes on steroids. They allow you to encode up to 4,296 characters in a format that can be read by most modern bar code scanning devices. More specifically, QR codes make it much simpler to direct smart phone users to your website (or anywhere else you want).

So why do you want to do this? Here’s a few reasons that range in practicality:

• Direct mobile phones to personally hosted mobile applications (no need for market fees)
• Direct users from physical storefronts or magazine articles to your website
• Leave encoded messages for mobile users
• To be super cool and trendy

The Code

Here’s the Google Chart API URL you hit in order to create your own QR code. Pop it into a browser and it will return your image. There are more optional criteria you can send, which are detailed in the . Be sure to change the sections highlighted in RED to the values that fit your needs.

Now let’s say you wanted to copy my website and have your own generator. It’s pretty simple. Here’s the tiny bit of HTML and javascript I used to make it happen:

<table>
  <tr>
    <td>
      <strong>Text for QR Code:</strong> 
      <form onsubmit="return false;">
        <input type="text" id="qrvalue" value="https://savagelook.com" style="width:250px;"/>
        <button onclick="document.getElementById('qrimg').src = 'http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=' + document.getElementById('qrvalue').value;">Encode</button>
      </form>
    </td>
    <td>
      <img id="qrimg" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=https://savagelook.com"/>
    </td>
  </tr>
</table>

And here’s another version from Eric Harrison with no tables

<div style="padding:15px 50px;"> 
  <img id="qrimg" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=https://savagelook.com" style="float:left;margin-right:25px;" /> 
  <form onsubmit="return false;"> 
    <input type="text" id="qrvalue" value="https://savagelook.com" style="width:60%;font-size:125%;" /><br /> 
    <input type="button" style="padding:5px;font-size:125%;margin-top:10px;" onclick="document.getElementById('qrimg').src = 'http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=' + document.getElementById('qrvalue').value;" value="Encode" /> 
  </form> 
  <br style="clear:both;" /> 
</div>

As you can see, its not rocket science, but it sure can add a little techie flare. Have fun and be sure to let me know if you add a QR coding to your geek repetoire!