As a powerful framework, Qt offers tons of modules and classes for building your applications. This talk highlight few practical cross-platform examples of what Qt can do with a fairly few lines of code, ranging from kinetic scrolling, weather service, OpenStreetMap, parallax effect, flight tracking, WYSIWYG HTML editor, and many more. All examples will be accompanied with corresponding live demos. Presentation by Ariya Hidayat held during the Maemo Summit 2009 in Amsterdam

1. 1
Cross-platform with Qt
Ariya Hidayat, Nokia
Live Demos

2. 2
whoami
Open-source Developer
(since 2001)
Ph.D. in EE

3. 3
What is Qt?
Best multi-platform application framework!

4. 4
What can Qt do?
Watch the demos!

5. 5
Spread the Love
All (GPL-ed!) examples are available from...
labs.qt.nokia.com
bit.ly/graphicsdojo

6. 6
Example #1
Kinetic Scrolling

7. 7
Flick List
.... lines of Qt/C++ code
413

8. 8
Using FlickCharm
QGraphicsView canvas;
FlickCharm charm;
charm.activateOn(&canvas);

9. 9
Kinetic Effect State Machine
Steady
Pressed
Manual Scroll
Auto Scroll
Stop
Mouse release
Mouse move
Mouse release
Mouse press
Mouse
move
Timer tick
Mouse press

10. 10
Example #2
Weather Info

11. 11
What Should I Wear Today?
.... lines of Qt/C++ code
411

12. 12
Simple Animation with Graphics View
item movement &
opacity

13. 13
Using Web Service
http://www.google.com/ig/api?hl=en&weather=oslo

14. 14
Create the Network Request
QUrl url("http://www.google.com/ig/api");
url.addEncodedQueryItem("hl", "en");
url.addEncodedQueryItem("weather",
QUrl::toPercentEncoding(location));
QNetworkAccessManager *manager;
manager = new QNetworkAccessManager(this);
connect(manager, SIGNAL(finished(QNetworkReply*)),
this,SLOT(handleNetworkData(QNetworkReply*)));
manager->get(QNetworkRequest(url));

15. 15
Handle the Network Reply
QUrl url = networkReply->url();
data = QString::fromUtf8(networkReply->readAll());
networkReply->deleteLater();
networkReply->manager()->deleteLater();

16. 16
Parse (or Digest) the XML
QXmlStreamReader xml(data);
while (!xml.atEnd()) {
xml.readNext();
if (xml.tokenType() == QXmlStreamReader::StartElement)
if (xml.name() == "city")
city = xml.attributes().value("data").toString()
}

17. 17
Scalable Icons with SVG
bitmap vs vector

18. 18
Be Careful with Your SVG
Because one element in a group often
does not make sense!
<g>
<ellipse cx="10" cy="10" rx=2" ry="2"/>
</g>
<ellipse cx="10" cy="10" rx=2" ry="2"/>

19. 19
SVG Loading Time Comparison
Use (free!) tools like:
codedread.com/scour
svgmin.googlecode.com

20. 20
Example #3
Flight Tracking

21. 21
Track Your Flight
.... lines of Qt/C++ code
299

22. 22
Web Scraping
• Grab the HTML contents
• Scrap it
– remove unnecessary clutters
– parse and extract the interesting bits
• Legal aspect
– some sites explicitly prohibit the use other than
in a web browser

23. 23
Parsing HTML with XML Reader
• HTML != XML
• Potentially provoke the parser (→ errors)
– Solution: “scrub it”, i.e. clean up the raw HTML
// remove all inline frames
while (true) {
i = data.indexOf("<iframe");
if (i < 0)
break;
data.remove(i, data.indexOf("</iframe>") - i + 8);
}

24. 24
Example #4
Magnifying Glass

25. 25
Image Zoom
.... lines of Qt/C++ code
197

26. 26
Shadow with Radial Gradient
magnifier

27. 27
Panning with Mouse/Stylus/Finger
void mousePressEvent(QMouseEvent *event) {
if (event->buttons() != Qt::LeftButton)
return;
pressed = true;
pressPos = dragPos = event->pos();
}
Record the tap position
void mouseMoveEvent(QMouseEvent *event) {
if (!event->buttons())
return;
QPoint delta = event->pos() - pressPos;
pressPos = event->pos();
pan(delta);
}
Pan the map based on the movement

28. 28
Example #5
Maps

29. 29
Maps with OpenStreetMap
.... lines of Qt/C++ code
450

30. 30
Why OpenStreetMap?
• Free content
– Creative Commons Attribution-ShareAlike 2.0
• API does not require the license key
• Available in
– rendered images
– vector data
More info at www.openstreetmap.org !

31. 31
Getting the Rendered Tile
• Each tile is 256 x 256 pixels
• Zoom level of 0 → the whole world
• Zoom level of 17 → most detailed
QPointF tileForCoordinate(qreal lat, qreal lng, int zoom)
{
qreal zn = static_cast<qreal>(1 << zoom);
qreal tx = (lng + 180.0) / 360.0;
qreal ty = (1.0 - log(tan(lat * M_PI / 180.0) +
1.0 / cos(lat * M_PI / 180.0)) / M_PI)
/ 2.0;
return QPointF(tx * zn, ty * zn);
}

32. 32
Night Mode

33. 33
Night Mode: Implementation
QPainter p(this);
p.setCompositionMode
(QPainter::CompositionMode_Difference);
p.fillRect(event->rect(), Qt::white);
p.end();
Color channel inversion
red = 255 – red
green = 255 – green
blue = 255 - blue

34. 34
Example #6
Parallax Effect

35. 35
Sliding with Parallax

36. 36
Difference in Moving Speed
1 5
4
2
3

37. 37
Example #7
WYSIWYG HTML Editor

38. 38
Rich-text Editor with HTML Support

39. 39
Example #8
Instant Messaging

40. 40
Google Chat Client
.... lines of Qt/C++ code
140

41. 41
We Cheat (Of Course!)
• Use QWebView from QtWebKit
• Show the “mobile” version
• Add custom login page

42. 42
Example #9
Ray Casting

43. 43
Made Popular by (DOS) Wolfenstein 3-D
.... lines of Qt/C++ code
215

44. 44
Memory Access Optimization
Minimize location (in memory) between
two vertically separated pixels
Jump several
hundreds bytes
Jump few
bytes only

45. 45
Tight Inner Loop Strategy
while (y1 >= 0 && y2 < bufh && p1 >= 0) {
*pixel1 = tex[p1 >> 12];
*pixel2 = tex[p2 >> 12];
p1 -= dy;
p2 += dy;
--y1;
++y2;
pixel1 -= stride;
pixel2 += stride;
}
Use only simple, 12-bits fixed-point arithmetics

46. 46
Example #10
Special Effects

47. 47
Pixel-based Effect

48. 48
Lighting Example

49. 49
Blur Picker Example
sharp
blurry

50. 50
Fade Message Example
Something will happen

51. 51
Genie Effect

52. 52
Deformation

53. 53
Underwater Effect

54. 54
THANK YOU!
Questions?