App Inventor and HTML/JavaScript with Input Parameters


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.

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>
  <!-- Thank you Jerome Etienne for the jquery plugin https://github.com/jeromeetienne/jquery-qrcode -->
  <script src="jquery.qrcode.min.js"></script>
  <title>QR</title>
</head>

<body>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    // get parameter from the window.AppInventor object
    var strText = window.AppInventor.getWebViewString();

    // display the QR code
    $('#output').qrcode(strText);
  });
  </script>

</body>
</html>

Do you need help with your App Inventor project?

I can help you: for one hour I charge 25 USD.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.

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!

Donation amount:

or donate some mBTC to Bitcoin Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Bitcoin

Thank you! Taifun
 

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.


Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact