This tutorial provides an example of how to embed an STK Viewer window in 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:
<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 at the AGI web site or if you have STK, in 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 Programming Interface 11.0.1