1

Cross-platform with QtAriya Hidayat, Nokia

Live Demos

2

whoami

Open-source Developer(since 2001)

Ph.D. in EE

3

What is Qt?

Best multi-platform application framework!

4

What can Qt do?

Watch the demos!

5

Spread the Love

All (GPL-ed!) examples are available from...

labs.qt.nokia.com

bit.ly/graphicsdojo

6

Example #1

Kinetic Scrolling

7

Flick List

.... lines of Qt/C++ code413

8

Using FlickCharm

QGraphicsView canvas;

FlickCharm charm;charm.activateOn(&canvas);

9

Kinetic Effect State Machine

Steady

Pressed

Manual Scroll

Auto Scroll

Stop

Mouse release

Mouse move

Mouse release

Mouse press

Mousemove

Timer tick

Mouse press

10

Example #2

Weather Info

11

What Should I Wear Today?

.... lines of Qt/C++ code411

12

Simple Animation with Graphics View

item movement &

opacity

13

Using Web Service

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

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

Handle the Network Reply

QUrl url = networkReply->url();data = QString::fromUtf8(networkReply->readAll());networkReply->deleteLater();networkReply->manager()->deleteLater();

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

Scalable Icons with SVG

bitmap vs vector

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

SVG Loading Time Comparison

Use (free!) tools like:

codedread.com/scour

svgmin.googlecode.com

20

Example #3

Flight Tracking

21

Track Your Flight

.... lines of Qt/C++ code299

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

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 frameswhile (true) { i = data.indexOf("<iframe"); if (i < 0) break; data.remove(i, data.indexOf("</iframe>") - i + 8);}

24

Example #4

Magnifying Glass

25

Image Zoom

.... lines of Qt/C++ code197

26

Shadow with Radial Gradient

magnifier

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

Example #5

Maps

29

Maps with OpenStreetMap

.... lines of Qt/C++ code450

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

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

Night Mode

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

Example #6

Parallax Effect

35

Sliding with Parallax

36

Difference in Moving Speed

1 542

3

37

Example #7

WYSIWYG HTML Editor

38

Rich-text Editor with HTML Support

39

Example #8

Instant Messaging

40

Google Chat Client

.... lines of Qt/C++ code140

41

We Cheat (Of Course!)

• Use QWebView from QtWebKit

• Show the “mobile” version

• Add custom login page

42

Example #9

Ray Casting

43

Made Popular by (DOS) Wolfenstein 3-D

.... lines of Qt/C++ code215

44

Memory Access OptimizationMinimize location (in memory) between

two vertically separated pixels

Jump several hundreds bytes

Jump fewbytes only

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

Example #10

Special Effects

47

Pixel-based Effect

48

Lighting Example

49

Blur Picker Example

sharp

blurry

50

Fade Message Example

Something will happen

51

Genie Effect

52

Deformation

53

Underwater Effect

54

THANK YOU!

Questions?