Programming Touch Panels for Use in Multi-Room Environments

Programming Touch Panels for Use in Multi-Room Environments
Approximate Time to Complete: 20 Minutes

This tutorial will introduce a method that uses Browser based controls to the fullest potential, saving programmers/integrators time and money when presented with a scenario of many rooms with virtually identical configurations.  This technique could also be used for having User Access Controls, where basic users are presented with simplified control options, while advanced users are given more features and items to control (Like VTC codecs or audio conference capabilities).  In addition, this article will show you how to generate a QR Code to quickly launch a user into a control panel and provide them appropriate controls based on user name.

Scenario: 

An end user is having several 'huddle' rooms installed for employees to use.  Each room has 1 x Encoder for a laptop or other video source connection, 1 x decoder and display, and access to four cable boxes to watch television in the huddle space.   Currently, there are three rooms being installed, with plans for more.  The control panel in this scenario is simple and needs to control the appropriate decoder (based on username) to switch between the five available sources.

By the end of this tutorial, you will create a Touch Panel file for a mobile device to access via a QR code, to control whichever Huddle Room Space a user is in.

YOU WILL NEED:

1 x N-COMMAND with Firmware later than 12/4/2014

1 x PC running Google Chrome

 

STEPS:

1) In Panel Builder (Full Editor) Create a new project with the dimension of 640w X 1136.

2) Style as desired with background images.

3) Add five buttons to the Panel, and Add text to the buttons of PC, Cable Box 1, Cable Box 2, Cable Box 3, Cable Box 4.

4) Add a Fifth Button at the bottom for "System Off"

5) Add a text widget to the top and extend the bounding box the full width of the screen.

Your Panel should look (something) like this:

UAC_Example_panel.png

6) On Each Source Button, add the following script in State 1:

myDec.switch(xx);

Replace XX with:

PC = local

Cable Box 1 = s1

Cable Box 2 = s2

Cable Box 3 = s3

Cable Box 4 = s4

IE - myDec.switch(local);  //This is PC Button's State 1 script.

 

7) Next, on the right hand tool bar, access the project tab.  Note, at the Bottom of Panel-1 the Id number of your text widget and then access the Setup Script.

8) In the setup script, add an SVSi N_Series require, and then underneath that, add the following Code:


//DEFINE WHAT IS BEING CONTROLLED
require('js/modules/SVSi/N_Series.js');


//Determine Which Room, Define Decoder to Control
switch (username)
{
  case("huddle1"):
    {
      myDecIP = "169.254.34.55";
      get('Widget-1').setText("Welcome!<br>Huddle Room 1");
      get('Widget-1').setTextStyle({color:"white", "font-size":"36px"});
      local = 100;
      break;
    }
  case("huddle2"):
    {
      myDecIP = "169.254.24.193";
      get('Widget-1').setText("Welcome!<br>Huddle Room 2");
      get('Widget-1').setTextStyle({color:"white", "font-size":"36px"});
      local = 200;
      break;
    }
  case("huddle3"):
    {
      myDecIP = "169.254.150.116";
      get('Widget-1').setText("Welcome!<br>Huddle Room 3");
      get('Widget-1').setTextStyle({color:"white", "font-size":"36px"});
      local = 300;
      break;
    }
    
}

myDec = N_Series(myDecIP);


//DEFINE CONSTANTS

s1 = 5;  // Cable Box 1 Stream #
s2 = 10; // Cable Box 2 Stream #
s3 = 15; //Cable Box 3 Stream #
s4 = 20; //Cable Box 4 Stream #



 

What is this code doing?

The first key part of this code is the "username".  In the background, when the user log's into the panel, the username they are using to log in with is captured and stored as username.  From there we could do multiple things:

1) Panel Customization - You could have add a text widget to the Panel, so that when "Bob" logs in, the Panel says "Welcome, Bob", or other customizations.

2) Defining what to control - look at the following block of code:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

case("huddle1"):
    {
      myDecIP = "169.254.34.55";
      get('Widget-1').setText("Welcome!<br>Huddle Room 1");
      local = 100;
      break;
    }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

With the switch statement, the code is matching the username the user logged in with, and comparing it to an expected value (huddle1) and if they match, setting the IP address of the decoder to the appropriate IP for Huddle 1's decoder.  Next in the 'get' section, it is customizing the text widget setup in the panel to tell the user which room they are controlling.  Lastly, it is also defining the stream number of the encoder local to the huddle room.

Because there is no Default: case defined, if a user logs in who has been assigned to this panel, but there user name has not been added to the switch statement, they will have none of these things defined, and not be able to control the room.

The Next block of code:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


myDec = N_Series(myDecIP);
 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Is then establishing within the panel which decoder to control (defined by myDecIP in the case statement). 

9)  Save the panel. and click the link to View the Panel.

 

 WAIT! IT (MOST LIKELY) DOESN'T WORK!

If you're logged in as the Administrator, or any other account that isn't Huddle1, Huddle2, or Huddle3, when you preview the panel, nothing works.  This is because you are not logged in as Huddle1, 2 or 3. 
To make it work, you will need to add another line of code.  In the setup script, add:

case("admin"):  //Change "admin" to your username if needed.

Add this line of code directly above the first case statement, so that it now looks like:

  case("admin"):
  case("huddle1"):
    {
      myDecIP = "169.254.34.55";
      get('Widget-1').setText("Welcome!<br>Huddle Room 1");
      local = 100;
      break;
    }

 

Now, view the panel (save and view, or preview).  The Panel should now show you "Welcome to Huddle Room 1" and allow you to control the first huddle room. Once you are done testing the code, and verifying it works for the first huddle room, lets move on to the next steps.

11) In another tab, access the N-Command's User Controls (Admin > Users/Groups)

12) Create three new users, (huddle1, huddle2, huddle3).  In the "Force user to only user Panel" drop down menu, choose the project you have created and click "Add"

UserCreation.png

13) Next, log-in to the N-Command from a browser at each of the user names, and verify that the code works!

EXERCISE 1:

You will notice, no where in the above code is the command to turn the display On or Off There are a couple of different methods to do this, however, what should be accomplished now, is that when the panel is launched, the display automatically turns on (for whichever room is being controlled). 

To Do this:

1) Define the On and Off Commands as variables in the Setup Script

2) Trigger the sending of a serialHex() command in the setup script for the ON command. 

3) Add the Off command to the System Off Button.

If you run into problems, check the attached completed file which already has this done.

CREATING THE QR CODE:

Once you have created the Panel, and the Usernames for each Huddle Room, you can make a QR code that will allow you to Scan the QR code with a mobile device, launch the browser and take control of one of the huddle room spaces.  To do this we first have to customize the link to automatically log the user into the N-Command.  From there, having assigned the panel to the user, the N-Command will automatically redirect them to the appropriate panel.

1) Determine the IP address of the N-Command unit that is communicating with the WAP.   For this purpose, the N-Command is at 192.168.1.116

2) Next, Format the link to look like the following:

<N-Command IP>/?User=<username>&Pass=<password>

OR

192.168.1.116/?User=huddle1&Pass=password

If you used a different set of usernames, or changed the password, change the link accordingly

3) In your browser navigate to a QR code generator (this one works)

4) Generate the QR code for the link you have created.

5) Print the QR Code (or use on-screen for testing)

6) With your mobile device connected via wireless connection to the network, scan the QR code, Open the browser, and control the Huddle Rooms!

HUDDLE 1 QR CODE

Huddel1QR.png

 EXERCISE 2:

Three more huddle rooms have come online and are ready for the Panel to control them.  Add the relevant controls to make huddle room 4 - 6 work with the existing panels.

TIP:  This mostly involves the Setup Script.

 

Exercise 3:

Huddle Room 2 has two additional local sources, that are only available in that room.  Add two more buttons to the panel that show when logged in as huddle2, but hide for all other users/rooms. These buttons should be labelled as Front and Rear Inputs.

 

Exercise 4:

Huddle Room 1 has now had two additional inputs added as well.  Make sure the Front and Rear input buttons show up on that panel as well.  Verify that the appropriate stream numbers are set in the Setup Script for each rooms local inputs.

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk