Show HN: qrframe – generate beautiful qr codes with javascript code | Hacker News Reader

Show HN: qrframe – generate beautiful qr codes with javascript code

github.com

401 pointszhengkyl79 comments

I originally built a QR code generator as a resume project using Rust and I realized a web interface would make customization way easier.

This still generates the "data" using that rust library via wasm, but the rendering is all editable javascript to make an SVG or paint on an HTML canvas.

I was especially inspired by https://qrbtf.com which had some unique style options I had never seen before, which I ended up copying, and then I made some more.

Open articleView on HN

This looks super cool but I could only get 10/21 to scan with the classic zxing scanner (>100M downloads), and 3 of those took a bunch of playing with camera angles and distance, so I'd recommend against using anything too fancy for real world barcodes.

Thanks for trying it out! I definitely agree, the fancier it gets the harder it is to scan so these should not be used for real world stuff where reliability is important.

I basically only tested these on my own phone, a pixel 7 with default camera app, so I'm not surprised people with different hardware/software are getting varied results. I think I might try to automate testing using different scanners if I can figure that out.

Pixel 8, about half of the codes work.

Hmm, yes, I did not try these but I have noticed that my default phone app in my S22 is freakishly fast at detecting QR codes, something I never remember that zxing was.

Does anyone know if these are today implemented in neural networks or something? Specialized hardware? Or just very well optimized. Sometimes it feels like only 1 frame in the camera is enough, and distance, angle, lighting and focus is not important.

I'm pretty sure the decoding is done on each frame individually, so as long as you get a single good frame, you scan it

Neat! In my opinion those generated by generative AI with controlnet are even more impressive [0], albeit also reducing their likelihood of being correctly read by all.

[0] https://stable-diffusion-art.com/qr-code/

While I do agree, one can be done almost instantly in your browser, one takes hours of rendering.

Even on a slower machine, it'll be minutes, not hours. A fast one with an optimized process can be seconds.

Libs like qrframe are great for automating QR code creation in a web app, the ControlNet stuff is great for if you just need to make one QR code for an event or want an animated QR code (stuff like this is usually several frames per minute if you’ve got a good GPU).

Wow somebody likes anime girls

People have to be able to recognize that it is a QR code visually - these are too graphical to realize their true purpose, imho

The author also has a rust based qr library that looks equally awesome

https://github.com/zhengkyl/fuqr

Looks great, very inspiring.

Some of these, like examples/blocks.svg[1], are not immediately recognized as qr codes by humans. This could lead to interesting possibilities; e.g. art with qr code/codes seamlessly integrated into it - and perhaps noticed only after someone tries to take a picture.

[1]: https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8...

My phone's camera app is not able to recognize the alien[0] one either. Looks cool though.

0. https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8...

hmm. i can't scan most of these QR codes (i got about 2 of them to scan.) so while i applaud the creative impulse (some of them look REALLY cool), i recommend people use QR codes that are easily scanned.

Wow, super cool! I love the unique styling. Haven’t seen that before.

I (well, GPT-4) built freeqrgenerator.app specifically for my wife because she kept using the malicious sites that inject a redirect that inevitably die and stop working.

Thinking I can retire mine and use yours instead on the domain.

Yeah, there are a lot of annoying sites like that. Your site is cool, it's streamlined and has a easy to remember name and you made it (with a little help) which is great.

It's hard to find, but here are two other generator sites that are free and nice to use.

https://qr.grid.ws/ only has a text box and a download button

https://qrcode.antfu.me/ has a lot of options

If you google "github qr code generator", the top result has a live demo that I've used quite a bit: https://www.nayuki.io/page/qr-code-generator-library#live-de...

Did anyone else just watch the Veritasium video

I always notice these patterns on HN.

Always gives me dejavu and that feeling you get when you suddenly start encountering some new topic or word in suspiciously large amounts.

Some big sciency/techy outlet puts something interesting out, and suddenly related topics start popping up everywhere else. I am guilty of a few of these myself.

https://en.wikipedia.org/wiki/Frequency_illusion

It might also be that more QR code stuff gets upvoted as people have it in their minds after watching the video.

> the Veritasium video

https://www.youtube.com/watch?v=w5ebcowAJD8

I did not. But now I have. And thank you for that.

Also, this library is amazing. I might use it.

I won't. "Veritasium" lost me with his long-wire video.

These are probably some of the more interesting looks I've seen. My poor phone looked like it was having a conniption fit trying to lock onto just one.

I should look more into the half-tone. I'm assuming it works off of the error tolerance margins but I actually have no idea.

That's the cat! The other examples are nice, but the cat is amazing!

> These QR codes are not reliably scannable!

Isn't the whole point of QR codes to reliably transfer information from the physical world into the digital one without specialized equipment or software? They look pretty, sure, but so did DataGlyphs (https://www.microglyphs.com/english/html/dataglyphs.shtml) and those could be scanned reliably, just not by your average phone.

This is awesome. Does anyone know if there is a library for the amazing optical codes that apple uses in its device transfer? I know they have a custom patent for it so I don't know if its something anyone has tried to recreated...

Do you have link for more info on optical codes?

The designs are cool enough that they could be printed on physical wall tiles, maybe as easter eggs or otherwise.

They should be! These would go well in all kinds of interior places, and would not be out of place on expensive high-end art / photography books and periodicals.

I didn't expect these to look so awesome. Great work on the designs.

I tried to use the qrframe package, but it doesn't seem to be published to npm https://www.npmjs.com/package/qrframe

While those look cool, most do not work at all on my phone

Provide more details (OS, camera/app, distance, surface type), please! :)

thanks for this. awesome post

This is cool

Reply on news.ycombinator.com