I've been thinking about fun little artistic things to do with QR codes. What if each individual pixel were a QR code?

There's two fundamental problems with that idea. Firstly, a QR code needs whitespace around it in order to be scanned properly.

So I focussed on the top left positional marker. There's plenty of whitespace there.

Secondly, because QR codes contain a lot of white pixels inside them, scaling down the code usually results in a grey square - which is unlikely to be recognised as a black pixel when scanning.

So I cheated! I made the smaller code transparent and gradually increased its opacity as it grows larger.

I took a Version 2 QR code - which is 25px wide. With a 2px whitespace border around it, that makes 29px * 29px.

Blow it up to 2900px * 2900px. That will be the base image.

Take the original 25px code and blow it up to the size of the new marker, 300px * 300px. Place it on a new transparent canvas the size of the base image, and place it where the marker is - 400px from the top and left.

Next step is creating the image sequence for zooming in. The aim is to move in to the target area, then directly zoom in.

The whole code, if you want to build one yourself, is:

#!/bin/bash

#   Input file
input="25.png"

#   Add a whitespace border
convert "$input" -bordercolor white -border 2 29.png

#   Upscaled image size
upscaled_size=2900

#   Scale it up for the base
convert 29.png -scale "${upscaled_size}x${upscaled_size}"\! base.png

#   Create the overlay
convert -size "${upscaled_size}x${upscaled_size}" xc:none canvas.png
convert "$input" -scale 300x300\! 300.png
convert canvas.png 300.png -geometry +400+400 -composite overlay.png

#   Start crop size (full image) and end crop size (target region)
start_crop=$upscaled_size
end_crop=350

#   Zoom-in target position (top-left corner)
target_x=375
target_y=375

#   Start with a completely opaque image
original_opacity=0

#   Number of intermediate images
steps=100

for i in $(seq 0 $((steps - 1))); do
    #   Calculate current crop size
    crop_size=$(echo "$start_crop - ($start_crop - $end_crop) * $i / ($steps - 1)" | bc)
    crop_size=$(printf "%.0f" "$crop_size")  # Round to nearest integer

    #   Keep zoom centered on the target
    crop_x_offset=$(echo "$target_x - ($crop_size - $end_crop) / 2" | bc)
    crop_y_offset=$(echo "$target_y - ($crop_size - $end_crop) / 2" | bc)

    #   Once centred, zoom in normally
    if (( crop_x_offset < 0 )); then crop_x_offset=0; fi
    if (( crop_y_offset < 0 )); then crop_y_offset=0; fi

    #   Generate output filenames
    background_file=$(printf "%s_%03d.png" "background" "$i")
    overlay_file=$(printf "%s_%03d.png" "overlay" "$i")
    combined_file=$(printf "%s_%03d.png" "combined" "$i")

    #   Crop and resize the base
    convert "base.png" -crop "${crop_size}x${crop_size}+${crop_x_offset}+${crop_y_offset}" \
            -resize "${upscaled_size}x${upscaled_size}" \
            "$background_file"

    #   Transparancy for the overlay
    opacity=$(echo "$original_opacity + 0.01 * $i" | bc)

    # Crop and resize the overlay
    convert "overlay.png" -alpha on -channel A -evaluate multiply "$opacity" \
            -crop "${crop_size}x${crop_size}+${crop_x_offset}+${crop_y_offset}" \
            -resize "${upscaled_size}x${upscaled_size}" \
            "$overlay_file"

    #   Combine the two files
    convert "$background_file" "$overlay_file" -composite "$combined_file"
done

#   Create a 25fps video, scaled to 1024px
ffmpeg -framerate 25 -i combined_%03d.png -vf "scale=1024:1024" -c:v libx264 -crf 18 -preset slow -pix_fmt yuv420p recursive.mp4

Left is upper-case HTTPS://EDENT.TEL/ and right is lower-case https://edent.tel/

You can clearly see that the one on the left is a "smaller" QR as it has fewer bits of data in it. Both go to the same URl, the only difference is the casing.

What's going on?

Your first thought might be that there's a different level of error-correction. QR codes can have increasing levels of redundancy in order to make sure they can be scanned when damaged. But, in this case, they both have Low error correction.

The smaller code is "Type 1" - it is 21px * 21px. The larger is "Type 2" with 25px * 25px.

The official specification describes the versions in more details. The smaller code should be able to hold 25 alphanumeric character. But https://edent.tel/ is only 18 characters long. So why is it bumped into a larger code?

Using a decoder like ZXING it is possible to see the raw bytes of each code.

UPPER

20 93 1a a6 54 63 dd 28   
35 1b 50 e9 3b dc 00 ec
11 ec 11 

lower:

41 26 87 47 47 07 33 a2   
f2 f6 56 46 56 e7 42 e7
46 56 c2 f0 ec 11 ec 11   
ec 11 ec 11 ec 11 ec 11
ec 11 

You might have noticed that they both end with the same sequence: ec 11 Those are "padding bytes" because the data needs to completely fill the QR code. But - hang on! - not only does the UPPER one safely contain the text, it also has some spare padding?

The answer lies in the first couple of bytes.

Once the raw bytes have been read, a QR scanner needs to know exactly what sort of code it is dealing with. The first four bits tell it the mode. Let's convert the hex to binary and then split after the first four bits:

The UPPER code is 0010 which indicates it is Alphanumeric - the standard says the next 9 bits show the length of data.

The lower code is 0100 which indicates it is Byte mode - the standard says the next 8 bits show the length of data.

Look at that! They both have a length of 10010 which, converted to binary, is 18 - the exact length of the text.

Alphanumeric users 11 bits for every two characters, Byte mode uses (you guessed it!) 8 bits per single character.

But why is the lower-case code pushed into Byte mode? Isn't it using letters and number?

Well, yes. But in order to store data efficiently, Alphanumeric mode only has a limited subset of characters available. Upper-case letters, and a handful of punctuation symbols: space $ % * + - . / :

Luckily, that's enough for a protocol, domain, and path. Sadly, no GET parameters.

So, there you have it. If you want the smallest possible physical size for a QR code which contains a URl, make sure the text is all in capital letters.

This blog post was exhibited at QR Show, NYC

When I first wrote about QR Hijacking in 2011, I said that such attacks were usually easy to spot:

Recently, a new wave of QR Hijacking attacks have been reported in Bournemouth:

A further warning about fake QR codes on parking ticket machines has been issued after new stickers were found in numerous beach resort car parks.

When scanned the codes go to a fraudulent website.

Further warning over fake parking QR code scam - BBC News

Let's take a look at some photos of the attacks. Then I'll explain how to prevent them.

First up, this photo from Bournemouth, Christchurch and Poole Council's Facebook page:

These are pretty crappy attempts! The original code in the top right corner has been covered, which might fool some people. However, it is pooly aligned and sized. The other code is sloppily placed in the middle of the text. It doesn't look convincing. While the codes may have looked legitimate when first placed on, ten minutes in the English rain makes it apparent that they are paper forgeries.

And then there's this QR code randomly stuck on to a parking machine:

The URl it goes to is superficially convincing - fee-parking-pay.info - but let's take a closer look:

It has been inexpertly cut out, it is too large for the space provided, and is clearly stuck on. Rubbish!

Finally, there's this sticker found by Bournemouth Police:

This one is much harder to spot! It's about the right size and shape. It looks well aligned and the paper hasn't degraded. But do you notice what's printed above it? The official URl. And that leads me on to…

How to Prevent QR Code Hijacking

Putting QR codes behind a glass screen isn't always practical, and reflections in the glass can make it hard to scan a code. It's difficult to make a code physically inaccessible for a scammer while also making it easy to scan.

The number one thing to do is display the official URl nearby.

Every QR scanner that I know shows you the URl before opening the page. Every web browser shows you the full URl of the site you're on.

If someone scans a code which goes to totally-official-parking.biz but they can see the parking sign says pay4parking.gov.uk then they are much less likely to fall for the scam.

You can do fancy things like incorporate a logo into you QR, or print it on a coloured background, or have people regularly check your codes for signs of tampering. Those might keep your users secure, but can be bypassed by a sufficiently determined attacker.

A large printed URl isn't infallible, but it is much harder for an attacker to deface a large area of a poster than it is to cover a small QR square.

As for what to do if you're worried about the legitimacy of these codes:

Anyone worried about paying online for parking can also pay by debit card/contactless or cash at a parking meter.

BCP Council

Here's the end result:

Background

I'm going to assume that you have updated your badge to the latest firmware version.

You will also need to install mpremote on your development machine.

You should also have successfully run the basic Hello, World! app.

Drawing surface

The Tildagon screen is 240x240 pixels. However, it is also a circle. This gives an internal square of 170x170 pixels. The drawing co-ordinates have 0,0 in the centre. Which means the target area is the red square as shown here:

Generate a QR code

As you can see, there isn't much space here. A Version 1 QR Code is a mere 21x21 pixels. When set to "Low" error correction, it can contain up to 25 characters. A URl should start with https:// - which is 8 characters. That leaves 17 characters for the domain and path.

Use your favourite QR generator to make the tiniest QR code you can. Make sure there's no border. It should be 21x21 pixels. Here's mine:

See? Tiny!

Prepare the QR code

Next, we need to turn the QR code into a binary matrix. There may be easier ways to do this, but I used a scrap of Python:

from PIL import Image
import numpy as np

#    Load the image
image = Image.open("qr.png")

#    Convert the image to grayscale
gray_image = image.convert("L")

#    Threshold the image to get binary black and white image
threshold = 128
bw_image = gray_image.point(lambda x: 0 if x > threshold else 1, '1')

#    Convert the image to a NumPy array
pixel_array = np.array(bw_image, dtype=int)

#    Convert the array to a string with commas between the elements
array_str = np.array2string(pixel_array, separator=',', formatter={'int':lambda x: str(x)})

print(array_str)

Copy the output - we'll need it later!

Calculate size

We have a canvas of 170 pixels and a QR code of 21 pixels. 170 / 21 = 8.1 pixels. Ah. Drawing fractional pixels isn't fun. Luckily, QR codes benefit from having a safe area around them. If we make each QR pixel 7 screen pixels, that gives us (21 x 7) = 147 pixels. Which gives us enough space for a small white border.

If the QR code is to be centred, the top left corner will be in position (147 / 2) = 74. That means it will need to be drawn at position -74,-74. The top left corner is -120,-120.

So the offset used to calculate the location is (-120 + 74) = 46.

(You might be able to get away with 8 pixels and an offset of 36 pixel. Try it!)

Remember those numbers!

Write the app

This reuses a lot of the Hello World code.

import app
from app_components import TextDialog, clear_background
from events.input import Buttons, BUTTON_TYPES

class QrApp(app.App):
    #   Define the colours
    black = (  0,   0,   0)
    white = (255, 255, 255)

    def __init__(self):
        self.button_states = Buttons(self)

    def update(self, delta):
        if self.button_states.get(BUTTON_TYPES["CANCEL"]):
            self.button_states.clear()
            self.minimise()

    def draw(self, ctx):
        clear_background(ctx)

        #   QR code data (21x21 matrix)
        qr_code =[[1,1,1,1,1,1,1,0,0,1,1,0,0,0,1,1,1,1,1,1,1],
                  [1,0,0,0,0,0,1,0,1,0,1,0,0,0,1,0,0,0,0,0,1],
                  [1,0,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,0,1],
                  [1,0,1,1,1,0,1,0,0,1,1,0,0,0,1,0,1,1,1,0,1],
                  [1,0,1,1,1,0,1,0,1,1,1,1,0,0,1,0,1,1,1,0,1],
                  [1,0,0,0,0,0,1,0,1,1,0,1,0,0,1,0,0,0,0,0,1],
                  [1,1,1,1,1,1,1,0,1,0,1,0,1,0,1,1,1,1,1,1,1],
                  [0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0],
                  [1,1,0,1,0,0,1,1,0,0,1,0,0,0,1,1,1,0,1,1,0],
                  [1,0,1,1,1,1,0,1,1,0,0,1,1,0,1,1,1,0,0,0,1],
                  [1,0,1,0,0,1,1,1,0,1,1,0,1,0,0,0,0,0,1,0,1],
                  [1,1,1,1,0,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1],
                  [1,0,1,0,0,1,1,1,0,0,1,1,1,0,0,1,0,1,0,0,0],
                  [0,0,0,0,0,0,0,0,1,0,0,0,1,1,0,1,0,0,0,0,1],
                  [1,1,1,1,1,1,1,0,1,0,1,0,1,1,0,0,1,1,1,1,0],
                  [1,0,0,0,0,0,1,0,0,0,0,1,1,0,0,1,1,0,0,0,0],
                  [1,0,1,1,1,0,1,0,0,0,1,1,0,1,0,0,1,1,0,1,1],
                  [1,0,1,1,1,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,1],
                  [1,0,1,1,1,0,1,0,0,0,1,1,1,0,1,0,1,0,1,0,1],
                  [1,0,0,0,0,0,1,0,1,1,1,0,0,1,0,0,0,0,0,0,0],
                  [1,1,1,1,1,1,1,0,1,0,1,0,1,0,1,0,1,0,0,1,0]]

        #   Draw background
        ctx.rgb(*self.white).rectangle(-120, -120, 240, 240).fill()

        #   Size of each QR code pixel on the canvas
        pixel_size = 7

        #   Offset size in pixels
        offset_size = 46

        #   Calculate the offset to start drawing the QR code (centre it within the available space)
        offset = -120 + offset_size

        #   Loop through the array
        for row in range(21):
            for col in range(21):
                if qr_code[row][col] == 1:
                    x = (col * pixel_size) + offset
                    y = (row * pixel_size) + offset
                    ctx.rgb(*self.black).rectangle(x, y, pixel_size, pixel_size).fill()

__app_export__ = QrApp

Installation

• Follow the instructions
• Run mpremote cp ~/Documents/badge/* :/apps/qr/
• Restart the badge
• Scroll down the app list and launch the QR app

The non-stupid way!

OK, that was the hard way - here's the easy way.

Use the MicroPython QR Generation library uQR.

If you pop that file in your project directory, and upload it to the badge, then you can import it with:

from .uQR import QRCode

The QR code has its own white margin and is a 2D array of True & Falses.

# QR code data (29x29 matrix)
qr = QRCode()
qr.add_data("https://edent.tel")
qr_code = qr.get_matrix()
qr_size = len( qr_code )

#   Draw background
ctx.rgb(*self.white).rectangle(-120, -120, 240, 240).fill()

#   Size of each QR code pixel on the canvas
pixel_size = int( 170 / qr_size ) + 1

#   Border size in pixels
border_size = ( 240 - (pixel_size*qr_size) ) / 2

#   Calculate the offset to start drawing the QR code (centre it within the available space)
offset = -120 + border_size

#   Loop through the array
for row in range( len(qr_code) ):
    for col in range( len(qr_code) ):
        if qr_code[row][col] == True:
            x = (col * pixel_size) + offset
            y = (row * pixel_size) + offset
            ctx.rgb(*self.black).rectangle(x, y, pixel_size, pixel_size).fill()

Next steps

• This is hardcoded for a single QR code - mine! Perhaps it should be configurable?
• Add some text to the screen?
• Animations? Colour? Flashing LEDs?

Got any thoughts? Stick them in the box!

I was trying to explain why link shortners like bit.ly and ow.ly weren't sensible for Government use. They didn't seem to particularly care about the privacy implications or the risk of phishing. I needed to take a different tack.

"So, you know how .uk is the UK and .de is Germany, right?"
"Yes."
"What country do you think .ly is for?"

There was some consulting of ISO 3166-1 alpha-2 whereupon the blood drained from their face and they stepped outside to make a phone call.

A little while later, the National Cyber Security Centre published an explainer about why they weren't using bit.ly any more.

Throughout my time in the Civil Service I advocated for the use of .gov.uk URls everywhere. They're a trusted destination for users, they're under Government control so are less likely to be hijacked, and they don't require users to give their data to third parties.

I helped the Government Communication Service write "Link shorteners: the long and short of why you shouldn’t use them."

Today, in the post, I received six QR codes for Government services. Let's take a look at them.

The Good

Policing Surrey have a QR code which points to surrey-pcc.gov.uk/...

Excellent! 10/10! No notes.

Woking Council send out this code which use qr.woking.gov.uk

Brilliant! The use of the qr. subdomain means they can easily track how many people follow the link from the code.

The Bad

Childcare Choices is a leaflet which is, I assume, shoved through everyone's letterbox. All the URls in the leaflet say gov.uk² - but what happens when you scan?

Our old friend enemy Bitly. A user scanning this has no idea where that code will take them. They cannot access the content without giving their data away to Bitly.

Surrey also sent me a leaflet with two different QR codes.

There are many reasons not to use .io. Of particular interest is the scnv.io privacy policy which, if you click that link, you will see is missing from their website! What does this company do with the data of people who scan that code? No one knows!

The Ugly

Surrey police started so well, but the back of their leaflet is a major disappointment.

Aside from using an unintelligible Bitly link, the QR code is inverted. The QR standard is very clear that the codes should be black-on-white. Some scanners will have difficulty scanning these white-on-dark codes. They may look æsthetically pleasing, but it's a pretty rubbish experience if you can't scan them.

Now What?

I've been writing about QR codes for 17 years! I'm thrilled that they've finally caught on. But, like any piece of technology, they need to be used sensibly. The rules are pretty straightforward - mostly boiling down to testing your codes and keeping them simple.

Is there a risk risk of QR hijacking? Possibly. The best defence is to train users to look for a trusted URl.

In this case, using link shorteners is training users to be phished. If they are used to official Government QR codes going to weird locations, they won't notice when a scammer tries to send them to a dodgy site.

Please practice safe QR generation!

Their terms and conditions at the time said

We will also use commercially reasonable efforts to make these basic features available until at least January 1, 2015, and provide two years prior notice before we terminate the basic features or the entire Microsoft Tag service.

Well, they've just given their two years' notice. They've offloaded the entire service off to ScanBuy:

Through August 19, 2015, you will be able to continue to log into your existing Microsoft Tag service account, use existing Microsoft Tag codes, generate new Microsoft Tags, and run reports as usual. Scanbuy plans to support Microsoft Tag Technology on the ScanLife platform beginning no later than September 18th, 2013, and to offer transition and migration services to Microsoft Tag customers who choose to migrate to the ScanLife platform.

I've got nothing against ScanBuy - but why would anyone carry on with this ridiculous platform now? What's to stop ScanBuy in the future abandoning it, going bust, or radically changing the pricing structure? Nothing.

With QR codes, you have an open standard where the destination is controlled by you! There's no relying on the largesse of multinationals to keep a service running.

I've been tracking the rise of QR codes in advertising for several years now. People keep asking me when NFC will take over for "boring" QR codes - based on the few live NFC examples I've seen in the UK, NFC will be trailing QR for several more years.

Let me talk you through TAP4offers' latest "effort".

The poster is fairly clear about what to expect - although I initially thought that I'd have to stretch to the top of the carriage to scan the NFC tag!

Thankfully, that's not the case. Beside every exit were these combined NFC / QR / SMS stickers. The NFC tag and QR code each had a unique tracking URL, so the owner of the service (Gunars Vucens) can see which method is being used the most. Judging from the URL and the printed information, I would guess each train carriage has a unique code.

Once the code is scanned - this happens.

What - as the kids say - The Fuck? I've no idea how much it costs to do a deal with South West Trains - but someone has wasted their money!

This is the same mistake that Clear Channel made on their QR/NFC posters.

Why bother with this? Seriously? What's the point of installing all these codes? They've been there for months - disappointing everyone who interacts with them.

Despite the advertiser's promise of a relaunch, nothing seems to be happening with these codes.

Gunars

@gunnars_v

New and upcoming #TAP4offers is due to change and expand rapidly in following weeks, keep and eye out! #nfc #tap4 #offers

---

Logo Problems

As well as the general uselessness of the destination, there is another flaw with the service.

Firstly, there's yet another NFC logo! Proxima's report to the GSMA already identified half a dozen common logos. GSMA NFC Logo, NFC Forum's N-Mark, ClearChannel's NFC Mark, etc. etc.

So, overall, a pretty pathetic effort.

If NFC is to overcome its significant obstacles - price, hardware requirements, lack of public awareness - the campaigns underpinning it must be better than this.

Most of the QR codes that I see now are pretty good. They have clear explanatory text, point to mobile websites, and generally follow the Ten Commandments for QR codes.

But, every so often I spot one which really shouldn't have been let out in the wild. A property company (who shall remain nameless to spare their blushes) printed this QR code at the bottom of an advert - beside the logos showing how green and ISO compliant they are.

Wow! It's not that I have monster-sized fingers - that QR code really is tiny.

Let's zoom in and take a look at what the newspaper printing process has done to the code.

As we can see, the printing resolution just isn't sufficient for a code as tiny as this. The fragile pixels become an inconsistent mess, straight lines go wobbly, and the ink bleeds into the whitespace.

QR codes need unambiguous pixels with a clear delineation between content and space. Lines need to be straight, squares need to be square, and the contrast between colours needs to be high. This QR code fails on all levels.

Even if this code had been laser printed onto premium white paper, it would still be too small for many cameras to scan. It would require a macro focus that is lacking in all but high end devices.

One of the most important rules of QR codes is simply "test". This code just doesn't work. It could lead to the greatest mobile experience known to humanity - but if a user can't actually get to it, all is for naught.

I'm a long term fan of QR codes. I know some people don't like the idea of augmenting reality with specific tags for computer vision - but I do. Some people prefer RFID/NFC. Others still prefer dedicated augmented video apps.

As I've written many times before, QR codes have several substantial advantages over alternate technologies.

• QR is a free and open standard.
• Compatible with every phone with a camera.
• No need to build or use a dedicated app.
• Free to generate.

Today, in the canteen, I think I have found the quintessential example of just how radical the open simplicity of QR codes is.

Tiny sachets of salt an pepper. Created in their millions. Given away for free the world over. Each stamped with a unique ID which can be recognised easily by a computer.

For scale, this is how small they are.

Now, I'll be the first to admit that a website about salt is not the most riveting thing in the world. But that's exactly the point! The costs associated with setting this up are close to zero. Amortized over every sachet it's probably less than the cost of a grain of salt.

There's no opportunity cost lost - what else could you stick on the side of a packet that small?

I like the fact that I can instantly see nutritional information and can certainly see it being more useful on larger items. But, again, that's the point. QR codes are free - so you might as well stick them on everything.

It's this dual freedom - free to generate and free to print - which makes QR codes ubiquitous.

The main problem with NFC (aside from lack of readers, inability for a user to tell a tag is present, proximity needed, etc) is cost. Even bought in bulk, those little RFID chips have a price. Buying 20,000 of them to stick on salt packets is an extravagance an unlikely to see any ROI to offset the cost of buying the chips and changing the manufacturing process to incorporate them. Not to mention that the chips can't be recycled easily.

QR Codes? Black ink. If you're already printing onto a surface, QR codes don't require any retooling or any equipment purchases.

I know that in our modern world we often strive for technical excellence, innovation, and quality. However, where there are two relatively compatible technologies, it is usually the cheaper technology which wins.

In many of the more relaxed civilizations on the Outer Eastern Rim of the Galaxy, the Hitchhiker's Guide has already supplanted the great Encyclopaedia Galactica as the standard repository of all knowledge and wisdom, for though it has many omissions and contains much that is apocryphal, or at least wildly inaccurate, it scores over the older, more pedestrian work in two important respects. First, it is slightly cheaper; and second, it has the words "DON'T PANIC" inscribed in large friendly letters on its cover. —Hitchhiker's Guide to the Galaxy

The Internet of Things will be powered - in part - by QR codes. Try not to get too upset about it.

If you see that a light - or anything else - is damaged, you can scan the QR code and report the issue. There's even a phone number and vanilla URL for those who aren't quite up to speed with new technology.

There's only one slight issue - the QR code points to this site.

The fact that the landing page isn't mobile friendly is bad enough, but what's worse is that they completely fail to take advantage of sending the user to a precise URL.

What should happen is that the URL should be something like

http://qr.camden.gov.uk/light/22

There are two solid reasons for doing this.

1. It saves the user time - take them directly to where they need to go.
2. You can track where users are scanning your codes.

QR codes are free to generate, and cheap to print. You don't need to be stuck in the old way of thinking about how you link the physical world to the digital world.

Imagine if, after scanning, the user was told "You're reporting street light 22 (Bedford Square) as broken. Click here to confirm." And then, perhaps, on the next page "We'd like to stay in touch with you - please enter your details here." which could even be a Facebook / Twitter login.

As the owner of the QR, you can see exactly where and when people are scanning - at the moment, all the council knows is that one of the thousands of QR codes was scanned, but not which one.

It also means that users don't have to fiddle around on their phone's screen too much in order to report a problem. At the moment, they have to navigate through a complex site, fill in a form, and then hope they remembered which number street lamp was busted.

It could be as simple as scan - click - done. A win for users, and a nice set of analytics to monitor.

As I was walking around Camden the other day, I spotted this monstrosity.

I figured with a code that dense, it probable contained a URL to a rubbish iPhone app, or perhaps a link stuffed full of tracking parameters.

Still, what the heck, I scanned it.

What's the bloody point in that?

Here's a guide on "How Not To Screw Up With QR Codes" which I presented at TeaCamp earlier this year.

How Not To Screw Up With QR Codes - at TeaCampLondon from Terence Eden

sigh A non-mobile site. With an Adobe Flash plugin in the top right which won't work on any iPhones. Why on Earth do marketing companies insist on pointing phones to non-mobile sites. It really bemuses me. Stations rarely have good signal (too many people leads to local network congestion) and, besides, large sites are a right pig to use on a small screen.

Stats

I've blogged several times about using Bit.ly links in QR codes. With a little bit of hacking (adding at + character to the end of the URL) we can see how many people have been scanning the code.

I don't know how many of these tickets have been printed. That might be a really good conversion rate - but I doubt it. I only noticed the QR code because someone had dropped their ticket and it landed face-down. Realistically, how many people look at the back of their tickets?

The best campaign in the world would fail if it's not put in front of an audience.

Here are the codes on the posters - click for bigger.

As all the codes use Bit.ly so we can see how well they've performed - click on each one for the latest statistics.

Not the most impressive of campaigns.

Three strong points to note before pointing out how (in)effective QR marketing is:

1. How many clicks would a traditional URL on a poster get?
2. The code with the call-to-action has the strongest response. Would the others have improved with a CTA?
3. How many of these posters are in the wild? I only spotted one set, but I suspect there are more.

QR Codes are Scanned by Mobile Phones

Why would you point a QR code at a non-mobile site? And, just as bad, why not point directly to an app-store when you want people to download an app? Ah, it's because your advert's promise of an Android app is a lie. Very disappointing.

If you need a bespoke QR consultation, please contact Terence Eden

I'm still looking for a catchy name for it (suggestions welcomed) - so for now it's called "QR Generator PHP".

It's available on GitHub or you can use it directly.

So, how does it compare to Google Charts?

Usage

Usage is really simple.

To generate a QR code which says "hello": qr.php?d=hello (Click to see the QR code)

You can set the size with, oddly enough, the size parameter: qr.php?d=hello&size=1000 Size can be up to 1480 pixels.

You can set the image format to JPG or GIF. By default it outputs PNG. qr.php?d=hello&t=J

The Error Correction can be set to L, M, Q, or H. qr.php?d=hello&e=H

You can also tell the web browser to download the image - rather than just display it. The "download" parameter sets the filename for the image. qr.php?d=hello&t=g&download=testing The file will be called testing.gif (filetype is determined automatically)

Installation and configuration

Installing the software on your web server is easy. You need PHP4.1 or higher and gd 1.6 or higher. Those are fairly old versions, so any competent web host will have those.

There are three folders.

 |_php
 |_data
 |_image

DO NOT TOUCH THE CONTENTS OF THE data AND image FOLDERS.

Inside the php folder, you'll find the "qr.php" file.

There are only two things you need to configure - the location of the data and image folders

$path = "./../data"; // You must set path to data files.
$image_path = "./../image"; // You must set path to QRcode frame images.

By default, they're set up to be accessed without any modification. But, if you desperately want to move them to a different location, make sure you update qr.php.

Copyright

I've based my QR generator on that of Swetake. The original was licensed as "revised BSD" - I have kept the original licence.

Feedback

If you've got any feedback - either leave it in the comments here, or over at GitHub.

These posters were designed by participants at the Occupy Wall Street protest in New York City. They are in the public domain. You are welcome to print them out and post them in your own location.

See all the posters.

I love this use of QRpedia - but I have two minor suggestions. QR codes work best with some whitespace around them, so:

1. Move the QR code away from the margin - so it won't get covered by tape etc.
2. The call to action - "Learn More At Wikipedia" - should be slightly further away from the main body of the code.

Other than that - very impressive.

OccupyLSX

I took a walk through the OccupyLSX encampment at St Pauls. I have to say, the QR codes on display weren't as impressive as the above posters.

More Resources

There are a range of Occupy QR codes out there. Some work really well, some don't. Take a look at:

• Occupy Syracuse QR.
• Occupy Austin QR.
• Occupy Las Vegas QR.
• Occupy Davis QR.
• And finally, Occupy Legoland.

Tracey Emin

The Hayward Gallery are having a Tracey Emin retrospective. At the start of the exhibition is this rather odd QR code.

Why odd? Three main reasons.

1. It leads directly to a 14MB MP3 file.
2. The code is really quite small considering it's a low-lit gallery.
3. Rather that being printed directly onto the wall, it appears to be a separate sticker.

The MP3 is an audio guide to the exhibit. That's a great idea - let people listen on their own equipment rather than the gallery having to fork out for expensive audio playback devices.

The specific implementation has two major problems. Firstly - file size. While 14MB ought not to cost too much - unless you're a tourist roaming - the signal strength in the gallery isn't great, and there's no free WiFi. The audio isn't that well compressed - I was able to reduce it to 5MB with only a minor loss of quality. As users are likely to be listening on cheap mobile phone headphones, high-fidelity isn't always necessary.

Secondly, there's no warning that you're about to download a large file. The QR code goes straight to the MP3. I think a small mobile-friendly interstitial would have been useful here. Tell the user what's about the happen, how large the file is, etc.

Cambridge University

Cambridge University joins Kingston University in the "not-quite-getting-QR" camp.

The CTA is too far away from the code, the URL leads to a non-mobile optimised site, and they've taken the rather strange decision to use "bitly.com" rather than "bit.ly" as their URL's domain - adding 3 extra characters.

It's the use of Bit.ly by both Emin and Cambridge that I want to discuss.

Bit.ly Still Considered Dangerous?

I tell my clients to avoid using Bit.ly where possible. Especially for anything sensitive. I don't fully agree with Ben Metcalfe's analysis of the Lybian owned .ly tld - but bit.ly does have some rather worrying default security settings.

You can see a bit.ly URL's statistics by appending a "+" symbol to the end of the URL. So, here are the statistics from Tracey Emin's and Cambridge University's QR codes. Click the graphs for the full set of stats.

While this is great for nosey people like me who are interested in how well used QR codes are - do you really want your competitors knowing how well your campaign is doing?

An edited version of this paid-for post appeared at Moo.com on the 7th of June

QR codes are awesome! I mean, you may think your moo mini-cards are pretty funky - but they're nothing without a QR code.

Why do you hand your card over to someone? You want the recipient to plug your contact details into their address book, right? So you give them a bit of card and then you expect them to tap away on their phone, like a primitive ape, until they've saved your number. And hope they've saved it correctly.

That's just so.... analogue... Isn't there a better way of doing things?

Yes. Yes there is. QR Codes are here and they are going to ROCK YOUR WORLD!

Introducing QR Codes

QR Codes are two dimensional barcodes which can quickly and easily be scanned by most camera phones. They're free to create, easy to use, and they look like this. Go take a look in your phone's app store - you'll find several free readers. If you can't, point your phone to GetReader.com to see what's available for your device.

QR Codes can contain many different types of data - URL, phone number, SMS, and vCard. I'm going to show you how you can integrate these into your Moo Cards.

URL

With a QR code on your Moo Card, you can point people straight to your blog. To your .tel website. Or any other site you like. Perhaps to search Twitter for your hashtag?

Phone Number

Scanning in this code will prompt your phone to give me a call. Why not leave me a message?

SMS

Want someone to scan your card and send you a message? Dead easy.

vCard

Scan this code and my address will appear in your phonebook as if by magic One thing to note is that these QR codes are rather large - it's probably best to print them on full size cards.

Putting It All Together

Here are some of my cards. I've used free or Creative-Commons images of phones and placed the QR code inside them.

Resources

There are several free sites you can use to create your QR Codes. I recommend using QRstuff to generate these codes. You can also use Google Charts for QR Codes if you want dynamic, highly customised codes. Finally, if you want to generate QR codes on your own site, there are several free resources. I use Swetake's QRCode v0.50.

Final Tips

Here are some tips to make sure you get the most out of your QR codes.

• Use black ink on a white background to ensure the code is readable.
• Ensure there is some whitespace around the code.
• If you resize the QR codes, don't use any interpolation.
• QR Codes can have variable error-correction. Unless your codes are likely to get dirty, you can set this to "low".
• If you're pointing people to a URL, make sure it's mobile friendly.
• Make sure your phone numbers are in International Format (+44 for the UK).
• Be creative! QR Codes are appearing on everything from advertising posters to urban graffiti - make sure yours stand out.

We're now seeing the same sort of problems in the QR space. Marketeers are using them without any really thought of how or if they work.

It doesn't need to be this way. There are some simple rules to ensure you create a great QR code experience.

The Ten Commandments

It's always pleasing to have a list of ten things to do. In reality, successful use of QR codes can be boiled down to 8 simple commandments.

1. Your QR code shall be large enough and clear enough to scan easily.
2. Your QR code shall contain the minimum amount of data necessary.
3. Your QR code shall resolve to a mobile friendly resource.
4. Your QR code shall work for an international audience.
5. Your QR code shall work on all platforms.
6. Your QR code shall generate statistics and thou shalt analyse them.
7. Your QR code shall have a sufficient call to action.
8. Your QR code shall be tested.

What do those commandments mean? Read on...

1. Scanning

This is really basic and boils down to 4 key points.

• Black ink on a white background. Yes, you can use dark colours on light backgrounds - but if you want it scanned by the majority of people, keep it simple.
• Whitespace around the edge. This should be the equivalent of 2 rows.
• Print it large enough so that all bits can be seen
• Keep it square

Here's a code which violates the majority of the above.
London South Bank University has a code with minimal whitespace, so small the newsprint smudges, and deformed so it isn't perfectly square. As a result, the code isn't particularly scannable.

2. Minimum Data

The fewer bits of data in a QR code, the smaller it is. Obvious, no? The small the code is, the larger and clearer we can print it - making it easier to scan. The less data in the code, the quicker it is to scan. This is especially important on phones with low camera resolution.

There are two ways to go about reducing the amount of data you pack into a code.

Reduce Size

Both these QR codes lead to the same web page - this post - but one has a shorter URL than the other.

Appropriate Error Correction

QR supports 4 levels of error-correction. This means if the code gets damaged or disfigured, it should still be scannable.

If you're printing on signs which are going to be exposed to the elements, it makes sense to increase the level of error correction. Most users can get away with a very low level. Here are the differences

3. Mobile Friendly

QR Codes are mostly scanned by mobile phones. Why then, would you make a code point towards your mult-megabyte, flash heavy, non-mobile main site?

Mobile Web

This code from Superdrug takes you to an abomination of a site.

Not only is the site hard to use on mobile, it will take the user ages to download - especially if they're not in 3G or WiFi coverage. If they're paying per MB, they won't thank you for taking them to such a useless site.

Mobile Phone

UK users: Under no circumstances use "free" numbers like 0800, nor "premium rate" numbers like 0845 & 0870. The call costs to these numbers from most mobile phones is extortionate. If possible, use a geographic number, mobile number, or an 03 number.

4.International

In the above example, you will have seen that my mobile number was rendered as starting with +44. That's because you don't know if the mobile phone scanning the code has a UK SIM in it. Nor do you know if the user is roaming. If you are doing anything with calls, make sure that international users can access your code.

5. Multi-Platform

The world is more than an iPhone. If the page or service you are linking to only works on one phone - you've failed.

That said, if you genuinely only have an iPhone game, make sure that you point to a site which will detect the make and model of the phone and direct it correctly.

For example, rather than pointing a QR directly to iTunes, point to an intermediary site. If a non-iPhone scans the code, you can redirect it to your mobile friendly site - or a page telling them that it's not available.

This is also useful for the next commandment.

6. Statistics

You should be tracking hits to your website anyway - but these are the minimum you must consider when implementing a QR code.

What

Do not point your QR code to your main site - always track the code so you can see if hits are coming from QR codes. EG

example.com/qr
qr.example.com
example.com/foo?s=qr

Who

As mentioned above, track the User-Agents hitting your site. Are you getting more QR hits from Android or BlackBerry?

Where

QR codes are cheap. You can create a different QR code for every campaign you run.

example.com/foo?s=6pack
example.com/foo?s=2litre
example.com/foo?s=6litre
example.com/foo?s=GuardianNewspaper
example.com/foo?s=NYT
example.com/foo?s=90210

7. CTA

What does your QR code do? Where does it lead? What benefit will the user get from scanning it in? Does the user even know what to do with a QR code? What should they do if they don't have a QR scanner?

Consider something like these examples.

Get the latest news on your mobile - scan the code to visit bbc.mobi/news

Download our app for the best deals. Grab a free scanner by searching for "QR Code" in your phone's app store.

Donate to our charity. Scan the QR code with your smartphone to give just £5

Call us to find out more. Scan to call 03069 990123

For more great ideas, read How to create a great call to action.

8. Testing

Buy a dozen cheap handsets from a pawn shop. Test your code. Test the code in a variety of lighting conditions, at a varying range of distances, at different resolutions, on different networks, using a wide selection of QR scanning software.

Your users are not a homogeneous bunch. The people seeing your QR code don't all have the same make and model Android phone as you do.

You wouldn't test your website only in Internet Explorer, would you? You'd make sure it worked in Firefox, Safari, and Opera. Let it be so with your QR codes.

Putting It All Together

You're not too stupid to understand how to make effective use of QR codes. The "commandments" are mostly just common sense.

Use QR codes wherever they seem appropriate - but make sure that they're scannable, work for everyone who scans them, and lead somewhere useful.

Suggestions for commandments 9 & 10 are welcome. Please drop them in the comment box.

Another year, another OpenTech. I found last year's OpenTech conference to be awe-inspiring. This year's was equally good.

This is a quick rundown of the sessions I attended that I found particularly interesting.

How can we win the Information Wars?

A roundup of what the Open Rights Group has been doing over the last year. Always good to hear from them. Interesting to learn about the tensions of being up against a company for some issues - yet supporting them in others. Good to see that they're still banging away at the digital civil liberties drum.

Ada Lovelace Day

Once again, Suw eloquently demonstrated the need to get more women interested in "tech" by promoting positive role models. The Finding Ada project runs an international event to help raise the profile of women in science, technology, engineering and maths.

Codifying sustainability

How can you trust what you read in a report?

The UN panel on climate change warning that Himalayan glaciers could melt to a fifth of current levels by 2035 is wildly inaccurate, an academic says.

J Graham Cogley, a professor at Ontario Trent University, says he believes the UN authors got the date from an earlier report wrong by more than 300 years.

He is astonished they "misread 2350 as 2035".

Source: BBC News

In the "good old days" we relied on footnotes which, imperfectly, lead us to the original research.

The AMEE project aims to provide an unimpeachable set of references for every claim - allowing you to track the providence of a quote, statistic, or datum. Vitally important.

Building Digital Culture for Free: Can the Hacker Ethic and Comons-Based Peer Production make a better world?

Bill Thompson is always an entertaining speaker. Here, he was discussing whether "hackers" have won the culture wars. You can buy The Hacker Ethic on Amazon (including Kindle). Very reasonably priced.

This raised two interesting questions.

1. How many deaths were caused by Gutenberg and, ultimately, did his invention help propagate his world view? In other words, is Open Source being turned against us?
2. Are our inventions too disruptive to find acceptance in the mainstream?

At times, the questions started to get a bit political - especially around the true definition of Open Source.

Terence Eden is on Mastodon

@edent

#opentech "SPLITTERS!" it's all getting a bit People's Front of Judea in here.

---

Fluffy and poisonous - Why UKuncut has worked and how you can help.

I've been reasonably impressed at how quickly UKuncut has gathered grass-roots support around what is, potentiall, a dull subject - tax avoidance. I doubt the trades-union would have been able to garner anything like the support we've seen for UKuncut.

But I question whether they have been all that effective. Vodafone's share price has risen dramatically and they are constantly among the top UK brands.

Terence Eden is on Mastodon

@edent

#OpenTech I really don't think agitprop theatre has ever worked. I don't think @UKuncut is any different

---

(As I stated at the start of my question, I'm an ex-Vodafone employee and a current Vodafone shareholder.)

The answer I got back was well thought out and - to my mind - very helpful in understanding their aims.

Terence Eden is on Mastodon

@edent

#OpenTech very impressed with @UKuncut's answers. Like the idea of "gateway activism" & memetic seeding.

---

Essentially, causing mass economic disruption to a company isn't a great way to make them change their behaviour and is very tricky to accomplish in the long term. UKuncut are playing the long-game with a meme. Essentially, going around saying "Don't you think she looks tired?"

Watching the Press

Terence Eden is on Mastodon

@edent

#opentech really impressed with @davorg's simple deconstruction of how the press lies.

---

I especially liked the demolition of the Winterval Myth

Outpost

This was Tim Ireland's idea to crowd-source fact-monitor all MPs. A fine and noble idea and very well presented.

My only concern is that it avoids becoming partisan. I don't care if Politician X is a socialist, capitalist, atheist, or church-goer. They shouldn't be attacked for that. They should be held to account for any dodgy-dealing, fact free agitating, and dishonest conduct. It'll be interesting to see how it develops.

QR Codes - easy access to data

My slot! Prior to the event, I was interviewed by Imperica. I spent the first half of the day sticking Avery labels with QR codes all over the building.

Video

Slides

https://www.slideshare.net/slideshow/qr-codes-at-opentech-2011/8054740

Reaction

I'll let other people commentate on my presentation.

Paul Brewer

@pdbrewer

#opentech QR codes trumps Google Refine as the most exciting thing. Snap the code on your camera and get data back - get data, link to data

---

Ann Griffiths

@anngriffx

future possibilities for use of QR codes - councils need to get with these opportunities #opentech http://yfrog.com/h891651009j

---

CycleStreets

@cyclestreets

Great #OpenTech quote on subversive use of QR codes "Your local graffiti laws may vary"

---

Mark Braggins

@markbraggins

Lots of great ideas here: RT @edent: Slides from my #OpenTech session on QR Codes http://slidesha.re/mIRVBw

---

Overall

An amazing and inspiring day. The entry cost per participant was £5. I've paid a lot more for worse conferences. I was glad to see so many civil servants there - hopefully they're getting the message.

I'll leave the final words to James Cattell. This sums up exactly what OpenTech is all about.

James Arthur Cattell

@jaCattell

Left #opentech with 2 questions:
What needs changing in the World?
What's stopping me from doing it?

---