More fun with QR Codes and the BBC logo
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.
Nice work Duncan – love it!
Thanks Dan ..
Interesting piece of customization…
…what about a BBC ShotCode? http://www.shotcode.com/shotcode/png?c=df8476072bc1&s=400
QR Code Streetwear!!!
http://www.loadedbarcoded.com
w00t!
Nice stuff! So – the QR code could appear in print publicity for the show, and take you directly to watch on the programme page?
You might be interested in this, by the way:
http://www.memespring.co.uk/stickers/
@Kim, that’s exactly the idea, and thanks for the link.
[...] Duncan Robertson is the software engineer that worked on the QR codes for BBC Programmes Beta. He now reports on work in progress on incorporating the BBC logo into QR codes. This is made possible due to error correction code written into the QR Code encoder that allows up to 30% deterioration of a QR Code while remaining readable. The QR code below decodes as http://bbc.co.uk/programmes [...]
Although I do like the design you’ve made, I wince a bit when I look at the QRCode being ‘obscured’ by the logo. As you say, the error correction in QRCodes are robust, but it is robust for the reason that they may be damaged in normal use, and I’m afraid that if people start to do as you suggest and put designs within the barcode itself (and for me that includes background colour differences) it will take the error correction effectiveness from 30% to nearly zero (or even create damanged if they’re not careful).
I have wondered for a while how people might ‘design’ with QRCodes, but the best way I have thought of (that observes the guidelines for QRCode creation) is to design around the barcode to create a ‘badge’ (an example of one very basic design is on
my blog post about 2D barcode formats)
I’d be interested to talk more about how the BBC is using QRCodes.
@Duncan, I actually agree, and we have been starting to look at re-writing the encoder to draw around the logo therefore keeping the error correction in-tact. This work stems off the fact the current encoder we have been using (http://qrcode.sourceforge.jp/) seems to possibly have a memory leak in it. This work so far is a kind of first pass, just understanding what a logos look like in QR Codes.
In terms of ‘designing’ QR Codes, I don’t personally like the badge ideas. I wasn’t actually sure about the logo in the QR Code originally, until after playing I found it looked quite pleasant. Having to surround the code in more livery makes it more messy for me, especially when it comes to printing and viewing at small sizes. The BBC example works at all sizes because it keeps the pixels used to draw the logo at the same size as the ones used to draw the matrix. As soon as you surround the logo in text/images then unless they also match the resolution of the matrix, they don’t seem to work.
Thanks for you comments by the way
Thanks for the response. I agree with you too about the ‘badge’ design. It seemed to serve a purpose when I first pushed the idea in my blog post, but I do see how it just adds clutter. Ultimately I don’t think this is going to be ’solved’, since I think the placement of the barcodes should be such that no branding or additional ‘help’ is necessary to draw attention to them.
What I want to get to is the point where these barcodes are accepted as part of everyday life, then they can become just another object on the page.
I print media though, until phone camera macro modes become better they’re not going to be able to be as small as I’ve seen in Japanese media, so they’re going to stand out a little too much for daily use.
Hey, my reader isnt reading this code…
Nice work
I agree that embedded images don’t always work, but I think I have an interesting use case via the http://www.notube.tv project. I am looking at XMPP as a communications channel between personal EPGs on smartphones and media centres. Seems to work fine, but authentication / pairing is an issue. If a telly displayed a giant QR code full screen, I think phones might be able to scan the code, and subscribe to the tv. Maybe send an optional pin. Since a full screen QR is a bit harsh / ugly, I’d like to make it a happier and more distinctive display, eg. by embedding an image or shaping the outer edges to be rounded, eg like a button – http://buttons.foaf.tv/
Haven’t found any libraries that make this easy yet though. Guess I should get on with testing the giant qrcode / iphone hookup before getting lost on this detail! Thanks for any thoughts…
OK I got an iphone app that talks 2-way to XMPP now, with a faked up remote control… so I’d like to revisit the qrcode piece.
Do you have any idea if i can autogen QR codes yet also include an image, without lossyness? suggestions welcome here on in http://wiki.foaf-project.org/w/DanBri/ButtonsAPI
Dan, including an image as above without it being lossy is something I talked about with a colleague a year or so ago. We talked about the idea of drawing around the image instead of doing what you see above and drawing over the top. If this was successful you would still have all the error correction, but would just have a slightly bigger QRcode (based on how much information you wanted the code to hold). Also to note, that the important parts of the code are the alignment points. If these get tampered with, reading the code becomes very difficult.
QR codes are now taking a new place in the physical environment. See discussion here: http://www.flickr.com/photos/factoryjoe/4242973941/