Create Android Like Pattern Lock Using jQuery

Tuesday, Mar 7, 2017

Tags:- jQuery CSS HTML


Pattern lock is a new kind of security lock in which user have to draw a pattern to get access or to open something. This kind of lock is most popular in android devices but in this tutorial we will show you how to create android like pattern lock using jQuery, CSS and HTML for websites.Download PatternLock plugin to create pattern lock.


See Demo
Android Pattern Lock Using jQuery


To Create Android Pattern Lock It Takes Only Three Steps:-

  1. Make a HTML file and define markup for Pattern Lock
  2. Make a js file and define scripting for Pattern Lock
  3. Make a CSS file and define styling for Pattern Lock


Step 1.Make a HTML file and define markup for Pattern Lock

We make a HTML file and save it with a name pattern_lock.html

<html>
<head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="patternlock/patternLock.js"></script>
 <link href="patternlock/patternLock.css"  rel="stylesheet" type="text/css" />
 <link href="lock.css"  rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="lock.js"></script>
</head>
<body>
<div id="wrapper">

 <div id="pattern1_container" class="pattern_container">
  <p>Set Pattern Lock</p>
  <div id="pattern1">
  </div>
  <input type="button" value="Save Pattern Lock" onclick="hide_show_pattern();">
 </div>

 <div id="pattern2_container" class="pattern_container">
  <p>Check Pattern Lock</p>
  <div id="pattern2">
  </div>
 </div>

 <input type="hidden" value="" id="pattern_val">

</div>
</body>
</html>

In this step we first insert all the required files to create pattern lock.Then we create two div to hold two Pattern Lock one is to save the pattern lock and other one is used to check the pattern lock and we also create a hidden tag which store the value of 1st pattern lock this value is used to check whether the entered pattern is right or wrong.



Step 2.Make a js file and define scripting for Pattern Lock

We make a js file and save it with a name lock.js

document.addEventListener("DOMContentLoaded", function() { display_pattern();});

function display_pattern()
{
 var lock= new PatternLock('#pattern1',{
 onDraw:function(pattern){
  document.getElementById("pattern_val").value=lock.getPattern();
  display_pattern2();
 }
 });
}

function hide_show_pattern()
{
 if(document.getElementById("pattern_val").value!="")
 {
  document.getElementById("pattern1_container").style.display="none";
  document.getElementById("pattern2_container").style.display="block";
 }
 else
 {
  alert("Please Set Pattern Lock");
 }
}

function display_pattern2()
{
 var pattern_value=document.getElementById("pattern_val").value;
 var lock= new PatternLock('#pattern2',{
 onDraw:function(pattern)
 {
  lock.checkForPattern(pattern_value,function()
 {
  alert("Pattern Lock is Right");
 },
 function()
 {
  alert("Pattern Lock Is Wrong");
 });
}
});
}

In this step we use addEventListener() function to call display_pattern() function to display Pattern Lock after page load.In display_pattern() function we create a pattern lock in 'pattern1' div and use its onDraw callback function to get the pattern lock value and set it to our hidden field for further use and the call display_pattern2 function.

In hide_show_pattern() function we simply check hidden field value if the value exist it means user save the pattern and proceed to 2nd pattern lock for checking.

In display_pattern2() function we first get the pattern value saved in hidden field and create a another pattern lock in 'pattern2' div for checking and then we use checkForPattern() function to check the pattern value if value is same it means pattern is correct otherwise wrong.



Step 3.Make a CSS file and define styling for Pattern Lock

We make a CSS file and save it with a name lock.css

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#A9BCF5;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
.pattern_container
{
 margin-top:20px;
}
.pattern_container p
{
 margin:0px;
 color:#0B2161;
 font-size:25px;
 font-weight:bold;
}
#pattern1,#pattern2
{
 margin-left:340px;
}
#pattern1_container input[type="button"]
{
 background:none;
 border:none;
 margin-top:10px;
 border:1px solid #0B2161;
 color:#0B2161;
 width:310px;
 margin-left:-5px;
 height:45px;
 font-size:17px;
}
#pattern2_container
{
 display:none;
}

Thats all, this is how to create android pattern lock using jQuery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email