One simple way to extend the STK User Interface is to write HTML pages and load them into the STK internal Web Browser. The advantage of this method is its relative simplicity. No development environment is required. You can just create an HTML page with any text editor. However, the integration with the STK user interface is limited, so you must navigate manually to the correct HTML page. Custom HTML pages loaded in STK can access the application object model using the "window.external" property exposed by the web control. That property returns an object of type IAgUiApplication from the AgUiApplication library. That interface exposes methods and properties enabling to manipulate the application windows and toolbars, and also to access the object model in order to manipulate the STK objects in your scenarios.
The HTML Interface enables you to:
- Support a task-oriented workflow.
- Embed any HTML page within STK.
HTML interfaces control STK by using the STK Object Model.
Creating a Web Page
You can interact with STK over the COM interface using customized Web pages that you create.
You can create your own home page with links to other pages that you use frequently. You can also put buttons on your home page to send commands to STK. You can even put text fields and other controls on your home page that allow you to enter data that can be used in commands sent to STK. This capability allows you to build a home page that makes it easy for you to do your common tasks, including those that run STK. To do this, you will need to write your own home page in HTML.
To display the Web Browser window, select Web Browser from the View menu. The Web Browser is an integrated implementation of the Edge-based Chromium control, WebView2.
You can create and edit HTML files using any text editor, such as NotePad or TextPad (by Helios Software Solutions). There are also more sophisticated programs that allow you to create HTML pages, such as MacroMedia's HomeSite, Microsoft's FrontPage and Word, Netscape's Composer, and W3C's Amaya. However, if this is your first time writing HTML, you may want to stick to a simple text editor to get going.
Issuing a SetUnits Connect command from an HTML page will change the units for the STK session.
Using Embedded Scripts to Control STK
HTML pages can use form elements (<FORM>, <INPUT>, <BUTTON>, <SELECT>, etc.) and embedded scripts to control STK. HTML form elements are used to provide data to STK and to initiate the embedded scripts. Embedded scripts can be written in several languages. The most commonly used languages are VBScript and JavaScript, which are supported by the Windows operating systems.
Although VBScript is similar to Visual Basic, it is a different language. Likewise, JavaScript is not the same as Java.
Below is an HTML example with two form buttons and four embedded subroutines that are written in JavaScript:
<HTML>
<HEAD>
<TITLE>Embedded Script in HTML Example</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
var uiApp;
var stk;
var webBrowserWindow;
function InitPage() {
uiApp = chrome.webview.hostObjects.sync.root;
stk = uiApp.Personality2;
webBrowserWindow = uiApp.Windows.GetItemByName("Web Browser - " + document.title);
}
/* The Web Browser Window must be integrated before performing scenario operations*/
function PreventWebBrowserClose() {
var currentDockStyle = webBrowserWindow.DockStyle;
// Make the window integrated before opening the scenario
if (webBrowserWindow.DockStyle != 1) {
currentDockStyle = webBrowserWindow.DockStyle;
webBrowserWindow.DockStyle = 1;
}
// Make sure the window does not close when the scenario is opened
webBrowserWindow.NoWBClose = true;
return currentDockStyle;
}
function RestoreWebBrowserWindow(dockStyle) {
// Dock the window again if it was docked before
webBrowserWindow.DockStyle = dockStyle;
webBrowserWindow.NoWBClose = false;
}
function CloseWebBrowserWindow() {
webBrowserWindow.Close();
}
function NewScenario(keepWebBrowserOpen) {
var currentDockStyle = PreventWebBrowserClose();
stk.ExecuteCommand("new / Scenario MyNewScenario");
if (keepWebBrowserOpen) {
RestoreWebBrowserWindow(currentDockStyle);
} else {
CloseWebBrowserWindow();
}
}
function UnloadScenario(keepWebBrowserOpen) {
var currentDockStyle = PreventWebBrowserClose();
stk.ExecuteCommand("unload / */");
if (keepWebBrowserOpen) {
RestoreWebBrowserWindow(currentDockStyle);
} else {
CloseWebBrowserWindow();
}
}
function UnLoadPage() {
uiApp = null;
stk = null;
}
</SCRIPT>
<BODY onLoad="InitPage()" onUnload="UnLoadPage()"
BGCOLOR="#bbbbbb">
<BR>
This is a test of an embedded<BR>
script in HTML controlling STK<BR>
<BR>
<INPUT type="button" align="Center"
value="New Scenario" onClick="NewScenario(true)">
<BR>
<BR>
<INPUT type="button" align="Center"
value="Unload Scenario" onClick="UnloadScenario(false)">
</BODY>
</HTML> Display the page in a Web browser. Notice that the JAVASCRIPT is found in the SCRIPT section. The buttons are added in the BODY using the <INPUT> tag. The <BR> tag is a line break.
In the <BODY> tag itself, one of the JavaScript functions is assigned to run when the HTML page is first loaded (onLoad="InitPage()"), and another to run when the page is removed (onUnload="UnloadScenario(false)"). In a similar fashion, the buttons in the <INPUT> tag assign functions to be run when they are clicked with the mouse (onClick="NewScenario(true)").
Using embedded scripts to control the Status bar
You can use two window properties, status and defaultStatus, to display custom messages in the status bar. For example, to display a custom message after preferences have been updated, you set the defaultStatus. For example,
defaultStatus = "File preferences have been updated"
You can also set status in the onMouseOver event handler of a hyperlink to display hints in the status bar. The event handler must return true to set status. For example, use the following code to display Click to Explore STK in the status bar when you move the mouse over the link:
<A HREF="explore.html" onMouseOver="javascript:window.status='Click to Explore STK'; return true">Explore STK</A>
Commanding STK with the STK Object Model
The JavaScript commands STK using Component Object Model (COM) automation. The example HTML page above is using STK as an automation server. Automation is a protocol that allows one application or component (the Client) to control another application or component (the Server).
To control STK, you must have a variable that represents STK as an object. This is a two-step process done in the HTML example with the following statements:
var uiApp; var stkRoot; uiApp = chrome.webview.hostObjects.sync.root; stkRoot = uiApp.Personality2;
The var statements create variables that are used subsequently to represent the objects.
There is one object that is already available to scripts if the HTML window is displayed from within STK. The object chrome.webview.hostObjects.sync.root is set in the Web Browser windows so that it displays to be equal to the 'AGI User Interface Application Object'.The first step above sets a variable (uiApp) to represent the 'AGI Application User Interface Object' by getting it from (uiApp = chrome.webview.hostObjects.sync.root).
The second step is to set a variable (stkRoot) to represent the STK Object Model Root by getting it from the 'Personality2' property of the uiApp object (stkRoot = uiApp.Personality2). Now with the STK Object Model Root, you can use many of its methods to control STK via connect commands of STK Object Model object oriented method calls.
The STK Object Model Root has a method called ExecuteCommand(). This method can be used to send commands using standard Connect syntax. For instance instead of calling the "NewScenario" method in the above example, one could use the following connect command ...
var notUsed = stkRoot.ExecuteCommand("new / Scenario MyNewScenario")
... which sends the Connect command to create a new scenario named "Demo". Likewise, instead of the "CloseScenario" method call seen in the above sample, one could issue the following connect command...
var notUsed = stkRoot.ExecuteCommand("unload / */")
...which sends the command to unload a scenario from STK.
The Web Browser must stay open during operations in STK. When opening or closing a scenario through stk.ExecuteCommand(), the Web Browser Window must stay open through the process for the operation to complete.
For opening and closing scenarios, the Web Browser must be integrated during the process. In the example code, there are a few functions that assist in doing so. PreventWebBrowserClose() will set the current DockStyle of the Web Browser to be integrated, and also set NoWBClose to true. This will ensure the Web Browser Window is not closed while opening or closing a scenario. The “keepWebBrowserOpen” argument that is passed to NewScenario() and UnloadScenario() will indicate whether the Web Browser Window should be left open after completing the operation specified.
The simple examples in this document have demonstrated that you can create new HTML pages containing buttons on which you can click with a mouse. You can associate embedded scripts with these buttons, and the scripts can use the STK Object Model or send Connect commands to STK. It's also shown how to set any HTML page your default Home Page using STK's menu system.
STK's embedded HTML pages can be used to create custom interfaces for you to automate common and routine tasks. This can save time and reduce the risk of errors. We encourage you to try this new capability by going through the examples and modifying them to your specific needs.