How to put your logo in a QR code | Hacker News Reader

How to put your logo in a QR code

hackaday.com

255 pointsxd50 comments

Shameless plug, but I coded up http://www.crimesagainstcode.com a little while back as a learning exercise that lets you manipulate QR code pixels like this. No logo image injection but you can "draw" whatever you want As long as you keep it within the error correction you can do whatever you want.

(it's admittedly not very robust, I have a lot more ideas for it, but my time is scarce and my site metrics haven't really shown there's enough interest to put a bunch of time into it -- feedback is welcome though).

Do you have Github for this project? I'm interested in building my own QrCode encoder in JavaScript, what resources do you recommend to get me started?

The entire site is up at https://github.com/mattsgarrison/CrimesAgainstCode

The RQRCode gem does all of the QR Code generation magic. I manipulate all the code with some CoffeeScript and jQuery. RQRCode itself is a port of a JavaScript library: http://www.d-project.com/qrcode/

I've written some stuff locally that'll render the QR Code into canvas and provide a download link using a dataURI but it's fundamentally different than the table/css manipulations I'm doing right now...and well, I have an infant at home, so the site's being neglected ;) PM me on github if you want that chunk.

An interesting counter-point here:

http://news.ycombinator.com/item?id=2800022

This was my reasoning not to do this when I put a QR code on my business card - too much risk of it becoming unreadable as the card got damaged/degraded over time.

That comment is a bit harsh. You don't have to use the same QR image everywhere and can choose where it makes sense to have one with logo and where it does not.

Agreed, but recognizing that the context matters is important. The comment (which wasn't mine - btw) was a bit harsh, but it did put clearly into words one half of what I was thinking at the time.

As is so often the case, cool is not always the best option, and context matters more than we'd like, and more than some people realize.

Agreed. We've been doing this with our MogoTix QR codes for some time. It's a branding opportunity, as well as a small indicator that someone's ticket is genuine.

Are you sure that comment applies here though? The QR codes it referred to and these are like night and day.

I created an Android app that let's you create customized QR codes like this on your phone. Check out https://market.android.com/details?id=com.rabidgremlin.andro...

Awesome app. Can I get in contact with you - i'd really like to talk about what you are doing with QR codes in more detail. If you get a moment - please drop me an email: wphipps78@gmail.com

I wonder how feasible would be to compute/brute-force QR code that actually has the data looking like a picture, not merely picture overlaid on the code.

Since there's built in error correction, it's easier to just manipulate the pixels to look like what you want and eat into the error correction. Most uses of QR codes don't need 30% ECC, you could generate it with 30% and consume 15% of it, thus injecting your design and still retaining error correction.

I Imagine it could be done if you don't mind having a URL that looks like http://example.com/?x=ug893hig8*g

Your example URL looks like a typical short URL. Sounds like an opportunity for a service that provides custom QR codes with a short URL redirect to your real URL.

QR codes is another one of those developer/designer driven fads (IMHO). I'm not aware of any stock camera application that does QR detection. This combined with the time it takes to open the application and scan it, seems more convenient to place a well thought out url instead. That's not to say it can't be the future. But having bad QR experiences now is not going to help QR codes grow.

QR codes are EVERYWHERE in Korea. It's on just about every outdoor ad, in the subways, on buses, fliers, newspaper/magazine ads, often with colorful designs integrated into it. I went to a photography exhibit this week, and even the artist tag next to every photo had a QR code on it. Compared with launching your browser and typing in the URL, launching the QR scanner and snapping a picture is much easier.

> QR codes are EVERYWHERE in Korea.

And Japan. You can't see an ad or a flier without a QRCode in it.

I must admit, I think they're pretty popular in the UK now as well. Every time I go through the underground or flick through a newspaper/magazine I see them.

The other day I saw a QR code on the back of a bus. I'm not kidding.

This is in a small Canadian city that is not very tech-savvy. I am willing to wager that the vast majority of people don't even know what it is. Why it was placed on a bus I simply don't understand. Maybe the joke is on me and I'm the only one who isn't getting this?

I can still remember how excited I was when URLs first started appearing in IRL locations (billboards, magazines, etc), around 1996 or 97. At the time, of course, a lot of the people seeing them had no idea what they were....

At that time, I kept a physical log of all URLs I saw (by hands, even very long ones!), just in case I needed to visit the web site. I still have it but the addresses are no longer valid. :)

> I'm not aware of any stock camera application that does QR detection.

Nokia phones have come with QR readers stock for a few years now, and Sony Ericsson's Android phones come with NeoReader preinstalled.

I've seen them in various places in the US, and I just got done spending about 8 of the last 12 months in Taiwan. QR codes were bloody well everywhere.

We did small 2x2 flyers to promote our Android music player at GoogleIO and SF MusicHackDay.

On the back we had a QR code with our URL on each side and our logo in the middle:

http://cloudtv.files.wordpress.com/2011/05/promoflyers.png

What's with the QR obsession? A new post about QR codes on HN every few days.

http://blog.queaar.com/post/8811809234/infographics-the-rise...

It's worth noting that besides "11 out of 50 Fortune 50 companies" there are no raw numbers here, just percentages. "Increased 4549%" Increased from what? To what? This doesn't demonstrate that QR codes are popular, just that they're more popular than they used to be.

I hope they followed this up with a QR code which decodes to a treatise on the rise of infographics.

Is there any iPhone code scanner that shows the result in an overlay on the camera feed, instead of screen jumping the second it detects something? The latter behavior is obnoxious when playing with QR codes.

I just tried to read those QR codes off my screen and my phone refused to recognize the IBM and Firefox ones. The hackaday ones however where no problem

Can someone explain the error correction a bit more? How exactly is it that you're blanking out 1/3 of the code and it still works? Does it matter which bits you disrupt? Couldn't your design, if comprised black and white squares, inadvertently BE readable QR data that screws up your message?

http://en.wikipedia.org/wiki/Reed_Solomon

Somewhat off-topic, but this reminds me of those 'why math is gibberish to laymen' posts a couple of weeks ago.

I know my math background sucks _and_ I'm stuck with the German version (i.e. the field suffers much more from being localized than CS. There are lunatics that try to create German words for everything from motherboard to stack - but I think we locked all of them up by now).

This article is unreadable without clicking on every other link in there and starting from scratch for me. Embarrassing.

I tried doing a similar thing for a fairly short URL. I had to add some padding on the end ("?SourceID=QR") in order to make the QR big enough to fit my changes in.

Does the QR standard allow for arbitarily high levels of error correction? (More than the "H" level.)

No, see here: http://www.denso-wave.com/qrcode/qrstandard-e.html (Denso-Wave created the QR code)

Since it's relying on the error correction to interpret those bits as smudged / etc. - couldn't you just slap your hi res 4 color logo down on top of the center of the code and get the same effect except without the pixelation?

Yes. I think the pixelation was his attempt to make the logo blend into the QR code as one design. There are lots of QR codes out there which has no

Very cool. Had definitely been wondering about how possible this was or wasn’t, but too lazy/busy to read up on the standard and give it a go. My hat is off to everyone involved in these bits ’o trickery!

By abusing the error-correcting encoding, you are now relying on your QR code being perfectly rendered and scanned in order to work. You've removed most or all of the error-correcting safety margins.

I received an image from a co-worker recently which demonstrated the redundancy powers of QR codes: http://i.min.us/ij9Yjs.png

(Try scanning it)

You can do this with datamatrix codes as well. Semacode has been doing this for years: http://semacode.com/

The QR Codes have built in levels of error correction, anywhere from 10% to 30%.

Which is exactly the feature he's abusing here: he's introducing error in the form of non-QRCode data in the middle of his QRCode, which eats away (significantly) at the error correction in order to look pretty.

"Abuse" is a relative term. Denso may not have introduced error correction for the use case of inserting aesthetic elements into the barcode, but hey, it works.

MogoTix inserts its logo into QR codes as a form of branding and identification, and we have not encountered any error correction issues whatsoever.

> "Abuse" is a relative term.

No, it's not.

> Denso may not have introduced error correction for the use case of inserting aesthetic elements into the barcode, but hey, it works.

Error correction was introduced because the physical media degrades and even in the best case capture is not ideal. Therefore error correction is a requirement to correctly round-trip digital information printed on an analog media. By abusing error correction mechanisms for cutesy purposes you increase the chances of complete digitalization failure significantly, sometimes (if you use all available error correction) to the point where the tag can only be scanned under absolutely perfect conditions.

You seem to be making the argument that because full use of error correction can sometimes make a QR code unreadable, no non-QR code data should ever be inserted into a QR code.

Seems like a sweeping generalization, that's all.

The BBC did that YEARS ago.

Indeed: http://news.ycombinator.com/item?id=2798973

The fact that it's possible isn't news, but it's nice to see a tutorial on how to make one.

1/ Stop trying to make QR codes look pretty

http://blog.collins.net.pr/2011/04/stop-trying-to-make-qr-co...

2/ If you must do QR code "enhancement" please use Overlay and not embedding. Overlay positions the QR code "within" a logo and builds a surrounding design.

Want to see some examples of what that means - check out www.Cognation.net/QR particularly the IronMan2 example from Warbasse design.

Reply on news.ycombinator.com