Fantastisch.
Uit kurieuziteit: waarom 9 dots? je zou er 16 kunnen nemen ook (de cijfers + een paar letters). Zo uit de buik zou ik denken dat je met 9 dots (waarbij je enkel adjacent dots kan gebruiken, en geen dubbels) veel minder combinaties hebt dan bij 10 cijfers.
But that's nitpicking. 't Is weeral een fantastisch idee en prachtig uitgevoerd.
Love it :)
Reproduce:
- Click and hold op 1
- hover dan naar het plekje tussen 1 en 5
- Loslaten
- Met de cursor over 5, 4 en terug naar 1
- Click
-> you entered 1
Bij nader inzien: deze "bug" kom je tegen vanaf dat je click and hold doe, en dan loslaat ergens tussen twee dots.
Thanks wannes, it's fixed.
This is actually what I do in my mind when I enter my pin code on my mobile phone, payment terminal, digital key etc. I don't actually remember the numbers, but I do remember the path I have to follow to unlock whatever I need to have access to. Quite clever to actually visualise it this way. :)
Super. Dit is precies wat door een klant van me werd gevraagd voor een webtoepassing. Mooi gemaakt!
Hey, great little library! Thanks! I have noticed that lines appear in wrong places (47 appears in 58) when using bootstrap. It can be fixed by going back to content-box box-sizing:
* { /* reset bootstrap */
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
Thanks Jan,
I updated it with your fix.
You have probably seen this on a touchscreen smartphone: to unlock it, instead of typing a password you are presented with 9 dots and you have to draw a pattern.
It works great: drawing a shape on a small touch screen is far easier than typing on those bl**dy small keyboards AND far easier to remember too.
Once you've got used to it, typing passwords in general gets pretty annoying: you want to swipe your way through every login screen you see.
For my own mobile web apps, I wanted to replace that standard password box with a familiar pattern lock, but was surprised I couldn't find one that was targeted towards web apps.
Maybe it does exist but i missed it?
Oh well, Do It Yourself! : my never ending mantra that I keep repeating over and over and over and over again :-)
Enter the 9-dot pattern lock javascript library.
It's pretty much drag-n-drop: just include the JS file and give your password box the class "patternlock" : It will be replaced with a nice touchy patternlock.
I wanted it to be free of any dependencies on frameworks like jQuery or Moo so it's completely standalone.
A live demo is at http://www.stef.be/dev/javascript/patternlock/
It's targeted towards large touchscreen devices such as Android phones/tablets, iPhone and IPad, but it works fine on any major desktop and mobile browser.
The idea is that each dot is a number from 1 to 9, when you draw a pattern, you're actually entering numbers into the password box.
It's free and open source, grab it here if you find it useful.
Parameters
- 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
- patternlock.autoInit
Possible enhancements for the future:
- maybe rewrite it as a jQuery plugin ?
- it would be much cooler to use the HTML5 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 hate to admit it but the iOS browser clearly is the most potent mobile browser for touch stuff at the moment)
- If 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.
If you bump into other issues or have any improvements: let me know!
