QR codes are the fastest way to access a webpage with your phone and Opera is the fastest way to view a webpage with your phone. QR codes + Opera = a match made in heaven and yet they’re pretty scarce on opera.com. Not any more.
Widely used in Japan, QR codes seem to be gaining ground in other countries as more and more phones ship with scanning capabilities. They are the most widely-used form of so-called 2D bar code containing a varying number of dark and light pixels representing data. This data can be plain text, a URL or mail address, a combination of these, an image, even another QR code. Although QR codes look like a mess of dots, they can be customised to contain a pattern or, for today’s exercise, a logo. Hmm, wonder which one to choose…
1. So, the most simple attempt first: Opera’s big red “O” superimposed onto a QR code containing the text “Opera Software” and a link to http://www.opera.com:
Bar code scanners see the world in black and white but with enough opacity in the logo the scanner can still read this code, however the red “O” is now a pink “O” and I think we can do better.
2. QR codes have a neat built-in feature that allows them to be damaged but still readable. When you create a QR code, as well as specifying the data and size you can choose an “error correction” setting. The highest level means that up to 30% of the code can be damaged or incorrect but the code as a whole can still be read, the only downside being that its size will increase a bit. This means we can paste a small logo onto our code without affecting its readability:
Of course, the downside of this is that there’s now no room for error — the slightest bit of damage to the code will probably render it unreadable, but if they’re going to be primarily displayed on-screen this is not a problem. Pretty good, but not perfect. To make the slightest change to the code or to make several variations you have to edit the image each time. Far better to be a lazy programmer and create the code and its logo dynamically.
3. Copying Taking inspiration from Duncan Robertson’s work at the BBC, we can achieve the following result:
After many attempts, this was about the maximum size of logo I could get away with for this size QR code. It may not have smooth edges but as it’s a two-colour logo at the same scale as the code, the program that generates the code can be extended to draw the logo on top at the same time. Following Duncan’s example, this is the matrix for this logo on a 45×45 QR code:
$opera_logo = [
['w', 20, 13, 26, 13],
['w', 18, 14, 28, 14], ['r', 21, 14, 25, 14],
['w', 17, 15, 29, 15], ['r', 19, 15, 21, 15], ['r', 25, 15, 27, 15],
['w', 16, 16, 22, 16], ['r', 18, 16, 20, 16], ['w', 24, 16, 30, 16], ['r', 26, 16, 28, 16],
['w', 16, 17, 21, 17], ['r', 17, 17, 19, 18], ['w', 25, 17, 30, 17], ['r', 27, 17, 29, 18],
['w', 15, 18, 20, 28], ['r', 16, 19, 18, 27], ['w', 26, 18, 31, 28], ['r', 27, 19, 30, 27],
['w', 16, 29, 21, 29], ['r', 17, 28, 19, 29], ['w', 25, 29, 30, 29], ['r', 27, 28, 29, 29],
['w', 16, 30, 22, 30], ['r', 18, 30, 20, 30], ['w', 24, 30, 30, 30], ['r', 26, 30, 28, 30],
['w', 17, 31, 29, 31], ['r', 19, 31, 21, 31], ['r', 25, 31, 27, 31],
['w', 18, 32, 28, 32], ['r', 21, 32, 25, 32],
['w', 20, 33, 26, 33]
];This means that the underlying QR code can be generated automatically without having to add the logo each time. In other words, each opera.com page can easily have its own QR code proudly displaying Opera’s logo. Here are a couple more linking to this page to get the ball rolling:
N.B. For those wanting to quickly create plain vanilla QR codes, I’ve made a simple widget. For more more advanced code generation, there are good open source libraries available:
- Ruby, Java, PHP, CGI (Japanese)
- JavaScript, Java, ActionScript, PHP (Japanese)
Daniemon's Blog 