Creating a QR Code step by step | Hacker News Reader

Creating a QR Code step by step

nayuki.io

326 pointsnayuki34 comments

A while ago I found a generator that took an image and a text and tried to use a genetic algorithm to evolve a QR code that looked like (a 2-bit dither of) the image. Unfortunately I’ve since lost the link, but I was quite impressed that it managed to generate a QR code for my then-employer’s URL that looked like their logo. Impressive what’s possible with a lot of error correction.

Here is a paper and demo describing creation of such codes: http://vecg.cs.ucl.ac.uk/Projects/SmartGeometry/halftone_QR/...

Sadly, original online demo doesn't work anymore, but by looking for "halftone qr code" you'll find plenty of alternative implementations like this: http://jsfiddle.net/lachlan/r8qWV/

This is fantastic.

From this, I learned that making your URLs uppercase makes for a more compact code! The links at the bottom are great reads as well, especially:

https://research.swtch.com/qart

I hope that QR codes become more widely used, now that iOS and Android both include QR capabilities directly in the native camera apps.

Visit China to see a cornucopia of QR codes. Everything there is QR codes. Almost all payment is done through scanning a QR code (even tiny stands by the side of the road). Public transportation is accessed through QR codes. Adding people on social networks is done through QR codes. Some restaurants don't even have menus and you access their menu via a QR code (and of course pay again through the same). QR codes everywhere.

Ironically in China the popular name for QR Codes is 二維碼 (literally "2D code"). This is disappointing because there are other types of 2D barcodes (Data Matrix, Aztec, PDF417, etc.) and because it fails to acknowledge the QR brand.

Isn't it more like it's calling a square a rectangle? All these codes are 2D codes - the general public doesn't care if it's a QR Code or DataMatrix or Aztec etc. Anyway, the Baidu Wiki [0] says QR Code is a kind of 二維碼.

[0]: https://baike.baidu.com/item/%E4%BA%8C%E7%BB%B4%E7%A0%81/238...

QR codes have their uses, but I can’t stand when they are placed on billboards as a link to more info.

A simple URL I can read and remember for later, good luck memorising a QR code.

I’ve seen too many obvious examples of a marketing team getting carried away and abusing these things. The most absurd one was on a police notice on the London Underground advising people to take care to hide their valuables from thieves. How could you find out more? By taking your 800 dollar valuable out to scan the QR code...

That's because in the West, marketers at best tried to replicate CueCat [0] with QR codes. QR codes are infinitely more useful if tied with an action from the real world -> digital world: scan this QR code to pay for this item; scan this name tag to get my full contact card; etc.

[0] https://en.wikipedia.org/wiki/CueCat

A guy I know ran IT for a London borough's libraries. Part of his job was to generate QR codes to go on various posters, stands and literature. He generated hundreds of them.

Recently, he checked how many times they'd been scanned by a member of the public.

It was zero.

It’s weird how in China QR codes are basically ubiquitous and yet the rest of the world basically ignores them. The difference as far as I can tell is WeChat, which basically everyone has, has great QR code support built in

iOS has great integration built in now to the camera app which should help, but android is still spotty.

Android is terrible. The best thing to do is piggy back zebra crossing's open source app and integrate it directly into the app. But as for a general use scanner, Android still depends on the user to download a external app. Motorola has it built into their camera app but I feel users don't know and don't reach out for it on reflex.

Google has their own solution but it is the stupidest, roundabout way of using it where the host app has to dynamically download the library that has the necessary barcode scanning.

Hmm, interesting, Moto Camera automatically detects and provides the QR code text/info. I guess I took it for granted and thought it was stock Google photo app.

If Google was serious about them, they'd make some baseline support for QR code the camera app must support out of the box and provide a standard library to use it.

Just looking at how many QR code reader apps are on the Play Store, and how many of them request a ton of unnecessary permission is downright scary. The same thing happened with flashlight app before the feature was introduced in stock Android.

I often use QR codes to quickly transfer long URLs etc from my PC to my phone.

In the commandline you can run "qrencode --type UTF8 -o - <text>" and get a pure text-only QR code.

That is really a brilliant web page, and the interaction of the data and the text is also very fascinating .. seems to have a brettvictor-like effect, I no longer felt like I was viewing a web page but rather an interactive document that was teaching me something technical while allowing me to explore the subjects edge cases .. Nice!

Actually, I kind of hoped he would show the computation of the Reed-Solomon codes, or at least had a popout for it if it would have made the page too long.

If I think it's interesting enough, I might implement separate interactive web pages to explain both the finite field arithmetic and the Reed-Solomon encoder LFSR. But if you look at these existing materials, I hope you agree with me that RS ECC encoding is long and tedious:

* https://www.embeddedrelated.com/showarticle/1182.php#c-imple...

* https://www.reddit.com/r/programming/comments/9th8a7/creatin...

* https://www.backblaze.com/blog/reed-solomon/

* https://en.wikiversity.org/wiki/Reed%E2%80%93Solomon_codes_f...

The author has that in an other article: https://www.nayuki.io/page/reed-solomon-error-correcting-cod...

You might be interested in https://www.akalin.com/intro-erasure-codes

Ah, excellent. Thank you both.

He who?

Thanks amazing. Thanks! I always wondered how companies create their own type of QR-code. Anyone has any idea how something like this can be built? https://i.imgur.com/wtxZDdh.png

Please don't call these QR codes; they are simply proprietary 2D barcodes (respectively Facebook Messenger and Snapchat).

The Snap code looks like a 18×18 grid of dots with the center punched out. This probably conveys about 200 bits of information. I suppose that could encode 30 ASCII characters which should be enough to describe a unique username. Or maybe it is a random binary number that is an opaque user ID in Snapchat's database. Either way, I'm guessing that the graphics and algorithm are a trade secret, so you can't get a definitive truth on how these barcodes are generated.

The Messenger code seems hard to analyze because of its different bar lengths and circular layout. The four bulls-eye patterns remind me of QR alignment patterns. I have no idea what the information-theoretic capacity is, but I'll guess it's in the order of magnitude of 500 bits. Again, I suspect the algorithm is not available to the public.

As for Spotify Codes, I discussed them in https://www.reddit.com/r/programming/comments/9th8a7/creatin... .

Messenger codes: https://itunes.apple.com/us/app/scan-code-editor-for-messeng...

I’m wondering how can I build a custom qr code like those for my own project, but thanks for the link

https://research.swtch.com/qr/draw

Thanks! That was really interesting. This is the first time I have found the processes broken down in a way I can easily follow

Awesome!

Now, how do I read a QR code?

See: https://www.reddit.com/r/programming/comments/9th8a7/creatin... ; https://www.youtube.com/watch?v=KA8hDldvfv0

Yeah, that's not quite what I meant. Once I have the QR-code's pixel map, decoding that is easy. What I don't know how to do is to recover the pixel map from an image without knowing the scale, orientation, and viewing angle.

I think that's the purpose of the finder patterns.

From a Source image I imagine you would locate the finders, find the edges, unskew the source image, and use the finders to correct the rotational orientation, and then crop the image. Maybe binarize the new image to make the next step easier.

At that point, it's a matter of working out the size of each cell to generate a grid to drop on top of the image. Then you can sample each cell of the grid. If it's light, 1. If it's dark 0. Now you have the pixel map.

I am sure it's more complex, but I think a lot of this sounds like stuff you could do with openCV

Yes. Obviously. If you know where the finders are everything else is easy. But how do you locate the finders?

http://dsynflo.blogspot.com/2014/10/opencv-qr-code-detection...

Thanks!

Reply on news.ycombinator.com