Show HN: qrframe – generate beautiful qr codes with javascript code
github.comI 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.
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.
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).
Even on a slower machine, it'll be minutes, not hours. A fast one with an optimized process can be seconds.
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
Counterpoint to this poosey comment: ignore the above misrepresenter.
I got all 21 to scan: iOS 18, 3 - 4 inches from retina display. All scanned within 1 second. Definitely recommend this!!!
Wow this style looks so cool!
Ah, yes. The classic “works on my device” argument.
Edit: from testing with zbarimg on my laptop: Basic, Camo, Neon (inverted), Glass, Blocks, Alien all seem to work reliably. Not sure what the problem is with some others, but maybe they’ll also work with some tweaking (Mondrian seems simple enough! maybe contrast issues?)
Edit 2: for codes that will definitely be scanned using a camera [1], some styles can work because phone camera isn’t perfect. E.g. if you slightly blur Dots, it works with zbarimg, which also means it would work if you slightly move around your phone.[1]: Screenshots are used sometimes! E.g. for importing TOTP codes into a password manager, etc.
How have I never heard of pngpaste before?
https://github.com/jcsalterego/pngpaste
Thanks
Oh hey I wrote something similar. https://github.com/fragmede/pasteboard-image
I used python so it's annoying to install, and I need to work on the readme, but I snoop the command line so pbipaste > foo.jpeg works as expected. there's also a copy command
Precisely the OP.
More importantly it's sad and bad when a obvious negative comment is at the top of a front-page Show HN, that misrepresents and then deigns to provide recommendations against this nascent beautiful project that needs our support. Effectively shutting down the experience and enjoyment for incoming audience, and for the creator.
That is a very bad thing and should not be tolerated. Speak up against it.
OP is being respectful and merely points out an issue: the codes generated don’t work with some devices. If you want a code that works with everything, you can’t do too much customization.
It’s a very okay thing to point out and there isn’t much negativity in it. I agree that we should support projects like this, but being dismissive of real issues is not the way.
No; top comment: "don't use it" because "I tested on <my setup>" and <it failed> - you don't see the problem?
It is OK to point out, but not to dissuade others from using, you see? Especially on a Show HN for a cool project where some good person has clearly poured their passion into it. You got to stand up for that stuff. Bring the positivity, man! Frame real issues in the correct (qualified and personal) light, not proclaiming a blanket recommendation, way to go.
I get how making such quick generalizations can serve you well as an engineer, but when people's work is involved it pays to think about it a bit more! :)
Example of respectful: I tried this, super cool, and I encourage everyone to give it a try. For my setup (details), I could only get 10 to work <more details if you want>, but that might just be me. All around super awesome project, love it!"
Example of truly awesome comment if you want to be a super star: I tried this, super cool, and I encourage everyone to give it a try. For my setup (details), I could only get 10 to work <more details if you want>, but that's probably just me! edit: Thinking about it some more, I realized it might be because my device uses an outdated lib<something> and I just updated that and I got 19 of them to work! I checked <the qr code scanning app>'s GitHub and saw they also hadn't updated this dependency. So I opened an issue, and let them know about this, here's the link: <gh issue>. All around super awesome project, love it!"
You get the idea?
Few word mantra: contribute and build, not deplete and discourage.
The problem here is that it cannot possibly work robustly. It does what it does by trampling all over the error correction codes and using out of spec pixel shapes.
This is not the sort of problem that will go away once the technology matures. It is fragile by its very nature.
It is absolutely OK to recommend against it on that basis.
I don't think you're right about that, how could it work at all? Are you even sure how it works? I was able to scan all 21 perfectly, less than 1 second each, on iOS 18 a couple of inches from retina display. I have no idea how it works, but it seems pretty robust to me.
I know people can't do it on some Android phones, and apps. Okay. But still seems pretty good and not a fundamental flaw. Absolutely not OK to blanket recommend against trying that. Why limit anyone? Just encourage everyone to try for themselves. Get more data. Premature to make these negative recommendations on 1 test. Rather than short-circuiting further curiosity and exploration, expand it!
I see your point! But there’s an issue specific to QR codes here.
See, if you generate a code and it works for you, you generally expect it to work for other QR readers as well. If all you want to create a QR code for yourself to use (say, to deactivate an alarm with a code, or a Wi-Fi code for your guests to connect maybe, this should be fine. However, things like this will inevitably be used in production, and it would be really bad if, say, a QR code gets printed on a million copies of something and turn out to only work for some users.
I agree that we should support new projects and not choke them down with overly negative commentary. However, piling up positivity doesn’t help either: your second example doesn’t feel genuine to me, more like a spam review in app store or something. I love the sandwich approach in your first one though!
How about this: “Cool project! Some styles are really nice, I didn’t know you can make QR codes like this ever work. However, when I tried reading them with [app name] scanner app, only a few styles actually worked for me. Perhaps it works with other scanners, but this one has [99M+] downloads last month [/ active user base or something]. So if you want to use those be sure to check it works everywhere, and maybe stick to more plain styles? I also hope this gets addressed in the qrframe itself – perhaps tweaking the contrast in styles [X] and [Y] a bit would help.”
It is still way too fluffy IMO, but much more substantial. It is harder to write, of course.
I think you're underestimating the importance of positivity. But aside from that: really? the one where the guy technical deep dives to solve some problem, seemed like a spam review to you, in the context of HN? How do you figure?
They're both genuine from me, one way I might write one. I feel sorry for you that you didn't feel that genuine emotion, or see the utility, but I'm glad you got something from it, hopefully it can help you write better ones in future!
Just curious: have you done many Show HN's yourself? You might be finding it hard to empathize with the uniqueness of that without having some experience doing it.
Regarding the drafts: first one's not really sandwich as much as genuinely owning "maybe this is my setup" (total correct), and expressing love for this cool project.
I like your one, it's a good start. I think focusing clearly on your test set up and expressing positivity is enough. Making recommendations or suggestions runs the risk of making too many unfounded assumptions about intended use, and clouding the market with unfounded restrictions when in reality you don't have the research to back that up. So, temper your pronouncements to the quality of your data, I guess, otherwise you might come across as gratuitously negative or fault finding, as OP here, even if not in "tone" per se, then in harmful effect (authoritative dismissal dimming engagement, etc).
Another way to say it might be: don't overestimate your ability to see real limitations, while underestimating your ability to harm a project or creator with the same.
These ideas, are they all really so shocking? If so, glad I could help bring a bit more light to the Show HNs by prompting some reflection!! :)
In this case, the builder actually agreed with the feedback. You had no reason to call it “poosey”, in fact that’s a stupid word to even have in your vocabulary.
Hahaha! No. What would you know? In fact, that word is perfect for the meaning I expressed. What do you think it means?
The creator can do what he wants, it doesn't change the principles. Just like I do what I want, and you have no ability to judge my reasons, nor pretend you can judge a word is stupid for someone to use or not - besides yourself.
So maybe turn all those judgment attempts on yourself because you are getting your personal boundaries all wrong, is that something you do a lot? Hahahaha!
I tested it with my phone and got similar results: I got only 9 out of the 21 QR codes to work. I don't know why you think such a finding should not be mentioned here.
I think it should be mentioned but without the "so I'd recommend against using", because that's wrong. Also, specify OS, surface, time, etc for better test!
> "so I'd recommend against using", because that's wrong.
Someone's opinion is not "wrong". It may be misinformed, it may be different than yours, but you can't just assign a "correctness" value to something subjective just because you disagree with it.
No, that's not it, but I get why you read it like that. By "wrong" I mean the lifting his personal test/opinion to the level of a general "recommendation", in effect discouraging others from exploring, and harming the creator. That is one wrong here. You get it?
If you want to use something for production, you shouldn’t only test on the latest stuff you personally have at home but on the crappiest stuff you reasonably expect users to have. Otherwise, you get websites that lag and spin up the fans on everybody’s laptops while the developer is happy on his workstation with 32 cores and a gaming GPU.
No, thanks. I have no obligation to do that and if it lags you can always just close the page.
I didn’t mean „you’re mandated by law to do this“, I meant „if you don’t do this, people won’t use your stuff if they can avoid it“. If that’s ok for you, that’s awesome. We were talking about production use though, were adoption and user friendliness is normally a goal.
Agree, but OP should not then "not recommend" and it shouldn't be top comment dissuading others from seeing this AWESOME project.
OP didn’t „not recommend“ the project but said
> so I'd recommend against using anything too fancy for real world barcodes.
That’s completely correct and doesn’t speak against the whole project but only against the „too fancy“ styles offered.
But did OP effectively "recommend against using" this by that statement "? Yes. Especially given how many people are likely to quickly scan that top comment given the context.
It's not correct, and actually morally wrong, to make blanket recommendations against something based on your own specific set up. Share your experience! Don't discourage others from trying it, or pretend your single source, device specific test now permits you to direct others with recommendations on this thing you didn't build, but have effectively now misrepresented as a "too fancy" "non real world application" toy. How many people is that comment going to lose the creator? How many joy experiences are robbed from those people who get misguided by that comment?
I get your more literal, word parser-y reading, and I can definitely see how a narrow, defly parsed, narrow reading precisely defines just what you think it does. But that doesn't mean that's the only reading, or even the intended one.
I think the people who will bother parsing any such possible nuance while making microsecond decision to either explore further or not bother is low. Congrats on being an exception tho! Or maybe you are just overanalyzing for the purpose of this argument? Hahaha :)
I get you don't see the issue right now, and how it undermines the very best aspects of the project, but i think with a slight shift of perspective, you might! I encourage you to explore a few more Show HN's yourself and empathize with the dynamics, the effects of comments, and even try posting a few and seeing the response you get and how you feel about that. Through long experience you will know the values important here.
You sound personally involved. Your comment is the one being downvoted, because the hubris of "it works for me so everyone should be using it!" is absurd. The fact is many of the QR codes shown do not in fact work on many devices. Your use of all-caps also violates HN rules.
Interestingly enough, it didn't work well with my android. Only couple of them were scanned easily.
Provide specs for extra utility (OS, app/camera, distance, surface) :)
I got all 21 to scan: iOS 18, 3 - 4 inches from retina display. All scanned within 1 second. Definitely recommend this!!!
Wow this style looks so cool!
Ah yes, scanned using a proprietary app on a thousand-dollar phone from the bright screen of a thousand-or-more-dollar computer: the only use-case imaginable, no reason any person would ever be using anything else...
If it doesn't work on a 150$ Android phone using all of the 10 top results for "qr scanner" in the Play Store when scanned from a dirty TN panel or faded inkjet print in bad lighting: you are failing your users, turn off your graphic designer brain and think about usability.
> 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.
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...
The author also has a rust based qr library that looks equally awesome
https://github.com/zhengkyl/fuqr
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 won't. "Veritasium" lost me with his long-wire video.
I did not. But now I have. And thank you for that.
Also, this library is amazing. I might use it.
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!
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 tried to use the qrframe package, but it doesn't seem to be published to npm https://www.npmjs.com/package/qrframe
This is cool
While those look cool, most do not work at all on my phone
Provide more details (OS, camera/app, distance, surface type), please! :)
I didn't expect these to look so awesome. Great work on the designs.