report.tex 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. \documentclass[twoside,openright]{uva-bachelor-thesis}
  2. \usepackage[english]{babel}
  3. \usepackage[utf8]{inputenc}
  4. \usepackage{hyperref,graphicx,float,tikz,subfigure}
  5. % Link colors
  6. \hypersetup{colorlinks=true,linkcolor=black,urlcolor=blue,citecolor=DarkGreen}
  7. % Title Page
  8. \title{A generic architecture for the detection of multi-touch gestures}
  9. \author{Taddeüs Kroes}
  10. \supervisors{Dr. Robert G. Belleman (UvA)}
  11. \signedby{Dr. Robert G. Belleman (UvA)}
  12. \begin{document}
  13. % Title page
  14. \maketitle
  15. \begin{abstract}
  16. % TODO
  17. \end{abstract}
  18. % Set paragraph indentation
  19. \parindent 0pt
  20. \parskip 1.5ex plus 0.5ex minus 0.2ex
  21. % Table of content on separate page
  22. \tableofcontents
  23. \chapter{Introduction}
  24. % TODO: put Qt link in bibtex
  25. Multi-touch devices enable a user to interact with software using intuitive
  26. body gestures, rather than with interaction tools like mouse and keyboard.
  27. With the upcoming use of touch screens in phones and tablets, multi-touch
  28. interaction is becoming increasingly common.The driver of a touch device
  29. provides low-level events. The most basic representation of these low-level
  30. event consists of \emph{down}, \emph{move} and \emph{up} events.
  31. Multi-touch gestures must be designed in such a way, that they can be
  32. represented by a sequence of basic events. For example, a ``tap'' gesture can
  33. be represented as a \emph{down} event that is followed by an \emph{up} event
  34. within a certain time.
  35. The translation process of driver-specific messages to basic events, and events
  36. to multi-touch gestures is a process that is often embedded in multi-touch
  37. application frameworks, like Nokia's Qt \cite{qt}. However, there is no
  38. separate implementation of the process itself. Consequently, an application
  39. developer who wants to use multi-touch interaction in an application is forced
  40. to choose an application framework that includes support for multi-touch
  41. gestures. Moreover, the set of supported gestures is limited by the application
  42. framework. To incorporate some custom event in an application, the chosen
  43. framework needs to provide a way to extend existing multi-touch gestures.
  44. % Hoofdvraag
  45. The goal of this thesis is to create a generic architecture for the support of
  46. multi-touch gestures in applications. To test the design of the architecture, a
  47. reference implementation is written in Python. The architecture should
  48. incorporate the translation process of low-level driver messages to multi-touch
  49. gestures. It should be able to run beside an application framework. The
  50. definition of multi-touch gestures should allow extensions, so that custom
  51. gestures can be defined.
  52. % Deelvragen
  53. To design such an architecture properly, the following questions are relevant:
  54. \begin{itemize}
  55. \item What is the input of the architecture? This is determined by the
  56. output of multi-touch drivers.
  57. \item How can extendability of the supported gestures be accomplished?
  58. % TODO: zijn onderstaande nog relevant? beter omschrijven naar "Design"
  59. % gerelateerde vragen?
  60. \item How can the architecture be used by different programming languages?
  61. A generic architecture should not be limited to be used in only one
  62. language.
  63. \item Can events be used by multiple processes at the same time? For
  64. example, a network implementation could run as a service instead of
  65. within a single application, triggering events in any application that
  66. needs them.
  67. \end{itemize}
  68. % Afbakening
  69. The scope of this thesis includes the design of a generic multi-touch
  70. triggering architecture, a reference implementation of this design, and its
  71. integration into a test case application. To be successful, the design should
  72. allow for extensions to be added to any implementation.
  73. The reference implementation is a Proof of Concept that translates TUIO
  74. messages to some simple touch gestures that are used by a test application.
  75. \section{Structure of this document}
  76. % TODO: pas als thesis af is
  77. \chapter{Related work}
  78. \section{Gesture and Activity Recognition Toolkit}
  79. The Gesture and Activity Recognition Toolkit (GART) \cite{GART} is a
  80. toolkit for the development of gesture-based applications. The toolkit
  81. states that the best way to classify gestures is to use machine learning.
  82. The programmer trains a program to recognize using the machine learning
  83. library from the toolkit. The toolkit contains a callback mechanism that
  84. the programmer uses to execute custom code when a gesture is recognized.
  85. Though multi-touch input is not directly supported by the toolkit, the
  86. level of abstraction does allow for it to be implemented in the form of a
  87. ``touch'' sensor.
  88. The reason to use machine learning is the statement that gesture detection
  89. ``is likely to become increasingly complex and unmanageable'' when using a
  90. set of predefined rules to detect whether some sensor input can be seen as
  91. a specific gesture. This statement is not necessarily true. If the
  92. programmer is given a way to separate the detection of different types of
  93. gestures and flexibility in rule definitions, over-complexity can be
  94. avoided.
  95. % oplossing: trackers. bijv. TapTracker, TransformationTracker gescheiden
  96. \section{Gesture recognition software for Windows 7}
  97. The online article \cite{win7touch} presents a Windows 7 application,
  98. written in Microsofts .NET. The application shows detected gestures in a
  99. canvas. Gesture trackers keep track of stylus locations to detect specific
  100. gestures. The event types required to track a touch stylus are ``stylus
  101. down'', ``stylus move'' and ``stylus up'' events. A
  102. \texttt{GestureTrackerManager} object dispatches these events to gesture
  103. trackers. The application supports a limited number of pre-defined
  104. gestures.
  105. An important observation in this application is that different gestures are
  106. detected by different gesture trackers, thus separating gesture detection
  107. code into maintainable parts.
  108. \section{Processing implementation of simple gestures in Android}
  109. An implementation of a detection architecture for some simple multi-touch
  110. gestures (tap, double tap, rotation, pinch and drag) using
  111. Processing\footnote{Processing is a Java-based development environment with
  112. an export possibility for Android. See also \url{http://processing.org/.}}
  113. can be found found in a forum on the Processing website
  114. \cite{processingMT}. The implementation is fairly simple, but it yields
  115. some very appealing results. The detection logic of all gestures is
  116. combined in a single class. This does not allow for extendability, because
  117. the complexity of this class would increase to an undesirable level (as
  118. predicted by the GART article \cite{GART}). However, the detection logic
  119. itself is partially re-used in the reference implementation of the
  120. generic gesture detection architecture.
  121. \section{Analysis of related work}
  122. The simple Processing implementation of multi-touch events provides most of
  123. the functionality that can be found in existing multi-touch applications.
  124. In fact, many applications for mobile phones and tablets only use tap and
  125. scroll events. For this category of applications, using machine learning
  126. seems excessive. Though the representation of a gesture using a feature
  127. vector in a machine learning algorithm is a generic and formal way to
  128. define a gesture, a programmer-friendly architecture should also support
  129. simple, ``hard-coded'' detection code. A way to separate different pieces
  130. of gesture detection code, thus keeping a code library manageable and
  131. extendable, is to user different gesture trackers.
  132. % FIXME: change title below
  133. \chapter{Design}
  134. % Diagrams are defined in a separate file
  135. \input{data/diagrams}
  136. \section{Introduction}
  137. % TODO: rewrite intro, reference to experiment appendix
  138. This chapter describes a design for a generic multi-touch gesture detection
  139. architecture. The architecture constists of multiple components, each with
  140. a specific set of tasks. Naturally, the design is based on a number of
  141. requirements. The first three sections each describe a requirement, and a
  142. solution that meets the requirement. The following sections show the
  143. cohesion of the different components in the architecture.
  144. To test multi-touch interaction properly, a multi-touch device is required.
  145. The University of Amsterdam (UvA) has provided access to a multi-touch
  146. table from PQlabs. The table uses the TUIO protocol \cite{TUIO} to
  147. communicate touch events. See appendix \ref{app:tuio} for details regarding
  148. the TUIO protocol.
  149. \subsection*{Position of architecture in software}
  150. The input of the architecture comes from some multi-touch device
  151. driver. For example, the table used in the experiments uses the TUIO
  152. protocol. The task of the architecture is to translate this input to
  153. multi-touch gestures that are used by an application, as illustrated in
  154. figure \ref{fig:basicdiagram}. In the course of this chapter, the
  155. diagram is extended with the different components of the architecture.
  156. \basicdiagram{A diagram showing the position of the architecture
  157. relative to the device driver and a multi-touch application.}
  158. \section{Supporting multiple drivers}
  159. The TUIO protocol is an example of a touch driver that can be used by
  160. multi-touch devices. Other drivers do exist, which should also be supported
  161. by the architecture. Therefore, there must be some translation of
  162. driver-specific messages to a common format in the arcitecture. Messages in
  163. this common format will be called \emph{events}. Events can be translated
  164. to multi-touch \emph{gestures}. The most basic set of events is
  165. $\{point\_down, point\_move, point\_up\}$. Here, a ``point'' is a touch
  166. object with only an (x, y) position on the screen.
  167. A more extended set could also contain more complex events. An object can
  168. also have a rotational property, like the ``fiducials'' type in the TUIO
  169. protocol. This results in $\{point\_down, point\_move,\\point\_up,
  170. object\_down, object\_move, object\_up, object\_rotate\}$.
  171. The component that translates driver-specific messages to events, is called
  172. the \emph{event driver}. The event driver runs in a loop, receiving and
  173. analyzing driver messages. The event driver that is used in an application
  174. is dependent of the support of the multi-touch device.
  175. When a sequence of messages is analyzed as an event, the event driver
  176. delegates the event to other components in the architecture for translation
  177. to gestures.
  178. \driverdiagram{Extension of the diagram from figure \ref{fig:basicdiagram},
  179. showing the position of the event driver in the architecture.}
  180. \section{Restricting gestures to a screen area}
  181. An application programmer should be able to bind a gesture handler to some
  182. element on the screen. For example, a button tap\footnote{A ``tap'' gesture
  183. is triggered when a touch object releases the screen within a certain time
  184. and distance from the point where it initially touched the screen.} should
  185. only occur on the button itself, and not in any other area of the screen. A
  186. solution to this program is the use of \emph{widgets}. The button from the
  187. example can be represented as a rectangular widget with a position and
  188. size. The position and size are compared with event coordinates to
  189. determine whether an event should occur within the button.
  190. \subsection*{Widget tree}
  191. A problem occurs when widgets overlap. If a button in placed over a
  192. container and an event occurs occurs inside the button, should the
  193. button handle the event first? And, should the container receive the
  194. event at all or should it be reserved for the button?.
  195. The solution to this problem is to save widgets in a tree structure.
  196. There is one root widget, whose size is limited by the size of the
  197. touch screen. Being the leaf widget, and thus the widget that is
  198. actually touched when an object touches the device, the button widget
  199. should receive an event before its container does. However, events
  200. occur on a screen-wide level and thus at the root level of the widget
  201. tree. Therefore, an event is delegated in the tree before any analysis
  202. is performed. Delegation stops at the ``lowest'' widget in the three
  203. containing the event coordinates. That widget then performs some
  204. analysis of the event, after which the event is released back to the
  205. parent widget for analysis. This release of an event to a parent widget
  206. is called \emph{propagation}. To be able to reserve an event to some
  207. widget or analysis, the propagation of an event can be stopped during
  208. analysis.
  209. % TODO: insprired by JavaScript DOM
  210. % TODO: add GTK to bibliography
  211. Many GUI frameworks, like GTK \cite{GTK}, also use a tree structure to
  212. manage their widgets. This makes it easy to connect the architecture to
  213. such a framework. For example, the programmer can define a
  214. \texttt{GtkTouchWidget} that synchronises the position of a touch
  215. widget with that of a GTK widget, using GTK signals.
  216. \subsection*{Callbacks}
  217. \label{sec:callbacks}
  218. When an event is propagated by a widget, it is first used for event
  219. analysis on that widget. The event analysis can then trigger a gesture
  220. in the widget, which has to be handled by the application. To handle a
  221. gesture, the widget should provide a callback mechanism: the
  222. application binds a handler for a specific type of gesture to a widget.
  223. When a gesture of that type is triggered after event analysis, the
  224. widget triggers the callback.
  225. \subsection*{Position of widget tree in architecture}
  226. \widgetdiagram{Extension of the diagram from figure
  227. \ref{fig:driverdiagram}, showing the position of widgets in the
  228. architecture.}
  229. \section{Event analysis}
  230. The events that are delegated to widgets must be analyzed in some way to
  231. from gestures. This analysis is specific to the type of gesture being
  232. detected. E.g. the detection of a ``tap'' gesture is very different from
  233. detection of a ``rotate'' gesture. The \cite[.NET
  234. implementation]{win7touch} separates the detection of different gestures
  235. into different \emph{gesture trackers}. This keeps the different pieces of
  236. detection code managable and extandable. Therefore, the architecture also
  237. uses gesture trackers to separate the analysis of events. A single gesture
  238. tracker detects a specific set of gesture types, given a sequence of
  239. events. An example of a possible gesture tracker implementation is a
  240. ``transformation tracker'' that detects rotation, scaling and translation
  241. gestures.
  242. \subsection*{Assignment of a gesture tracker to a widget}
  243. As explained in section \ref{sec:callbacks}, events are delegated from
  244. a widget to some event analysis. The analysis component of a widget
  245. consists of a list of gesture trackers, each tracking a specific set of
  246. gestures. No two trackers in the list should be tracking the same
  247. gesture type.
  248. When a handler for a gesture is ``bound'' to a widget, the widget
  249. asserts that it has a tracker that is tracking this gesture. Thus, the
  250. programmer does not create gesture trackers manually. Figure
  251. \ref{fig:trackerdiagram} shows the position of gesture trackers in the
  252. architecture.
  253. \trackerdiagram{Extension of the diagram from figure
  254. \ref{fig:widgetdiagram}, showing the position of gesture trackers in
  255. the architecture.}
  256. \section{Nog iets hier met example diagrams...}
  257. % TODO
  258. \section{Example usage}
  259. This section describes an example that illustrates the API of the
  260. architecture. The example application listens to tap events in a GUI
  261. window.
  262. \begin{verbatim}
  263. # Add a new window to the server, representing the GUI
  264. widget = new rectangular Widget object
  265. set widget position and size to that of the GUI window
  266. # If the GUI toolkit allows it, bind window movement and resize handlers
  267. # that alter the position size and sieze of the window object
  268. # Create an event server that will be started later
  269. server = new EventServer object
  270. set widget as root widget for server
  271. # Define a handler that must be triggered when a tap gesture is detected
  272. begin function handler(gesture)
  273. # Do something
  274. end function
  275. # Bind the handler to the 'tap' event (the widget creates a tap tracker)
  276. bind ('tap', handler) to widget
  277. # Start event server (which in turn starts a driver-specific event server)
  278. start server
  279. \end{verbatim}
  280. \chapter{Test applications}
  281. % TODO
  282. % testprogramma's met PyGame
  283. %\chapter{Conclusions}
  284. % TODO
  285. % Windows zijn een manier om globale events toe te wijzen aan vensters
  286. % Trackers zijn een effectieve manier om gebaren te detecteren
  287. % Trackers zijn uitbreidbaar door object-orientatie
  288. \chapter{Suggestions for future work}
  289. % TODO
  290. % geruik formele definitie van gestures in gesture trackers, bijv. state machine
  291. % Network protocol (ZeroMQ) voor meerdere talen en simultane processen
  292. % Hierij ook: extra laag die gesture windows aanmaakt die corresponderen met window manager
  293. % Window in boomstructuur voor efficientie
  294. \bibliographystyle{plain}
  295. \bibliography{report}{}
  296. \appendix
  297. \chapter{The TUIO protocol}
  298. \label{app:tuio}
  299. The TUIO protocol \cite{TUIO} defines a way to geometrically describe tangible
  300. objects, such as fingers or objects on a multi-touch table. Object information
  301. is sent to the TUIO UDP port (3333 by default).
  302. For efficiency reasons, the TUIO protocol is encoded using the Open Sound
  303. Control \cite[OSC]{OSC} format. An OSC server/client implementation is
  304. available for Python: pyOSC \cite{pyOSC}.
  305. A Python implementation of the TUIO protocol also exists: pyTUIO \cite{pyTUIO}.
  306. However, the execution of an example script yields an error regarding Python's
  307. built-in \texttt{socket} library. Therefore, the reference implementation uses
  308. the pyOSC package to receive TUIO messages.
  309. The two most important message types of the protocol are ALIVE and SET
  310. messages. An ALIVE message contains the list of session id's that are currently
  311. ``active'', which in the case of multi-touch a table means that they are
  312. touching the screen. A SET message provides geometric information of a session
  313. id, such as position, velocity and acceleration.
  314. Each session id represents an object. The only type of objects on the
  315. multi-touch table are what the TUIO protocol calls ``2DCur'', which is a (x, y)
  316. position on the screen.
  317. ALIVE messages can be used to determine when an object touches and releases the
  318. screen. For example, if a session id was in the previous message but not in the
  319. current, The object it represents has been lifted from the screen.
  320. SET provide information about movement. In the case of simple (x, y) positions,
  321. only the movement vector of the position itself can be calculated. For more
  322. complex objects such as fiducials, arguments like rotational position and
  323. acceleration are also included.
  324. ALIVE and SET messages can be combined to create ``point down'', ``point move''
  325. and ``point up'' events (as used by the \cite[.NET application]{win7touch}).
  326. TUIO coordinates range from $0.0$ to $1.0$, with $(0.0, 0.0)$ being the left
  327. top corner of the screen and $(1.0, 1.0)$ the right bottom corner. To focus
  328. events within a window, a translation to window coordinates is required in the
  329. client application, as stated by the online specification
  330. \cite{TUIO_specification}:
  331. \begin{quote}
  332. In order to compute the X and Y coordinates for the 2D profiles a TUIO
  333. tracker implementation needs to divide these values by the actual sensor
  334. dimension, while a TUIO client implementation consequently can scale these
  335. values back to the actual screen dimension.
  336. \end{quote}
  337. \chapter{Experimental program}
  338. \label{app:experiment}
  339. % TODO: rewrite intro
  340. When designing a software library, its API should be understandable and easy to
  341. use for programmers. To find out the basic requirements of the API to be
  342. usable, an experimental program has been written based on the Processing code
  343. from \cite{processingMT}. The program receives TUIO events and translates them
  344. to point \emph{down}, \emph{move} and \emph{up} events. These events are then
  345. interpreted to be (double or single) \emph{tap}, \emph{rotation} or
  346. \emph{pinch} gestures. A simple drawing program then draws the current state to
  347. the screen using the PyGame library. The output of the program can be seen in
  348. figure \ref{fig:draw}.
  349. \begin{figure}[H]
  350. \center
  351. \label{fig:draw}
  352. \includegraphics[scale=0.4]{data/experimental_draw.png}
  353. \caption{Output of the experimental drawing program. It draws the touch
  354. points and their centroid on the screen (the centroid is used as center
  355. point for rotation and pinch detection). It also draws a green
  356. rectangle which responds to rotation and pinch events.}
  357. \end{figure}
  358. One of the first observations is the fact that TUIO's \texttt{SET} messages use
  359. the TUIO coordinate system, as described in appendix \ref{app:tuio}. The test
  360. program multiplies these with its own dimensions, thus showing the entire
  361. screen in its window. Also, the implementation only works using the TUIO
  362. protocol. Other drivers are not supported.
  363. Though using relatively simple math, the rotation and pinch events work
  364. surprisingly well. Both rotation and pinch use the centroid of all touch
  365. points. A \emph{rotation} gesture uses the difference in angle relative to the
  366. centroid of all touch points, and \emph{pinch} uses the difference in distance.
  367. Both values are normalized using division by the number of touch points. A
  368. pinch event contains a scale factor, and therefore uses a division of the
  369. current by the previous average distance to the centroid.
  370. There is a flaw in this implementation. Since the centroid is calculated using
  371. all current touch points, there cannot be two or more rotation or pinch
  372. gestures simultaneously. On a large multi-touch table, it is desirable to
  373. support interaction with multiple hands, or multiple persons, at the same time.
  374. This kind of application-specific requirements should be defined in the
  375. application itself, whereas the experimental implementation defines detection
  376. algorithms based on its test program.
  377. Also, the different detection algorithms are all implemented in the same file,
  378. making it complex to read or debug, and difficult to extend.
  379. \chapter{Reference implementation in Python}
  380. \label{app:implementation}
  381. % TODO
  382. % alleen window.contains op point down, niet move/up
  383. % een paar simpele windows en trackers
  384. \end{document}