kochrt / qr-designer Goto Github PK

QR designer web app with a novel method of designing qr codes that does not take advantage of error correction

License: MIT License

JavaScript 3.64% CSS 0.01% SCSS 0.09% Vue 63.76% TypeScript 32.51%

qr-designer's Introduction

QR code designer

This is a QR design web app that you can use to create QR codes that have arbitrary designs in the middle section. 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.

Prerequisites

The designer is a Nuxt v2 app, statically generated. It had been part of a larger app that I have separated it from. There may be references to sw.ink and qr.new lying around; those were the domains I had that the app was being served from.

There are some prerequisites to making QR codes with the designer.

In order to maximize designer space, the url that the QR codes links to is expected to be exactly 25 characters long from the set of alphanumeric characters - 0–9, A–Z (upper-case only), space, $, %, *, +, -, ., /, :

When I had the sw.ink and qr.new domains, it would direct to HTTPS://SW.INK/${QR_ID} where QR_ID would be a 10 alphanumeric-character long id set as part of the link shortening process.

If you want to change this you would do it in components/Design/QRGroup.vue at line 138.

Installing and running

Node version 16 is expected.

> npm i
> npm run generate
> npm run start

Examples

qr-designer's People

Contributors

Stargazers

Watchers

Forkers

mehmetbal thfrei lightdarkphoton greydoubt michaeltoohig moolahtech sadiqmmm etos c0debrain javajosh jdrago999 ukd1 duchenyingde neo2271 bermanboris jithinraj higgins rauschermate yannhulot hnq90 vdt borisnadion singhkpratham erson siddharthsahu xen0byte lukasforst ifasoft nandan-indecomm hirajanwin emintolga jencyyyyy aa88kk simoncastano davebarnwell indygwyn cjh0613 disi3r baa-archieve farooge niteshjain thearchiver alejandrosuarez jrcribb huangzhenyang zycode667 nosahama baboleevan zuo-si approveplz pallab j3po richardsonjf tylerchilds wakaru44 carlosg2 ijoywan hutengfei0701 ippatev clarsen nanderoo mxgnet apollohuang1 efewijum tsotsi116 uberguidoz jhonrios85 claudey cjeon raochuan duke24k ymaheshwari1 dreamboy1339 qqq-tech eternalerrors cxz nbjedi positioner 03balogun sarbor bradparks kamwo munifico 8ventures meowboy326 gitlapple ygllq pikachule jaekook laizhouzhang rheehot kiloshell www2341 changtraixuqang97 eldair cyberflamego keyzf spaceblocks xyztlp scillidan

qr-designer's Issues

Create QR code based on template in the gallery

Hi, I'd like to create a qr code similar to the "artsy lines" example.
Can such functionality be added?

QR-code SOS is not recognized by iPhone

This one doesn't work on iPhone 13 Pro Max, iOS 16.5

App expects a firebase backend - how to configure?

The app appears to want to upload images to a firebase back end to be fully functional. I tried to configure a firebase account using the instructions here https://firebase.nuxtjs.org/guide/getting-started.html but without much luck.

Any guidance on how to best configure this?

Library Usage2

Hello handsome guy, can you provide a method to create a QR code separately? I tried to run the installation but an error occurred. I also tried to get it from the code but unfortunately it was not successful. Thank you.

Library Usage

Is it possible to consume this as a library without having to run the entire editor?

25th character kills recognition

Amazing tool and thank you so much for fixing images.

I've discovered that I can now use the generator beautifully except for one weird issue I lack knowledge to debug. I'm trying to encode a URL - and it is recognisable all the way up to 24 characters, but very consistently then fails as soon as I increase the characters to 25.

Example strings:

25 chars (does not work)
HTTPS://SITE.LY/123456789

24 chars (works fine, as do all other lengths)
HTTPS://SITE.LY/12345678

I assume these examples are sufficient to replicate the problem but if you need images I can provide. For reference I tried an iPhone 13 pro and an 11 pro, both on iOS 16.5. However, the built in "scannability tool" also fails with 25 chars.

As I said, I lack the knowledge to delve deeper into this but am posting as an FYI. Thanks again for the very cool tool!

Uploading an image fails

Google Chrome Version 113.0.5672.126 (Official Build) (arm64)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'auth')
    at d2ee081.js:1:16419
    at v (ef6d2b0.js:2:100583)
    at Generator._invoke (ef6d2b0.js:2:100371)
    at Generator.next (ef6d2b0.js:2:101008)
    at r (ef6d2b0.js:2:67863)
    at l (ef6d2b0.js:2:68066)
    at ef6d2b0.js:2:68125
    at new Promise (<anonymous>)
    at ef6d2b0.js:2:68006
    at f.refreshImages (d2ee081.js:1:16759)

Cannot add uploaded image to the QR code

Steps to reproduce

Using web app (http://robko.ch/qr-designer)
Upload any PNG or JPG under 5mb in size
See uploaded image available beneath file upload field
Drag and drop image onto QR code
BUG - Image is not uploaded to QR code preview, no errors are thrown in the console either

I'm not sure if I'm being stupid while trying to do this, but I have now tried with 5 different images, a variety of PNGs and JPGs. None of them appear to work.