Jelajahi Sumber

add some ui images

Eren Yilmaz 7 tahun lalu
induk
melakukan
2f2a23ed3a
4 mengubah file dengan 32 tambahan dan 1 penghapusan
  1. 32 1
      doc/chapter/3ui.tex
  2. TEMPAT SAMPAH
      doc/img/bk-example-ours.jpg
  3. TEMPAT SAMPAH
      doc/img/bk-example-theirs.png
  4. TEMPAT SAMPAH
      doc/img/skizze.png

+ 32 - 1
doc/chapter/3ui.tex

@@ -3,9 +3,31 @@ Note that since the application is still under construction, so not all screensh
 \section{Graphical presentation of the running algorithm}\label{sec:graphicalPresentationOfTheRunningAlgorithm}
 \TODO{under construction}
 \TODO{reference~\ref{fig:animated}}
+\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.5\linewidth]{img/bk-example-ours}
+        \caption[The same graph as displayed by our \appname.]{The same graph as displayed by our \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 of the implementation with the algorithm from the original paper.}
+    \label{fig:originalpapergraph}
+\end{figure}
+
 \begin{figure}[tp]
     \centering
-    \includegraphics[width=0.6\linewidth]{img/example.jpg}
+    \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.
@@ -16,6 +38,15 @@ Note that since the application is still under construction, so not all screensh
     \label{fig:animated}
 \end{figure}
 
+\begin{figure}[tp]
+    \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 will be the same as described for the keyboard input in table~\ref{table:keys}, at least for the features that are already implemented.}
+    \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}.

TEMPAT SAMPAH
doc/img/bk-example-ours.jpg


TEMPAT SAMPAH
doc/img/bk-example-theirs.png


TEMPAT SAMPAH
doc/img/skizze.png