Cross Platform Qt

5,868 views
5,062 views

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,868
On SlideShare
0
From Embeds
0
Number of Embeds
871
Actions
Shares
0
Downloads
150
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Cross Platform Qt

  1. Cross-platform with Qt Ariya Hidayat, Nokia os D em Live 1
  2. whoami Ph.D. in EE Open-source Developer (since 2001) 2
  3. What is Qt? Best multi-platform application framework! 3
  4. What can Qt do? Watch the demos! 4
  5. Spread the Love All (GPL-ed!) examples are available from... labs.qt.nokia.com bit.ly/graphicsdojo 5
  6. Example #1 Kinetic Scrolling 6
  7. Flick List 413 lines of Qt/C++ code .... 7
  8. Using FlickCharm QGraphicsView canvas; FlickCharm charm; charm.activateOn(&canvas); 8
  9. Kinetic Effect State Machine Mouse move Mouse press Pressed Manual Scroll Mouse release Steady Mouse release Mouse move Auto Scroll Mouse press Stop Timer tick 9
  10. Example #2 Weather Info 10
  11. What Should I Wear Today? 411 lines of Qt/C++ code .... 11
  12. Simple Animation with Graphics View item movement & opacity 12
  13. Using Web Service http://www.google.com/ig/api?hl=en&weather=oslo 13
  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)); 14
  15. Handle the Network Reply QUrl url = networkReply->url(); data = QString::fromUtf8(networkReply->readAll()); networkReply->deleteLater(); networkReply->manager()->deleteLater(); 15
  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() } 16
  17. Scalable Icons with SVG bitmap vs vector 17
  18. Be Careful with Your SVG <g> <ellipse cx="10" cy="10" rx=2" ry="2"/> </g> <ellipse cx="10" cy="10" rx=2" ry="2"/> Because one element in a group often does not make sense! 18
  19. SVG Loading Time Comparison Use (free!) tools like: codedread.com/scour svgmin.googlecode.com 19
  20. Example #3 Flight Tracking 20
  21. Track Your Flight 299 lines of Qt/C++ code .... 21
  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 22
  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); } 23
  24. Example #4 Magnifying Glass 24
  25. Image Zoom 197 lines of Qt/C++ code .... 25
  26. Shadow with Radial Gradient magnifier 26
  27. Panning with Mouse/Stylus/Finger Record the tap position void mousePressEvent(QMouseEvent *event) { if (event->buttons() != Qt::LeftButton) return; pressed = true; pressPos = dragPos = event->pos(); } Pan the map based on the movement void mouseMoveEvent(QMouseEvent *event) { if (!event->buttons()) return; QPoint delta = event->pos() - pressPos; pressPos = event->pos(); pan(delta); } 27
  28. Example #5 Maps 28
  29. Maps with OpenStreetMap 450 lines of Qt/C++ code .... 29
  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 ! 30
  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); } 31
  32. Night Mode 32
  33. Night Mode: Implementation Color channel inversion QPainter p(this); p.setCompositionMode (QPainter::CompositionMode_Difference); p.fillRect(event->rect(), Qt::white); p.end(); red = 255 – red green = 255 – green blue = 255 - blue 33
  34. Example #6 Parallax Effect 34
  35. Sliding with Parallax 35
  36. Difference in Moving Speed 1 5 2 4 36 3
  37. Example #7 WYSIWYG HTML Editor 37
  38. Rich-text Editor with HTML Support 38
  39. Example #8 Instant Messaging 39
  40. Google Chat Client 140 lines of Qt/C++ code .... 40
  41. We Cheat (Of Course!) • Use QWebView from QtWebKit • Show the “mobile” version • Add custom login page 41
  42. Example #9 Ray Casting 42
  43. Made Popular by (DOS) Wolfenstein 3-D 215 lines of Qt/C++ code .... 43
  44. Memory Access Optimization Minimize location (in memory) between two vertically separated pixels Jump several Jump few hundreds bytes bytes only 44
  45. Tight Inner Loop Strategy Use only simple, 12-bits fixed-point arithmetics 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; } 45
  46. Example #10 Special Effects 46
  47. Pixel-based Effect 47
  48. Lighting Example 48
  49. Blur Picker Example blurry sharp 49
  50. Fade Message Example Something will happen 50
  51. Genie Effect 51
  52. Deformation 52
  53. Underwater Effect 53
  54. THANK YOU! Questions? 54

×