multitouch/docs/data/diagrams.tex

% Define node group background
% The first 4 arguments are nodes that define the group borders in (left,
% top, right, bottom) order, the last argument is a text label
\usetikzlibrary{shapes,arrows,positioning}
\pgfdeclarelayer{background}
\pgfdeclarelayer{foreground}
\pgfsetlayers{background,main,foreground}  % Layer order
\newcommand{\group}[5]{
    \begin{pgfonlayer}{background}
        % Left top corner
        \path (#1.west |- #2.north)+(-0.7, 0.7)
            node (lefttop) {};
        % Right bottom corner
        \path (#3.east |- #4.south)+(0.7, -0.4)
            node (rightbottom) {};
        % Draw rectangle
        \path[draw, rounded corners, dashed] (lefttop) rectangle (rightbottom);
        % Text label
        \path (rightbottom.west |- lefttop.south)+(-1.2, -0.3) node {\emph{#5}};
    \end{pgfonlayer}
}
\tikzstyle{block} = [
    rectangle,
    draw=black,
    fill=white,
    thick,
    minimum height=2em,
    text centered,
    rounded corners,
    text width=6em
]
\tikzstyle{lineto} = [
    ->,
    thick,
    shorten <= 2pt,
    shorten >= 2pt
]
\tikzstyle{linefrom} = [
    <-,
    thick,
    shorten <= 2pt,
    shorten >= 2pt
]
\newcommand{\architecture}[1]{
    \begin{tikzpicture}[node distance=6em, auto]
        \node[block] (driver) {Driver};
        #1
    \end{tikzpicture}
}

\def\basicdiagram{
    \begin{figure}[h]
        \center
        \architecture{
            \node[block, dashed, below of=driver] (arch) {Architecture}
                edge[linefrom] node[right] {driver-specific messages} (driver);
            \node[block, below of=arch] {Application}
                edge[linefrom] node[right] {gestures} (arch);
        }
        \caption{A diagram showing the position of the architecture relative to
        the device driver and a multi-touch application. The input of the
        architecture is given by a touch device driver. The output is
        translated to complex interaction gestures and passed to the
        application that is using the architecture.}
        \label{fig:basicdiagram}
    \end{figure}
}

\def\driverdiagram{
    \begin{figure}[H]
        \center
            \architecture{
                \node[block, below of=driver] (eventdriver) {Event driver}
                    edge[linefrom] node[right, near end] {driver-specific messages} (driver);
                \node[block, below of=eventdriver, dashed] (analysis) {Event analysis}
                    edge[linefrom] node[right] {events} (eventdriver);
                \node[block, below of=analysis] {Application}
                    edge[linefrom] node[right, near start] {gestures} (analysis);

                \node[right of=eventdriver, xshift=2em] (dummy) {};
                \group{eventdriver}{eventdriver}{dummy}{analysis}{Architecture}
            }
            \caption{Extension of the diagram from figure \ref{fig:basicdiagram},
            showing the position of the event driver in the architecture. The
            event driver translates driver-specific to a common set of events,
            which are delegated to analysis components that will interpret them
            as more complex gestures.}
            \label{fig:driverdiagram}
    \end{figure}
}

\def\multipledriversdiagram{
    \begin{figure}[H]
        \center
            \begin{tikzpicture}[node distance=6em]
                \node[block] (driver) {Driver};
                \node[block, below of=driver] (eventdriver) {Event driver}
                    edge[linefrom] (driver);

                \node[block, right of=driver, xshift=2em] (seconddriver) {Driver};
                \node[block, below of=seconddriver] (secondeventdriver) {Event driver}
                    edge[linefrom] node[right, near end] {driver-specific messages} (seconddriver);

                \node[block, below of=eventdriver, dashed] (analysis) {Event analysis}
                    edge[linefrom] (eventdriver)
                    edge[linefrom] node[right=5] {events} (secondeventdriver);
                \node[block, below of=analysis] {Application}
                    edge[linefrom] node[right, near start] {gestures} (analysis);

                \node[right of=seconddriver, xshift=2em] (dummy) {};
                \group{eventdriver}{eventdriver}{dummy}{analysis}{Architecture}
            \end{tikzpicture}
            \caption{Multiple event drivers running simultaneously.}
            \label{fig:multipledrivers}
    \end{figure}
}

\def\areadiagram{
    \begin{figure}[h]
        \center
        \architecture{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {driver-specific messages} (driver);
            \node[block, below of=eventdriver] (area) {Areas}
                edge[linefrom] node[right] {events} (eventdriver);
            \node[block, right of=area, xshift=7em, dashed] (analysis) {Gesture detection}
                edge[linefrom, bend right=10] node[above] {events} (area)
                edge[lineto, bend left=10] node[] {gestures} (area);
            \node[block, below of=area] {Application}
                edge[linefrom] node[right, near start] {gestures} (area);

            \group{eventdriver}{eventdriver}{analysis}{area}{Architecture}
        }
        \caption{Extension of the diagram from figure \ref{fig:driverdiagram},
        showing the position of areas in the architecture. An area delegate
        events to a gesture detection component that trigger gestures. The area
        then calls the handler that is bound to the gesture type by the
        application.}
        \label{fig:areadiagram}
    \end{figure}
}

\def\trackerdiagram{
    \begin{figure}[h]
        \center
        \architecture{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {driver-specific messages} (driver);
            \node[block, below of=eventdriver] (area) {Area tree}
                edge[linefrom] node[right] {events} (eventdriver);
            \node[block, right of=area, xshift=7em] (tracker) {Gesture trackers}
                edge[linefrom, bend right=10] node[above] {events} (area)
                edge[lineto, bend left=10] node[] {gestures} (area);
            \node[block, below of=area] {Application}
                edge[linefrom] node[right, near start] {gestures} (area);

            \group{eventdriver}{eventdriver}{tracker}{area}{Architecture}
        }
        \caption{Extension of the diagram from figure \ref{fig:areadiagram},
        showing the position of gesture trackers in the architecture.}
        \label{fig:trackerdiagram}
    \end{figure}
}

\def\examplediagram{
    \begin{figure}[h!]
        \center
        \architecture{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {driver-specific messages} (driver);

            \node[block, below of=eventdriver] (rootarea) {Root area}
                edge[linefrom] (eventdriver);
            \node[block, right of=rootarea, xshift=4em] {\emph{pinch} tracker}
                edge[lineto, dotted, bend left=10] (rootarea)
                edge[linefrom, bend right=10] (rootarea);

            \node[block, below of=rootarea, xshift=-5em] (circlearea) {Circular area}
                edge[linefrom] (rootarea)
                edge[lineto, bend left=25] (rootarea);
            \node[block, left of=circlearea, xshift=-4em] (dragtracker) {\emph{drag} tracker}
                edge[lineto, dotted, bend right=10] (circlearea)
                edge[linefrom, bend left=10] (circlearea);

            \node[block, below of=rootarea, xshift=5em] (subarea) {Button area}
                edge[linefrom] (rootarea)
                edge[lineto, bend right=25] (rootarea);
            \node[block, right of=subarea, xshift=4em] (tracker) {\emph{tap} tracker}
                edge[lineto, dotted, bend left=10] (subarea)
                edge[linefrom, bend right=10] (subarea);

            \node[block, below of=rootarea, yshift=-5em] {Application}
                edge[linefrom, dotted] (circlearea)
                edge[linefrom, dotted] (rootarea)
                edge[linefrom, dotted] (subarea);

            \group{dragtracker}{eventdriver}{tracker}{subarea}{Architecture}
        }
        \caption{Diagram representation of an extended example, showing the
        flow of events and gestures in the architecture. The root area represents
        an application windows that can be resized using \emph{pinch} gestures.
        The window contains a draggable circle, and a button that listens to
        \emph{tap} gestures. Dotted arrows represent a flow of gestures, regular
        arrows represent events (unless labeled otherwise).}
        \label{fig:examplediagram}
    \end{figure}
}

\def\lefthand{\includegraphics[width=50pt]{data/hand.png}}
\def\righthand{\reflectbox{\includegraphics[width=50pt, angle=-45]{data/hand.png}}}

\def\examplefigureone{
    \begin{figure}[h]
        \center
        % TODO: draw finger touch points as circles with rotating arrow
        \begin{tikzpicture}
            \draw node[draw, black, minimum width=190, minimum height=140] at (0,0) {};
            \draw node[fill=gray!50, draw=black!70, minimum height=40, minimum width=40] at (-1,-1) {\lefthand};
            \draw node[] at (1.2,1) {\righthand};
            \draw node[draw=black!80, diamond, minimum height=70, minimum width=70] at (1.2,1) {};
        \end{tikzpicture}
        \caption{Two squares on the screen both listen to rotation.  The user
        should be able to ``grab'' each of the squares independently and rotate
        them at the same time.}
        \label{fig:ex1}
    \end{figure}
}

\def\examplefiguretwo{
    \begin{figure}[h]
        \center
        \begin{tikzpicture}
            \draw node[draw, black, minimum width=190, minimum height=140] at (0,0) {};
            \draw node[draw=black!80, diamond, minimum height=50, minimum width=50] at (0.5, 0.3) {};

            \draw node[draw=black, diamond, dotted, minimum height=53, minimum width=53] at (0.5, 0.3) {};
            \draw node[draw=black, dotted, circle, minimum height=80, minimum width=80] at (0.5, 0.3) {};

            \fill (-0.3, -0.4) circle (0.15)
                    (-0.4, 0.8) circle (0.15)
                    (-0.1, 1.1) circle (0.15)
                    (1.3, 0.9) circle (0.15);

            \draw (0.15, 0.55) circle (0.15) -- (-0.3, -0.4);
            \draw (0.15, 0.55) -- (-0.4, 0.8);
            \draw (0.15, 0.55) -- (-0.1, 1.1);
            \draw (0.15, 0.55) -- (1.3, 0.9);
        \end{tikzpicture}
        \caption{A square on the screen listens to rotation. The user can grab
        and rotate the square by positioning fingers around (but not in) it and
        and performing a rotating motion. An example pose of four fingers is
        shown by the filled black circles. While the events all occur in the
        dotted \emph{area}, the centroid of the rotation gesture is located in
        the square.}
        \label{fig:ex2}
    \end{figure}
}

\def\eventpropagationfigure{
    \begin{figure}[h!]
        \center
        \vspace{-2em}
        \subfigure[An event is triggered in the white area. The event is first
        delegated to the white area from te gray area (2). After gesture
        detection, it is propagated back to the gray area (6) \emph{unless}
        propagation has been stopped in the gesture tracker between (3) and (4).]{
            \begin{tikzpicture}[node distance=5.5em]
                \draw node[draw=black, minimum width=190, minimum height=140] (screen) at (0,0) {};
                \draw node[fill=gray!50, draw=black!70, minimum height=100, minimum width=100] (screen) at (-0.1,-0.1) {};
                \draw node[fill=white, draw=black!80, diamond, minimum height=50, minimum width=50] (screen) at (0.3,0.4) {};
                \fill (0.4, 0.6) circle (0.15);

                \draw node[block, yshift=-10em, xshift=-3em] (driver) {Event driver};
                \draw node[block, below of=driver] (gray) {Gray area}
                    edge[linefrom] node[left] {1} (driver);
                \draw node[block, below of=gray] (white) {White area}
                    edge[linefrom, bend left=15] node[left] {2} (gray)
                    edge[lineto, bend right=15] node[right] {6} (gray);
                \draw node[block, right of=white, xshift=4em] {\emph{rotation} tracker}
                    edge[linefrom, bend right=15] node[above] {3} (white)
                    edge[lineto, dotted, bend left=15] node[below] {4} (white);
                \draw node[block, right of=gray, xshift=4em] {\emph{rotation} tracker}
                    edge[linefrom, bend right=15] node[above] {7} (gray)
                    edge[lineto, dotted, bend left=15] node[below] {8} (gray);
                \draw node[block, below of=white] {Application}
                    edge[linefrom, dotted, bend left=65] node[left] {9} (gray)
                    edge[linefrom, dotted] node[left] {5} (white);
            \end{tikzpicture}
        }
        \quad
        \subfigure[An event is triggered in the gray area, it does not even
        reach the white area.]{
            \begin{tikzpicture}[node distance=5.5em]
                \draw node[draw=black, minimum width=190, minimum height=140] (screen) at (0,0) {};
                \draw node[fill=gray!50, draw=black!70, minimum height=100, minimum width=100] (screen) at (-0.1,-0.1) {};
                \draw node[fill=white, draw=black!80, diamond, minimum height=50, minimum width=50] (screen) at (0.3,0.4) {};
                \fill (-0.5, -0.7) circle (0.15);

                \draw node[block, yshift=-10em, xshift=-3em] (driver) {Event driver};
                \draw node[block, below of=driver] (gray) {Gray area}
                    edge[linefrom] node[left] {1} (driver);
                \draw node[block, below of=gray] (white) {White area};
                \draw node[block, right of=white, xshift=4em] {\emph{rotation} tracker};
                \draw node[block, right of=gray, xshift=4em] {\emph{rotation} tracker}
                    edge[linefrom, bend right=15] node[above] {2} (gray)
                    edge[lineto, dotted, bend left=15] node[below] {3} (gray);
                \draw node[block, below of=white] {Application}
                    edge[linefrom, dotted, bend left=65] node[left] {4} (gray);
            \end{tikzpicture}
        }
        \caption{Two nested squares both listen to rotation gestures. The two
        figures both show a touch object triggering an event, which is
        delegated through the area tree in the order indicated by the numbered
        arrow labels. Normal arrows represent events, dotted arrows represent
        gestures. Note that the dotted arrows only represent the path a gesture
        would travel in the tree \emph{if triggered}, not an actual triggered
        gesture.}
        \label{fig:eventpropagation}
    \end{figure}
}

\def\daemondiagram{
    \begin{figure}[h!]
        \centering
        \begin{tikzpicture}[node distance=4em]
            \node[block] (daemon) {Daemon};

            \node[block, above of=daemon] (driver) {Device driver}
                edge[lineto] (daemon);
            \node[block, xshift=-4em, left of=driver] {Device driver}
                edge[lineto] (daemon);
            \node[block, xshift=4em, right of=driver] {Device driver}
                edge[lineto] (daemon);

            \node[block, below of=daemon] (app) {Application}
                edge[linefrom, dotted] (daemon);
            \node[block, xshift=-4em, left of=app] {Application}
                edge[linefrom, dotted] (daemon);
            \node[block, xshift=4em, right of=app] {Application}
                edge[linefrom, dotted] (daemon);

            \draw[dashed] (app.north)+(-4, 0.35) -- node[right=4, yshift=1] {Network protocol} ++(4, 0.35);
        \end{tikzpicture}
        \caption{Daemon setup of an architecture implementation, serving
        gestures to multiple applications at the same time.}
        \label{fig:daemon}
    \end{figure}
}