Pattern Lock – easy pin generation

We’ve talked a lot about the bigger new widgets that have arrived to enhance your LiveCode. Some of the “minor” widgets are also well worth a look. Today I’m focussing on Pattern Lock. This is actually a really neat little widget that makes it a doddle for your users to pick new pin numbers and login with them in your apps. If this is something you need you’ll love using Pattern Lock.

What is it?

It’s quite straightforward. The widget you drag on has 9 points on it. The user draws a pattern between the points with the mouse or touchpad, and that pattern is saved as a pin number. It can then be stored and re-used when the user logs in, drawing that same pattern to do so. You can set the number of points that must be used, or set a minimum number. You can do some design tweaks on the widget itself to get it looking just as you like. Of course, you could code this yourself in LiveCode, but why bother when someone else has done it for you? It is beautifully easy to use, let’s have a look at how.

Build a stack

I’ve created a little stack, which you can download here. It’s pretty simple but feel free to build on it! It consists of 2 cards, and a few interface objects:

A couple of scripts

The entry widget has no code attached to it at all. All the code you need to enter is in the Set button, and its not very long or complex:

on mouseUp pButtonNumber
   local tPin
   put the PIN of widget "Register" into tPin
   if the length of tPin < 4 then
      answer "At least 4 points required"
   else
      set the cPin of this stack to tPin
      go next card
   end if
end mouseUp

The PIN is a property of the widget, where any entered patterns are stored as numbers. We have a little check to make sure the user has entered enough points, then we save the PIN into a custom property that the whole stack can see. We drop it into tPin, a local variable only visible to this script, before saving into cPin, so that we can check the length. If the user didn’t enter enough points, a dialog will appear saying “At least 4 points required”.

On the next card we have a little bit of code in the widget, and little bit in the login button. On the widget itself we have the check for length:

on InputComplete pPIN
   if the length of pPIN < 4 then
      answer "At least 4 points required" 
   else
      put pPIN into field "message"
   end if
end InputComplete
   

InputComplete is a message that belongs to the Pattern Lock widget. To see everything available to use with this widget check “Pattern Lock” in the LiveCode Dictionary. We’re also putting pPIN into the message field just so we can see what it is – its a little bit of feedback that is comforting when you are creating things to see that yes, a PIN is being created and is what you expect it to be.

Attached to the Login button we have:

on mouseup
   if the PIN of widget "Login" is the cPin of this stack then
      answer "Success! Pin is correct"
   else
      answer "Incorrect PIN, please try again"
   end if
end mouseup

Because we made cPin visible to the whole stack, this script can use it to check against the new PIN pattern the user has entered. If correct, the user gets a success message. If not, they get a try again. And that is basically it. You can play around a bit with the appearance of the widget, set the background color, make the corners rounded and a few other things. If you want a detailed step by step explanation of how to make this stack, there is a lesson here. Enjoy!

Where to get it

This widget and 10 others just as cool or even cooler are currently available in the Enhancements Pack. You can also purchase them separately in the Extensions Store.