SpecheBox Applet Installation

Installation

To install the SpecheBox Applet, please read the entire installation document, and then perform each Step in the listed order. As it is currently written, all code presented in this document must be added to the same web page or frame.

Step 1: Copy the JavaScript code below, and paste it in between the header tags on your web page (<head>...</head>). This code contains all of script that communicates with the applet.

<SCRIPT LANGUAGE="Javascript">
        var ns4 = (document.layers) ? true : false;
        var ns6 = (navigator.userAgent.indexOf("Netscape6") !=-1);
        
        var MinFontSize = 10;
        var MaxFontSize = 40;
        var sBGColor = "#000000";
        var sFGColor = "#FFFFFF";
        var sFont = "SansSerif";
        var sFontSize = "14";
        var sLang = "1033";
        var FGupdate = true;
        var CName = "SpecheAppletParams";
        var xWidth=750;
        var xHeight = 525;
        var tranny = null;
        var AppVal = 0;
        
        //Prepares a cookie with the current the client preferences
        function DropCookie() {
           var value = '!' + sBGColor + '!' + sFGColor + '!' + sFont + '!' + sFontSize;
           var today = new Date();   
           var expires = new Date();   
           expires.setTime(today.getTime() + 1000*60*60*24*365);   
           setCookie(CName, value, expires);
        }
        
        //Writes a cookie to the client machine to store client preferences
        function setCookie(name, value, expire) {
            if (!ns6)  {
                document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : ("; expires=" + expire.toGMTString()));
            }
        }
        
        //Look for any preference cookies on the client
        function getCookie(Name) {
            if (!ns6) {
               var search = Name + "=";   
               if (document.cookie.length > 0) { // if there are any cookies
                    offset = document.cookie.indexOf(search);       
                    if (offset != -1) { // if cookie exists
                        offset += search.length;          
                        // set index of beginning of value         
                        end = document.cookie.indexOf(";", offset);
                        // set index of end of cookie value         
                        if (end == -1)             
                            end = document.cookie.length;
                        return unescape(document.cookie.substring(offset, end));
                     }
               }
               return '';
            }
            else
                return '';
        }
        
        //Changes the Language (only used for multilanguage events)
        function ChangeLang(oSelect) {
            var val = oSelect.options[oSelect.selectedIndex].value;
            if (val != "#") {
                document.applets[AppVal].setLanguage(val);
                sLang = val;
            }
        }
        
        //Changes the Text and Background color settings, and initiates a preference cookie update
        function showColor(oSelect) {
            var val = oSelect.options[oSelect.selectedIndex].value;
            var aok = false;
            if (FGupdate) {
                if (val != sBGColor) {
                    document.applets[AppVal].setForegroundColor(val);
                    sFGColor=val;
                    aok = true;
                }
            }
            else  {
                if (val != sFGColor) {
                    document.applets[AppVal].setBackgroundColor(val);
                    sBGColor=val;
                    aok = true;
                }
            }
            if (aok) {
                DropCookie();
            }
            else {
                alert ("You have chosen the same color for the foreground and the background.\n\nPlease select a different color.");
                oSelect.selectedIndex = 0;
            }
        }
        
        //Assign location values for the Transcript window
        function setScreenPos() {
            screenPosX = screen.availWidth/2 - xWidth/2;
            screenPosY = screen.availHeight/2 - xHeight/2;
        }
        
        //Open a Transcript window
        function openTranscript() {
            if (tranny != null) 
            {
                if (!tranny.closed)
                    tranny.close();
            }
            var autoclose = true;
            var title = 'Transcript Snapshot';
            var sWindowProps = "location=no";    
            setScreenPos();
        	tranny = window.open('','','menubar=yes,scrollbars=yes');
            tranny.blur();
            window.focus();
            tranny.resizeTo(xWidth,xHeight);
            tranny.moveTo(screenPosX,screenPosY);
            var showTranscript =""+
            "<html>"+
            "<head>"+
            "<title>"+title+"</title>"+
            "</head>"+
            "<body>"+
            document.applets[AppVal].getTranscript();
            "</body>"+
            "</html>";
            tranny.document.open();
            tranny.document.write(showTranscript);
            tranny.document.close();
        
            tranny.focus();
        }
        
        //Change the Font
        function ChangeFont(oSelect) {
            var NewFont = oSelect.options[oSelect.selectedIndex].value;
            if (NewFont!="#") {
                //alert (NewFont);
                document.applets[AppVal].setAppletFont(NewFont);
                //if (ns4) {
                    document.applets[AppVal].setFontSize(sFontSize);
                //}
                sFont=NewFont;
                DropCookie()
            }
        }
        
        //Change the Font Size
        function ChangeFontSize(oSelect) {
            var NewSize = oSelect.options[oSelect.selectedIndex].value;
            if (NewSize!="#") {
                //alert (NewSize);
                document.applets[AppVal].setFontSize(NewSize);
                sFontSize=NewSize;
                DropCookie()
            }
        }
        
        //Look for a preference cookie, and load the stored preferences
        function GetSettings() {
            var CookieVal = getCookie(CName);
            if (CookieVal.length > 1) {
                var cBegin = CookieVal.indexOf('!');
                var cEnd;
                var cCount = 0;
                while (cBegin != -1) {
                    cCount++;
                    cEnd = CookieVal.indexOf('!',cBegin+1);
                    if (cEnd != -1) {
                        switch (cCount.toString()) {
                            case "1" :
                                sBGColor = CookieVal.substring(cBegin + 1,cEnd);
                                document.applets[AppVal].setBackgroundColor(sBGColor);
                                break;
                            case "2" :
                                sFGColor = CookieVal.substring(cBegin + 1,cEnd);
                                document.applets[AppVal].setForegroundColor(sFGColor);
                                break;
                            case "3" :
                                sFont = CookieVal.substring(cBegin + 1,cEnd);
                                document.applets[AppVal].setAppletFont(sFont);
                                break;
                            
                        }
                    }
                    else {
                        sFontSize = CookieVal.substring(cBegin + 1);
                        document.applets[AppVal].setFontSize(sFontSize);
                    }    
                    cBegin = cEnd;
                }
            }
        }
        </script>

Step 2: Copy the following code and paste it into the Body tag. This code will initiate a search for a preference cookie on the client. Example: <body onload="GetSettings();">

Step 3: Copy the following code and paste it into the body of your web page, at the location where you would like the text display to be located. This code will cause the SpecheBox Applet to be downloaded, initialized, and displayed. The applet will connect to Speche Communication's Text Server at text.speche.com on port 80. Additionally, this code section renders all of the configuration options and transcript button for the client, assuming that JavaScript is enabled.

<form name="Selects">
        <applet name="jtext1" id="jtext1" code="com.speche.userinterface.Caption.class" width=500 height=182 CODEBASE="http://www.speche.com/" ARCHIVE="SpecheBoxText.jar" alt="Java has been disabled in your web browser.  You must enable Java to view the text display.  Please see the eScription FAQ for additional information." MAYSCRIPT VIEWASTEXT>
        <param name="CABBASE" value="http://www.speche.com/SpecheBoxText.cab">
        <Param name="Branding" value="1">
        <Param name="InitialText" value="">
        <Param name="EventID" value="25E9D359-69CB-4A30-A103-D02E0B986042">
        <Param name="LanguageID" value="1033">
        <Param name="ForegroundColor" value="#FFFFFF">
        <Param name="BackgroundColor" value="#000000">
        <Param name="Font" value="SansSerif">
        <Param name="FontSize" value="14">
        Your web browser is not Java enabled.<br>If you have disabled Java in your web browser, you must enable Java to view the text display.<br>Otherwise, please download the <a target="_blank" href="http://www.speche.com/Downloads.aspx#J2Plugin">Java Plug-in</a> to enable Java within your web browser.<br><br>Please see the <a href="http://www.speche.com/Help_FAQ.aspx" target="_blank">eScripton FAQ</a> for additional information.<br><br>
        </applet>
        <SCRIPT LANGUAGE="Javascript">
        AppVal = document.applets.length-1;
        var All_Buttons ="" + 
        "<table border=0 cellpadding=0 cellspacing=0>" + 
        "<tr>"+
            "<td>"+
                "<select name='JFont' size='1' onchange='javascript:ChangeFont(this);'>"+
                "<option value='#' selected>Font...</option>"+
                "<option value='SansSerif'>SansSerif</option>"+
                "<option value='Serif'>Serif</option>"+
                "<option value='Monospaced'>Monospaced</option>"+
                "</select>"+
                "<select name='JFontSize' id='JFontSize' size='1' onchange='javascript:ChangeFontSize(this);'>"+
                "<option value='#'>Size...</option>"+
                "<option value=''></option>"+
                "<option value=''></option>"+
                "<option value=''></option>"+
                "<option value=''></option>"+
                "<option value=''></option>"+
                "<option value=''></option>"+
                "</select>"+
             "</td>"+
             "<td>"+
                "<select name='JFGColor' id ='JFGColor' size='1' onchange='javascript:FGupdate=true; showColor(this);'>"+
                "<option value=''>Text...</option>"+
                "<option value='#00FFFF'>Aqua</option>"+
                "<option value='#000000'>Black</option>"+
                "<option value='#0000FF'>Blue</option>"+
                "<option value='#A52A2A'>Brown</option>"+
                "<option value='#008000'>Green</option>"+
                "<option value='#ADFF2F'>Green-Yellow</option>"+
                "<option value='#808080'>Grey</option>"+
                "<option value='#00FF00'>Lime</option>"+
                "<option value='#FF00FF'>Magenta</option>"+
                "<option value='#800000'>Maroon</option>"+
                "<option value='#808000'>Olive</option>"+
                "<option value='#FFA500'>Orange</option>"+
                "<option value='#800080'>Purple</option>"+
                "<option value='#000080'>Navy</option>"+
                "<option value='#FF0000'>Red</option>"+
                "<option value='#E2B48C'>Tan</option>"+
                "<option value='#008080'>Teal</option>"+
                "<option value='#FFFFFF'>White</option>"+
                "<option value='#FFFF00'>Yellow</option>"+
                "</select>";
       if (!ns6) {
            All_Buttons +="<select name='JBGColor' id ='JBGColor' size='1' onchange='javascript:FGupdate=false; showColor(this);'>"+
            "<option value='#'>Background...</option>"+
            "<option value='#00FFFF'>Aqua</option>"+
            "<option value='#000000'>Black</option>"+
            "<option value='#0000FF'>Blue</option>"+
            "<option value='#A52A2A'>Brown</option>"+
            "<option value='#008000'>Green</option>"+
            "<option value='#ADFF2F'>Green-Yellow</option>"+
            "<option value='#808080'>Grey</option>"+
            "<option value='#00FF00'>Lime</option>"+
            "<option value='#FF00FF'>Magenta</option>"+
            "<option value='#800000'>Maroon</option>"+
            "<option value='#808000'>Olive</option>"+
            "<option value='#FFA500'>Orange</option>"+
            "<option value='#800080'>Purple</option>"+
            "<option value='#000080'>Navy</option>"+
            "<option value='#FF0000'>Red</option>"+
            "<option value='#E2B48C'>Tan</option>"+
            "<option value='#008080'>Teal</option>"+
            "<option value='#FFFFFF'>White</option>"+
            "<option value='#FFFF00'>Yellow</option>"+
            "</select>";
         }
        All_Buttons +="</td>"+
        "<td>"+
        " "+    
        "</td>"+
        "</tr>"+
        "</table>"+
        "<INPUT TYPE='Button' NAME='Trans' id=Trans value='View Transcript' onclick='openTranscript();'>";
	window.document.open();
	window.document.write(All_Buttons);
	window.document.close();
	var oCount = 0;
	for (var i = MinFontSize; i < MaxFontSize + 1; i++) {
   	    oCount++;
    	    next = new Option(i, i);
    	    document.Selects.JFontSize.options[oCount] = next;
	}
        </script>
        </form>

Step 4: Load the web page in a browser. Validate that text is streaming to the applet, by viewing the display. You should see text scrolling within the applet display. If the applet is displaying text, please test the customization options offered. Please note that the buttons and selection boxes utilize approximately 40 pixels of space below the applet display. Please pay special attention to the available font sizes, with regard to the size of the display area. Instructions on how to modify the display and customization options are listed in the next section of this document. If you encounter any difficulties, or have any questions regarding implementation of the provided code, please contact:
Courtroom Connect and Speche Support
Phone: (877) 838-9080
E-mail: support@speche.com

Step 5: Upon validation of the streaming text, please contact Speche Communications, Inc. to confirm the successful applet installation.

Step 6: After the applet installation has been confirmed, we will send you a new EventID for the production event. This EventID will need to be pasted into the value attribute of the applet's EventID parameter tag. Example: <Param name="EventID" value="25E9D359-69CB-4A30-A103-D02E0B986042"> Prior to the production event, we will be sending a continuous loop of text over the connection to validate that the transition to the new EventID has been successful.

Customization Options and Applet Parameters

Default Applet Parameters (please review the options below for valid options for each parameter):
Width = 500 and Height = 182
<applet name="jtext1" id="jtext1" code="com.speche.userinterface.Caption.class" width=500 height=182 ...>
Branding=1
<Param name="Branding" value="1">
InitialText=""
<Param name="InitialText" value="">
ForgroundColor (Text) = #FFFFFF (white)
<Param name="ForegroundColor" value="#FFFFFF">
BackgroundColor = #000000 (black)
<Param name="BackgroundColor" value="#000000">
Font = SansSerif
<Param name="Font" value="SansSerif">
FontSize = 14
<Param name="FontSize" value="14">

Size of the Applet Display:
There are two variables that were copied to your web page during Step 3 of the installation process - width (default = 500) and height (default = 182). These variable are present within the Applet tag (<applet...>). These two values can be modified to fit the display area into a specific region of your web page. Please keep in mind that the size of the display area impacts the users ability to read the displayed text. Additionally, the values offered for Font Size should be considered when the display size is altered.

Fonts:
Valid Font names for the Applet are:

SansSerif
Serif
Monospaced

Fonts may be removed at your discretion by removing Option tags from the Jfont selection box. Addition fonts are not supported by most browser / applet combinations.

Colors:
The applet supports the full RGB color range (#000000 - #FFFFFF) for the text and background colors in the applet display. The subset of offered colors were chosen to support high contrast combinations, and the use of popular named colors. You may add or remove colors at your discretion by adding or removing Option tags from both the JFGColor, and the JBGColor selection boxes.

Font Size:
The font size is set in points per inch just like Microsoft Word. There are two variables that were copied to your web page during Step 1 of the installation process - MinFontSize (default = 10) and MaxFontSize (default = 40). These values to can be modified to limit the font size values offered to the user by the JFontSize selection box.

Initial Text:
The value of this parameter sets the initial text that will be displayed to all users when the SpecheBox is initially loaded. Use "\r\n" to indicate a carriage return. Example: <Param name="InitialText" value="Welcome\r\nto the web cast">
This would display as follows:
Welcome
to the web cast

Branding:
Setting this parameter to "0" will turn off the Speche Communications branding. Turning this off may affect the cost of your event. Please contact your Customer Service Representative for details regarding branding and how it relates to cost.

General Notes and Information

It is advisable to use the above methodology for loading the applet. Loading the applet from our server insures that you always have the newest version of our SpecheBox Applet and that your users are getting the richest set of available features.

It should be noted that the applet that you will be loading is using HTTP to connect from the applet to the Text Server over port 80. This allows us to connect from the applet to the Text Server, traverse virtually all standards compliant firewalls and proxy servers.