How to use Pattern Lock

Pattern Lock is a handy little widget that lets you add a way for your users to enter pins visually in their apps (mobile or otherwise). This lesson will guide you through the basics of using it. You can download the associated sample stack here.

Set up your stack

For this demonstration I have a sample app consisting of 2 cards. On the first card we need a label field with some basic instructions (1), a Pattern Lock Widget (2) and a Set button (3). Enter the instructions for the label field into its Contents tab in the Property Inspector and on the first pane uncheck visible next to "show border ". Right click on the button to bring up the Property Inspector and enter "Set" as both its name and its label. Right click on the widget and in its Property Inspector name it "Register".

On the second card we need a label field, (1), a Pattern Lock Widget (2), a login button (4), a back button (5) and there is also an output field (3) just so we can see something happening. Name the output field "messages" in the Property Inspector. Name the Pattern Lock Widget "login".

The Set Button

Open up the Script Editor and enter this code (don't forget to hit Apply):

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

This is fairly self explanatory. When the user lets go of the mouse after drawing their pattern, the result is analysed. PIN is a property of the Pattern Lock widget, where the sequence is stored. We've instructed the user to pick a pin longer than 4 digits, so if they let go on 3 or less, they will see the message "At least 4 points required". If the PIN is long enough then we store the number in tPin, a local variable, and set the custom property cPin to tPin. In contrast to tPin, cPin is visible to the whole stack. Finally, we go to the next card.

The Login Button

Open up the Script Editor and enter this code:

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

Again, pretty self explanatory. When the user draws the pattern on the second widget, it is stored in the PIN property. We check if this matches the cPin custom property we saved on the previous card. If it matches, a success dialog is shown. If not, a try again dialog appears.

The Login Widget

We have also applied a piece of code directly to the widget on card 2. This is:

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

  This is again performing a length check on the entered pin, and allowing us to see the pin after the user enters it. Obviously, this isn't something you'd often want to put in your app, but its helpful here to see that the widget is operating as we expect.

A little bit of housekeeping

In order to repeat the process without resorting to "go previous card" in the LiveCode menu, we have a back button. Its script is simply:

on mouseup

  go previous card

end mouseup

And that's it. A working Pattern Lock widget. Handy for all sorts of login purposes.

0 Comments

Add your comment

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.