Simple 2 x 2 Matrix Control

Approximate Time to Complete: 20 minutes


This tutorial introduces you to the Setup script for N-Touch (and JavaScript Enabled N-Command) for Panel Builder.  It will also introduce the basic use for variables, and using per-built modules for controlling devices. These concepts are useful for advanced programming and form the basis for programming both N-Touch and JavaScript enabled N-Command Units.


By the end of this tutorial, you willl:

1) Complete a project that switches 2 x SVSi decoders to a desired stream

2) Use a variable to choose what stream to switch to

3) Use a basic conditional to provide feedback on a selected source.

You will need the Following:

1 x N-Touch

1 x PC running Google Chrome



1) Log into the Controller, and in Panel Builder, enter into the Full Editor, and then Create a new Project

2) Once in the full editor, start by clicking "Project" in the toolbar on the right, and then click "View" underneath the Setup Script text.

3) In the Setup Script, click the drop down, in the top right, and select "Require". Then select "SVSi" from the middle drop down, and then in the last drop down, select "N_Series".  Finally, click Add.



The setup script is code that will execute when the project first runs.  This is a "Sandbox" that will typically contain:

1) requires (or modules) for devices you wish to control

2) Setup Information for those modules

3) Initial values of variables used within the project

4) Custom code, or functions that can be added for execution within a project.

The easiest way to "interpret" the setup script is by defining it with some categories:

1) what is controlled

2) where is this device

3) Other elements needed for the project.

What is a Module/Require?

A module (or require - both terms can be used interchangeably) is transportable and reusable blocks of code that allow the system to control a device and simplify programming processes.  For example, to make a switch on an SVSi decoder, the code (directly) would consist of:

1) A TCP or UDP command

2) the command (like switch)

3) a process to read the response (if needed) and turn that response into feedback

The module (or require) handles all of these processes and turns the code into a FUNCTION, so that the programmer does not need to repeat the steps for each device (and each command).  The module also has code to help Define it, and some (but not necessarily all modules) will need some additional information to function (like IP address, network port, version ,etc...).  You can custom write your own module for a device (that step will be covered in a  later tutorial) or use pre-built modules to control third party devices.  The require is only needed once per project per device (even if controlling multiple physical devices)

 4) Underneath the Require line of code, we need to define the IP address of the SVSi Decoder.  To do this enter the following (without the outside quotes):   "left = N_Series("");"  Substitute the IP address of one of the SVSi decoders you are working with.  Next add another line and add "right = N_Series("");"

What is this block of code doing?

This part of the code is doing two things.  The first is providing a simplified name to use for programming purposes.  Left and Right are simply friendly names, and could be anything (like LobbyLeft, or myDecoder).  The second part (everything after the = sign) is passing a variable (or other required information) into the module.  For the SVSi N_Series module to "know" which decoder to control, it has to have the IP address of the decoder passed into the code.   The "N_Series" designation is programmed into the Module/require and tells the code "This IP address is associated with N_Series.js" 

If there was another module defined in the code, it would have it's own unique "keyword" defined in the code.  If there was a line like:


then we would also need to define the camera as:

myCamera = Generic_PTZ("169.254.XX.YY");

 5) the last step  in the Setup script is going to establish a variable to use for switching.  Add a new line and enter "myStream = 0;" Your setup script should now read:

//requires a Javascript module

left = N_Series(""); //Substitute the IP address of the first decoder
right = N_Series(""); //Substitute the IP address of the second decoder

myStream = 0;


This code has comments in it (to make it easier to understand).
To add a comment to code, you can use "//" which will comment out a line of code, or like this block
use a combination of a /, and a * to start a comment, and a * and / to end the comment.  This process simply tells the system not to read/process anything
on the same line as "//" or contained within the comment block.


6) Once done, click Save and return to Panel Builders main page.

7) On the main page, add a background image (if desired) and two buttons to the left side of the panel.


There are two ways to add a background image to a panel

1) On the right hand tool bar, click "Panel" and then click "Choose File" in the Background Image Section.  Find your file in the window that opens, click it, and select open.  This will return you to the main page and add your background.

2) open a windows explorer window, find your file, and drag the file over the panel, "drop it" on the panel, and it will apply the background image.


1) SVSi provides a variety of pre-built buttons for you to choose from. On the Left hand tool bar, click "Buttons", select "Default Buttons' from the drop down and you will be presented with the pre-built choices. 

2) You can custom make your own buttons by clicking the "+" icon in the buttons area, and add background, text, size, etc.. to the button.  This then adds the button to the User Button library for you to use in your project.

8) On the first button added, double-click the text to edit it, and add desired text (Like Source 1, or PC).  Do the same on the second button.  While editing the text, note the toolbar that appears.  This toolbar allows you to highlight all the text and then style it accordingly.

9) With the first button selected, click the edit script button in the top-right hand corner (edit-scripts.png) and add the following text to the State 1 Script -  myStream = 120;   At this point, you would substitute the stream number from one of your encoders for the number 120.



In N-Able, or other SVSi control software, mouse-over the name of the Encoder.  A pop-up window will appear and will have a  stream number for each encoder.  See below for screen shot from N-Able:



10) On the second button, click to edit it's script, and enter myStream = 3; (or the second encoders stream number).

11) On Panel Builders main page, add a button to the right hand side of the screen, and change the text to "LEFT".

12) With the button selected, click the edit script button and add the following to the state 1 script:  left.switch(myStream);


13) Click Save and return to the main screen. 

14) With the "Left" button selected, click the CLONE icon in the top tool bar (clone.png).  This will clone your button. Move the button on screen to where desired, and change the text to "Right".

NOTE:  When cloning a button, widget, or anything else - any scripts (state 1, state 2, or conditional) are also cloned with the button.  This can make programming a system much faster.

15) Click to edit the "Right" buttons script, and change left.switch(myStream); to right.switch(myStream);

16) Assign the virtual buttons to hard-keys (for N-Touch projects only).


1) click the button to highlight it.

2) Click the "edit" button (EDIT.png) in the top toolbar.  This will access the Button Editor

3) Click Touch Panel Key at the bottom.  This will bring up a visual representation of the N-Touch.  Click the circle next to the button you want to assign it to.  Click Save and repeat for all other buttons. In the below example, this button has been assigned to Hard Key #1.



 17) Save the Project (File > Save Project). When saving has completed, choose the "Set to Wall Controller Link".  This will update the wall controller with the project file and let you test your work.  Alternatively, you can select the "Here's a link to your project" link which will open the panel in a new tab, and allow you to control the system from your browser (without having to load it to the controller).  Your Panel should now look something like this:





You may have noticed, one option available while programming panels is to click VIEW > Preview Panel.  This will open a new tab (or window) in your browser and load the current version of the touch panel for testing purposes.  This process will load the code, BUT does not save the code.  If you close your browser without first choosing File > Save Project, then your changes (or whole file) will be lost.  Please make sure to click Save prior to closing your browser.


When you run the panel (up to this point), you will notice that there is no feedback on which source is selected to be routed to the display(s).  This is because nowhere in the code is anything to tell the button(s) to go to a second state.  We are now going to add this to the code using conditional logic.

1) On the "PC" Button - highlight it, and edit the script.  Click the option for Conditional


2) In the white code window enter the following:

if (myStream == 120)


Notice the Double Equal Sign (==).  In JavaScript, one equal sign is a "set" and two equal signs is "compare".  IE myStream = 120; // Is the same as saying "SET myStream to 120".  While two equal sign is saying "Does myStream equal 120?"  More on javaScript
operators and can be found HERE.

What is this block of code doing?

In the above code, we are doing two things.  The first is a If/Else statement.  This is used to compare the myStream to an expected value (in this case, 120).  IF the condition is met (IE myStream DOES equal 120) then the code contained between the { } executes.  The Else statement is used to execute code if the condition is NOT met (IE, it does NOT equal 120). More info on If/Else statements HERE

The other code involved is the SELF code.  To change the button, the system uses "self.something" to refer to the button this code is attached to. If it was desired to change another Buttons settings based on this code, you can replace self with get('Button-X').something.  (X being replaced by the button's number, and something replaced by a valid self statement).  There are a variety of self statements available.  you can find them by clicking into a button's script, then choose the self option from the drop down, and then an effect.


3) Click Save. And repeat the process on the "Media Player" button.  But, change "120", to the appropriate stream number.

4) Save or preview the project.  Now when you select PC or Media Player, the button will go to the second state (to indicate selected source). When you select PC, your panel should look like this:



The Completed File is available as an attachment below. 


Now that you know how to use variables, conditionals, and functions - try to complete the following two tasks:

1) Add two more buttons for source selections and make it so your decoders can switch between four total streams.  Make sure to add conditional logic to provide feedback on which source is selected.

2) Add a third button to the right hand side (destinations), that when pressed switches both decoders to the same stream.

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk