<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- imagegestures.qdoc -->
<title>Qt 4.8: Image Gestures Example</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Image Gestures Example</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#imagewidget-class-definition">ImageWidget Class Definition</a></li>
<li class="level1"><a href="#imagewidget-class-implementation">ImageWidget Class Implementation</a></li>
</ul>
</div>
<h1 class="title">Image Gestures Example</h1>
<span class="subtitle"></span>
<!-- $$$gestures/imagegestures-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="gestures-imagegestures-imagewidget-cpp.html">gestures/imagegestures/imagewidget.cpp</a></li>
<li><a href="gestures-imagegestures-imagewidget-h.html">gestures/imagegestures/imagewidget.h</a></li>
<li><a href="gestures-imagegestures-mainwidget-cpp.html">gestures/imagegestures/mainwidget.cpp</a></li>
<li><a href="gestures-imagegestures-mainwidget-h.html">gestures/imagegestures/mainwidget.h</a></li>
<li><a href="gestures-imagegestures-main-cpp.html">gestures/imagegestures/main.cpp</a></li>
<li><a href="gestures-imagegestures-imagegestures-pro.html">gestures/imagegestures/imagegestures.pro</a></li>
</ul>
<p>The Image Gestures example shows how to enable gestures for a widget and use gesture input to perform actions.<p>We use two classes to create the user interface for the application: <tt>MainWidget</tt> and <tt>ImageWidget</tt>. The <tt>MainWidget</tt> class is simply used as a container for the <tt>ImageWidget</tt> class, which we will configure to accept gesture input. Since we are interested in the way gestures are used, we will concentrate on the implementation of the <tt>ImageWidget</tt> class.</p>
<a name="imagewidget-class-definition"></a>
<h2>ImageWidget Class Definition</h2>
<p>The <tt>ImageWidget</tt> class is a simple <a href="qwidget.html">QWidget</a> subclass that reimplements the general <a href="qwidget.html#event">QWidget::event</a>() handler function in addition to several more specific event handlers:</p>
<pre class="cpp"> <span class="keyword">class</span> ImageWidget : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
ImageWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="type">void</span> openDirectory(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>path);
<span class="keyword">protected</span>:
<span class="type">bool</span> event(<span class="type"><a href="qevent.html">QEvent</a></span> <span class="operator">*</span>event);
<span class="type">void</span> paintEvent(<span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>event);
<span class="type">void</span> resizeEvent(<span class="type"><a href="qresizeevent.html">QResizeEvent</a></span> <span class="operator">*</span>event);
<span class="type">void</span> mouseDoubleClickEvent(<span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>event);
<span class="keyword">private</span>:
<span class="type">bool</span> gestureEvent(<span class="type"><a href="qgestureevent.html">QGestureEvent</a></span> <span class="operator">*</span>event);
<span class="type">void</span> panTriggered(<span class="type"><a href="qpangesture.html">QPanGesture</a></span><span class="operator">*</span>);
<span class="type">void</span> pinchTriggered(<span class="type"><a href="qpinchgesture.html">QPinchGesture</a></span><span class="operator">*</span>);
<span class="type">void</span> swipeTriggered(<span class="type"><a href="qswipegesture.html">QSwipeGesture</a></span><span class="operator">*</span>);
...
};</pre>
<p>We also implement a private helper function, <tt>gestureEvent()</tt>, to help manage gesture events delivered to the widget, and three functions to perform actions based on gestures: <tt>panTriggered()</tt>, <tt>pinchTriggered()</tt> and <tt>swipeTriggered()</tt>.</p>
<a name="imagewidget-class-implementation"></a>
<h2>ImageWidget Class Implementation</h2>
<p>In the widget's constructor, we begin by setting up various parameters that will be used to control the way images are displayed.</p>
<pre class="cpp"> ImageWidget<span class="operator">::</span>ImageWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qwidget.html">QWidget</a></span>(parent)<span class="operator">,</span>
position(<span class="number">0</span>)<span class="operator">,</span>
horizontalOffset(<span class="number">0</span>)<span class="operator">,</span>
verticalOffset(<span class="number">0</span>)<span class="operator">,</span>
rotationAngle(<span class="number">0</span>)<span class="operator">,</span>
scaleFactor(<span class="number">1</span>)<span class="operator">,</span>
currentStepScaleFactor(<span class="number">1</span>)
{
setMinimumSize(<span class="type"><a href="qsize.html">QSize</a></span>(<span class="number">100</span><span class="operator">,</span><span class="number">100</span>));
grabGesture(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>PanGesture);
grabGesture(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>PinchGesture);
grabGesture(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>SwipeGesture);
}</pre>
<p>We enable three of the standard gestures for the widget by calling <a href="qwidget.html#grabGesture">QWidget::grabGesture</a>() with the types of gesture we need. These will be recognized by the application's default gesture recognizer, and events will be delivered to our widget.</p>
<p>Since <a href="qwidget.html">QWidget</a> does not define a specific event handler for gestures, the widget needs to reimplement the general <a href="qwidget.html#event">QWidget::event</a>() to receive gesture events.</p>
<pre class="cpp"> <span class="type">bool</span> ImageWidget<span class="operator">::</span>event(<span class="type"><a href="qevent.html">QEvent</a></span> <span class="operator">*</span>event)
{
<span class="keyword">if</span> (event<span class="operator">-</span><span class="operator">></span>type() <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="qevent.html">QEvent</a></span><span class="operator">::</span>Gesture)
<span class="keyword">return</span> gestureEvent(<span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qgestureevent.html">QGestureEvent</a></span><span class="operator">*</span><span class="operator">></span>(event));
<span class="keyword">return</span> <span class="type"><a href="qwidget.html">QWidget</a></span><span class="operator">::</span>event(event);
}</pre>
<p>We implement the event handler to delegate gesture events to a private function specifically written for the task, and pass all other events to <a href="qwidget.html">QWidget</a>'s implementation.</p>
<p>The <tt>gestureHandler()</tt> function examines the gestures supplied by the newly-delivered <a href="qgestureevent.html">QGestureEvent</a>. Since only one gesture of a given type can be used on a widget at any particular time, we can check for each gesture type using the <a href="qgestureevent.html#gesture">QGestureEvent::gesture</a>() function:</p>
<pre class="cpp"> <span class="type">bool</span> ImageWidget<span class="operator">::</span>gestureEvent(<span class="type"><a href="qgestureevent.html">QGestureEvent</a></span> <span class="operator">*</span>event)
{
<span class="keyword">if</span> (<span class="type"><a href="qgesture.html">QGesture</a></span> <span class="operator">*</span>swipe <span class="operator">=</span> event<span class="operator">-</span><span class="operator">></span>gesture(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>SwipeGesture))
swipeTriggered(<span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qswipegesture.html">QSwipeGesture</a></span> <span class="operator">*</span><span class="operator">></span>(swipe));
<span class="keyword">else</span> <span class="keyword">if</span> (<span class="type"><a href="qgesture.html">QGesture</a></span> <span class="operator">*</span>pan <span class="operator">=</span> event<span class="operator">-</span><span class="operator">></span>gesture(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>PanGesture))
panTriggered(<span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qpangesture.html">QPanGesture</a></span> <span class="operator">*</span><span class="operator">></span>(pan));
<span class="keyword">if</span> (<span class="type"><a href="qgesture.html">QGesture</a></span> <span class="operator">*</span>pinch <span class="operator">=</span> event<span class="operator">-</span><span class="operator">></span>gesture(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>PinchGesture))
pinchTriggered(<span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qpinchgesture.html">QPinchGesture</a></span> <span class="operator">*</span><span class="operator">></span>(pinch));
<span class="keyword">return</span> <span class="keyword">true</span>;
}</pre>
<p>If a <a href="qgesture.html">QGesture</a> object is supplied for a certain type of gesture, we call a special purpose function to deal with it, casting the gesture object to the appropriate <a href="qgesture.html">QGesture</a> subclass.</p>
<p>To illustrate how a standard gesture can be interpreted by an application, we show the implementation of the <tt>swipeTriggered()</tt> function, which handles the gesture associated with a brushing or swiping motion on the user's display or input device:</p>
<pre class="cpp"> <span class="type">void</span> ImageWidget<span class="operator">::</span>swipeTriggered(<span class="type"><a href="qswipegesture.html">QSwipeGesture</a></span> <span class="operator">*</span>gesture)
{
<span class="keyword">if</span> (gesture<span class="operator">-</span><span class="operator">></span>state() <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>GestureFinished) {
<span class="keyword">if</span> (gesture<span class="operator">-</span><span class="operator">></span>horizontalDirection() <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="qswipegesture.html">QSwipeGesture</a></span><span class="operator">::</span>Left
<span class="operator">|</span><span class="operator">|</span> gesture<span class="operator">-</span><span class="operator">></span>verticalDirection() <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="qswipegesture.html">QSwipeGesture</a></span><span class="operator">::</span>Up)
goPrevImage();
<span class="keyword">else</span>
goNextImage();
update();
}
}</pre>
<p>The <a href="qswipegesture.html">QSwipeGesture</a> class provides specialized functions and defines a enum to make it more convenient for developers to discover which direction, if any, the user swiped the display. Here, we simply navigate to the previous image in the collection if the user swiped upwards or to the left; otherwise we navigate to the next image in the collection.</p>
<p>The other gestures are also handled by special purpose functions, but use the values of properties held by the <a href="qgesture.html">QGesture</a> object passed to them.</p>
</div>
<!-- @@@gestures/imagegestures -->
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
