Cross-platform with Qt
Ariya Hidayat, Nokia
os
D em
Live
1

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
bit.ly/graphicsdojo
5

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 Pressed
Manual Scroll
Mouse release
Steady Mouse release
Mouse
move Auto Scroll
Mouse press
Stop
Timer tick
9

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
12

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.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

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

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

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"/>
Because one element in a group often
does not make sense!
18

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

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 bits
• Legal aspect
– some sites explicitly prohibit the use other than
in a web browser
22

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

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) {
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

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
• Available in
– rendered images
– vector data
More info at www.openstreetmap.org !
30

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

Night Mode
32

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

Example #6
Parallax Effect
34

Sliding with Parallax
35

Difference in Moving Speed
1 5
2 4
36 3

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
41

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 pixels
Jump several Jump few
hundreds bytes bytes only
44

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

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