App Inventor and HTML/JavaScript with Input Parameters
Let's play around with the WebViewString property 
of the WebViewer component.
This example offers a Pattern lock mechanism for your app using a jQuery plugin. We just use a few blocks and the jQuery plugin. That's all!
Thank you Sudhanshu for your Pattern Lock jQuery Plugin.
Pattern Lock is a light weight plugin to simulate android like pattern lock mechanism
for you hybrid app or for a website. It's easy to configure and style so you can have different type of pattern lock according to your need.
To get this running, I uploaded the following libraries as assets into App Inventor:
The tools extension offers the method PathToAssets which always returns the correct path to the assets.
Yes, these are really all blocks you need! Isn't that great? Woo Hoo!
<!DOCTYPE html> <html> <head> <meta name="author" content="puravidaapps.com"> <meta charset="utf-8"> <!-- Android viewport setting "user-scalable=no" breaks width / zoom level of viewport http://stackoverflow.com/a/12785631/1545993 -->. <meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" /> <!-- Pattern Lock is a light weight plugin to simulate android like pattern lock mechanism by Sudhanshu Yadav, http://ignitersworld.com/lab/patternLock.html --> <link rel="stylesheet" href="patternLock.css" /> <script src="jquery-1.8.0.min.js"></script> <script src="patternLock.js"></script> <title>PatternLock</title> <style> body{background:#3382c0}; </style> </head> <body> <div id="patternContainer" class="pattern-holder"></div>
<script>
var lock = new PatternLock("#patternContainer");
// pass code to unlock from App Inventor to JavaScript, e.g. '12369'.
var code = window.AppInventor.getWebViewString();
// check for correct code.
lock.checkForPattern(code,function(){
window.AppInventor.setWebViewString('unlocked');
},function(){
window.AppInventor.setWebViewString('Pattern is not correct');
});
</script></body> </html>
App Inventor,
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 2
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.