NodeShuffler/doc/chapter/3ui.tex

Note that since the application is still under construction, so not all screenshots may be up to date.

\section{Graphical presentation of the running algorithm}\label{sec:graphicalPresentationOfTheRunningAlgorithm}
\TODO{under construction}
\TODO{reference~\ref{fig:example}}
\TODO{reference~\ref{fig:originalpapergraph}}
\TODO{reference~\ref{fig:sketch}}

\begin{figure}
    \centering
    \begin{subfigure}{\textwidth}
        \centering
        \includegraphics[width=\linewidth]{img/bk-example-theirs}
        \caption{An example graph directly taken from the paper of Brandes and Köpf~\cite{brandes_fast_2001}.}
        \label{fig:theirs}
    \end{subfigure}\\\vspace{4mm}
    \begin{subfigure}{\textwidth}
        \centering
        \includegraphics[width=0.4\linewidth]{img/bk-example-ours}
        \caption[The same graph as~\ref{fig:theirs}, displayed by \appname.]{The same graph as~\ref{fig:theirs}, displayed by \appname.
        The layouts are leftmost (first column), rightmost (second column), lower (first row) and upper (second row), respectively.}
        \label{fig:ours}
    \end{subfigure}\\\vspace{4mm}
    \caption[Comparison with~\cite{brandes_fast_2001}]{Comparison of the implementation with the results of  Brandes and Köpf~\cite{brandes_fast_2001}}
    \label{fig:originalpapergraph}
\end{figure}

\begin{figure}[htp]
    \centering
    \includegraphics[width=0.6\linewidth]{img/example}
    \caption[A simple graph with 5 nodes]{A simple graph with 5 nodes after the four extremal layout have been computed, but not balanced yet.
    The vertical directions are down (upper row), up (lower row) and the horizontal directions are left (left column) and right (right column).
    The background colors of the nodes display which block they belong to: For example the two blue nodes on the top right are in the same block.
    Round nodes are the roots of the blocks.
    A colored circle on a node indicates the class that this node belongs to and is also the color of the topmost sink in the block graph.
    The node that is currently in the focus of the algorithm (whatever this means for the current stage) is highlighted with a grey square (here the node in the rightmost column on the bottom right).
    Although edges are not drawn during the node placement phase we added them here as straight lines to improve readability.}
    \label{fig:example}
\end{figure}

\begin{figure}[htp]
    \centering
    \includegraphics[width=\linewidth]{img/skizze}
    \caption[First sketch of the planned layout]{A first sketch of the planned layout, created with Microsoft Paint.
    The buttons are (first row, from left to right): step over, step into, step out, run, pause, debug; and (second row, from left to right): step back, step back out, run backwards.
    The actions corresponding to the buttons are the same as described for the keyboard input in table~\ref{table:keys}, at least for the features that are already implemented.
    The left four rectangles show the progress of the four extremal layouts.
    The right rectangle shows pseudocode of the algorithm and the position of the current step.}
    \label{fig:sketch}
\end{figure}


\section{User interface}\label{sec:userInterface}
Currently the only way to interact with the application is by keyboard events.
It is planned to add both additional commands as well as some kind of graphical interface, see chapter~\ref{ch:progress}.
The possible inputs are listed in table~\ref{table:keys}.

\begin{table}[htp]
    \begin{longtable}{|l|l|}
        \hline
        Key & Action \\\hline\hline
        Left arrow key & Perform one forward step of the algorithm. \\\hline
        Right arrow key & Perform one backward step---i.e.\ undo one step of the algorithm. \\\hline
        P & Pause/unpause the automatic execution. Initially paused. \\\hline
        D & Print a debug table to standard out. \\\hline
    \end{longtable}
    \caption{Overview of the currently available keyboard commands.}
    \label{table:keys}
\end{table}