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) {Device driver};
        #1
    \end{tikzpicture}
}

\def\fulldiagram{
    \begin{figure}[h!]
        \center
        \architecture{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {device-specific messages} (driver);
            \node[block, below of=eventdriver] (area) {Event areas}
                edge[linefrom] node[right] {1} (eventdriver);
            \node[block, right of=area, xshift=7em] (tracker) {Gesture trackers}
                edge[linefrom, bend right=10] node[below=2pt] {2} (area)
                edge[lineto, bend left=10, dotted] (area);
            \node[block, below of=area] {Application}
                edge[linefrom, dotted] node[right, near start] {3} (area);

            \group{eventdriver}{eventdriver}{tracker}{area}{Architecture}
        }
        \caption{
            Components of the architecture design. The \emph{event driver}
            translates device-specific messages to low-level ``events''. These
            events are delegated to a number of \emph{event areas} (1), which
            restrict events to an area on the screen. \emph{Gesture trackers}
            translate low-level events to high-level ``gestures'' (2), which
            are handled by the application (3). Dotted arrows represent a flow
            of gestures, regular arrows represent events (unless labeled
            otherwise).
        }
        \label{fig:fulldiagram}
    \end{figure}
}

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

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

                \node[block, below of=eventdriver] (areas) {Event areas}
                    edge[linefrom] (eventdriver)
                    edge[linefrom] node[right=5pt] {events} (secondeventdriver);
                \node[block, right of=area, xshift=7em] (tracker) {Gesture trackers}
                    edge[linefrom, bend right=10] (areas)
                    edge[lineto, bend left=10, dotted] (areas);
                \node[block, below of=areas] {Application}
                    edge[linefrom, dotted] node[right, near start] {gestures} (areas);

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

\def\examplediagram{
    \begin{figure}[h!]
        \center
        \architecture{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {device-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 driver
            delegates the event to the event area tree (1) and the gray root
            area delegates it to the white area (2). The white area delegates
            it to drag tracker for gesture detection (3), which may trigger a
            gesture in the application (4-5). If propagation has not been
            stopped by the drag tracker, the event is propagated to the gray
            event area (6) which also detects drag gestures that may be
            triggered in the application (7-9).
        ]{
            \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] {drag 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] {drag 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, but outside the white area.
            The event driver delegates the event to the gray event area (1).
            Since the white area does not contain the event, delegation stops
            and the event is passed on to the drag tracker of the gray event
            area (2). If a gesture is detected (3), the event area triggers the
            corresponding handler in the application (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.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] {drag tracker};
                \draw node[block, right of=gray, xshift=4em] {drag 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 respond to ``drag'' gestures. When the
            white square is dragged, the gray square stays at its current
            position. The two figures both show a touch object triggering an
            event, represented by a black dot. The event is delegated and
            propagated through the event area tree in the order indicated by
            the numbered arrow labels.  Dotted arrows represent a flow of
            gestures, regular arrows represent events.
        }
        \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{
            \tikzstyle{area} = [block, fill=gray!15];
            \tikzstyle{tracker} = [block, draw=gray!50, text width=7em];
            \tikzstyle{left} = [xshift=-5em];
            \tikzstyle{right} = [xshift=5em];

            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {device-specific messages} (driver);

            \node[area, below of=eventdriver] (rootarea) {Screen area}
                edge[linefrom] (eventdriver);

            \node[area, below of=rootarea, left] (appwindow) {Application window area}
                edge[lineto, <->] (rootarea);
            \node[tracker, left of=appwindow, xshift=-4em, yshift=3em] {Transformation tracker}
                edge[linefrom, bend right=10] (appwindow)
                edge[lineto, dotted, bend left=10] (appwindow);
            \node[tracker, left of=appwindow, xshift=-4em, yshift=-1em] {Tap tracker}
                edge[lineto, dotted, bend right=10] (appwindow)
                edge[linefrom, bend left=10] (appwindow);

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

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

            \node[area, below of=appwindow, right] (triangle) {Triangle area}
                edge[lineto, <->] (appwindow);
            \node[tracker, right of=triangle, xshift=4em, yshift=2em] {Transformation tracker}
                edge[lineto, dotted, bend right=10] (triangle)
                edge[linefrom, bend left=10] (triangle);
            \node[tracker, right of=triangle, xshift=4em, yshift=-2em] (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
            application window area has a ``tap tracker'' to detect double tap
            events. The rectangle and triangle also have a tap tracker that
            detects regular tap events. These stop event propagation to the
            application window area. Dotted arrows represent a flow of
            gestures, regular arrows represent events (unless labeled
            otherwise).
        }
        \label{fig:testappdiagram}
    \end{figure}
}

\def\transformationtracker{
    \begin{figure}[h!]
        \center
        \tikzstyle{centroid} = [draw, shape=circle, minimum width=1.5em, fill]
        \tikzstyle{finger} = [draw, shape=circle, minimum width=1.5em, fill=white]
        \tikzstyle{prev} = [opacity=0.3]
        \subfigure[
            Initial situation: three touch points are positioned on the touch
            surface.
        ]{
            \begin{tikzpicture}
                \node [centroid] (centroid) at (0.33, -1) {};
                \node [finger] (A) at (-1, -3) {} edge (centroid);
                \node [finger] (B) at (0, 2) {} edge (centroid);
                \node [finger] (C) at (2, -2) {} edge (centroid);
            \end{tikzpicture}
        }
        \quad
        \subfigure[
            One of the touchpoints is moved, triggering a \emph{point\_move}
            event. The ratio $d_2:d_1$ is used for a \emph{pinch} gesture, and
            the difference in angle $\alpha$ is used for a \emph{rotate}
            gesture.
        ]{
            \begin{tikzpicture}
                \node [centroid] (centroid) at (0.33, -1) {};
                \node [finger] (A) at (-1, -3) {} edge (centroid);
                \node [finger, prev] (B') at (90:2) {}
                    edge [prev] node [right, opacity=1] {$d_1$} (centroid);
                \node [finger] (B) at (110:1.8) {} edge node [left] {$d_2$} (centroid);
                \node [finger] (C) at (2, -2) {} edge (centroid);
                \draw [->] (87:1) arc (92:113:1);
                \node [] at (96:0.8) {$\alpha$};
            \end{tikzpicture}
            \label{fig:pinchrotate}
        }
        \quad
        \subfigure[
            The new centroid is calculated. The movement of the centroid is
            used for a \emph{drag} gesture.
        ]{
            \begin{tikzpicture}
                \node [centroid, prev] (centroid') at (0.33, -1) {};
                \node [centroid] (centroid) at (0.12, -1.) {};
                \node [finger] (A) at (-1, -3) {} edge (centroid) edge [prev] (centroid');
                \node [finger, prev] (B') at (90:2) {} edge [prev] (centroid');
                \node [finger] (B) at (110:1.8) {} edge (centroid);
                \node [finger] (C) at (2, -2) {} edge (centroid) edge [prev] (centroid');
            \end{tikzpicture}
        }
        \caption{
            Example transformation using three touch points.
        }
        \label{fig:transformationtracker}
    \end{figure}
}