An Andoid like pattern lock plugin using javascript and rapheal(a Javascript Library for SVG)
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);
| 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
| 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 |