STK Viewer -Embedded Viewer Tutorial

This tutorial provides an example of how to embed an STK Viewer window into an HTML page. The example page can be viewed by anyone with a Web browser and a registered copy of STK Viewer. This tutorial presumes experience with HTML and some knowledge of VBScript or scripting in general.

Note: VDF files cannot be served over the Web. This tutorial provides information on how to use HTML as a presentation vehicle for VDF files and information about them. The HTML and the VDF files embedded should reside on the same system. Linking to VDF files is discussed further in this tutorial.

Source Code

The source code for linking to the example page and for the example page itself can be viewed by selecting View -> Source from the browser menu when the page is loaded, or by right clicking on the page and selecting View Source from the pop up menu.

The scenario used in the example was created and saved as a VDF file using STK.

Embedding STK Viewer into an HTML Page

Open Example

Embed STK Viewer:

The code which embeds the STK Viewer in the HTML page looks like this:

<OBJECT
    name="STKViewer"
    classid="CLSID:B9ADF0BD-27E3-4C97-997F-94B139033429"
    width="640"
    height="480"
    border="0">
    <param name="EnableConnect" value="true">
    <param name="ConnectPort" value="5001">
</OBJECT>

This code can be placed anywhere within the <BODY></BODY> tags in the HTML page. The width and height measurements are the only attributes that should be changed in the above code.

Add Controlling Script

The VBScript code which controls the STK Viewer looks like this:

        <script language="VBScript">
        Dim stk

        Sub InitPage()
            stkOptions =
                "dialogHeight:300px;
                dialogWidth:300px;
                center:yes;
                help:no;
                resizable:yes;
                status:no"
            SendCommand("ConControl / VerboseOff")
            path = STKViewer.InstallDir + "(name of VDF file)"
            STKViewer.LoadPackage(path)
            STKViewer.MainToolbarVisible=FALSE
            STKViewer.GraphicsToolbarVisible=FALSE
            STKViewer.CaptureToolbarVisible=FALSE
            STKViewer.AnimationToolbarVisible=FALSE
            STKViewer.ProgressToolbarVisible=FALSE
            STKViewer.CompassToolbarVisible=FALSE
            STKViewer.MessageToolbarVisible=FALSE
            STKViewer.MovieMakingToolbarVisible=FALSE
            STKViewer.CompassVisible=FALSE
            STKViewer.HelpToolbarVisible=FALSE
            STKViewer.MessageViewerVisible=FALSE
        End Sub

        Function SendCommand(command)
            on error resume next
            Set rVal = stk.Application.ExecuteCommand(command)
            if rVal.Count > 0 then
                SendCommand = rVal(0)
            else
                SendCommand = 0
            end if
        End Function

        Sub Forward()
            STKViewer.AnimateStartForward()
        End Sub

        Sub Reverse()
            STKViewer.AnimateStartReverse()
        End Sub

        Sub Reset()
            STKViewer.MessageViewerVisible=FALSE
            STKViewer.AnimateReset()
        End Sub

        Sub Pause()
            STKViewer.AnimatePause()
        End Sub

        Sub StepForward()
            STKViewer.AnimateStepForward()
        End Sub

        Sub StepReverse()
            STKViewer.AnimateStepReverse()
        End Sub

        Sub Slower()
            STKViewer.AnimateDecreaseStep()
        End Sub

        Sub Faster()
            STKViewer.AnimateIncreaseStep()
        End Sub

        </script>

This code must be placed within the <HEAD></HEAD> tags in the HTML page. Typically scripts are placed just before the closing HEAD tag.

In order for the InitPage() function to process it needs to be called in the opening BODY tag like so:

<body onLoad="InitPage()">

The path variable in the InitPage() function can contain the complete path to the VDF file you want to run in the embedded viewer. For example:

path="C:\MyScenario\MyScenario.vdf"

Or you can use the STKViewer.InstallDir method to locate VDF files in the STK Viewer install home. For example:

path = STKViewer.InstallDir + "MyScenario\MyScenario.vdf"

This method is recommended if you plan to distribute the HTML and VDF file. Simply instruct the recipients to copy the VDF file into their install home directory with the path structure you've designated and the script will locate the VDF file when run from the HTML page on their system.

This path variable is then passed to the STKViewer.LoadPackage method for opening.

STKViewer.LoadPackage(path)

The next set of lines in the code are viewer toolbar properties that can be set to TRUE (On) or FALSE (Off), displaying those toolbar items you want to show and hiding those you do not.

    STKViewer.MainToolbarVisible=TRUE
    STKViewer.GraphicsToolbarVisible=TRUE
    STKViewer.CaptureToolbarVisible=FALSE
    STKViewer.AnimationToolbarVisible=FALSE
    STKViewer.ProgressToolbarVisible=TRUE
    STKViewer.CompassToolbarVisible=FALSE
    STKViewer.MessageToolbarVisible=FALSE
    STKViewer.MovieMakingToolbarVisible=FALSE
    STKViewer.CompassVisible=FALSE
    STKViewer.HelpToolbarVisible=FALSE
    STKViewer.MessageViewerVisible=FALSE

The SendCommand() function:

Function SendCommand(command)
    on error resume next
    Set rVal = stk.Application.ExecuteCommand(command)
    if rVal.Count > 0 then
        SendCommand = rVal(0)
    else
        SendCommand = 0
    end if
End Function

is used to send Connect commands to the Viewer. In this specific case, the function is called in the InitPage() function and turns off output to the message viewer. You can find out more about Connect on the AGI Web site or if you have STK, in the STK Help.

Add Controlling Buttons:

The next set of subroutines in the script above look similar to this:

Sub Forward()
    STKViewer.AnimateStartForward()
End Sub

They are called by the Animation buttons below the Viewer and are used to control the playback of the animation.

The code for these buttons is found in the body of the HTML within <INPUT></INPUT> tags as below.

<input type="image"
       name="AnimateForward"
       src="images/play.gif"
       alt="AnimateForward"
       value="AnimateForward"
       onClick="Forward()">

The above example uses an image for the input button but a standard input type of button can be used as well as a simple text link as in the examples below:

<input type="button" value="Animate Forward" onclick="Forward">
Animate Forward
<a href="#" onclick="Forward()">Animate Forward</a>

Note: The above examples are for illustration purposes only and may generate script errors if you click on them. If this happens, simply dismiss the script error message by clicking the No button.

STK 11.2.1 Programming Interface