App Inventor and HTML/JavaScript with Input Parameters


How to create a Pattern Lock Mechanism with App Inventor and some JavaScript

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:

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!

Screenshots


App Inventor Blocks

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!


HTML/JavaScript

<!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>

For questions about App Inventor,
please ask in the App Inventor community.Thank you.

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 2
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 | Links | Search | Privacy Policy | Contact