Fork me on GitHub
Ignitersworld Lab

patternLock.js

An android like pattern lock interface for your hybrid app or website.

Pattern Lock

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.

How to use?
Include jquery and patternLock.js and patternLock.css to your page.
    <link href="patternLock.css"  rel="stylesheet" type="text/css" />
    <script src="jquery.js"></script>
    <script src="patternLock.js"></script>
Then with simple initialization you have your pattern lock.
var lock = new PatternLock("#patternContainer");
Set you pattern. This will be used to validate all other 3*3 pattern in following examples.


Minimum initialization.
        var lock= new PatternLock('#patternHolder');
        


Draw line between two points only when we reach second point.
        var lock= new PatternLock('#patternHolder',{lineOnMove:false})
        


Keep pattern hidden while drawing.
        var lock= new PatternLock('#patternHolder',{patternVisible:false});
        


Patternlock with direction.
JS
        var lock= new PatternLock('#patternHolder');
        
CSS
        #patternHolder7 .patt-wrap {
          z-index: 10;
        }
        #patternHolder7 .patt-circ.hovered {
          background-color: #cde2f2;
          border: none;
        }
        #patternHolder7 .patt-circ.hovered .patt-dots {
          display: none;
        }
        #patternHolder7 .patt-circ.dir {
          background-image: url('../images/icon-arrow.png');
          background-position: center;
          background-repeat: no-repeat;
        }
        #patternHolder7 .patt-circ.e {
          -webkit-transform: rotate(0);
          transform: rotate(0);
        }
        #patternHolder7 .patt-circ.s-e {
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
        }
        #patternHolder7 .patt-circ.s {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
        }
        #patternHolder7 .patt-circ.s-w {
          -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
        }
        #patternHolder7 .patt-circ.w {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }
        #patternHolder7 .patt-circ.n-w {
          -webkit-transform: rotate(225deg);
           transform: rotate(225deg);
        }
        #patternHolder7 .patt-circ.n {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
        }
        #patternHolder7 .patt-circ.n-e {
          -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
        }
        


Allow repeating over dots

Note : Allowing repeation over dots gives a more complex pattern but have different side effects, like arrow css will not be correct, forming a multiple loop and confusing patterns.

            var lock= new PatternLock('#patternHolder',{allowRepeat : true});
            


Updating size and spacing between circles
        var lock= new PatternLock('#patternHolder',{radius:30,margin:20});
        


Create different matrix pattern
        var lock= new PatternLock('#patternHolder',{matrix:[4,4]});
        


Using mapper
        var lock=new PatternLock('#patternHolder',{
        	mapper: function(idx){
        		return (idx%9) + 1;
       		 }
        });
        


Using as a captcha(Require patternCaptha on node server)
Match the pattern in right side.


A beautiful example by Mohan Khadka


See the Pen Lock Screen by Mohan Khadka (@khadkamhn) on CodePen.

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.
enableSetPattern true,false false If set to true allows to set pattern dynamically.
delimiter string empty string and ,(if matrix is bigger than 3*3) Delimiter between pattern.
allowRepeat true/false false If true allow repeating over dots.

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
        }
    });
    

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.
Note : Pattern sent to checkForPattern should be seperated with same delimiter what you have provided on delimiter option. ie if delimiter is "-" than string will be "1-2-3-5-7";
    lock.checkForPattern('12369',function(){
        alert("You unlocked your app");
    },function(){
        alert("Pattern is not correct");
    });
    
setPattern(pattern)
This method sets provided pattern dynamically to patternlock if enableSetPattern option is true.
        var lock = patternLock('#patternHolder',{enableSetPattern : true});
        lock.setPattern('12587');
    
disable()
This method allows to disable patternlock temporarily.
        lock.disable();
    
enable()
Once patternLock is disabled, it allows again to enable it.
        lock.enable();
    

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.

Direction

Patternlock adds directional classes on circles and lines which can be styled to give direction hints. It adds following classes,

  • dir :This class gets added when a selection circle needs to show direction.
  • n :Represent north direction.
  • n-e :Represent north east direction.
  • n-w :Represent north west direction.
  • s :Represent south direction.
  • s-e :Represent south east direction.
  • s-w :Represent south west direction.
  • e :Represent east direction.
  • w :Represent west direction.

Want to support and contribute to patternLock.js?

patternLock.js needs your contribution to become best of its kind. There are lot of things you can do to contribute and support plugin.

Author

This plugin is developed and maintained by me ( Sudhanshu Yadav ignitersworld.com/me ) . If you have any query you can contact me at sudhanshuyadav2@gmail.com.

You can also follow me on twitter and github Follow @s-yadav .

Check out my other open source work