|
@@ -6,23 +6,27 @@ The current development status is displayed in figure~\ref{fig:full-application-
|
|
|
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 over, step back into, step back out, run backwards, load graph, save graph, generate random graph.
|
|
|
- Currently a button to open the preferences dialog is located in the second row at the empty position.
|
|
|
- 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 (all of them).
|
|
|
- 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}
|
|
|
+Some features that are not visible from the screenshots:
|
|
|
+\begin{itemize}
|
|
|
+ \item Hovering the mose over a node highlights it in all layouts.
|
|
|
+ \item It is possible to configure the view to only show the extremal layout the algorithm is currently working on.
|
|
|
+ This can be helpful when working with large graphs on small screens.
|
|
|
+ \item Tooltips are shown when hovering over code lines and nodes in the graph,
|
|
|
+ These tooltips show the state of the variables.
|
|
|
+ \item The display scales with the size of the window.
|
|
|
+\end{itemize}
|
|
|
+
|
|
|
+To avoid clutter we do not draw the edges of the block graph.
|
|
|
|
|
|
\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}.}
|
|
|
+ The displayed graph has been loaded from figure~\ref{fig:json-example}.
|
|
|
+ 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 over, step back into, step back out, run backwards, preferences, load graph, save graph, generate random graph.
|
|
|
+ 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 (all of them).
|
|
|
+ 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:full-application-example}
|
|
|
\end{figure}
|
|
|
|
|
@@ -37,7 +41,8 @@ Figure~\ref{fig:originalpapergraph} compares our results to those of Brandes and
|
|
|
The background color of a node indicates the class that this node belongs to.
|
|
|
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.
|
|
|
- If any edge was marked as conflicted, it would have been drawn in red color.}
|
|
|
+ If any edge was marked as conflicted, it would have been drawn in red color.
|
|
|
+ To provide this information to the user at runtime a legend has been added, which is visible in figure~\ref{fig:full-application-example}}.
|
|
|
\label{fig:example}
|
|
|
\end{figure}
|
|
|
|
|
@@ -66,36 +71,37 @@ Figure~\ref{fig:originalpapergraph} compares our results to those of Brandes and
|
|
|
\section{User interface}\label{sec:userInterface}
|
|
|
Currently the two main ways to interact with the application are keyboard events and graphical button-clicking.
|
|
|
The possible keyboard inputs are listed in table~\ref{table:keys}.
|
|
|
-These can also be used by clicking on one of the buttons displayed in figures~\ref{fig:sketch} and~\ref{fig:full-application-example}.
|
|
|
+To improve the user experience even further, these can also be used by clicking on one of the buttons displayed in figure~\ref{fig:full-application-example}.
|
|
|
+
|
|
|
+\begin{longtable}{|l|p{12cm}|}
|
|
|
+ \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 automatic forwards execution. \\\hline
|
|
|
+ Alt + R & Activate automatic backwards execution. \\\hline
|
|
|
+ Alt + Pause & Pause automatic execution. \\\hline
|
|
|
+ Alt + G & Generate a random graph (opens dialog window~\ref{fig:random-graph-dialog}).
|
|
|
+ Ensures that the generated graph is connected.\\\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 (opens window~\ref{fig:debug-table}) and also printlines its content. \\\hline
|
|
|
+ Alt + O & Opens the preferences dialog~\ref{fig:preferences}. \\\hline
|
|
|
+ \caption[Overview of the available keyboard commands]{Overview of the available keyboard commands.
|
|
|
+ The lazy user might not want to learn these by rote but instead use the buttons displayed in figure~\ref{fig:full-application-example}.}
|
|
|
+ \label{table:keys}
|
|
|
+\end{longtable}
|
|
|
|
|
|
-%\begin{table}[htp]
|
|
|
- \begin{longtable}{|l|p{12cm}|}
|
|
|
- \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 automatic forwards execution. \\\hline
|
|
|
- Alt + R & Activate automatic backwards execution. \\\hline
|
|
|
- Alt + Pause & Pause automatic execution. \\\hline
|
|
|
- Alt + G & Generate a random graph (opens dialog window~\ref{fig:random-graph-dialog}).
|
|
|
- Ensures that the generated graph is connected.\\\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 (opens window~\ref{fig:debug-table}) and also printlines its content. \\\hline
|
|
|
- Alt + O & Opens the preferences dialog~\ref{fig:preferences}. \\\hline
|
|
|
- \caption[Overview of the available keyboard commands]{Overview of the available keyboard commands.
|
|
|
- The lazy user might not want to learn these by rote but instead use the buttons displayed in figures~\ref{fig:sketch} and~\ref{fig:full-application-example}.}
|
|
|
- \label{table:keys}
|
|
|
- \end{longtable}
|
|
|
-%\end{table}
|
|
|
+The decision to open new windows was made to save room in each single window.
|
|
|
+For example the fields for generating a random graph are rarely used, so the were chosen to be displayed in a separate dialog when needed.
|
|
|
|
|
|
-One interaction that is available neither on keyboard nor on a button is setting breakpoints.
|
|
|
-For this, the user performs a triple click on one of the lines in the pseudocode.
|
|
|
-Upon reaching the beginning of that stage (beginning in running direction) the automatic execution pauses.
|
|
|
+There is one interaction that is available neither on keyboard nor on a button: Breakpoints.
|
|
|
+For this, the user performs a triple click on one of the lines in the pseudocode or a single click on one of the line numbers.
|
|
|
+Upon reaching the beginning of that stage (beginning in forwards direction) the automatic execution pauses.
|
|
|
Imagine the following scenario:
|
|
|
\begin{enumerate}
|
|
|
\item The user starts up \appname.
|
|
@@ -104,6 +110,5 @@ Imagine the following scenario:
|
|
|
\item The algorithm pauses when reaching the first step of \enquote{Extremal Layout: leftmost lower}.
|
|
|
\item The user activates automatic forwards execution again.
|
|
|
\item After the stage of \enquote{Extremal Layout: leftmost lower} is roughly halfway finished, the user pauses the automatic execution and activates automatic \emph{backwards} execution.
|
|
|
- \item The algorithm would stop at the last step of \enquote{Extremal Layout: leftmost lower} (which is the first step in backwards direction), but this is obviously not reached from the middle of that stage.
|
|
|
- So the algorithm just runs backwards to the beginning of whole BK Node Placement Algorithm (first step of the preprocessing).
|
|
|
+ \item The algorithm stops again, when it reaches the beginning of the stage.
|
|
|
\end{enumerate}
|