Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cross-platform with Qt
Ariya Hidayat, Nokia



                                       os
                                 ...
whoami


                          Ph.D. in EE


  Open-source Developer
      (since 2001)




                      2
What is Qt?




     Best multi-platform application framework!




                     3
What can Qt do?




             Watch the demos!




                  4
Spread the Love
       All (GPL-ed!) examples are available from...


                             labs.qt.nokia.com


   ...
Example #1
Kinetic Scrolling




   6
Flick List




             413 lines of Qt/C++ code
               ....

                      7
Using FlickCharm
QGraphicsView canvas;

FlickCharm charm;
charm.activateOn(&canvas);




                        8
Kinetic Effect State Machine
                                                  Mouse move
   Mouse press                Pr...
Example #2
Weather Info




 10
What Should I Wear Today?




           411 lines of Qt/C++ code
             ....

                    11
Simple Animation with Graphics View


                      item movement &
                          opacity




        ...
Using Web Service



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




                       13
Create the Network Request

  QUrl url("http://www.google.com/ig/api");
  url.addEncodedQueryItem("hl", "en");
  url.addEn...
Handle the Network Reply

QUrl url = networkReply->url();
data = QString::fromUtf8(networkReply->readAll());
networkReply-...
Parse (or Digest) the XML

QXmlStreamReader xml(data);
while (!xml.atEnd()) {
  xml.readNext();
  if (xml.tokenType() == Q...
Scalable Icons with SVG
                 bitmap vs vector




                 17
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"/...
SVG Loading Time Comparison




            Use (free!) tools like:
            codedread.com/scour
           svgmin.goog...
Example #3
Flight Tracking




   20
Track Your Flight




             299 lines of Qt/C++ code
               ....
                     21
Web Scraping
• Grab the HTML contents
• Scrap it
   – remove unnecessary clutters
   – parse and extract the interesting b...
Parsing HTML with XML Reader
• HTML != XML
• Potentially provoke the parser (→ errors)
  – Solution: “scrub it”, i.e. clea...
Example #4
Magnifying Glass




   24
Image Zoom




             197 lines of Qt/C++ code
               ....
                     25
Shadow with Radial Gradient




                       magnifier



                 26
Panning with Mouse/Stylus/Finger
                 Record the tap position
void mousePressEvent(QMouseEvent *event) {
    i...
Example #5
  Maps




 28
Maps with OpenStreetMap




            450 lines of Qt/C++ code
              ....
                   29
Why OpenStreetMap?
• Free content
   – Creative Commons Attribution-ShareAlike 2.0
• API does not require the license key
...
Getting the Rendered Tile
• Each tile is 256 x 256 pixels
• Zoom level of 0 → the whole world
• Zoom level of 17 → most de...
Night Mode




             32
Night Mode: Implementation
                   Color channel inversion

  QPainter p(this);
  p.setCompositionMode
    (QPa...
Example #6
Parallax Effect




  34
Sliding with Parallax




                   35
Difference in Moving Speed




             1                    5
                 2            4
                     36...
Example #7
WYSIWYG HTML Editor




     37
Rich-text Editor with HTML Support




                  38
Example #8
Instant Messaging




    39
Google Chat Client




             140 lines of Qt/C++ code
               ....
                     40
We Cheat (Of Course!)
•   Use QWebView from QtWebKit
•   Show the “mobile” version
•   Add custom login page




         ...
Example #9
Ray Casting




 42
Made Popular by (DOS) Wolfenstein 3-D




            215 lines of Qt/C++ code
              ....
                    43
Memory Access Optimization
             Minimize location (in memory) between
                 two vertically separated pi...
Tight Inner Loop Strategy
      Use only simple, 12-bits fixed-point arithmetics

while (y1 >= 0 && y2 < bufh && p1 >= 0) ...
Example #10
Special Effects




   46
Pixel-based Effect




                     47
Lighting Example




                   48
Blur Picker Example

                         blurry




            sharp


                    49
Fade Message Example




            Something will happen
                  50
Genie Effect




               51
Deformation




              52
Underwater Effect




                    53
THANK YOU!

Questions?




 54
Upcoming SlideShare
Loading in …5
×

Cross Platform Qt

6,511 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
  • Be the first to comment

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

×