App Inventor and HTML/JavaScript with Input Parameters
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.
: 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.
<!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>
App Inventor,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.
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!
or donate some mBTC to 
Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Thank you! Taifun
Download aia file for App Inventor
Back to top of page ...
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.
Site Content © 2010 - 2024 Pura Vida Apps using the
Foundation Framework.