Appboard/old/kiosk mode: Difference between revisions

imported>Mike.berman
(add note about Stack permissions)
imported>Jason.nicholls
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{DISPLAYTITLE:Kiosk Mode}}
[[Category:AppBoard old]]
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.
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.


Line 7: Line 9:
== Summary of Solution ==
== 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 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 s a special URL to use AppBoard in Kiosk Mode.
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 ==
== Creating and Customizing the Javascript File ==
Line 26: Line 27:
###* [Install_Home]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/stacks.xml_<<i>date</i>>.completed
###* [Install_Home]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/stacks.xml_<<i>date</i>>.completed
###* [Install_Home]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/stacks.xml
###* [Install_Home]/server/webapps/enportal/WEB-INF/xmlroot/appboard/config/stacks.xml
### Search the file for the name of each Stack to include in the rotation.  The line above the Stack Name will contain the StackID.  The section with the Stack ID will look similar to the following:
### 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="<b>CFFA24B3-C9EF-07E1-0636-DF6972E931A7</b>">
###* <obj className="appboard.config.Stack" id="<b>CFFA24B3-C9EF-07E1-0636-DF6972E931A7</b>">
###*    <attribute name="title" value="<<i>StackName</i>>">
###*    <attribute name="title" value="<<i>StackName</i>>">
## Locate the <b>var stacks = [</b> section
## Locate the <b>var stacks = [</b> section
## Replace the sample StackIDs by copying and pasting the StackIDs you located above for each Stack that you want to include in the rotation
## 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
 
{{Note|In use only stacks assigned to the specific role of the logged in user will be shown. Stacks not provisioned will be skipped over.}}




Line 38: Line 41:


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


// update the list below with Stack IDs relevant to your installation
// update the list below with Stack IDs relevant to your installation
Line 74: Line 77:


</code>
</code>


== Incorporating Stack Rotation Into AppBoard ==
== Incorporating Stack Rotation Into AppBoard ==
Line 95: Line 97:


{{Tip|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: <nowiki>http://</nowiki><<i>hostname</i>>:<<i>port</i>><nowiki>/enportal/servlet/pd?login&userid=</nowiki><<i>username</i>><nowiki>&password=</nowiki><<i>password</i>><nowiki>&domainSelect=</nowiki><<i>domain</i>><nowiki>&redirect=%2Fenportal%2Fvisualizer%2F</nowiki>kiosk.html}}
{{Tip|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: <nowiki>http://</nowiki><<i>hostname</i>>:<<i>port</i>><nowiki>/enportal/servlet/pd?login&userid=</nowiki><<i>username</i>><nowiki>&password=</nowiki><<i>password</i>><nowiki>&domainSelect=</nowiki><<i>domain</i>><nowiki>&redirect=%2Fenportal%2Fvisualizer%2F</nowiki>kiosk.html}}
{{Note|The system will only rotate through and display those Stacks which the current User has permission to access.  If the User does not have permission to view a Stack, that Stack will be skipped and the next Stack in the rotation will be shown.}}

Latest revision as of 18:09, 17 July 2014

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
Template-note.png
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


Template-tip.png
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