Edge Documentation

Kiosk Mode (also called Stack Auto-Rotation) is a customization supported by AppBoard for displaying multiple Stacks without any interaction from the end user. Some customers use AppBoard in an operations center, or in a kiosk display, to display information without the ability for the user to interact with the screen. In this case, it may be desirable to have AppBoard automatically cycle through multiple Stacks.

This page provides instructions for configuring a Javascript implementation of Kiosk Mode.

Summary of Solution

The solution detailed on this page places a Javascript file on the AppBoard server that augments the stock AppBoard Viewer code by including a reference to a Javascript file. This Javascript file tells AppBoard to auto-rotate between a defined list of Stacks at a defined timing interval. The end user can then reference either the standard URL to use AppBoard normally, or a special URL to use AppBoard in Kiosk Mode.

Creating and Customizing the Javascript File

Perform the following steps to create and customize the auto-rotation Javascript file:

1. Save the "Javascript Code" shown below into the following file:
   • [Install_Home]/server/webapps/enportal/visualizer/kiosk.js
2. Edit the file in a text editor to configure the following settings:
   • Rotation Delay
   1. Locate the var rotate_delay setting
   2. Modify the setting to the number of seconds you want AppBoard to wait before rotating to the next Stack, times 1000
   • List of Stacks to Rotate
   1. Perform the following steps to identify the Stack IDs of the Stacks to include in the rotation:
      1. Stop and re-start AppBoard to ensure that all changes are saved to the stacks XML file
      2. Open the most recently updated of the following files in a text editor:
         • [Install_Home]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/stacks.xml_<date>.completed
         • [Install_Home]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/stacks.xml
      3. Search the file for the name of each Stack to include in the rotation. The line above the Stack Name will contain the Stack ID. The section with the Stack ID will look similar to the following:
         • <obj className="appboard.config.Stack" id="CFFA24B3-C9EF-07E1-0636-DF6972E931A7">
         • <attribute name="title" value="<StackName>">
   2. Locate the var stacks = [ section
   3. Replace the sample Stack IDs by copying and pasting the Stack IDs you located above for each Stack that you want to include in the rotation

In use only stacks assigned to the specific role of the logged in user will be shown. Stacks not provisioned will be skipped over.

Javascript Code

[xml,N]


var stacks_control = "Button"; // Button or Tab var rotate_delay = 30000; // in milliseconds

// update the list below with Stack IDs relevant to your installation var stacks = [

   "57EC79E3-0D96-8688-8F95-DF693FDC103F", 
   "CB8E041F-B2FC-E03C-2F6A-DF695751B487",
   "CFFA24B3-C9EF-07E1-0636-DF6972E931A7"
   ];

var stack_idx = 1; // initial stack to rotate to

// simple control function to rotate through available stacks function rotateStacks() {

   window.location.hash = '#stacksControl=' + stacks_control + ';selectedStackId=' + stacks[stack_idx];
   stack_idx++;
   if ( stack_idx > stacks.length - 1 ) {
       stack_idx = 0;
   }

}

// start rotation once the page finishes loading window.onload = function() {

   setInterval( rotateStacks, rotate_delay );

};

// do some setup stuff if we want Button mode vs Tab mode if ( stacks_control == "Button" ) {

   var scHash = "#stacksControl=" + stacks_control;
   if ( window.location.hash != scHash ) {
       var redirect = window.location.pathname + scHash;
       window.location = redirect;
   }

}

Incorporating Stack Rotation Into AppBoard

Perform the following steps to implement the kiosk.js file into the AppBoard system:

1. Locate the file [Install_Home]/server/webapps/enportal/visualizer/Appboard_Viewer.html
2. Save a copy of this file and rename it to kiosk.html
3. Edit kiosk.html, adding the following line just before the closing </head> tag:

<script type="text/javascript" src="kiosk.js"></script>

Invoking Kiosk Mode

Instruct your AppBoard users to replace their AppBoard URL with the following URL to run in Kiosk Mode:

http://<hostname>:<port>/enportal/visualizer/kiosk.html

The AppBoard login credentials can be passed in as part of the URL. You can create a shortcut that will launch AppBoard directly into Kiosk Mode by using a URL similar to the following: http://<hostname>:<port>/enportal/servlet/pd?login&userid=<username>&password=<password>&domainSelect=<domain>&redirect=%2Fenportal%2Fvisualizer%2Fkiosk.html