Graphical Interface Programming in MOE

D. Labute
Chemical Computing Group Inc.

1. Introduction

Building a Graphical User Interface (GUI) for a scientific program or application can be a time-consuming and frustrating activity. As a result, it is often the case that resources are not available for both the User Interface and the "guts" of the methodology. In the interests of saving time, the graphical interface is then sacrificed. This is unfortunate since a GUI is extremely useful for tuning algorithms and pilot studies before the launch of a major calculation.

In this article, we will review the GUI programming facilities of MOE: The Molecular Operating Environment. These facilities are accessible via SVL: The Scientific Vector Language - built-in high-performance programming language of MOE. It is not neccessary that the reader be familiar with MOE or SVL; however, the following articles may be of interest:

The SVL Interface Toolkit is designed to be accessible to all classes of programmers, not just the experts. More specifically, it was designed to meet the following criteria:

Simplicity and Power. The interface is easy to use. Even occasional SVL programmers are able to create functional, attractive, and efficient windows. A GUI can be built in a matter of minutes.
Platform Independence. Writing and maintaining source code capable of running on multiple machine architectures, operating systems, and configurations is an expensive proposition. By writing GUI code in SVL, the portability of MOE can be leveraged.
Sophisticated Interface Object Layout. An interface window consists of interface objects such as push buttons and labels (see below). The act of physically placing interface objects on a window, to achieve a uniform and aesthetically pleasing look is performed by sophisticated internal algorithms.
Direct Interaction Between GUI and Program. The SVL Interface Toolkit is able to use the fundamental data structures of SVL directly. This means that little or no translation of data is required when a program communicates with the user.
Safe Programming Environment. Traditional GUI programming often leads to memory leaks and system crashes. The SVL Interface Toolkit eliminates these problems and provides a safe and flexible GUI programming environment.

2. Fundamental Interface Objects

A typical interface window is a collection of fundamental interface objects such as push buttons and text fields. Each object is used to display information or to prompt for data input. The objects differ in both the type of data presented or requested, and the presentation of such data.

Each fundamental object instantiates a common user interaction such as the entry of a number, a string or the selection of an item in a fixed set. The objects automatically take care of graphical drawing and feedback when activated with the mouse. More complex interactions must be handled by a dedicated SVL program.

SVL provides a flexible set of objects, some of which are:

Labels A Label can display single or multi-line text or an image. Labels serve to annotate, and are not interactive.

Buttons A push-button is used to initiate an action when clicked. The button label may be textual or an image.

Checkboxes Checkboxes provide for the specification of a binary value (e.g., True or False, On or Off).

Text Fields Text fields provide for both text and numeric data entry. Numeric fields may specify minimum and maximum values to prevent the entry of invalid data.

Radio Buttons Radio buttons are used to select one of a set of mutually exclusive options. At all times, exactly one of the buttons is in the pressed state.

Listboxes A Listbox displays a fixed set of strings and allows the selection of individual strings. Scroll bars are used to navigate in long lists. Listboxes can operate in either single-select or multi-select mode.

Option Menus An Option Menu provides for the selection of exactly one of a mutually exclusive set of items. They are functionally equivalent to Radio Buttons but differ in the manner of presentation: the selected item is drawn and changes are made via a pop-up menu.

Sliders Sliders provide for the display and input of numeric data in a coarse manner. The position of the slider's "thumb" determines the numeric value.

Spin Buttons Spin Buttons are used for numeric data entry. The text field portion is used for direct data entry while the increment and decrement buttons graphically modify the value by preset fixed amounts.

Wheels The Wheel is used for coarse numeric input. When operated in unbounded mode, the Wheel operates like the continuously turning "alpha dials" found on stereo equipment. When operated in bounded mode the Wheel behaves like a slider. The push-button on the right is used to reset the value.

In SVL programs, a fundamental object is specified with a bracketed set of object attributes. For example, a numeric text field used for the input of an iteration limit in an algorithm would be specified with

Text : [ len: 10, min: 1, type: 'int' ]

where Text indicates the type of interface object (a text field), len specifies the displayed length of the field (in characters), min specifies that the minimum acceptable value is 1, and type specifies that integer data is required.

All of the fundamental interface objects can be titled with a string. For example, a numeric data field typically is titled with some text describing the nature of the parameter. Continuing the above example, the interface object

would be specified with

Text : [ title: 'Iteration limit:', len: 10, min: 1, type:'int' ]

The automatic titling property of the fundamental interface objects is a great simplification of the task of object layout since a large proportion of interface layout deals with titles of text fields. Each object also has options to create 3D borders, margins as well as control colors and fonts.

A convenient feature of the interface toolkit is the ease with which "Tool Tips" or "Bubble Help" can be associated with interface objects. Bubble Help windows are windows of help text that appear when the mouse is left over an interface object without activity:

A mouse movement or key press causes the Bubble Help window to disappear. In popular personal computer applications, such as word processors and spread sheets, Bubble Help has been used to give hints about a program's behavior (e.g., what an icon means). Bubble Help has not been used extensively in scientific applications; however, it is extremely useful as a memory aid for the often obscure tuning parameters of many algorithms.

The interface object in the above image could be specified with:

Text : [ title: 'RMS Gradient Test:', len: 10, min: 1e-6, type:'real', bubbleHelp: 'Stop if Root Mean Square gradient exceeds\n' 'the Gradient Test value.' ]

3. Object Layout

Most user interface windows or control panels contain more than one fundamental object. The SVL Interface Toolkit organizes such panels in a hierarchical manner. A panel is much like a tree. The leaves of the tree are fundamental interface objects such as buttons and text fields while the internal nodes of the tree are objects used to effect object placement and general panel layout.

The internal layout objects are called Managers. A manager is responsible for the layout of all of its child objects. The most useful Manager in the SVL toolkit is the "Mbox" or matrix box. An Mbox arranges its children on a coarse two-dimensional grid. For example, the layout

could be specified with

Mbox : [ columns: 2, Text : [ title: 'Iteration limit:', type: 'int', 0:10 ], Text : [ title: 'SD Iterations:', type: 'int', 0:10 ], Text : [ title: 'RMS Gradient Test:', type: 'real', 0:10 ], Text : [ title: 'Step limit:', type: 'real', 0:10 ] ]

The SVL toolkit allows Managers to be children of other Managers. In this way complex windows can be built and automatically layed out.

The top-level window (with window system decorations and menus) is at the top of the hierarchy. The top-level window is a manager which lays out its children in a vertical list (an Mbox with a columns setting of 1). Top-level windows can optionally contain "action buttons" such as "OK" or "Cancel". For example, the Molecular Mechanics Energy Minimization window of MOE

could be specified with (we have removed most of the Bubble Help):

[ title : 'Molecular Mechanics', text : [ 'OK', 'Help', 'Cancel' ], // action buttons Radio : [ title : 'Method:', text : [ 'TN', 'CG', 'L-BFGS', 'SD'], bubbleHelp: 'Optimization method: Truncated Newton (TN),\n' 'Conjugate Gradient (CG), Large-scale BFGS,\n' 'Steepest Descent (SD).' ], Mbox : [ columns : 2, Text : [ title : 'Iteration limit:', type : 'int' ], Text : [ title : 'SD Iterations:', type : 'int', min:0 ], Text : [ title : 'RMS Gradient Test:', type : 'real', min:0, bubbleHelp: 'Stop if Root Mean Square gradient exceeds\n' 'the Gradient Test value.' ], Text : [ title: 'Step limit:', type: 'real', min: 0 ], Text : [ title: 'Tether Weight:', type: 'real', min: 0 ] ] ];

Labels			A Label can display single or multi-line text or an image. Labels serve to annotate, and are not interactive.
Buttons			A push-button is used to initiate an action when clicked. The button label may be textual or an image.
Checkboxes			Checkboxes provide for the specification of a binary value (e.g., True or False, On or Off).
Text Fields			Text fields provide for both text and numeric data entry. Numeric fields may specify minimum and maximum values to prevent the entry of invalid data.
Radio Buttons			Radio buttons are used to select one of a set of mutually exclusive options. At all times, exactly one of the buttons is in the pressed state.
Listboxes			A Listbox displays a fixed set of strings and allows the selection of individual strings. Scroll bars are used to navigate in long lists. Listboxes can operate in either single-select or multi-select mode.
Option Menus			An Option Menu provides for the selection of exactly one of a mutually exclusive set of items. They are functionally equivalent to Radio Buttons but differ in the manner of presentation: the selected item is drawn and changes are made via a pop-up menu.
Sliders			Sliders provide for the display and input of numeric data in a coarse manner. The position of the slider's "thumb" determines the numeric value.
Spin Buttons			Spin Buttons are used for numeric data entry. The text field portion is used for direct data entry while the increment and decrement buttons graphically modify the value by preset fixed amounts.
Wheels			The Wheel is used for coarse numeric input. When operated in unbounded mode, the Wheel operates like the continuously turning "alpha dials" found on stereo equipment. When operated in bounded mode the Wheel behaves like a slider. The push-button on the right is used to reset the value.