✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Create Android Like Pattern Lock Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery CSS HTML | Written & Updated By - Amruta

In this tutorial we will show you the solution of create android like pattern lock, 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.

Create Android Like Pattern Lock Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

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.

I hope this tutorial on android pattern lock using jQuery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →