- Overview
- Documents
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. Is also provide some methods to use this plugin securely.
Source: ignitersworld.com
1. INCLUDE CSS AND JS FILES
<link href="patternLock.css" rel="stylesheet" type="text/css" /> <script src="jquery.js"></script> <script src="patternLock.js"></script>
2. HTML
<div id="createPattern"></div>
3. JAVASCRIPT
var lock1=new PatternLock('#createPattern');
4. OPTIONS
Syntax :
var lock = new PatternLock('#patternHolder',{ patternVisible:false //option });
Option | Allowed Value | Default | Description |
---|---|---|---|
matrix | Array defining matrix example [3,3] for 3*3 matrix. | [3,3] | To define matrix of pattern. |
margin | number | 20 | Define margin of pattern circles. |
radius | number | 25 | Define radius of pattern circles. |
patternVisible | true,false | true | Make pattern visbile while drawing. |
lineOnMove | true,false | true | Make line visible while moving mouse/finger. |
5. CALLBACK
onDraw:
Will be fired when a pattern draw completes passing pattern as parameter. Syntax :
var lock = new PatternLock('#patternHolder',{ onDraw:function(pattern){ //do something with pattern } });
Mapper
Mapper is way to map indexes of pattern circles with some arbitrary value to make it hard to understand sequence of pattern.
Mapper can be provided only at the time of initializing PatternLock and can be provided in two way.
As a object
Syntax :
var lock = new PatternLock('#patternHolder',{ mapper: {1:3,2:1,3:4,4:2,5:9,6:7,7:8,8:5,9:6} });
As a function
Syntax :
var lock = new PatternLock('#patternHolder',{ mapper: function(idx){ return (idx%9) + 1; } });
If you are using mapper, make sure to use same mapper object or function for a user throught the life of pattern.
6. METHODS
option(key,[value])
To get or set an option of pattern object. Syntax :
//as getter lock.option('matrix'); //return [3,3]; //as setter lock.option('matrix',[4,4]);
reset()
reset the drawn pattern
lock.reset();
error()
show a wrong pattern input
lock.error();
getPattern()
To get pattern after draw
lock.getPattern();
checkForPattern(pattern,successHandler,errorHandler)
To ask pattern object to check for specific pattern after every draw. Used on demo examples to check for pattern you created.
lock.checkForPattern('12369',function(){ alert("You unlocked your app"); },function(){ alert("Pattern is not correct"); });
6. EXAMPLES
Draw line between two points only when we reach second point.
var lock2= new PatternLock('#patternHolder2',{lineOnMove:false})Keep pattern hidden while drawing.
var lock3= new PatternLock('#patternHolder3',{patternVisible:false});
var lock4=new PatternLock('#patternHolder4',{radius:30,margin:20});Create different matrix pattern
var lock5=new PatternLock('#patternHolder5',{matrix:[4,4]});Using mapper
var lock6=new PatternLock('#patternHolder6',{ mapper: function(idx){ return (idx%9) + 1; } });