% 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 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. 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{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {device-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}
}