Creating A Home Page with HTML

The HTML Viewer is going to be deprecated in the 12.6. It has been replaced by a Web Browser. Both options are currently available in 12.5.

The Web Browser

In STK, the Web Browser is an integrated part of the workspace. To see it, select Web Browser from the View menu. The Web Browser is used to display html-based content. The Web Browser behaves like a standard web browser. It can access html content from the following:

the local hard disk
from local area networks
from intranets
from the internet

Customized pages that use html and browser-compatible scripting can be created to support the use of STK and to control STK actions.

Use the customizable Web Browser toolbar to navigate while you browse webpages. The toolbar contains buttons and an address field similar to those on standard browsers. If the Web Browser toolbar is not visible, select Web Browser Controls from the View -> Toolbars menu to introduce it.

Setting the Default Home Page

When you use STK for the first time, the URL for the AGI website (www.agi.com) is the default home page. The default home page is displayed whenever a Web Browser window is opened.

To change the URL for the default home page, select Preferences... from the Edit menu, and then select Web Browser.

Type the file path or URL address in the Home page field.
Select the Set as Default check box at the bottom of the window.
Select OK.

The new default page will be displayed when the Home button ( Browser Home Button ) is selected or when a new Web Browser window is opened.

Creating a Home Page with HTML

Hypertext Markup Language (HTML) can be used to create custom webpages that can be viewed in the Web Browser and can be set as the default home page. Custom HTML pages can contain links to frequently used pages as well as form elements and scripts that can submit data to STK and control it.

HTML is a text language. You can use text-editing software such as NotePad and TextPad (by Helios Software Solutions) to create HTML files and edit them. More sophisticated programs that allow HTML editing include MacroMedia HomeSite and Dreamweaver, Microsoft FrontPage and Word, and W3C Amaya.

To show the HTML code in a text editor, right-click an HTML page and select Save As from the drop-down menu that appears.

You can review or modify the source code or save it as another file in a text editor. Then you can load the new file in the Web Browser by typing the file path into the address field of the HTML toolbar or by using the Browse button ().

Viewing HTML source code is a good way to become familiar with HTML and the manner in which HTML pages are put together. Modifying existing source code and saving the page as a different file is an easy way to jump-start the production of a webpage.

Getting started with HTML

Many good books and online tutorials on how to write HTML are available. Several tutorials are available at the World Wide Web Consortium (W3C) website, which can be found at www.w3.org. One such tutorial is Dave Raggett’s "Getting started with HTML" at www.w3.org/MarkUp/Guide.

Below is an example of the source code for a simple HTML page:

Copy

<HTML>
   <HEAD>
      <TITLE>A Very Simple HTML Page Example</TITLE>
   </HEAD>
   <BODY>
      Hello Planet
   </BODY>
</HTML>

The words enclosed in the angle brackets (<>) are called tags. Each tag in HTML represents a separate section of the HTML. The tags are not case-sensitive. Indentation is ignored by the browser, but it helps to make your code more readable.

Although HTML tags are not case-sensitive, xHTML, an XML-compatible version of HTML, requires that all tag names be in lower case. More information on xHTML and its uses can be found at the World Wide Web Consortium.

The first and last elements in the document are the <HTML> and </HTML> tags. The slash (/) is used to identify the end tag of a section.

Most HTML pages have two main sections within the HTML tags: the <HEAD></HEAD> and the <BODY></BODY>. In the example above, the <TITLE></TITLE> section is nested in the <HEAD></HEAD> section. The text between the <TITLE> tags is displayed in the title bar of most web browsers.

The text within the <BODY></BODY> section is displayed on the page.

If you save the above text to a file called simple.htm and display it in a web browser such as Internet Explorer (or STK), it will appear similar to the following:

A Simple HTML Page

Changing the Style of HTML

There are many HTML tags that you can use to create a webpage. Many tags have attributes that you can use to control the formatting, contents, and actions of the page. Adding the <STRONG> and <FONT> tags and adding the "bgcolor" attribute to the <BODY> tag will change the simple HTML page as shown below.

Copy

<BODY bgcolor="#bbbbbb">
    <strong>
        <font size="+3">
            Hello Planet
        </font>
    </strong>
</BODY>

The background color will be changed to gray (bgcolor="#bbbbbb"), the text will become bold (<strong>), and the font size will increase (<font size="+3">). With this modified code the page will look similar to the following:

A Very Simple HTML Page - Bold

To find more information on the creation of HTML pages, study the online HTML tutorials that were mentioned above or do a web search of the term "HTML tutorial."

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:

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<HTML>
<script language="JavaScript">
    var uiApp = window.chrome.webview.hostObjects.sync.root;
    var stk = uiApp.Personality2;
    
    function InitPage() {
    }

    function NewScenario() {
        stk.ExecuteCommand("new / Scenario MyNewScenario");
    }

    function UnloadScenario() {
        stk.ExecuteCommand("unload / */");
    }

    function UnloadPage() {
        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()"/>
    <br/>
    <br/>
    <input type="button" align="Center" value="Unload Scenario" onClick="UnloadScenario()"/>
</body>
</HTML>

The above code will look like the following HTML page with form buttons:

Embedded Script in HTML

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 one of the JavaScript functions is assigned to run when the HTML page is first loaded (onLoad="InitPage()"). Another subroutine will run when the page is unloaded (onUnload="UnLoadPage()").

The <INPUT> tags are defined as buttons by the type attribute (type="button"). When these buttons are clicked with the mouse, they will initiate the function that are assigned in the 'onClick' attribute (onClick="NewScenario()").

Commanding STK with the STK Object Model

The JavaScript uses Component Object Model (COM) automation to control STK. The HTML example above uses 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).

There are two terms that are useful in describing COM objects: 'properties' and 'methods'. COM objects have both properties and methods.

A property is usually a data item. For instance, a balloon object might have properties called 'size' and 'color'. In this case the script might contain the following code:

Copy

    balloon.size = 10
    balloon.color = red

as well as

Copy

    s = balloon.size

A method is similar to a subroutine (or function) that acts on the object itself. A balloon might have two methods, 'inflate' and 'deflate'. The script might contain the following code:

Copy

    balloon.size = 10
    balloon.inflate()
    s = balloon.size

After running a script that contains the above lines, s may be equal to 20, which means that the inflate() method doubled the size of the balloon. Using the deflate() method a few times

Copy

    balloon.deflate()
    balloon.deflate()
    d = balloon.size

might cause d to equal five (5) (each call to deflate() reduces the size by half). These are the basic principles of using object properties and methods.

In order to control STK, a variable must be created to represent STK as an object. This is a two-step process, which is shown in the above HTML example in the following statements:

Copy

   var uiApp = window.external;
   var stk = uiApp.Personality2;

The "var" keyword denotes that you are setting a variable, followed by the name of the variable, and the value to set in that variable. These variables are used to represent the objects.

There is one object that is already available to scripts if the HTML window is displayed from within STK. That is the 'window' object. The window object has a property called 'external'. STK sets the 'external' property of the HTML windows 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 the 'external' property of the window object (Set uiApp = window.external).

The second step sets a variable (stk) to represent the STK object by getting it from the 'personality' property of the uiApp object (Set stk = uiApp.personality). Then you can use methods of the STK object to send commands to STK.

The STK object has a method called ExecuteCommand(). You can use this method to send commands that use standard Connect syntax. In the above example, the command

Copy

var notUsed = stk.ExecuteCommand("new / Scenario MyNewScenario")

sends the Connect command to create a new scenario named "MyNewScenario". The command

Copy

var notUsed = stk.ExecuteCommand("unload / */")

sends the command to unload the current 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.

Summary

The above examples demonstrate how HTML pages that contain form fields, buttons and scripts can be created and used to send Connect commands to STK. They also demonstrate how any HTML page can be set as the default Home Page using STK's menu system.

STK's embedded HTML pages can be used to create custom interfaces to automate common and routine tasks. This can save time, reduce the risk of errors and dramatically improve productivity.