Cross Platform Qt
-
Upload
qt-project -
Category
Technology
-
view
4.527 -
download
4
description
Transcript of Cross Platform Qt
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?