% -*- TeX-master: "fdd.tex" -*-

\label{sec:ui}

The User Interface is divided between two interaction modes, one for
building boards, and the other for playing Gizmoball.  A switch
toggles between the two modes, appropriately adjusting the appearance
of the interface and its behavior.

\subsubsection{Playing user interface}
\label{sec:playing-ui}
In playing interaction mode, the interface will only respond to a
limited number of menu items (load, save, mode-switch, exit) and the
keys that have been connected to gizmos.


\subsubsection{Editor user interface}
\label{sec:editor-ui}

\begin{figure}[h]
  \centering \includegraphics[scale=0.85]{ui}
  \caption{Editor user interface}
  \label{fig:editor-ui}
\end{figure}

The editing interaction mode expands the functions accessible to the
user, revealing new areas of the interface that allow for
modifications to the board.  The load, save, mode-switch, and exit
keys are still available, and the board from the play mode is frozen.

The first set of expanded features in the editing mode is a toolbar
for creating gizmos.  Gizmos can be dragged from the toolbar and
placed onto the board.

To facilitate the transformation of gizmos, a \emph{frobber} menu 
(see Glossary~\ref{sec:glossary}) is applied to the gizmo in focus.  
This method was chosen over the alternative of having tools to perform 
the actions --- rotate, move, delete, set color, connect, etc. --- 
because it improves access time (Fitt's law).  Connections are also 
created using one of the options in the frobber menu interface.  The 
connecting feature supports both click-and-drag and click-and-click 
to indicate the two gizmos involved.  This allows for greater 
flexibility.  One possible problem was the potential confusion
between connecting to a second gizmo, and selecting that gizmo, but
this problem was resolved using modality of the connection creation
method.  This modality is indicated by an arrow from the trigger gizmo
trailing the mouse pointer.

Ball velocity is also set using a frobber menu option.  When the option 
is selected, an arrow appears, with which the user can indicate 
direction and magnitude.  The option snaps to logical values (0, vertical 
and horizontal angles, etc).

All gizmo information for the selected gizmo is displayed in a pane at
the bottom of the screen.  This will contain name, type, color, and
the connections to and from the gizmo.  The property list will be in a
tree form, to allow the information to be better navigable.
Properties can also be set through the list.