• Include the patternlock.js file in your page
  • include the patternlock.css file in your page (and upload the images)
  • give the input element you want to replace the class "patternlock"

it has 2 parameters
  • patternlock.autoInit
    • If set to true all input elements with the className “patternlock” will be replaced
    • If set to false you have to manually initiate it by patternlock.generate(IDofElement)
  • patternlock.autoSubmit
    • If set to true your form will be submitted when you stop drawing the pattern
    • If set to false the user will have to submit it manually

Possible enhancements for the future:
  • maybe rewrite it as a jQuery plugin ?
  • it would be much cooler to use the <canvas> element to draw the dots and lines in runtime instead of using images. But since that’s not supported on all browsers, I used images to keep it compatible.

Known issues
  • The default Android browser has a really slow “ontouchmove” trigger: if you draw very fast on your android phone, you will miss some dots.
  • I you draw outside of the box you can connect non-adjacent points. allthough that’s perfecty fine, no lines will be drawn between those points.
  • Using multiple patternlocks on the same page probably won’t work.

Last edited Apr 12, 2011 at 12:43 PM by Steffest, version 1


No comments yet.