Authors: Nicole Arksey and Saleema Amershi (revised by Byron Knoll)

Introduction

The AIspace tools strive to have a consistent layout and functionality to facilitate use. For example, a user who is familiar with the Neural Networks tool will hopefully be comfortable using the Decision Tree Learning tool as well. This document was created to provide an overview of common interface elements used by the AIspace tools.

A Typical AIspace Tool

A typical AIspace tool window provides a whiteboard-like canvas, where a graphical representation of a project is displayed, a toolbar for modifying and inspecting information on the canvas, and a menu that provides options for creating and loading files, as well as changing the properties of the tool.

Other panels may be added onto this basic framework as required by a specific tool. For example, the Robot tool has a controller log panel at the bottom of the window, while the Consistency Based CSP Solver tool has a domain history panel.

Create and Solve mode

There are two modes which are always available in AIspace - the Create mode, and Solve mode. The user switches between them by clicking the Create and Solve tabs in the left panel. The two modes are completely independent in the sense that only the problem created in Create mode is carried over to Solve mode. Typically, functionality provided in one of the modes (for example, creating an arc between nodes in Create mode) is not duplicated in the other mode.

Create mode provides functions to create a representation of a problem.

Solve mode provides functions to solve and/or test a problem. It allows the user to solve the problem in one go, or step through the solution. Oftentimes, additional functionality is provided to facilitate teaching (such as additional query buttons).

The Toolbar

At the top of the main window is a removable toolbar which holds buttons corresponding to the mode that you are in.

A button that is selected determines the functionality of the mouse pointer over the canvas, or causes some other action to occur. While hovering over a button, a tooltip will appear describing in more detail what the button does. The message panel immediately above the canvas also describes the currently selected button.

Create mode has buttons that allow the user to create a representation of a new problem (a 'project'). These include controls to create nodes, draw edges, select and delete objects ('entities'), and perform other operations on the problem components that may depend on the specific tool.

Solve mode has options that enable the user to solve a problem, which varies from tool to tool. As in create mode, clicking on a button changes the function of the mouse pointer. Buttons allow the user to instruct the tool to solve the problem immediately, or step through the problem (either in whole steps with step or small incremental steps with fine step.

The Canvas

The main window is dominated by a 'canvas' that provides a visual representation of the problem. This is typically in the form of a graph.

Right-clicking on the canvas will show a pop up menu which provides the same options as the toolbar.The right-click menu is dependent on the mode the user is in (whether create or solve).

Right-clicking on a node or an edge will pop up a menu providing options for that entity.

The canvas also allows the user to manipulate graphs with the mouse. To move a single entity in create mode the user can select that entity by clicking on it and then drag it to a new location. To move multiple entities at once the user should have the Select Entity button depressed and then drag a selection rectangle around the entities that he/she intends to move or left-click on entities while holding down the Ctrl button to select multiple entities. Then clicking and dragging any of the nodes will move the group of entities to a new location. In Solve mode the multiple selction/move method is also possible.

As edges/arcs are intrinsically associated with nodes, moving edges are not allowed.

The Message Panel

The message panel provides information about what can be done with the currently selected button, as well as other tool specific information.

The Bottom Panel

Some tools have a panel at the bottom of the main window that shows information pertaining to the current state of the graph, or to selected options. Selected options such as algorithms used in solve modes should appear in the small text area at the top of the bottom panel. Any other information pertaining to the tool or current graph will appear in a scrollable text area below this. The bottom panel can be hidden or resized using the division between it and the canvas.

The Standard Menu Bar

All AIspace tools have a menu bar at the top, allowing the user to pull down menus enabling him/her to create a new project, load and modify an existing one, change global properties of the tool, select tool modes, and acquire help. Also, all tools provide at least one type of text representation of the currently loaded project. The following are the common menu options. Each tool may include other tool specific options in any of these menus.

The File menu provides functions for:

• Creating a new graph. This erases the current graph. The user should be asked whether they want to save the current graph before creating a new graph.

• Loading a sample graph. This pops up a menu of pregenerated graphs - these are usually used to demonstrate AI concepts, and are very informative for users who are unfamiliar with the tools. This will also erase the current graph, so the user should be givin the option of saving the current graph.

• Opening a location. This allows the user to open a representation located on the web. A URL should be typed into the text box to inform the tool of the location of the file. Note that each tool supports different file formats - care should be taken to ensure that the file being loaded is compatible with the tool.

• Loading a file. This option lets the user load a file from the local machine.

• Saving a file. This will save a text file representing the current project.

• Quit. Terminates the tool.

The Edit menu provides functions for:

• Undo. This option is available for most but not all of the tools. It is able to undo a single action such as creating, deleting or moving entities once. When an action is unable to be undone, this will be disabled.

• Viewing/Editing the text representation of the current graph. This allows the user to view or modify the graph by changing and then updating the text representation of the current graph in another window. If modified and then update is clicked the graphical representation of the graph should correspond to the new text representation. Some tools may have more then one type of text representation.

The View menu provides functions for:

• Changing the font size. There are five options for font size - small (9 pt), medium (12 pt), large (20 pt), extra large (30 pt), and other (a dialog asks for the font size). The size options resize the text of MOST components - primarily the ones that need to be observed on a projector. The user must keep in mind that most Java components cannot handle very large font sizes and, as such, are capped at the 26 point size. Components that can handle larger font sizes (such as the 'canvas') do not have a cap.

• Changing the line width. This option only affects tools that give a graphical representation in the canvas. There are 3 choices - narror (1 pt), medium (2 pt), and wide (4 pt).

• Autoscaling. This option will scale the current graph to the size of the canvas.

• Pan/Zoom. This allows the user to select the mode, pan or zoom. One of these is always selected. When the user right-drags the mouse, the panning or zooming rectangle will become visible corresponding to the current mode.

• Show message panel. Immediately above the canvas is a message panel that provides textual information about what the tool can do or is currently doing. This can be hidden if the box is unchecked.

• Show Button Text. This allows the user to determine if they want the text on the buttons to be visible or just the icon. Tooltips are available in either mode, giving more detail about the buttons.

Tool Specific Options menu provides functions for:

• Any specific tool functionality. This will vary from tool to tool.

The Help menu provides options for:

• Help. This will open a new window that takes the user to the webpage of help options for that specific tool. The user can navigate through this window through the links provided. Typically general help, quickstart, tool tutorials and buglists are available at this site.

• About AIspace. This will show a rolling screen of credits and other details about the AIspace project in general.

• About this tool. This will show a rolling screen of credits and other details about the development of this tool.

On the use of colour:

Colour is an incredibly informative tool for conveying information, and is used extensively in some of the tools - notably the Neural Networks tool, where varying shades of red and green are used to represent a continuum [-1,1]. Although this is useful, care is taken to provide other cues to accommodate colour blindness or greyscale monitors. Case in point: text is superimposed on the Neural Network edges to indicate the weights represented by the edges.