kozakdenys / qr-code-styling

Automaticly generate your styled QR code in your web app.
https://qr-code-styling.com
MIT License
1.51k stars 485 forks source link

Diverse data input sources for the QR #36

Open Andrei-Rosu opened 3 years ago

Andrei-Rosu commented 3 years ago

A wider array of data as an input for the QR coder would be nice :). I can think of the vcards as an example.

kozakdenys commented 3 years ago

Hi @Andrei-Rosu You can pass data like this to qr-code-styling and it should generate the proper QR code for vcard:

data:
`BEGIN:VCARD
VERSION:3.0
N:kozak;denys
FN:denys kozak
END:VCARD`
kozakdenys commented 3 years ago

But it is a good idea to add this info to the documentation. Thanks @Andrei-Rosu

Andrei-Rosu commented 3 years ago

Thanks a lot for the info, have a good one! @kozakdenys Edit: maybe I am not doing the right thing, but even when I try with your card, scanning takes me to Safari on Iphone instead of trying to save the .vcf in the address book, for some reason the format is seen as text. For the info, I have tried to input the vcard content both in the code by editing the sample.html file and in the browser. I have also tried on the example website, both by inputing the vcard content in the text box, in which case, if using punctuation (Ex: "vcard content" or 'vcard content') the QR output is a text file. If not using punctuation, the QR output is "No usable data found". I guess that the type detection works between links ant text files, but for some reason it bugs on vcard. 2nd edit, on sample.html it works as expected in the browser, without punctuation.

agusmba commented 9 months ago

[...] I have also tried on the example website, both by inputing the vcard content in the text box, in which case, if using punctuation (Ex: "vcard content" or 'vcard content') the QR output is a text file. If not using punctuation, the QR output is "No usable data found". I guess that the type detection works between links ant text files, but for some reason it bugs on vcard. 2nd edit, on sample.html it works as expected in the browser, without punctuation.

Quite an old thread, but since I went through this recently I'd like to add that in order to test multiline on the qr-code-styling website, you could do a local override to turn the input box for the data into a textarea. Then you can add the multiline vCard contents (the extra ";" are important):

BEGIN:VCARD
VERSION:3.0
N:kozak;denys;;;
FN:denys kozak
END:VCARD

Then there is an additional problem if your name uses utf-8 characters, since utf-8 is not enabled in the qr-code library, so you need to do further overrides (a bit more complicated since you are touching the webpacked code...)

Pom-Veerawat commented 9 months ago

[...] I have also tried on the example website, both by inputing the vcard content in the text box, in which case, if using punctuation (Ex: "vcard content" or 'vcard content') the QR output is a text file. If not using punctuation, the QR output is "No usable data found". I guess that the type detection works between links ant text files, but for some reason it bugs on vcard. 2nd edit, on sample.html it works as expected in the browser, without punctuation.

Quite an old thread, but since I went through this recently I'd like to add that in order to test multiline on the qr-code-styling website, you could do a local override to turn the input box for the data into a textarea. Then you can add the multiline vCard contents (the extra ";" are important):

BEGIN:VCARD
VERSION:3.0
N:kozak;denys;;;
FN:denys kozak
END:VCARD

Then there is an additional problem if your name uses utf-8 characters, since utf-8 is not enabled in the qr-code library, so you need to do further overrides (a bit more complicated since you are touching the webpacked code...)

i am using this link https://qr-code-styling.com/ passing your BEGIN;VCARD.. into data field I can scan but there is no data just a blank contact

agusmba commented 9 months ago

i am using this link https://qr-code-styling.com/ passing your BEGIN;VCARD.. into data field I can scan but there is no data just a blank contact

Did you do the local override of the input into a textarea? Otherwise the data is merged into a single line and it won't work. image

agusmba commented 1 week ago

@kozakdenys Thanks for the last improvements! Besides documenting this, would it be possible to change (on the demo site) the "Data" input box into a textarea? This way we could create VCARDs there without resorting to local overrides on the page code.

(I see that you've also identified the utf-8 bug elsewhere, thanks!)

kozakdenys commented 1 week ago

Hi @agusmba, thanks for your idea. I will fix it soon!

kozakdenys commented 1 week ago

@agusmba done, thank you again! ❤️