9 ms·

Show HN: I open sourced the QR designer from my failed startup

711 points by koch 3y ago

My designer is somewhat special, if I do say so myself, as it allows you to put arbitrary designs in the middle area of the QR while still being totally scannable.

koch 3y ago
If anyone is still hanging out in this thread I just fixed images so they work locally now https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17aeb086c040df8c5cf076fb170 https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17... http://robko.ch/qr-designer/ http://robko.ch/qr-designer/
steventey 3y ago
Very cool stuff, thanks for open-sourcing this! Might incorporate it into Dub , an open-source link management tool that I'm building: https://github.com/steven-tey/dub https://github.com/steven-tey/dub
RadiozRadioz 3y ago
Eh, not a big fan of QR codes with images in the middle. One of my favorite things about QR codes is their extremely generous error correction capability, which is greatly reduced when you instead use that valuable space for a logo. It looks nice, but makes the code less scannable than an equivalently sized one with larger pixels or more error correction bytes.
xfalcox 3y ago
The add image feature is not working for me.
- koch 3y ago
  Fixed https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17aeb086c040df8c5cf076fb170 https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17...
- koch 3y ago
  Ah sorry about that, I'm not surprised... I think I uploaded it to a server first but now that it's all shut down there is no server for it to be uploaded to. https://github.com/kochrt/qr-designer/blob/420adea59e617659f4bdfc6eef56299e7b04f5a8/components/Design/Sidebar/Tabs/Design/ObjectPalette/DesignImages.vue#L50 https://github.com/kochrt/qr-designer/blob/420adea59e617659f...
phoenixreader 3y ago
Why did your startup fail?
- luuuzeta 3y ago
  The OP explains it here: https://news.ycombinator.com/item?id=36130625 https://news.ycombinator.com/item?id=36130625
karolist 3y ago
What product was your startup building, how did having a fancy QR designer benefited your product? Was QR designer the product? Why did it fail and what are your plans next?
- koch 3y ago
  Great questions! Basically I was working on a link shortener. However in addition to a link shortener that took you to another page, I wanted users to be able to create a mini website that could host apps. Like you could create a small page that had photos of your business and a menu/ordering app and an "IM with staff" app etc. The fancy generator was kind of an added bonus, I always thought the QR codes I'd see around were so dull and unidentifiable! There was very little in traditional QR codes themselves to make them "human-scannable", so to speak. A QR codes is essentially a sign; it should have some information in it that you, a person, can parse. A little logo in the middle is weak at best. It failed because I didn't sell it. I needed to sell it. I needed to talk to people. I needed to like cold call people, restaurant owners without websites. Annnnd I always came up with an excuse not to. As far as next plans, I'm working on something else these days - https://markwhen.com https://markwhen.com
  - davidktr 3y ago
    >markwhen you are building crazy cool stuff
    - koch 3y ago
      Thank you!
  - siculars 3y ago
    First, you did something. Nothing can take that away from you. So be proud of what you did. Next, you learned a valuable lesson that will come with you into your next projects. Learning to "sell" is absolutely critical for so much of life - not just tech startups. Finally, this is not the end. There will be more ideas and more opportunity. You're already on to the next thing. Keep moving forward. It's not how long or short the game is, or how quickly you move. It's how long you stay in the game. Keep playing the game.
david422 3y ago
> In order to maximize designer space, the url that the QR codes links to is expected to be exactly 25 characters long Seems like a cool QR code, but also limited for general use.
- wlesieutre 3y ago
  For shorter URLs you could pad it with unused query strings
- codeflo 3y ago
  I could imagine this being part of an offering that includes an appropriately customized URL shortener (or if necessary, lengthener).
- koch 3y ago
  Yeah like the other replies said, it's meant to be part of a link shortener; or maybe you have a short domain that you can use short urls with. Like surprisingly enough I could fit a link to my github page in there as plaintext (although all caps)
  - koch 3y ago
    I went ahead and made it so you can put your own urls at 25 characters or less [0], and updated the live site too [1]. [0] https://github.com/kochrt/qr-designer/commit/55d4de3f856828b https://github.com/kochrt/qr-designer/commit/55d4de3f856828b... [1] https://robko.ch/qr-designer/ https://robko.ch/qr-designer/
- kevincox 3y ago
  Definitely. I would love to be able to customize the design area and get matching amounts of data to be entered.
TechTechTech 3y ago
Thanks for open sourcing this. Reminds me of halftone QR codes http://vecg.cs.ucl.ac.uk/Projects/SmartGeometry/halftone_QR/halftoneQR_sigga13.html http://vecg.cs.ucl.ac.uk/Projects/SmartGeometry/halftone_QR/...
- lucb1e 3y ago
  I've been looking for this for years but did not know the right keywords to search for. Saw an Anonymous/Guy Fawkes styled sticker on CCC in 2018 or something, on and off I've been looking for how it was made. Now I know.
  - deleted 3y ago
    [deleted]
  - nojs 3y ago
    Semi related, one of the most useful functions of chatgpt I’ve found is describing something you don’t know the word for. It’s helped me find stuff many times that I would never have found otherwise just by knowing what to search for.
    - fl0id 3y ago
      thought that often also works with just a search
- e12e 3y ago
  Nice! I also found a quick write-up - with a link to a js implementation: https://backdrifting.net/post/016_halftone_qr https://backdrifting.net/post/016_halftone_qr https://github.com/fangj/Halftone-QRCode-Generator https://github.com/fangj/Halftone-QRCode-Generator
krasin 3y ago
Very cool! Years ago, I was also inspired by https://research.swtch.com/qart https://research.swtch.com/qart
- 4rt 3y ago
  I've been looking for that for quite a while, thanks for the link
- ilrwbwrkhv 3y ago
  Such a lovely and easy to read webpage
willsmith72 3y ago
This is really cool. If you fixed the image upload, removed the 25 character requirement (less would be fine), and made the link customisable in the site, I think you could have a really neat product/business. I'd definitely send it to my startup's founder, we're already using QR codes and these would be way nicer than a plain one.
- koch 3y ago
  Did the images too https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17aeb086c040df8c5cf076fb170 https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17...
- koch 3y ago
  I went ahead and got most of your requests in - except for the image uploading, but you can now edit the url and it can be 25 characters or less [0]. The rest will be padded with spaces but browsers seem to handle that fine based on my 3 minutes of testing. Updated the live site too [1]. [0] https://github.com/kochrt/qr-designer/commit/55d4de3f856828b3fc73a62cd4735d05fd9a2135 https://github.com/kochrt/qr-designer/commit/55d4de3f856828b... [1] https://robko.ch/qr-designer/ https://robko.ch/qr-designer/
  - willsmith72 3y ago
    Nice, looks great. Sharing it around, nice job
Prickle 3y ago
Man I really wish I had access to this functionality ~ 5 years ago. Thankyou for open sourcing this! Always nice to see stuff like this. I will definitely pass this onto some underclassmen.
unholiness 3y ago
> Compared to other QR designs, this does not take advantage of error correction that QR codes use, but rather deterministically turns some pixels in the code pattern on or off without affecting what the QR code is pointing to. Can someone explain how this is done? Is it adding characters to the URL that somehow browsers will ignore?
- tyingq 3y ago
  I assume there's a bit more to it, but QR codes inherently support a "mask" that tells the scanner parts of the image to ignore. So you could do at least some of that with the mask. It's not real flexible, so there's perhaps other tricks also.
  - bmicraft 3y ago
    I was under the assumption that the mask was just a short static pattern XORd over the data?
    - CalebJohn 3y ago
      It is, the QR code spec details a few specific masks that are available. The one which produces the best QR code is chosen (best in this case means most clear/easiest for a scanner to read. So, no large blocks of white or black). Wikipedia has a pretty good visual of this. https://en.m.wikipedia.org/wiki/QR_code#Encoding https://en.m.wikipedia.org/wiki/QR_code#Encoding
brundolf 3y ago
This is so cool. I think I've already got a project idea I can use this for
TimLeland 3y ago
Very cool could you share what features people wanted from QR codes? I'm looking into ways to improve https://t.ly/qr-code-generator https://t.ly/qr-code-generator
andrewxhonson 3y ago
Does the readme's last example have sections of one code embedded in the empty space between another code's sections? That's pretty cool.
- bmicraft 3y ago
  I did not get the bottom one to scan on the last example with two different scanners. It might just be invalid/=.
didntknowya 3y ago
i have a lot of people unable to recognize QR codes as scannable. making it more picture-like would reduce usability?
- victor9000 3y ago
  Why not use the image to provide a better "scan me" visual?
jmull3n 3y ago
This is really good, I wish I saw it before I built something similar. Mine is server-side rendered at the edge. It allows any value but still has no where near the functionality as yours. https://github.com/jmcmullen/qr-kit https://github.com/jmcmullen/qr-kit
naedish 3y ago
Very cool - I used a website with a custom qr code generator [1] and some hacky RPA tool about 8 years ago to create custom QR codes for each guest at our wedding. My wife created a wedding logo and we had that in the middle of our QR code - it worked well. The QR code was a personalised URL for each guest's rsvp which used a URL shortener [2] installed on our wedding domain (hosted on a free micro AWS instance). Was a fun way to do my part for our wedding planning. [1] https://www.unitag.io/qrcode https://www.unitag.io/qrcode [2] https://yourls.org/ https://yourls.org/
nudpiedo 3y ago
The tool is very cool, although at first sight it looks to me like the perfect side hustle rather than a startup… may I know what was your napkin business plan for such a startup? I guess you put a lot of love in the tool. Freeware, abandonware and open source is sort of a tragedy of the commons for the IT professionals (yes HN, I know there is a global benefit, just no one seems to talk about the cons).
Alifatisk 3y ago
It’s done in Nuxt, cool! I have a huge interest in starting using Nuxt on my next web projects. Might even start earlier because of this. How does Nuxt handle the backend part? Any recommendations? I am used to how Rails does it by using ActiveRecord and it’s flexible ORM.
- koch 3y ago
  Nuxt and the Nuxt team are working on some incredible things in my opinion. I made this using Nuxt 2 which uses Vue 2, I would start with Nuxt 3 [0] which uses Vue 3 and has made a lot of improvements built upon a bunch of other open source libraries they maintain [1]. They essentially have a 'you can deploy this anywhere' model, from traditional node environments to edge runtimes like cloudflare workers. The backend part was pretty straightforward for nuxt 2 because I could just use express. I think it's a bit different (maybe even simpler?!) for nuxt 3 [2]. I haven't checked recently so I'm not too sure what kind of ORM options they have available. I suspect there would be database plugins regardless, if it's not baked into Nuxt. [0] nuxt.com [1] https://unjs.io/ https://unjs.io/ [2] https://nuxt.com/docs/guide/directory-structure/server https://nuxt.com/docs/guide/directory-structure/server
taubek 3y ago
I really like the tool. I used some similar desktop apps few years ago, but they missed the simplicity of your solution. Almost a 1000 GitHub stars within one day. Really impressive.
ketzu 3y ago
Just a warning to users: light-on-dark QR codes can not be parsed by all QR code readers, even though they look nice.
- abwizz 3y ago
  sounds ridicules, please share some evidence
  - tantalor 3y ago
    https://github.com/bennyguitar/BTCDonationViewController/issues/1 https://github.com/bennyguitar/BTCDonationViewController/iss... https://www.qrcode-monkey.com/6-reasons-why-your-qr-code-is-not-working/ https://www.qrcode-monkey.com/6-reasons-why-your-qr-code-is-...

711 points by koch 3y ago

My designer is somewhat special, if I do say so myself, as it allows you to put arbitrary designs in the middle area of the QR while still being totally scannable.

koch 3y ago

If anyone is still hanging out in this thread I just fixed images so they work locally now https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17aeb086c040df8c5cf076fb170 https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17... http://robko.ch/qr-designer/ http://robko.ch/qr-designer/

steventey 3y ago

Very cool stuff, thanks for open-sourcing this! Might incorporate it into Dub , an open-source link management tool that I'm building: https://github.com/steven-tey/dub https://github.com/steven-tey/dub

RadiozRadioz 3y ago

Eh, not a big fan of QR codes with images in the middle. One of my favorite things about QR codes is their extremely generous error correction capability, which is greatly reduced when you instead use that valuable space for a logo. It looks nice, but makes the code less scannable than an equivalently sized one with larger pixels or more error correction bytes.

xfalcox 3y ago

The add image feature is not working for me.

koch 3y ago
Fixed https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17aeb086c040df8c5cf076fb170 https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17...
koch 3y ago
Ah sorry about that, I'm not surprised... I think I uploaded it to a server first but now that it's all shut down there is no server for it to be uploaded to. https://github.com/kochrt/qr-designer/blob/420adea59e617659f4bdfc6eef56299e7b04f5a8/components/Design/Sidebar/Tabs/Design/ObjectPalette/DesignImages.vue#L50 https://github.com/kochrt/qr-designer/blob/420adea59e617659f...

phoenixreader 3y ago

Why did your startup fail?

luuuzeta 3y ago
The OP explains it here: https://news.ycombinator.com/item?id=36130625 https://news.ycombinator.com/item?id=36130625

karolist 3y ago

What product was your startup building, how did having a fancy QR designer benefited your product? Was QR designer the product? Why did it fail and what are your plans next?

koch 3y ago
Great questions! Basically I was working on a link shortener. However in addition to a link shortener that took you to another page, I wanted users to be able to create a mini website that could host apps. Like you could create a small page that had photos of your business and a menu/ordering app and an "IM with staff" app etc. The fancy generator was kind of an added bonus, I always thought the QR codes I'd see around were so dull and unidentifiable! There was very little in traditional QR codes themselves to make them "human-scannable", so to speak. A QR codes is essentially a sign; it should have some information in it that you, a person, can parse. A little logo in the middle is weak at best. It failed because I didn't sell it. I needed to sell it. I needed to talk to people. I needed to like cold call people, restaurant owners without websites. Annnnd I always came up with an excuse not to. As far as next plans, I'm working on something else these days - https://markwhen.com https://markwhen.com
- davidktr 3y ago
  >markwhen you are building crazy cool stuff
  - koch 3y ago
    Thank you!
- siculars 3y ago
  First, you did something. Nothing can take that away from you. So be proud of what you did. Next, you learned a valuable lesson that will come with you into your next projects. Learning to "sell" is absolutely critical for so much of life - not just tech startups. Finally, this is not the end. There will be more ideas and more opportunity. You're already on to the next thing. Keep moving forward. It's not how long or short the game is, or how quickly you move. It's how long you stay in the game. Keep playing the game.

david422 3y ago

> In order to maximize designer space, the url that the QR codes links to is expected to be exactly 25 characters long Seems like a cool QR code, but also limited for general use.

wlesieutre 3y ago
For shorter URLs you could pad it with unused query strings
codeflo 3y ago
I could imagine this being part of an offering that includes an appropriately customized URL shortener (or if necessary, lengthener).
koch 3y ago
Yeah like the other replies said, it's meant to be part of a link shortener; or maybe you have a short domain that you can use short urls with. Like surprisingly enough I could fit a link to my github page in there as plaintext (although all caps)
- koch 3y ago
  I went ahead and made it so you can put your own urls at 25 characters or less [0], and updated the live site too [1]. [0] https://github.com/kochrt/qr-designer/commit/55d4de3f856828b https://github.com/kochrt/qr-designer/commit/55d4de3f856828b... [1] https://robko.ch/qr-designer/ https://robko.ch/qr-designer/
kevincox 3y ago
Definitely. I would love to be able to customize the design area and get matching amounts of data to be entered.

TechTechTech 3y ago

Thanks for open sourcing this. Reminds me of halftone QR codes http://vecg.cs.ucl.ac.uk/Projects/SmartGeometry/halftone_QR/halftoneQR_sigga13.html http://vecg.cs.ucl.ac.uk/Projects/SmartGeometry/halftone_QR/...

lucb1e 3y ago
I've been looking for this for years but did not know the right keywords to search for. Saw an Anonymous/Guy Fawkes styled sticker on CCC in 2018 or something, on and off I've been looking for how it was made. Now I know.
- deleted 3y ago
  [deleted]
- nojs 3y ago
  Semi related, one of the most useful functions of chatgpt I’ve found is describing something you don’t know the word for. It’s helped me find stuff many times that I would never have found otherwise just by knowing what to search for.
  - fl0id 3y ago
    thought that often also works with just a search
e12e 3y ago
Nice! I also found a quick write-up - with a link to a js implementation: https://backdrifting.net/post/016_halftone_qr https://backdrifting.net/post/016_halftone_qr https://github.com/fangj/Halftone-QRCode-Generator https://github.com/fangj/Halftone-QRCode-Generator

krasin 3y ago

Very cool! Years ago, I was also inspired by https://research.swtch.com/qart https://research.swtch.com/qart

4rt 3y ago
I've been looking for that for quite a while, thanks for the link
ilrwbwrkhv 3y ago
Such a lovely and easy to read webpage

willsmith72 3y ago

This is really cool. If you fixed the image upload, removed the 25 character requirement (less would be fine), and made the link customisable in the site, I think you could have a really neat product/business. I'd definitely send it to my startup's founder, we're already using QR codes and these would be way nicer than a plain one.

koch 3y ago
Did the images too https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17aeb086c040df8c5cf076fb170 https://github.com/kochrt/qr-designer/commit/3ad0a4edea33d17...
koch 3y ago
I went ahead and got most of your requests in - except for the image uploading, but you can now edit the url and it can be 25 characters or less [0]. The rest will be padded with spaces but browsers seem to handle that fine based on my 3 minutes of testing. Updated the live site too [1]. [0] https://github.com/kochrt/qr-designer/commit/55d4de3f856828b3fc73a62cd4735d05fd9a2135 https://github.com/kochrt/qr-designer/commit/55d4de3f856828b... [1] https://robko.ch/qr-designer/ https://robko.ch/qr-designer/
- willsmith72 3y ago
  Nice, looks great. Sharing it around, nice job

Prickle 3y ago

Man I really wish I had access to this functionality ~ 5 years ago. Thankyou for open sourcing this! Always nice to see stuff like this. I will definitely pass this onto some underclassmen.

unholiness 3y ago

> Compared to other QR designs, this does not take advantage of error correction that QR codes use, but rather deterministically turns some pixels in the code pattern on or off without affecting what the QR code is pointing to. Can someone explain how this is done? Is it adding characters to the URL that somehow browsers will ignore?

tyingq 3y ago
I assume there's a bit more to it, but QR codes inherently support a "mask" that tells the scanner parts of the image to ignore. So you could do at least some of that with the mask. It's not real flexible, so there's perhaps other tricks also.
- bmicraft 3y ago
  I was under the assumption that the mask was just a short static pattern XORd over the data?
  - CalebJohn 3y ago
    It is, the QR code spec details a few specific masks that are available. The one which produces the best QR code is chosen (best in this case means most clear/easiest for a scanner to read. So, no large blocks of white or black). Wikipedia has a pretty good visual of this. https://en.m.wikipedia.org/wiki/QR_code#Encoding https://en.m.wikipedia.org/wiki/QR_code#Encoding

brundolf 3y ago

This is so cool. I think I've already got a project idea I can use this for

TimLeland 3y ago

Very cool could you share what features people wanted from QR codes? I'm looking into ways to improve https://t.ly/qr-code-generator https://t.ly/qr-code-generator

andrewxhonson 3y ago

Does the readme's last example have sections of one code embedded in the empty space between another code's sections? That's pretty cool.

bmicraft 3y ago
I did not get the bottom one to scan on the last example with two different scanners. It might just be invalid/=.

didntknowya 3y ago

i have a lot of people unable to recognize QR codes as scannable. making it more picture-like would reduce usability?

victor9000 3y ago
Why not use the image to provide a better "scan me" visual?

jmull3n 3y ago

This is really good, I wish I saw it before I built something similar. Mine is server-side rendered at the edge. It allows any value but still has no where near the functionality as yours. https://github.com/jmcmullen/qr-kit https://github.com/jmcmullen/qr-kit

naedish 3y ago

Very cool - I used a website with a custom qr code generator [1] and some hacky RPA tool about 8 years ago to create custom QR codes for each guest at our wedding. My wife created a wedding logo and we had that in the middle of our QR code - it worked well. The QR code was a personalised URL for each guest's rsvp which used a URL shortener [2] installed on our wedding domain (hosted on a free micro AWS instance). Was a fun way to do my part for our wedding planning. [1] https://www.unitag.io/qrcode https://www.unitag.io/qrcode [2] https://yourls.org/ https://yourls.org/

nudpiedo 3y ago

The tool is very cool, although at first sight it looks to me like the perfect side hustle rather than a startup… may I know what was your napkin business plan for such a startup? I guess you put a lot of love in the tool. Freeware, abandonware and open source is sort of a tragedy of the commons for the IT professionals (yes HN, I know there is a global benefit, just no one seems to talk about the cons).

Alifatisk 3y ago

It’s done in Nuxt, cool! I have a huge interest in starting using Nuxt on my next web projects. Might even start earlier because of this. How does Nuxt handle the backend part? Any recommendations? I am used to how Rails does it by using ActiveRecord and it’s flexible ORM.

koch 3y ago
Nuxt and the Nuxt team are working on some incredible things in my opinion. I made this using Nuxt 2 which uses Vue 2, I would start with Nuxt 3 [0] which uses Vue 3 and has made a lot of improvements built upon a bunch of other open source libraries they maintain [1]. They essentially have a 'you can deploy this anywhere' model, from traditional node environments to edge runtimes like cloudflare workers. The backend part was pretty straightforward for nuxt 2 because I could just use express. I think it's a bit different (maybe even simpler?!) for nuxt 3 [2]. I haven't checked recently so I'm not too sure what kind of ORM options they have available. I suspect there would be database plugins regardless, if it's not baked into Nuxt. [0] nuxt.com [1] https://unjs.io/ https://unjs.io/ [2] https://nuxt.com/docs/guide/directory-structure/server https://nuxt.com/docs/guide/directory-structure/server

taubek 3y ago

I really like the tool. I used some similar desktop apps few years ago, but they missed the simplicity of your solution. Almost a 1000 GitHub stars within one day. Really impressive.

ketzu 3y ago

Just a warning to users: light-on-dark QR codes can not be parsed by all QR code readers, even though they look nice.

abwizz 3y ago
sounds ridicules, please share some evidence
- tantalor 3y ago
  https://github.com/bennyguitar/BTCDonationViewController/issues/1 https://github.com/bennyguitar/BTCDonationViewController/iss... https://www.qrcode-monkey.com/6-reasons-why-your-qr-code-is-not-working/ https://www.qrcode-monkey.com/6-reasons-why-your-qr-code-is-...