An Andoid like pattern lock plugin using javascript and rapheal(a Javascript Library for SVG)
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
pattern.js
sample.html

README.md

jsPatternLock

An Andoid like pattern lock plugin using javascript and rapheal(a Javascript Library for SVG)

Click here for demo

Documentation

How to use?

Step 1: Include the following scripts in your head section (click here to download raphaeljs , click here to download pattern.js)
<script src="raphael-min.js" type="text/javascript"></script>
<script src="pattern.js" type="text/javascript"></script>

Step 2: Create an instance for the pattern with your custom properties and draw the pattern within the container with instance.draw(container).
var s = new Pattern(properties);
s.draw(container);

Properties

Property Description Default Value
dimension Dimension of the patern
No. of rows x No. of columns
Eg:
dimension:‘5x5’
3x3
patternRadius Radius of the pattern circle
Eg:
patternRadius:25
20
patternGap Gap between each Pattern Circle
Eg:
patternGap:70
50
outerColor Color of the Pattern Circle. The color value can be either hex color or hex gradient color
Eg:
outerColor:’#FC0000’
outerColor :‘90-#239EE0:5-#1951A0:95’
#333333
innerColor Color of the inner circle within the Pattern Circle
Eg:
innerColor:’#FC0000’
innerColor :‘90-#239EE0:5-#1951A0:95’
90-#239EE0:5-#1951A0:95
background Pattern box background color
Eg:
background:’#FF00F0’
#000000
backgroundOpacity Pattern box background opacity
Eg:
background:0.5
1
hoverColor Stroke color of Pattern Circle when mouse over
Eg:
hoverColor:’#FF00F0’
#c8ee17
errorColor Stroke color of Pattern Circle for Invalid Pattern
Eg:
errorColor:’#FF00F0’
#FF0000
padding Pattern Box padding
Eg:
padding:25
Value of pattern radius
onFinish Handler to be executed when the user completes the pattern
Eg:
onFinish:function(value){
}
value – value of the pattern drawn passed to the handler
null

also you can set the property values externally with the created pattern Object

Functions

Function Description Return value
draw (container) Draw the pattern within the container. Should be called with pattern instance.
Eg:
s.draw(‘mydiv’);
Here ‘mydiv’ represents containerId
s.draw(document.getElementById(‘mydiv’));
Return Pattern Object
clear() Resets the pattern.
Eg:
s.clear();
Return Pattern Object
error() Used to mark the drawn pattern as error
Eg:
s.error();
Return Pattern Object
val() Used to get the value of drawn pattern
Eg:
s.val();
for the image attached in this post, the value returned will be ‘3-4-5-10-15
Return pattern value