skip down to the 25 comments

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.

QR Code (bbc.co.uk/programmes)

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.

QR Code (bbc.co.uk/programmes)

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.

There have been 25 responses to this post.

  1. fabricoffolly

    Nice work Duncan – love it!

  2. Duncan

    Thanks Dan ..

  3. herval

    Interesting piece of customization…

    …what about a BBC ShotCode? http://www.shotcode.com/shotcode/png?c=df8476072bc1&s=400

  4. Justice

    QR Code Streetwear!!!

    http://www.loadedbarcoded.com

    w00t!

  5. Kim

    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/

  6. Duncan

    @Kim, that’s exactly the idea, and thanks for the link.

  7. BBC Logo in QR Code

    [...] 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 [...]

  8. Duncan Sample

    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.

  9. Duncan

    @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 :)

  10. Duncan Sample

    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.

  11. Marcell

    Hey, my reader isnt reading this code…

  12. Dan Brickley

    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…

  13. Dan Brickley

    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

  14. Duncan

    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.

  15. Steven Vance

    QR codes are now taking a new place in the physical environment. See discussion here: http://www.flickr.com/photos/factoryjoe/4242973941/

  16. Dan Brickley

    For my specific use case, a bigger QR code isn’t generally so much of an issue since it’ll be shown full-screen on a TV display. Having a library that automated the creation of qr codes with a space left for an icon would be really sweet (if I didn’t mention that already several times :)

  17. Dan Brickley

    Libby Miller was suggesting to me that QR Codes on the telly would be viewer-unfriendly, so here’s a shameless attempt to justify it with a bit of nostalgia — http://www.flickr.com/photos/danbri/4359291206/ … maybe they can be recast as a new kind of ‘test card’?

  18. Dan Brickley

    “Inpired by Duncan Robertson’s BBC Logo in QR Code, ….” -> http://lapin-bleu.net/riviera/?p=138

  19. David

    As you can put arbitrary content in a QRcode, why not set a standard that allows the specification of an image block which will be removed from the final text string.

    eg (non working concept example)if the URL is http://www.bbc.co.uk/programmes one could put in some text that would read

    i3x4http://www.bimabc.cogeb.uk/prlocogrammk..es and the 3×4 specifes a 3×4 block, the ima geb loc k.. being the right characters in the right space to give the image desired. Requires some working out but should be feasible.

  20. gabbariele

    You should take a look to our dynamic designed qr codes :)
    http://www.weevo.it/index.php/chrome-frame

  21. Joe

    Seems a little bit of a cheat to superimpose an image on the QR codes. Has anyone created one that actually adds up correctly, or is it something that’s not really workable?

    Even if it has errors, it still looks clever.

  22. Stephen Davies

    AM I right in thinking then that we have a 30% error buffer to play with on a QR code. In other words we can delete up to 30% and add our own content?

  23. Chris

    This might be a n00b question…how did you go about creating the BBC logo with the code you’ve listed? Is this a tool in photoshop or have you actually coded it up somehow?

  24. Duncan

    @chris, here’s an example app that’s up and running with the code https://github.com/bbcrd/BBC-QRCode-Generator.

  25. How to Create a Custom QR Code | Dream in Code!

    [...] Whether your goal is to customize your QR code with your own design features, logo, or brand identity, you will need to resize the image(s) to be embedded so that they can fit within the QR code, without interfering with any of the aforementioned QR code components. You could also coderize your mock up if necessary, as did Duncan Robertson. [...]


back to the top