The news is that I have created an application that let’s people create their own BBC QRCodes. This could be BBC people who need them for marketing etc or anyone else who’d like a neat BBC QRCode like the one below, that happens to represent the app itself.

You can read more about it over on the BBC R&D Blog.

http://chart.apis.google.com/chart?cht=qr&chl=http://whomwah.com&choe=UTF-8&chs=177×177&chld=h|1

So, I mentioned in a post not long ago that I had been working with QR Codes, and that I wanted to extend the current offering we have, which is just basically a simple implementation of a clever Japanese guys JavaScript library. I was also interested in the embedding of images in QR Codes, as displayed on the wikipedia page. This is possible due to the Reed-Solomon error correction code written into the QR Code encoder. This allows up to 30% deterioration of a QR Code possible with it still being readable.

So armed with that knowledge, and a bit of tinkering in Photoshop, we came managed to come up with a solution that was still readable by a QR Code reader and also incorporated the BBC logo in a clearly readable form. I think you’ll agree, it came out quite nice? (It has been mangled a bit going though Flickr’s image re-sizing) We were quite lucky as the simple geometry of the BBC logo was ideal.

The next thing was to coderize (patent pending) our Photoshop mock up. I had a few choices, I could use Image software to merge the logo and the QR Code, I could write the logo first and the write out the QR Code data around it (this would be the ideal solution to be honest), but I adopted for, reduce the Image to be 1:1 pixel:data ratio, adjust the logo so it fitted, then create a matrix of the logo data. This way I had a kind of BBC logo blueprint I could scale up to whatever size the QR Code image needed to rendered at. Below is the matrix based on a min image size in pixels of 39×39.

$bbc_logo = [
  ['w',  7, 15, 31, 23], ['b',  8, 16, 14, 22],
    ['b', 16, 16, 22, 22], ['b', 24, 16, 30, 22],
    ['w', 10, 17, 12, 21], ['w', 18, 17, 20, 21],
    ['b', 12, 17, 12, 17], ['b', 11, 18, 11, 18],
    ['b', 12, 19, 12, 19], ['b', 11, 20, 11, 20],
    ['b', 12, 21, 12, 21], ['b', 20, 17, 20, 17],
    ['b', 19, 18, 19, 18], ['b', 20, 19, 20, 19],
    ['b', 19, 20, 19, 20], ['b', 20, 21, 20, 21],
    ['w', 27, 17, 28, 17], ['w', 26, 18, 26, 20],
    ['w', 27, 21, 28, 21],
];

It was then just a matter of drawing this information over the top of the QR Code image information and writing out the file, which as it turns out, does not appear very CPU intensive, as it’s a simple image construct, that along with the Squid caching we have in place means the server load is minimal.

So what we’ve ended up with is below. I’m really pleased with the results and look forward to the code going live.

Oh and for the benefit of people who don’t have access to one of the many free QR Code readers for mobile phones, the logo above decodes to bbc.co.uk/programmes

[Update]: Just got a nice mention on the 2-d code magazine site. Also, good to see other people are liking the work.

We implemented QR Codes on BBC programmes (A project I’m one of the Software Engineer’s on, at the BBC) a few weeks back. They’ve been talked about since so I won’t repeat things, only to say it was a simple implementation using a JavaScript library by Kazuhiko Arase and took all of 5 minutes of my lunch hour to add. It started as an email by colleague Michael Smethhurst asking if we could/should implement them, and was also the first I had really heard of them.

Since then, I have done lots more research and think there is great mileage there for promotional material and advertising. At the moment the codes are built on the client side, but this will be moved to the server soon so we can start caching the pages, and also so we can provide the code in a more useful format (maybe images instead of the current HTML table).

So to the point of this post. During my research to understand QR Codes more and because of the lack of free readable spec (Anyone know if there is one?) I decided to reverse engineer the JavaScript library into a Ruby Gem as there didn’t seem to be one out there. This helped me understand the how QR Codes are encoded, while at the same time giving something back for other people to use.

You can find out more over at it’s project page on Github:
http://whomwah.github.com/rqrcode/

So that should get you going. Enjoy!