Whomwah.com

After what has been the most strange of days, I thought I’d write a little bit more on the QR Code work I have been doing for /programmes. This is a bit of a sneak preview, as the work will not be pushed out live for a little while as we try and fix a potential bit of memory corruption found in one of the binaries we were using.

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.

The new iphone simulator (part of the iphone SDK) doesn’t seem to send the same User-Agent as a normal iphone, so any sites that use content-negotiation don’t appear on it. I would have thought it should send ‘(iPhone; U; CPU like Mac OS X; en)’ but instead it sends ‘Aspen Simulator; U; Apsen 1_2 like Mac OSX:en_us’. This seems like an oversight? What do you reckon?