This is very cool, I found a way to replace the password box with a pattern lock swipe in my mobile web app, it works brilliantly (I'm using a UX with the integrated login functionality) I am sure others will be looking to create this functionality...
Screenshot_2014-07-28-21-34-22.png
1. http://9dotpatternlock.codeplex.com/ - have a play and read the documentation
2. download the files
3. copy the js files into the js area
js.PNG
4. copy the css files into the css area
css.PNG
5. copy the images in the images area (you get the idea)
6. enter the following in the properties of the UX
properties.PNG
7. Then I changed the file paths in the CSS file to ensure the images were located directly in the root directory not the images folder. So e.g.
background-image:url(../_img/button.png);
became
background-image:url(button.png);
8) give the password control the class patternlock
passwordClass.PNG
I didn't get the auto submit to work but the rest of it works seamlessly. I don't understand 80% of the javascript code and was stunned when it worked
It would be great to go a step further and eliminate the requirement to enter the username (tedious) so the user only needed to swipe the pattern (very fast) I'm not sure how you'd do this, presumably you'd need to start with a full username and password to validate the user initially then when they sign in allow them to register the device identifier (I assume each device has one and it can be accessed programatically?) against their user name then somehow allow one user to have multiple devices (one for the phone one for the tablet etc...) linked to their account?
Maybe A5 will make a component to add to the UX that does all the heavy lifting?
Would also be good if there was a "remember me" functionality at login to avoid the login process completely...anyone had any joy with this on a web app?
Anyhoo hope you find this useful, I showed it to a client and they were really impressed, I had previously showed them the tedious way of typing in the password on the tiny keyboard and they were not so impressed.I was impressed how easy it was to integrate this code into A5.
Screenshot_2014-07-28-21-34-22.png
1. http://9dotpatternlock.codeplex.com/ - have a play and read the documentation
2. download the files
3. copy the js files into the js area
js.PNG
4. copy the css files into the css area
css.PNG
5. copy the images in the images area (you get the idea)
6. enter the following in the properties of the UX
properties.PNG
7. Then I changed the file paths in the CSS file to ensure the images were located directly in the root directory not the images folder. So e.g.
background-image:url(../_img/button.png);
became
background-image:url(button.png);
8) give the password control the class patternlock
passwordClass.PNG
I didn't get the auto submit to work but the rest of it works seamlessly. I don't understand 80% of the javascript code and was stunned when it worked
It would be great to go a step further and eliminate the requirement to enter the username (tedious) so the user only needed to swipe the pattern (very fast) I'm not sure how you'd do this, presumably you'd need to start with a full username and password to validate the user initially then when they sign in allow them to register the device identifier (I assume each device has one and it can be accessed programatically?) against their user name then somehow allow one user to have multiple devices (one for the phone one for the tablet etc...) linked to their account?
Maybe A5 will make a component to add to the UX that does all the heavy lifting?
Would also be good if there was a "remember me" functionality at login to avoid the login process completely...anyone had any joy with this on a web app?
Anyhoo hope you find this useful, I showed it to a client and they were really impressed, I had previously showed them the tedious way of typing in the password on the tiny keyboard and they were not so impressed.I was impressed how easy it was to integrate this code into A5.
Comment