Creating PIN access control

CREATING PIN BASED ACCESS CONTROL WITH N-TOUCH CONTROLLER
Approximate Time to Complete: 30 minutes

 

This tutorial will teach you how to use basic JavaScript to create an N-Touch project that creates a PIN type control for access to the system.  This functionality could be used to secure a permanently installed N-Touch to prevent unathorized access, or allow for multiple users to be able to access panels customized for them (or add additional features if needed).

This tutorial requires an N-Touch, or an N-Command running Panel Builder (with JavaScript enabled).

 

You will need the following:

1 x N-Touch
1 x PC running Google Chrome

 

STEPS:

1)  Start a new wizard project in the N-8301 Web Interface.  Give the project a name, and access the wizard.
2) On the first seven buttons, click the button and change the Button Text to the numbers 1 through 7.
3) On the last button (bottom right button) change the text to Submit.
4) Click on the first button, and in the white code window, add  the following text:

Code-Block-1.png

if (tempPin.length != 4)
{
  tempPin = tempPin + "1";
  get("Button-10").setText(tempPin);
}

 5) Paste the Code into the remaining buttons (2- 7), and change the "1" in the line tempPin = tempPin + "1"; line, to the number on the button (IE tempPin = tempPin + "2";)

6) On the Submit Button, enter the following Code:

if (tempPin.length != 4)
{
  tempPin = "";
  get("Button-10").setText(tempPin);  
}
else
{
  switch(tempPin)
  {
    case pin1:
      {
        gotopanel('2');
        break;
      }
    case pin2:
      {
        gotopanel('3');
        break;
      }
    default:
      {
        get("Button-10").setText("TRY AGAIN!");
        break;
      }
  }
  tempPin = "";
  get("Button-10").setText("****");
 
}

TIP:  This code block is using a switch statement.  the Switch code is used to compare one value (tempPin) to the pin1 or pin2 (that will be setup later in the tutorial).  When the tempPin is EQUAL to pin1, or pin2, then the code contained within the case statement for each Pin will execute (in this case, go to another Panel in the project). The third case used is the default case, which is executed when the tempPin does NOT equal pin1 or pin2. More info on switch statements can be found here- http://www.w3schools.com/js/js_switch.asp

7) Once done adding code to all eight buttons, click the option to "Send to Editor".  This will prompt you with a dialogue box about not being able to return to the wizard.  Click OK to accept this.  Enter a name when prompted and click "OK"

8) Once in the full editor, start by adding a background (if desired).  Pixel dimensions for an image are: 231w X 321h

9) To make some space on the panel to display the PIN number, start with button-1, click it to highlight it with a green bounding box, and make the button about half of the width it started at.
TIP:  If you want to scale the button in proportion hold shift while dragging. (although, not needed here)

10) With the First Button still selected, click buttons 2 - 7 (while holding shift) and then click the Icon for Copy Size (MatchSize.png)

Code-Block-2.png

11) Now, add a button (any color) to the middle of the touch panel. and change the text to "****".  Size it to fit in the middle of the panel, and move it to where desired. After changing the text, click the button to highlight it and click the edit icon in the top right (EDIT.png)

12) In the button editor window, on the BASIC tab, click the X icon next to "Background Image".  This will remove the background on the image.

BG_Delete.png

13) Click save, and close the button editor.

14) On the left hand side tool bar, select the widget tab, and then add a Text Widget to the panel.  Move it above the Pin Button, and add text (like "Enter Pin:") and style appropriately.

15) The next step is going to modify some of our existing code, and will need to be applied to all eight buttons, and all references to "Button-10".  To begin, hover the mouse over the button added to display the PIN number, and wait for the popup, this will tell you the button number.  Once you know the number, we can modify the code in the buttons, to change the text on the PIN Button.

Button-0.png

16) Click and highlight the Number 1 button, and then click the edit scripts icon in the top right corner (edit-scripts.png) and in the State 1 script for the button, modify the code to read:

if (tempPin.length != 4)
{
  tempPin = tempPin + "1";
  get("Button-9").setText(tempPin);
}

//Substitute "Button-9" for your PIN button number.

17 ) Do this to the remaining buttons (2 - 7)

18) On the submit button, click to edit it's script and change the Button-10 references to the appropriate Button Number.

19) The code is now complete for each button, and next we will add code to the SETUP script, to make the buttons work.  To do this, on the right hand tool bar, click "Project" then the "view" button under Setup Script.

SetupScript.png

 20) in the white setup script code window, enter the following:

tempPin = "";
pin1 = "2326"
pin2 = "7657";

//YOU CAN CHANGE THE PIN NUMBER TO ANY FOUR DIGIT NUMBER DESIRED

Note:  variables used in projects need to be declared in the setup script.  By entering tempPin = "";   the tempPin variable, will be initialized as an empty string.  the pin1 and pin2 variables can be set to any pin number you desire.

21)  Lastly, create two additional panels (name does not matter).  To do this click the + icon in the top bar between the Project Name and the "<".

more_panels.png

22) On Panel-2 and Panel-3, add a button (enter any text) and then edit the script and add a gotoPanel('0'); command to the button on each panel

madeit_.png

23) The last step is to assign the software button on Panel 2 and 3, to a hard key.  Click the button, and access the button editor ( EDIT.png ).  In the editor, navigate to the bottom and assign the button to any of the hard keys by clicking on the radio check box next to the button.

24) When done with this step, navigate back to the first panel, and on the top bar, click View and then Preview Panel.

25) In the browser, enter either pin1 or pin2, and click submit.  This will then take you to the appropriate panel! To return click the Button on the new panel.

26).  In Panel Builder, click File, then save project.  After the save a window will appear.  Choose to link that says "Set to Wall Controller"  When the wall controller has loaded the project, you can now use it to execute code.

 

ADVANCED EXERCISE:

Once you have successfully completed this tutorial and played around with it, one of the things you may notice is this - If you enter an incorrect PIN number, the text "Try Again" never appears.  You will only ever see the text be reset to "****".  For a simple exercise with JavaScript, modify the code as needed to fix this, and have your panel show the "Try Again" Text when an incorrect PIN number is entered. 

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk