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) {Event 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 through callback function} (area);

            \group{eventdriver}{eventdriver}{analysis}{area}{Architecture}
        }
        \caption{Extension of the diagram from figure \ref{fig:driverdiagram},
        with event areas. An event area delegates events to a gesture detection
        component that triggers a gesture. The event area then calls the
        handlers that are 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) {Event 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}
        with gesture trackers. Gesture trackers analyze detect high-level
        gestures from low-level events.}
        \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 window 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
        \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 rotation detection component
        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 event area}
                    edge[linefrom] node[left] {1} (driver);
                \draw node[block, below of=gray] (white) {White event 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] {rotation detection}
                    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] {rotation detection}
                    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 event area, it does not even
        reach the white event 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 event area}
                    edge[linefrom] node[left] {1} (driver);
                \draw node[block, below of=gray] (white) {White event area};
                \draw node[block, right of=white, xshift=4em] {rotation detection};
                \draw node[block, right of=gray, xshift=4em] {rotation detection}
                    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 event 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}
}

\def\testappdiagram{
    \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) {Screen area}
                edge[linefrom] (eventdriver);

            \node[block, below of=rootarea, xshift=-5em] (appwindow) {Application window area}
                edge[lineto, <->] (rootarea);
            \node[block, left of=appwindow, xshift=-4em, text width=7em] {Transformation tracker}
                edge[lineto, dotted, bend right=10] (appwindow)
                edge[linefrom, bend left=10] (appwindow);

            \node[block, below of=rootarea, xshift=5em] (overlay) {Overlay area}
                edge[lineto, <->] (rootarea);
            \node[block, right of=overlay, xshift=4em] (tracker) {Hand tracker}
                edge[lineto, dotted, bend left=10] (overlay)
                edge[linefrom, bend right=10] (overlay);

            \node[block, below of=appwindow, xshift=-5em] (rectangle) {Rectangle area}
                edge[lineto, <->] (appwindow);
            \node[block, left of=rectangle, xshift=-4em, yshift=2em, text width=7em] (recttracker) {Transformation tracker}
                edge[lineto, dotted, bend left=10] (rectangle)
                edge[linefrom, bend right=10] (rectangle);
            \node[block, left of=rectangle, xshift=-4em, yshift=-2em, text width=7em] {Tap tracker}
                edge[lineto, dotted, bend right=10] (rectangle)
                edge[linefrom, bend left=10] (rectangle);

            \node[block, below of=appwindow, xshift=5em] (triangle) {Triangle area}
                edge[lineto, <->] (appwindow);
            \node[block, right of=triangle, xshift=4em, yshift=2em, text width=7em] {Transformation tracker}
                edge[lineto, dotted, bend right=10] (triangle)
                edge[linefrom, bend left=10] (triangle);
            \node[block, right of=triangle, xshift=4em, yshift=-2em, text width=7em] (taptracker) {Tap tracker}
                edge[lineto, dotted, bend left=10] (triangle)
                edge[linefrom, bend right=10] (triangle);

            \node[block, below of=rootarea, yshift=-12em] {Application}
                edge[linefrom, dotted, bend left=25] (appwindow)
                edge[linefrom, dotted] (rectangle)
                edge[linefrom, dotted] (triangle)
                edge[linefrom, dotted, bend right=25] (overlay);

            \group{recttracker}{eventdriver}{tracker}{taptracker}{Architecture}
        }
        \caption{Diagram representation of the second test application. A full
        screen event area contains an application window and a full screen
        overlay. The application window contains a rectangle and a triangle.
        the application window and its children can be transformed, and thus
        each have ``transformation tracker''. The rectangle and triangle also
        have a ``tap tracker'' that detects double tap gestures. Dotted arrows
        represent a flow of gestures, regular arrows represent events (unless
        labeled otherwise).}
        \label{fig:testappdiagram}
    \end{figure}
}