15 ms·

Pure JavaScript WiFi QR Code Generator

217 points by cow9 7y ago

yuvadam 7y ago
On a similar note, I created a very small and convenient service for client-side generation of QR codes http://qrgen.xyz/ http://qrgen.xyz/
jessedhillon 7y ago
Neat! You could update/simplify your Android instructions: the stock camera app will detect QR codes and present a button to connect to the network in the link (tested using Pixel 3 running Android Pie) edit: per the below comment, this is the app, which may or may not be installable on your phone: https://play.google.com/store/apps/details?id=com.google.android.GoogleCamera&hl=en_US https://play.google.com/store/apps/details?id=com.google.and...
- gruez 7y ago
  >the stock camera app Unfortunately this isn't helpful because each manufacturer has their "stock" camera app.
- ehsankia 7y ago
  Oh this is great. I first tried it with Google Lens, which supports normal QR codes, but unfortunately didn't do anything at all with these.
voltagex_ 7y ago
I can crash Settings on my up to date Galaxy Note 9 by entering enough 'a's as SSID and password. Wonder if it's more than a crash?
- moron4hire 7y ago
  That's Samsung in general. I have a TV that can't handle long passwords.
sergiomattei 7y ago
Do regular people (outside the tech bubble) even use QR codes anymore? Using them involves installing a reader app, and even when embedded in phone camera apps, the functionality is hidden or implicit. QR codes look cool and feel like the future, but they seem like something that never really materialized in becoming widespread to the general populace. Not arguing against this product per se, but QR codes in general...
- throwaway66666 7y ago
  iOS camera reads QR codes by default. Just point your phone with the default camera app ON. No special mode required. I have a qr code printed on my living room (made to look like andy warhold art, with multiple colored panels etc) so that guests can use the wifi. Pretty convenient.
  - sergiomattei 7y ago
    Sounds great. But I explicitly asked "outside the tech bubble". Do real end users even know that these features exist? I've barely seen anyone use QR codes in the wild. I feel my question was misinterpreted - it's not that I don't find QR codes useful or that technical people don't use them, but I believe the widespread populace aren't aware of the features that allow their use.
    - throwaway66666 7y ago
      Well, the fact that one of the biggest phone OS supports QR codes natively in the camera, severely reduces the friction that comes from "what's that weird thing, oh it's called a QR code, here's download this app on the appstore. No, not that one, it has a bitcoin miner in it. Yes the free one". Just point your phone to it and it works! Now whether the world outside caught on, or not... where I am from definitely not, however the biggest barrier was the problem I described above.
    - HeWhoLurksLate 7y ago
      Last year, my entire track team had to sign up by QR code. Personally, I think that QR codes will only ever become more ubiquitous- there's plenty of easy QR code generators out there- as people move towards mobile devices and things that have always-accessible cameras. Not many people like typing in long URL's to get somewhere.
ohnope 7y ago
I love that this is supported on iOS. I was curious to know about more supported shortcuts, and found this list: https://9to5mac.com/2017/06/12/top-10-qr-codes-supported-by-ios-11/ https://9to5mac.com/2017/06/12/top-10-qr-codes-supported-by-...
- rolltiide 7y ago
  Its been so nice since iOS has had a QR code reader natively in the camera for a few years Mobile devices having this natively was a dream back in the beginning of the decade Android OS doesnt have this natively so the devices dont reliably have that still Reason 25 to just stay away since there a fundamental limitations to android getting better that have nothing to do with overpowered hardware and customization
  - po1nter 7y ago
    Native QR code reader integrated into the camera was just added to my Galaxy S8+ with the July update.
    - lucasverra 7y ago
      could you please share screen record on implementation ?
  - captn3m0 7y ago
    How is this 2019 and Android doesn’t natively scab QR codes?
    - rolltiide 7y ago
      Could be a variety of factors ranging from apathy to intellectual property, very unlikely to be the OEM hardware or software variances, but it also could be At this point just bet on winners
      - captn3m0 7y ago
daxterspeed 7y ago
On the topic of generating QR codes with JavaScript, I have a project that requires generating QR codes and the various libraries I could find all seemed to be rather... poor. A lot of them were simply made for another era of JavaScript, where the only way to generate the image was to set up a table, or even implement its own png encoder(?). There were a few more modern ones, with active development, but the changelogs weren't terrible re-assuring as they were mostly fixing bugs that really shouldn't happen in a standards compliant code generator. In the end I settled on Project Nayuki's QR code library[0]. The JavaScript is targeting ECMAScript 5, but is commented really well so it's not too difficult to refactor it into ES6+. I'm hoping to publish my efforts soon, but it still needs some more work. [0] https://www.nayuki.io/page/qr-code-generator-library https://www.nayuki.io/page/qr-code-generator-library
- fouc 7y ago
  Are you saying you don't like qifi's implementation?
- nayuki 7y ago
  Thanks for the compliments! So actually, the ES5 targeting is my conscious choice for supporting Internet Explorer 11. Otherwise, you can see the use of the latest and greatest features in the TypeScript version: https://github.com/nayuki/QR-Code-generator/blob/master/typescript/qrcodegen.ts?ts=4 https://github.com/nayuki/QR-Code-generator/blob/master/type... I began this project in 2016 because I got disappointed by code quality when browsing online for C/C++ QR libs. The JavaScript versions were even worse, especially ones that ported C code poorly and verbosely. On my web page, the bottom section titled "Compared to competitors" contains a detailed commentary. On a related note, here you can learn about how QR Codes work at a low level: https://www.nayuki.io/page/creating-a-qr-code-step-by-step https://www.nayuki.io/page/creating-a-qr-code-step-by-step
  - noir_lord 7y ago
    Just wanted to compliment you, this is a seriously impressive amount of work. I deal with QR codes at work (we use them for stock tracking) and the libraries previous Dev used aren't a patch on yours :).
oceanghost 7y ago
This is fantastic. I'm going to 3d print the code and make a placard for the guest WiFi at my place :)
- oceanghost 7y ago
  Ok, so someone already did this... https://www.thingiverse.com/thing:3181601 https://www.thingiverse.com/thing:3181601
  - kebman 7y ago
    Is that thing even scannable? Or do they paint the embossed parts for extra contrast?
    - bbernoulli 7y ago
      From the description on the page: > You need to print this with a light color on the bottom and a darker color on the top layers, otherwise it will not scan correctly.
    - oceanghost 7y ago
      You would have to paint it or print two-color. You can print simple things like signage using a technique called a filament change.
Freeboots 7y ago
Im not really familiar with how qr codes actually work, ive wondered before if its possible to add multiple networks/passowrds from a single qr code, or does it not work that way?
- johnchristopher 7y ago
  If I remember correctly, no. The encoded string has a format like `WIFI:T:WPA;S:mynetwork;P:mypass;;` (see https://cweiske.de/tagebuch/wifi-config-qrcode.htm https://cweiske.de/tagebuch/wifi-config-qrcode.htm). It's up to the qr code scanner to share the string with the appropriate app.
mustardo 7y ago
Anyone from Google know what the deal is with barcode scanners on Android, zxing is in "maintenance mode" we have recently added QR scanning to our app and the experience on iOS is far superior (integrated, faster etc). Or do you have to mothball zxing for a period of time before launching a new "scanner product" to get that team promoted before abandoning it as part of the Google SDLC (Build, Promote, Abandon)
- tareqak 7y ago
  I believe you can use the Google Goggles app to read QR codes, but I no longer have an Android phone to try it out.
  - mustardo 7y ago
    Thanks, looks like that's in the abandon phase, "Final Release 1.9.4 / August 20, 2018; 10 months ago" [1] [1]https://en.wikipedia.org/wiki/Google_Goggles https://en.wikipedia.org/wiki/Google_Goggles
    - mustardo 7y ago
      Ah another team (Google Lens) must be in the dev / promote phase, also looks like android 9+ has integrated scanner, so sweet, I can use that in 6 years time when I can get the min SDK to that... https://medium.com/turunen/scan-qr-codes-by-google-lens-907d6f020c7 https://medium.com/turunen/scan-qr-codes-by-google-lens-907d...
      - muxator 7y ago
        > also looks like android 9+ has integrated scanner I made the decision of not installing play services or emulation layers on my phone, and I can confirm a bunch of low-key apps do not work because of this. That functionality is now considered part of the base system, and only a few applications come with they'd reimplementation of barcode scanning. WhatsApp, for example, has its own, probably for evil reasons :) AOSP is progressively becoming less useful, and there is no open alternative. Alarming.
ram_rattle 7y ago
Inspite of captive portal being everywhere this is a very good tool for SME's/hotels which doesn't afford to have portal. Good job mate.
- drspacemonkey 7y ago
  I've got a wifi QR code printed and hung on the wall of my apartment. It's nice to be able to tell guests to just scan the QR code instead of giving them my very long wifi password.
dzhiurgis 7y ago
Does anyone know why none of the popular banking and alt-banking apps support SEPA payments vi QR code?
- kebman 7y ago
  Banks are some of the most conservative institutions on earth. They also have a lot to lose if they do it wrong, so progress is usually slow. There are some who go against the grain, though, like for instance Revolut.
  - dzhiurgis 7y ago
    Neither Revolut nor Monese do that. Not sure Revolut supports SEPA payments at all.
sschueller 7y ago
Here is one based on jquery-qrcode [1]. http://qrtrack.com/ http://qrtrack.com/ [1] https://larsjung.de/jquery-qrcode/ https://larsjung.de/jquery-qrcode/
jraph 7y ago
Coincidentally, as of this week, Plasma (KDE) adds a feature to see the QR code of a network "for easy sharing with others" - https://pointieststick.com/2019/07/21/kde-usability-productivity-week-80/ https://pointieststick.com/2019/07/21/kde-usability-producti... - https://phabricator.kde.org/D22457 https://phabricator.kde.org/D22457 Also, I really like KDE clipboard's manager feature that turns what you copied into a QR code, making it easy to pass data from the computer to a phone. KDE Connect goes further by allowing sharing the clipboard between a phone and a computer but: - at times, KDE connect is unavailable without tweaking because you are on a WiFi connection that does not allow communication between devices - you might not want to share the clipboard between the computer and the phone for privacy reasons - you may want to share something to somebody else's phone
theon144 7y ago
>Maemo Oh the memories! Makes me wonder how Neo900 is doing...
MertsA 7y ago
Argh, no support for WPA Enterprise??? We're literally stuck with open unencrypted networks with captive portal sign on because the configuration process for WPA Enterprise is so convoluted. This would have been far more helpful if it supported the networks that actually have a bunch of configuration data rather than just an SSID and a password.
- kebman 7y ago
  Perhaps you could offer some help with the project? :)
tstevens 7y ago
Looks like Android Q has support for reading WiFi QR codes. To scan a code, tap the button on the far right of the "Add network" line in the WiFi settings. https://www.androidpolice.com/2019/03/13/android-q-lets-you-share-and-connect-to-wifi-networks-with-qr-codes/ https://www.androidpolice.com/2019/03/13/android-q-lets-you-...

217 points by cow9 7y ago

On a similar note, I created a very small and convenient service for client-side generation of QR codes http://qrgen.xyz/ http://qrgen.xyz/

jessedhillon 7y ago

Neat! You could update/simplify your Android instructions: the stock camera app will detect QR codes and present a button to connect to the network in the link (tested using Pixel 3 running Android Pie) edit: per the below comment, this is the app, which may or may not be installable on your phone: https://play.google.com/store/apps/details?id=com.google.android.GoogleCamera&hl=en_US https://play.google.com/store/apps/details?id=com.google.and...

gruez 7y ago
>the stock camera app Unfortunately this isn't helpful because each manufacturer has their "stock" camera app.
ehsankia 7y ago
Oh this is great. I first tried it with Google Lens, which supports normal QR codes, but unfortunately didn't do anything at all with these.

voltagex_ 7y ago

I can crash Settings on my up to date Galaxy Note 9 by entering enough 'a's as SSID and password. Wonder if it's more than a crash?

moron4hire 7y ago
That's Samsung in general. I have a TV that can't handle long passwords.

sergiomattei 7y ago

Do regular people (outside the tech bubble) even use QR codes anymore? Using them involves installing a reader app, and even when embedded in phone camera apps, the functionality is hidden or implicit. QR codes look cool and feel like the future, but they seem like something that never really materialized in becoming widespread to the general populace. Not arguing against this product per se, but QR codes in general...

throwaway66666 7y ago
iOS camera reads QR codes by default. Just point your phone with the default camera app ON. No special mode required. I have a qr code printed on my living room (made to look like andy warhold art, with multiple colored panels etc) so that guests can use the wifi. Pretty convenient.
- sergiomattei 7y ago
  Sounds great. But I explicitly asked "outside the tech bubble". Do real end users even know that these features exist? I've barely seen anyone use QR codes in the wild. I feel my question was misinterpreted - it's not that I don't find QR codes useful or that technical people don't use them, but I believe the widespread populace aren't aware of the features that allow their use.
  - throwaway66666 7y ago
    Well, the fact that one of the biggest phone OS supports QR codes natively in the camera, severely reduces the friction that comes from "what's that weird thing, oh it's called a QR code, here's download this app on the appstore. No, not that one, it has a bitcoin miner in it. Yes the free one". Just point your phone to it and it works! Now whether the world outside caught on, or not... where I am from definitely not, however the biggest barrier was the problem I described above.
  - HeWhoLurksLate 7y ago
    Last year, my entire track team had to sign up by QR code. Personally, I think that QR codes will only ever become more ubiquitous- there's plenty of easy QR code generators out there- as people move towards mobile devices and things that have always-accessible cameras. Not many people like typing in long URL's to get somewhere.

ohnope 7y ago

I love that this is supported on iOS. I was curious to know about more supported shortcuts, and found this list: https://9to5mac.com/2017/06/12/top-10-qr-codes-supported-by-ios-11/ https://9to5mac.com/2017/06/12/top-10-qr-codes-supported-by-...

rolltiide 7y ago
Its been so nice since iOS has had a QR code reader natively in the camera for a few years Mobile devices having this natively was a dream back in the beginning of the decade Android OS doesnt have this natively so the devices dont reliably have that still Reason 25 to just stay away since there a fundamental limitations to android getting better that have nothing to do with overpowered hardware and customization
- po1nter 7y ago
  Native QR code reader integrated into the camera was just added to my Galaxy S8+ with the July update.
  - lucasverra 7y ago
    could you please share screen record on implementation ?
- captn3m0 7y ago
  How is this 2019 and Android doesn’t natively scab QR codes?
  - rolltiide 7y ago
    Could be a variety of factors ranging from apathy to intellectual property, very unlikely to be the OEM hardware or software variances, but it also could be At this point just bet on winners
    - captn3m0 7y ago

daxterspeed 7y ago

On the topic of generating QR codes with JavaScript, I have a project that requires generating QR codes and the various libraries I could find all seemed to be rather... poor. A lot of them were simply made for another era of JavaScript, where the only way to generate the image was to set up a table, or even implement its own png encoder(?). There were a few more modern ones, with active development, but the changelogs weren't terrible re-assuring as they were mostly fixing bugs that really shouldn't happen in a standards compliant code generator. In the end I settled on Project Nayuki's QR code library[0]. The JavaScript is targeting ECMAScript 5, but is commented really well so it's not too difficult to refactor it into ES6+. I'm hoping to publish my efforts soon, but it still needs some more work. [0] https://www.nayuki.io/page/qr-code-generator-library https://www.nayuki.io/page/qr-code-generator-library

fouc 7y ago
Are you saying you don't like qifi's implementation?
nayuki 7y ago
Thanks for the compliments! So actually, the ES5 targeting is my conscious choice for supporting Internet Explorer 11. Otherwise, you can see the use of the latest and greatest features in the TypeScript version: https://github.com/nayuki/QR-Code-generator/blob/master/typescript/qrcodegen.ts?ts=4 https://github.com/nayuki/QR-Code-generator/blob/master/type... I began this project in 2016 because I got disappointed by code quality when browsing online for C/C++ QR libs. The JavaScript versions were even worse, especially ones that ported C code poorly and verbosely. On my web page, the bottom section titled "Compared to competitors" contains a detailed commentary. On a related note, here you can learn about how QR Codes work at a low level: https://www.nayuki.io/page/creating-a-qr-code-step-by-step https://www.nayuki.io/page/creating-a-qr-code-step-by-step
- noir_lord 7y ago
  Just wanted to compliment you, this is a seriously impressive amount of work. I deal with QR codes at work (we use them for stock tracking) and the libraries previous Dev used aren't a patch on yours :).

oceanghost 7y ago

This is fantastic. I'm going to 3d print the code and make a placard for the guest WiFi at my place :)

oceanghost 7y ago
Ok, so someone already did this... https://www.thingiverse.com/thing:3181601 https://www.thingiverse.com/thing:3181601
- kebman 7y ago
  Is that thing even scannable? Or do they paint the embossed parts for extra contrast?
  - bbernoulli 7y ago
    From the description on the page: > You need to print this with a light color on the bottom and a darker color on the top layers, otherwise it will not scan correctly.
  - oceanghost 7y ago
    You would have to paint it or print two-color. You can print simple things like signage using a technique called a filament change.

Freeboots 7y ago

Im not really familiar with how qr codes actually work, ive wondered before if its possible to add multiple networks/passowrds from a single qr code, or does it not work that way?

johnchristopher 7y ago
If I remember correctly, no. The encoded string has a format like `WIFI:T:WPA;S:mynetwork;P:mypass;;` (see https://cweiske.de/tagebuch/wifi-config-qrcode.htm https://cweiske.de/tagebuch/wifi-config-qrcode.htm). It's up to the qr code scanner to share the string with the appropriate app.

mustardo 7y ago

Anyone from Google know what the deal is with barcode scanners on Android, zxing is in "maintenance mode" we have recently added QR scanning to our app and the experience on iOS is far superior (integrated, faster etc). Or do you have to mothball zxing for a period of time before launching a new "scanner product" to get that team promoted before abandoning it as part of the Google SDLC (Build, Promote, Abandon)

tareqak 7y ago
I believe you can use the Google Goggles app to read QR codes, but I no longer have an Android phone to try it out.
- mustardo 7y ago
  Thanks, looks like that's in the abandon phase, "Final Release 1.9.4 / August 20, 2018; 10 months ago" [1] [1]https://en.wikipedia.org/wiki/Google_Goggles https://en.wikipedia.org/wiki/Google_Goggles
  - mustardo 7y ago
    Ah another team (Google Lens) must be in the dev / promote phase, also looks like android 9+ has integrated scanner, so sweet, I can use that in 6 years time when I can get the min SDK to that... https://medium.com/turunen/scan-qr-codes-by-google-lens-907d6f020c7 https://medium.com/turunen/scan-qr-codes-by-google-lens-907d...
    - muxator 7y ago
      > also looks like android 9+ has integrated scanner I made the decision of not installing play services or emulation layers on my phone, and I can confirm a bunch of low-key apps do not work because of this. That functionality is now considered part of the base system, and only a few applications come with they'd reimplementation of barcode scanning. WhatsApp, for example, has its own, probably for evil reasons :) AOSP is progressively becoming less useful, and there is no open alternative. Alarming.

ram_rattle 7y ago

Inspite of captive portal being everywhere this is a very good tool for SME's/hotels which doesn't afford to have portal. Good job mate.

drspacemonkey 7y ago
I've got a wifi QR code printed and hung on the wall of my apartment. It's nice to be able to tell guests to just scan the QR code instead of giving them my very long wifi password.

dzhiurgis 7y ago

Does anyone know why none of the popular banking and alt-banking apps support SEPA payments vi QR code?

kebman 7y ago
Banks are some of the most conservative institutions on earth. They also have a lot to lose if they do it wrong, so progress is usually slow. There are some who go against the grain, though, like for instance Revolut.
- dzhiurgis 7y ago
  Neither Revolut nor Monese do that. Not sure Revolut supports SEPA payments at all.

sschueller 7y ago

Here is one based on jquery-qrcode [1]. http://qrtrack.com/ http://qrtrack.com/ [1] https://larsjung.de/jquery-qrcode/ https://larsjung.de/jquery-qrcode/

jraph 7y ago

Coincidentally, as of this week, Plasma (KDE) adds a feature to see the QR code of a network "for easy sharing with others" - https://pointieststick.com/2019/07/21/kde-usability-productivity-week-80/ https://pointieststick.com/2019/07/21/kde-usability-producti... - https://phabricator.kde.org/D22457 https://phabricator.kde.org/D22457 Also, I really like KDE clipboard's manager feature that turns what you copied into a QR code, making it easy to pass data from the computer to a phone. KDE Connect goes further by allowing sharing the clipboard between a phone and a computer but: - at times, KDE connect is unavailable without tweaking because you are on a WiFi connection that does not allow communication between devices - you might not want to share the clipboard between the computer and the phone for privacy reasons - you may want to share something to somebody else's phone

theon144 7y ago

>Maemo Oh the memories! Makes me wonder how Neo900 is doing...

MertsA 7y ago

Argh, no support for WPA Enterprise??? We're literally stuck with open unencrypted networks with captive portal sign on because the configuration process for WPA Enterprise is so convoluted. This would have been far more helpful if it supported the networks that actually have a bunch of configuration data rather than just an SSID and a password.

kebman 7y ago
Perhaps you could offer some help with the project? :)

tstevens 7y ago

Looks like Android Q has support for reading WiFi QR codes. To scan a code, tap the button on the far right of the "Add network" line in the WiFi settings. https://www.androidpolice.com/2019/03/13/android-q-lets-you-share-and-connect-to-wifi-networks-with-qr-codes/ https://www.androidpolice.com/2019/03/13/android-q-lets-you-...