Steffest Digitale Pulptuur

Reacties
Wicked, def going to give this a try.
Bram Van Oost - 12/04/2011 14:02:22 http://www.fastronaut.com


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.
Tom Klaasen - 12/04/2011 14:13:11 http://10to1.be


Love it :)
Jef Claes - 12/04/2011 14:20:44 http://jclaes.blogspot.com


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.
wannes - 12/04/2011 14:20:47 http://www.twitter.com/wannesss


Thanks wannes, it's fixed.
steffest - 12/04/2011 14:39:44 http://blog.stef.be


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. :)
Sjee - 18/04/2011 09:51:39 http://www.twitter.com/sjee


Super. Dit is precies wat door een klant van me werd gevraagd voor een webtoepassing. Mooi gemaakt!
Marcel van Langen - 14/01/2014 13:39:46 http://www.morloff.nl


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;
}
Jan - 10/04/2015 15:16:14

Thanks Jan,
I updated it with your fix.
Steffest - 07/09/2015 13:40:26


Commentaar toevoegen
Je reactie
Je naam
Url (van je website of blog of ....)
Antispam
Om zeker te zijn dat je geen Spam-robot bent, moet je even de volgende vraag beantwoorden:
Wat is geen kleur: groen, auto, geel, blauw

Geef je commentaar op:
Javascript library: 9-dot Pattern Lock

patternlock_example
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

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!