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.
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.
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.
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:
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:
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.
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.
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