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}
\pgfdeclarelayer{background}
\pgfdeclarelayer{foreground}
\pgfsetlayers{background,main,foreground}  % Layer order
\newcommand{\grouppadding}{0.5}
\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}
}

\newcommand{\basicdiagram}[1]{
    \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{#1}
        \label{fig:basicdiagram}
    \end{figure}
}

\newcommand{\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}
}

\newcommand{\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}
}

\newcommand{\areadiagram}[1]{
    \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{#1}
        \label{fig:areadiagram}
    \end{figure}
}

\newcommand{\trackerdiagram}[1]{
    \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{#1}
        \label{fig:trackerdiagram}
    \end{figure}
}

\newcommand{\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}
}

\newcommand{\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) {};
            \draw node[draw=black!80, diamond, minimum height=50, minimum width=50] 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}
}

\newcommand{\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}
}

\newcommand{\examplefigurethree}{
    \begin{figure}[h]
        \center
        \begin{tikzpicture}
            \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) {};
        \end{tikzpicture}
        \caption{Two overlapping squares that listen to rotation. When the
        white square is rotated, the gray square should keep its current
        orientation and vice-versa.}
        \label{fig:ex3}
    \end{figure}
}

\newcommand{\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=5] {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=5] {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}
}