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}
A first sketch of how we want \appname to look is shown in figure~\ref{fig:sketch}.
The current development status is displayed in figure~\ref{fig:full-application-example}.
Another example graph and an explanation of the shapes and colors is provided in figure~\ref{fig:example}.
Figure~\ref{fig:originalpapergraph} compares our results to those of Brandes and Köpf~\cite{brandes_fast_2001}.

\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}

\begin{figure}[htp]
    \centering
    \includegraphics[width=\linewidth]{img/full-application-example}
    \caption[Full application window]{The full window of the application before any steps of the algorithm have been executed.
    The displayed graph has been loaded from figure~\ref{fig:json-example}.}
    \label{fig:full-application-example}
\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 red nodes on the upper 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 associated 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 in black color.
    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}
    \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 (third column), upper (first row) and lower (third row), respectively.
        The balanced layout is in the center.}
        \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}


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

\begin{table}[htp]
    \begin{longtable}{|l|p{10cm}|}
        \hline
        Key & Action \\\hline\hline
        Alt + Left arrow key & Perform one forward step of the algorithm, \enquote{step into}. \\\hline
        Alt + Right arrow key & Perform one \enquote{step into} in backwards direction---i.e.\ undo one step of the algorithm. \\\hline
        Alt + Up arrow key & Perform one \enquote{step over} in backwards direction. \\\hline
        Alt + Down arrow key & Perform one \enquote{step over} in forwards direction. \\\hline
        Alt + Page down & Perform one \enquote{step out} in forwards direction. \\\hline
        Alt + Page up & Perform one \enquote{step out} in backwards direction. \\\hline
        Alt + P & Activate forwards automatic execution. \\\hline
        Alt + R & Activate backwards automatic execution. \\\hline
        Alt + Pause & Pause automatic execution. \\\hline
        Alt + G & Generate a random graph (opens a dialog window). \\\hline
        Alt + S & Save the current graph to a file (opens a dialog window). \\\hline
        Alt + L & Load a graph from a file (opens a dialog window). \\\hline
        Alt + D & Show a debug table (in a new window). \\\hline
    \end{longtable}
    \caption[Overview of the available keyboard commands]{Overview of the available keyboard commands. For the planned commands, see~\ref{ch:progress}.}
    \label{table:keys}
\end{table}