How To Get Qr Code For Mit App Inventor

How to generate a QR code from text without web access with App Inventor and some jQuery

This is possible with some HTML and JavaScript or jQuery. I used the jQuery library jquery-qrcode for the example. Thank you Jerome! I set up the solution similar to the other HTML examples with input parameters. Thank you Claus for being the sponsor of this tutorial!

Note: The QR code is displayed in the webviewer. As far as I know, there is currently no possibility to store the QR code as image on the sd card of the device.

Note: This example requires the qr.html file and the two jQuery libraries jquery-1.8.0.min.js and jquery.qrcode.min.js uploaded into the assets of the app.

Note: there seems to be an issue with the new Android System Webview update on some devices. See Boban's tip here how to solve it. Thank you Boban!

App Inventor Blocks

: The WebViewString property helps to simplify the example and we can pass parameters to the HTML file stored as asset inside of the app, which was not possible before.

The tools extension offers the method PathToAssets which always returns the correct path to the assets.

Screenshot

HTML/JavaScript

<!DOCTYPE HTML> <html> <head>   <meta name="author" content="puravidaapps.com">   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">

          <script src="jquery-1.8.0.min.js"></script>      <script src="jquery.qrcode.min.js"></script>

          <title>QR</title> </head>  <body>   <div id="output"></div>

          <script>   $(document).ready(function() {          var strText = window.AppInventor.getWebViewString();           $('#output').qrcode(strText);   });   </script>

</body> </html>

Questions and Answers

Q: I was wondering why you didn't take a JavaScript that makes an qr code image then you could save it in a canvas and send or save it?
A: The problem is, you can't save the image generated by the webviewer on your sd card and you can't "send" it back to App Inventor. With text this is no problem, you can send it back in the title of the webpage, but this does not work with an image. But in case you have a solution for that problem, I'd be interested....
By the way: if you have internet access, you can use the Google Chart API (unfortunately deprecated) to create a QR code easily, see screenshot below. Also you can save the generated QR code on your SD card.

Download

Developing and maintaining snippets, tutorials and extensions for App Inventor takes a lot of time.
I hope it saved some of your time. If yes, then you might consider to donate a small amount!

Download aia file for App Inventor
Back to top of page ...

Creative Commons License
This work by Pura Vida Apps is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.