0
Using Multi-Touch and
Gestures with Qt
                        10/09/09
Jens Bache-Wiig
Introduction

Jens Bache-Wiig
  •  Worked on Qt since 2005
  •  Platform Team
  •  Interim Widget Pimp




               ...
Agenda

•  Introduction
Concepts
API
Examples
Q&A




                  3
Agenda

Introduction
•  Concepts
API
Examples
Q&A




               4
Concepts

What do we mean when we say multi-touch?




                                           5
Concepts

A widget reacts to multiple touch-points

For example, to zoom/scale content...


      Lorem ipsum dolor sit   ...
Concepts

  Multiple widgets react to multiple touch-points
     For example, moving several sliders at once...




      ...
Concepts

Real life is multi-touch
Do you open a bottle with one finger?
Applications could do it too...



              ...
Concepts

Part of our future since at least 1982... 




                                      Disney © 1982 




        ...
Concepts




           Sony Pictures © 2009 




                                   10
hBp://www.youtube.com 
Concepts

What do we mean when we say gestures?




                                        12
Concepts

A way to make common multi-touch use-cases
easy to use in your application

• Standard, platform-specific touch-...
Concepts

What are standard gestures?

•  Built-in multi-touch gestures that work in standard Qt
widgets




             ...
Concepts

Pan gesture

•  Scrolls content
•  Works in all scrollable Qt widgets

         Lorem ipsum dolor sit          U...
Concepts

Pinch gesture

Zoom and/or rotate content




                             16
Agenda

Introduction
Concepts
•  API
Examples
Q&A




               17
API

Multi-touch
  •  New event types
     •  TouchBegin
     •  TouchUpdate
     •  TouchEnd
  •  New QTouchEvent class
 ...
API

QEvent::TouchBegin
  •  First in sequence
  •  Must be accepted to receive following events




                     ...
API

QEvent::TouchUpdate
  •  Normal event indicating activity
  •  Expect more events to follow




                     ...
API

QEvent::TouchEnd
  •  Final event in sequence
  •  No more events without a new TouchBegin




                      ...
API

TouchBegin propagation
  •  When ignored, propagate to widget under first touch-
     point
  •  Widgets never receiv...
API

TouchUpdate, TouchEnd do not propagate




                                         23
API

QTouchEvent
  •  Event class for QWidget and QGraphicsItem
  •  Contains list of active touch points
  •  Device type...
API

QTouchEvent::TouchPoint
  •    Information about one touch-point
  •    Integer identifier
  •    Primary touch-point...
API

Touch events are not sent by default
  •  Must be enabled first
  •  When enabled, TouchBegin event will be accepted
...
API

Qt::WA_AcceptsTouchEvents
  •  Set on QWidget to receive touch events
  •  To handle events, reimplement QWidget::eve...
API

QGraphicsItem::setAcceptsTouchEvents(bool)
  •  Set to true on item to receive touch events
  •  To handle, reimpleme...
API

 Gestures

 •    QGesture and QGestureRecognizer classes
 •    Widgets subscribe to gestures
 •    Using standard ges...
API

QGesture
   •    Base class for more complex gestures
   •    Basic properties and convenience functions
   •    Deli...
API

QGestureRecognizer
  •  “Just” an event filter + state machine
  •  Registered in QApplication
  •  Announces when a ...
API

 How do I use a gesture?
      •  Use grabGesture() to request it
      •  Handle the QGestureEvent and get:
        ...
API

 Implementing custom gestures
 •    Create a state machine:
      - subclass QGestureRecognizer
      - implement fil...
API

Gestures can be simple : Four finger tap
class FourFingerTapGesture : public QGestureRecognizer
{
   virtual Result f...
API

 Gestures can be complex
 •    Event filter could implement a state machine
 •    Continuous gesture going through Qt...
API

Special considerations when implementing and/
or using gestures




                                                36
API

Single gesture on parent widget with children
  •  Should the parent's gesture filter events for children?
GestureCon...
API

 Multiple gestures on a single widget
 •    All gestures filter incoming events in undefined order
 •    Ignored gest...
API

 Gesture has priority over normal event
    handling
 •  Gesture may need several events before
    starting
 •  Norm...
Agenda

Introduction
Concepts
API
•  Examples
Q&A




               40
API

ITAI: PictureBlue
by Ariel Molina




                    h$p://vimeo.com/4990545 



                               ...
Examples

Using QTouchEvent...

MyWidget::MyWidget(QWidget *parent) {
  setAttribute(Qt::WA_AcceptsTouchEvents);
}




   ...
Examples

Using QTouchEvent...

bool MyWidget::event(QEvent *e) {
  switch (e->type()) {
  case QEvent::TouchBegin:
  case...
Examples

Using QTouchEvent...

QTouchEvent *te = static_cast<QTouchEvent *>(e);
QList<QTouchEvent::TouchPoint> points = t...
Examples

Using QTouchEvent...

// determine scale factor
QTouchEvent::TouchPoint p0 = touchPoints.first();
QTouchEvent::T...
Examples

Using QTouchEvent...

// determine angle between previous and current pos
QTouchEvent::TouchPoint p0 = touchPoin...
And now some gestures... 
Examples

Custom gesture – four finger tap
class FourFingerTapGesture : public QGestureRecognizer {
   virtual QGesture cr...
Examples

Custom gesture – four finger tap
class Label : public QLabel {
   virtual void gestureEvent(QGestureEvent *event...
Agenda

Introduction
Concepts
API
Examples
•  Q&A




               50
Thanks!

Any Questions?




                 51
Upcoming SlideShare
Loading in...5
×

Using Multi-Touch and Gestures with Qt

30,142

Published on

With the introduction of multi-touch and gesture support coming in Qt, application developers now have the possibility of introducing new types of input and interaction to their applications. We will examine the various types of devices that one can expect to encounter in the multi-touch and gesture "world". This presentation will also introduce and explain the new API, walk through some example code, and show some demos of some of the possibilities we foresee with this technology.

Presentation by Jens Bache-Wiig held during Qt Developer Days 2009.

http://qt.nokia.com/developer/learning/elearning

Published in: Technology, Education
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
30,142
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
402
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Using Multi-Touch and Gestures with Qt"

  1. 1. Using Multi-Touch and Gestures with Qt 10/09/09 Jens Bache-Wiig
  2. 2. Introduction Jens Bache-Wiig •  Worked on Qt since 2005 •  Platform Team •  Interim Widget Pimp 2
  3. 3. Agenda •  Introduction Concepts API Examples Q&A 3
  4. 4. Agenda Introduction •  Concepts API Examples Q&A 4
  5. 5. Concepts What do we mean when we say multi-touch? 5
  6. 6. Concepts A widget reacts to multiple touch-points For example, to zoom/scale content... Lorem ipsum dolor sit  Lorem ipsum dolor  eamt. Dolore magna  aliquam erat volupat. Ut  sit eamt. Dolore  enim ad minimum  magna aliquam  veniami quis. Duis sutem  vel eum irure dolor in  erat volupat...cvc  rerit laputum  6
  7. 7. Concepts Multiple widgets react to multiple touch-points For example, moving several sliders at once... 7
  8. 8. Concepts Real life is multi-touch Do you open a bottle with one finger? Applications could do it too... 1 2 8
  9. 9. Concepts Part of our future since at least 1982...  Disney © 1982  9
  10. 10. Concepts Sony Pictures © 2009  10
  11. 11. hBp://www.youtube.com 
  12. 12. Concepts What do we mean when we say gestures? 12
  13. 13. Concepts A way to make common multi-touch use-cases easy to use in your application • Standard, platform-specific touch-based gestures • Extensible API for custom gestures 13
  14. 14. Concepts What are standard gestures? •  Built-in multi-touch gestures that work in standard Qt widgets 14
  15. 15. Concepts Pan gesture •  Scrolls content •  Works in all scrollable Qt widgets Lorem ipsum dolor sit Ut enim ad minimum  eamt. Dolore magna veniami quis. Duis sutem  aliquam erat volupat. vel eum irure dolor in  Ut enim ad minimum rerit laputum  veniami quis. Duis sutem vel eum irure dolor in rerit laputum 15
  16. 16. Concepts Pinch gesture Zoom and/or rotate content 16
  17. 17. Agenda Introduction Concepts •  API Examples Q&A 17
  18. 18. API Multi-touch •  New event types •  TouchBegin •  TouchUpdate •  TouchEnd •  New QTouchEvent class •  QWidget and QGraphicsItem API 18
  19. 19. API QEvent::TouchBegin •  First in sequence •  Must be accepted to receive following events 19
  20. 20. API QEvent::TouchUpdate •  Normal event indicating activity •  Expect more events to follow 20
  21. 21. API QEvent::TouchEnd •  Final event in sequence •  No more events without a new TouchBegin 21
  22. 22. API TouchBegin propagation •  When ignored, propagate to widget under first touch- point •  Widgets never receive multiple TouchBegin •  New touch-points on children are combined with first touch-point 1 1 2 One event, one point, to grey widget  One event, two points, to grey widget  22
  23. 23. API TouchUpdate, TouchEnd do not propagate 23
  24. 24. API QTouchEvent •  Event class for QWidget and QGraphicsItem •  Contains list of active touch points •  Device type – TouchScreen or TouchPad 24
  25. 25. API QTouchEvent::TouchPoint •  Information about one touch-point •  Integer identifier •  Primary touch-point flag •  State - Pressed, Moved, Stationary, or Released •  Current, previous, starting positions •  Local, scene, screen, normalized translations •  Area, pressure (if supported by device) 25
  26. 26. API Touch events are not sent by default •  Must be enabled first •  When enabled, TouchBegin event will be accepted unless explicitly ignored 26
  27. 27. API Qt::WA_AcceptsTouchEvents •  Set on QWidget to receive touch events •  To handle events, reimplement QWidget::event() •  Default implementation emulates mouse events for first non-primary touch-point •  Set on viewport() of QAbstractScrollArea based widgets •  To handle events, reimplement QAbstractScrollArea::viewportEvent() 27
  28. 28. API QGraphicsItem::setAcceptsTouchEvents(bool) •  Set to true on item to receive touch events •  To handle, reimplement QGraphicsItem::sceneEvent() •  No default implementation 28
  29. 29. API Gestures •  QGesture and QGestureRecognizer classes •  Widgets subscribe to gestures •  Using standard gestures •  Implementing custom gestures 29
  30. 30. API QGesture •  Base class for more complex gestures •  Basic properties and convenience functions •  Delivered to QWidget or QGraphicsObject •  State (Started, Updated, Finished, Canceled) QGestureEvent •  Contains a list of QGestures •  Normal event propagation rules apply 30
  31. 31. API QGestureRecognizer •  “Just” an event filter + state machine •  Registered in QApplication •  Announces when a gesture is triggered 31
  32. 32. API How do I use a gesture? •  Use grabGesture() to request it •  Handle the QGestureEvent and get: QPanGesture -  Offset property QPinchGesture -  Center-point, rotation, scale properties 32
  33. 33. API Implementing custom gestures •  Create a state machine: - subclass QGestureRecognizer - implement filterEvent(), createGesture(), reset() •  Create a gesture object: - subclass QGesture (optional) - fill QGesture with properties 33
  34. 34. API Gestures can be simple : Four finger tap class FourFingerTapGesture : public QGestureRecognizer { virtual Result filterEvent(QGesture *, QObject *, QEvent *event) { if (event->type() == QEvent::TouchUpdate) if (static_cast<QTouchEvent *>(event)->touchPoints.size() == 4) return GestureFinished; return Ignore; } }; 34
  35. 35. API Gestures can be complex •  Event filter could implement a state machine •  Continuous gesture going through Qt::GestureStated to Qt::GestureUpdated to Qt::GestureFinished states. •  Gesture may need to hijack events, store them, and replay them later 35
  36. 36. API Special considerations when implementing and/ or using gestures 36
  37. 37. API Single gesture on parent widget with children •  Should the parent's gesture filter events for children? GestureContext •  widget-only gesture •  widget-with-children gesture 37
  38. 38. API Multiple gestures on a single widget •  All gestures filter incoming events in undefined order •  Ignored gestures will be propagated •  You can partially ignore a gesture: bool gestureEvent(QGestureEvent *event) { event->ignore(Qt::PanGesture); event->accept(Qt::PinchGesture); return true; } 38
  39. 39. API Gesture has priority over normal event handling •  Gesture may need several events before starting •  Normal event handling interferes with gesture •  Events should be delayed 39
  40. 40. Agenda Introduction Concepts API •  Examples Q&A 40
  41. 41. API ITAI: PictureBlue by Ariel Molina h$p://vimeo.com/4990545  41
  42. 42. Examples Using QTouchEvent... MyWidget::MyWidget(QWidget *parent) { setAttribute(Qt::WA_AcceptsTouchEvents); } 42
  43. 43. Examples Using QTouchEvent... bool MyWidget::event(QEvent *e) { switch (e->type()) { case QEvent::TouchBegin: case QEvent::TouchUpdate: case QEvent::TouchEnd: { // creative stuff here } } 43
  44. 44. Examples Using QTouchEvent... QTouchEvent *te = static_cast<QTouchEvent *>(e); QList<QTouchEvent::TouchPoint> points = te->touchPoints(); if (touchPoints.count() == 2) { // Do something interesting here } 44
  45. 45. Examples Using QTouchEvent... // determine scale factor QTouchEvent::TouchPoint p0 = touchPoints.first(); QTouchEvent::TouchPoint p1 = touchPoints.last(); QLineF line1(p0.startPos(), p1.startPos()); QLineF line2(p0.pos(), p1.pos()); qreal scaleFactor = line2.length() / line1.length(); setContentScale(scaleFactor); 45
  46. 46. Examples Using QTouchEvent... // determine angle between previous and current pos QTouchEvent::TouchPoint p0 = touchPoints.first(); QTouchEvent::TouchPoint p1 = touchPoints.last(); QLineF line1(p0.lastPos(), p1.lastPos()); QLineF line2(p0.pos(), p1.pos()); qreal angle = line2.angleTo(line1); rotateContentBy(angle); 46
  47. 47. And now some gestures... 
  48. 48. Examples Custom gesture – four finger tap class FourFingerTapGesture : public QGestureRecognizer { virtual QGesture createGesture(QObject *) { return new QGesture(“FourFingerTap”); } } virtual Result filterEvent(QGesture *state, QObject *, QEvent *event) { if (event->type() == QEvent::TouchUpdate) if (static_cast<QTouchEvent *>(event)->touchPoints.size() == 4) { state->setProperty(“foo”, QLatin1String(“bar”)); return GestureFinished; } return Ignore; } }; 48
  49. 49. Examples Custom gesture – four finger tap class Label : public QLabel { virtual void gestureEvent(QGestureEvent *event) { if (QGesture *g = event->gesture(“FourFingerTap”)) { setText(g->property(“foo”)); event->accept(g); } ... QLabel *label = new Qlabel; label->setPixmap(QPixmap(“qt-logo.png”)); label->grabGesture(“FourFingerTap”); 49
  50. 50. Agenda Introduction Concepts API Examples •  Q&A 50
  51. 51. Thanks! Any Questions? 51
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×