using multi-touch and gestures with qt
DESCRIPTION
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/elearningTRANSCRIPT
![Page 1: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/1.jpg)
Using Multi-Touch and Gestures with Qt Jens Bache-Wiig 10/09/09
![Page 2: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/2.jpg)
Introduction
Jens Bache-Wiig • Worked on Qt since 2005
• Platform Team
• Interim Widget Pimp
2
![Page 3: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/3.jpg)
Agenda
• Introduction
Concepts
API
Examples
Q&A
3
![Page 4: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/4.jpg)
Agenda
Introduction
• Concepts
API
Examples
Q&A
4
![Page 5: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/5.jpg)
Concepts
What do we mean when we say multi-touch?
5
![Page 6: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/6.jpg)
Concepts
A widget reacts to multiple touch-points
For example, to zoom/scale content...
6
Lorem ipsum dolor sit eamt. Dolore magna aliquam erat volupat...cvc
Lorem ipsum dolor sit eamt. Dolore magna aliquam erat volupat. Ut enim ad minimum veniami quis. Duis sutem vel eum irure dolor in rerit laputum
![Page 7: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/7.jpg)
Concepts
Multiple widgets react to multiple touch-points For example, moving several sliders at once...
7
![Page 8: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/8.jpg)
Concepts
Real life is multi-touch Do you open a bottle with one finger? Applications could do it too...
8
1
2
![Page 9: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/9.jpg)
Concepts
Part of our future since at least 1982...
9
Disney © 1982
![Page 10: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/10.jpg)
Concepts
Sony Pictures © 2009
10
![Page 11: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/11.jpg)
hBp://www.youtube.com
![Page 12: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/12.jpg)
Concepts
What do we mean when we say gestures?
12
![Page 13: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/13.jpg)
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
![Page 14: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/14.jpg)
Concepts
What are standard gestures?
• Built-in multi-touch gestures that work in standard Qt widgets
14
![Page 15: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/15.jpg)
Concepts
Pan gesture
• Scrolls content • Works in all scrollable Qt widgets
15
Lorem ipsum dolor sit eamt. Dolore magna aliquam erat volupat. Ut enim ad minimum veniami quis. Duis sutem vel eum irure dolor in rerit laputum
Ut enim ad minimum veniami quis. Duis sutem vel eum irure dolor in rerit laputum
![Page 16: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/16.jpg)
Concepts
Pinch gesture
Zoom and/or rotate content
16
![Page 17: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/17.jpg)
Agenda
Introduction
Concepts
• API
Examples
Q&A
17
![Page 18: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/18.jpg)
API
Multi-touch • New event types
• TouchBegin • TouchUpdate • TouchEnd
• New QTouchEvent class • QWidget and QGraphicsItem API
18
![Page 19: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/19.jpg)
API
QEvent::TouchBegin • First in sequence • Must be accepted to receive following events
19
![Page 20: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/20.jpg)
API
QEvent::TouchUpdate • Normal event indicating activity • Expect more events to follow
20
![Page 21: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/21.jpg)
API
QEvent::TouchEnd • Final event in sequence • No more events without a new TouchBegin
21
![Page 22: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/22.jpg)
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
22
1 21
One event, one point, to grey widget One event, two points, to grey widget
![Page 23: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/23.jpg)
API
TouchUpdate, TouchEnd do not propagate
23
![Page 24: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/24.jpg)
API
QTouchEvent • Event class for QWidget and QGraphicsItem • Contains list of active touch points • Device type – TouchScreen or TouchPad
24
![Page 25: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/25.jpg)
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
![Page 26: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/26.jpg)
API
Touch events are not sent by default • Must be enabled first • When enabled, TouchBegin event will be accepted
unless explicitly ignored
26
![Page 27: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/27.jpg)
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
![Page 28: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/28.jpg)
API
QGraphicsItem::setAcceptsTouchEvents(bool) • Set to true on item to receive touch events • To handle, reimplement QGraphicsItem::sceneEvent() • No default implementation
28
![Page 29: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/29.jpg)
API
Gestures
• QGesture and QGestureRecognizer classes • Widgets subscribe to gestures • Using standard gestures • Implementing custom gestures
29
![Page 30: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/30.jpg)
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
![Page 31: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/31.jpg)
API
QGestureRecognizer • “Just” an event filter + state machine • Registered in QApplication • Announces when a gesture is triggered
31
![Page 32: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/32.jpg)
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
![Page 33: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/33.jpg)
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
![Page 34: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/34.jpg)
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
![Page 35: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/35.jpg)
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
![Page 36: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/36.jpg)
API
Special considerations when implementing and/or using gestures
36
![Page 37: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/37.jpg)
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
![Page 38: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/38.jpg)
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
![Page 39: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/39.jpg)
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
![Page 40: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/40.jpg)
Agenda
Introduction
Concepts
API
• Examples
Q&A
40
![Page 41: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/41.jpg)
API
ITAI: PictureBlue by Ariel Molina
41
h$p://vimeo.com/4990545
![Page 42: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/42.jpg)
Examples
Using QTouchEvent...
MyWidget::MyWidget(QWidget *parent) { setAttribute(Qt::WA_AcceptsTouchEvents); }
42
![Page 43: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/43.jpg)
Examples
Using QTouchEvent...
bool MyWidget::event(QEvent *e) { switch (e->type()) { case QEvent::TouchBegin: case QEvent::TouchUpdate: case QEvent::TouchEnd: { // creative stuff here } }
43
![Page 44: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/44.jpg)
Examples
Using QTouchEvent...
QTouchEvent *te = static_cast<QTouchEvent *>(e); QList<QTouchEvent::TouchPoint> points = te->touchPoints();
if (touchPoints.count() == 2) { // Do something interesting here }
44
![Page 45: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/45.jpg)
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
![Page 46: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/46.jpg)
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
![Page 47: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/47.jpg)
And now some gestures...
![Page 48: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/48.jpg)
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
![Page 49: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/49.jpg)
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
![Page 50: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/50.jpg)
Agenda
Introduction
Concepts
API
Examples
• Q&A
50
![Page 51: Using Multi-Touch and Gestures with Qt](https://reader030.vdocuments.site/reader030/viewer/2022012305/5551d8e1b4c905c2388b52fe/html5/thumbnails/51.jpg)
Thanks!
Any Questions?
51