Pattern Lock.
Pattern Lock plugin is similar to pattern based locks available in Android and other mobile OS. It lets you emulate similar pattern lock in browser environment. Its highly configurable and works in desktop as well mobile OS browser (supports touch based gesture). You may use it in hybrid mobile app using lib like Cordova/Phonegap also you may use in desktop application for authentication purpose along with other authentication.
How to use Pattern Lock
Include jquery, patternLock javascript & pattern lock cssfile inside your html file.
<link rel="stylesheet" href="css/patternLock.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.patternlock.js"></script>
Simple Use
<div id="mypatternlock"></div>
<script type="text/javascript">
(document).ready(function(){
$('#mypatternlock').patternLock();
});
</script
Options available
You can use following options like shown below:
$(selector).patternLock({ optionName: value });
| Options | Default Value | type | Notes |
|---|---|---|---|
| rows | 3 | number | number of rows for lock holes |
| columns | 3 | number | number of columns for lock holes |
| width | 250 | number | width in pixels |
| height | 250 | number | height in pixels |
| showPatternLine | true | boolean | show or hide pattern line |
| patternLineColor | #000000 | string | color of pattern line |
| lineWidth | 4 | number | width of pattern line |
| selectionColor | #0000ff | string | color to be used as a highlight color of pattern hole |
| fieldName | '' | string | hidden input field name in which drawn pattern value will be available so that it can be used inside form to submit to the server |
| valueSeparator | , | string | string that will be used inside pattern to separate values like 1,2,3,4 |
| valueArray | [] | array | Yes. You can give your own values to each pattern hole. It will be assigned in a sequence from left to right and top to bottom. Make sure array lenght should be equal to rows * columns otherwise it will be skipped. If you don't give your own values then 1,2,3,...n values will be assigned to each hole. Where n = rows * columns |
| centerCircle | false | boolean | it will show or hide circles inside holes |
| centerCircleSize | 20 | number | size of center circles in pixels |
| drawEnd | null | function | callback function that will be called after pattern drawing is done and will be receive drawn pattern as argument |
| timeout | 500 | number (milliseconds) | duration in milliseconds, to show drawn pattern for |
| allowRepeatSelection | false | boolean | option to set whether or not allow repeated selection of lock holes. |
Documentation and Examples
Check detail documention with examples here
Authors and Contributors
Bharat Patik (@bharatpatil) and Pratik Goenka (@pagoenka)