Graphics View becomes one of the prominent features of Qt these days, it also serves as the backbone for next-generation user-interface developments. This talk highlights several tips and tricks which you can employ to beautify your Graphics View-based application, in order to have much more exciting and interesting user interactions. In addition, a new addition in Qt 4.6, namely the graphics effect feature, will be introduced and demonstrated. Presentation by Ariya Hidayat held during Qt Developer Days 2009. http://qt.nokia.com/developer/learning/elearning

1. Special F/X with Graphics View
09/25/09
Ariya Hidayat

2. About Myself
Open-source Developer
Ph.D in EE
2

3. Agenda
Four Dot Five
– What you can do already
Four Dot Six
– What you can (ab)use soon
3

4. Goals
Provoke ideas!
Incite passion!
Engage creativity!
4

5. A Word of Caution
With great power must come great responsibility.
5

6. Spread the Love
All examples are available from...
labs.qt.nokia.com
bit.ly/graphicsdojo
6

7. Qt 4.5
7

8. Gradients
Transformation
Animation, Kinetic Scrolling
Composition Modes
8

9. Linear Gradient
9

10. Radial Gradient
10

11. Gradients: Quick Recipe
Applies to: QAbstractGraphicsShapeItem
QGraphicsEllipseItem, QGraphicsPathItem,
QGraphicsPolygonItem, QGraphicsRectItem
or your own subclass(es).
Classes to use:
– QLinearGradient
– QRadialGradient
– QConicalGradient
11

12. Linear Gradient: The Code
QPoint start(0, 0);
QPoint end(0, 20);
QLinearGradient g(start, end);
g.setColorAt(0, Qt::white);
g.setColorAt(1, Qt::black);
item->setBrush(g);
12

13. Radial Gradient: The Code
QRadialGradient gr(100, 100, 100, 60, 60);
gr.setColorAt(0.0, QColor(255, 255, 255, 191));
gr.setColorAt(0.2, QColor(255, 255, 127, 191));
gr.setColorAt(0.9, QColor(150, 150, 200, 63));
p.setBrush(gr);
p.drawEllipse(0, 0, 200, 200);
13

14. Shadow with Gradients
magnifier
14

15. Shadow: The Code
QRadialGradient g;
g.setCenter(radius, radius);
g.setFocalPoint(radius, radius);
g.setRadius(radius);
g.setColorAt(1.0, QColor(255, 255, 255, 0));
g.setColorAt(0.5, QColor(128, 128, 128, 255));
QPainter mask(&maskPixmap);
mask.setCompositionMode
(QPainter::CompositionMode_Source);
mask.setBrush(g);
mask.drawRect(maskPixmap.rect());
mask.setBrush(QColor(Qt::transparent));
mask.drawEllipse(g.center(), radius-15, radius-15);
mask.end();
15

16. Translucent Reflection
16

17. Flip Vertically
QImage::mirrored()
17

18. More Natural Look
Linear gradient, on the alpha channel
18

19. Reflection: The Code
QPoint start(0, 0);
QPoint end(0, img.height());
QLinearGradient gradient(start, end);
gradient.setColorAt(0.5, Qt::black);
gradient.setColorAt(0, Qt::white);
QImage mask = img;
QPainter painter(&mask);
painter.fillRect(img.rect(), gradient);
painter.end();
QImage reflection = img.mirrored();
reflection.setAlphaChannel(mask);
19

20. Opacity
QPainter::setOpacity(...)
20

21. Transformation
Scaling Rotation Perspective
21

22. Rotation
transform.rotate(30, Qt::ZAxis)
22

23. Perspective Transformation: The Recipe
transform.rotate
(60, Qt::XAxis)
transform.rotate(60, Qt::YAxis)
23

24. Reflection & Transformation
24

25. Timeline-based Animation
deacceleration
acceleration
25

26. Linear Motion vs Non-linear Motion
Linear EaseInOut
deacceleration
acceleration
26

27. Flick List (or Kinetic Scrolling)
27

28. Using FlickCharm
QGraphicsView canvas;
FlickCharm charm;
charm.activateOn(&canvas);
28

29. Flick Charm & Event Filtering
Mouse move
Mouse press Pressed
Manual Scroll
Mouse release
Steady Mouse release
Mouse
move Auto Scroll
Mouse press
Stop
Timer tick
29

30. Parallax Effect
30

31. Composition Modes
31

32. Colorize (or Tint Effect)
32

33. Grayscale Conversion
int pixels = img.width() * img.height();
unsigned int *data = (unsigned int *)img.bits();
for (int i = 0; i < pixels; ++i) {
int val = qGray(data[i]);
data[i] = qRgb(val, val, val);
}
33

34. Overlay with Color
QPainter painter(&resultImage);
painter.drawImage(0, 0, grayscaled(image));
painter.setCompositionMode
(QPainter::CompositionMode_Overlay);
painter.fillRect(resultImage.rect(), color);
painter.end();
34

35. Glow Effect
35

36. Night Mode
36

37. Night Mode with Color 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
37

38. A Friendly Advice: Fast Prototyping
– avoid long edit-compile-debug cycle
– use JavaScript, e.g. with Qt Script
– use Python, e.g. with PyQt or PySide
– use <insert your favorite dynamic language>
38

39. Qt 4.6
39

40. Animation Framework
State Machine
Graphics Effects
40

41. Animation Framework
41

42. What People Want
– (soft) drop shadow
– blur
– colorize
– some other random stuff
42

43. Graphics F/X
QGraphicsEffect
QGraphicsColorizeEffect
QGraphicsGrayscaleEffect
QGraphicsPixelizeEffect
QGraphicsBlurEffect
QGraphicsDropShadowEffect
QGraphicsOpacityEffect
43

44. Challenges
– software vs hardware
– good API
44

45. Software vs Hardware
– software implementation
• consistent and reliable
• easy to test
• cumbersome, (dog)slow
– hardware acceleration
• blazing fast
• custom effects are easy
• silicon/driver dependent
45

46. API
One API to rule them all, ...
46

47. Simple API
– Effect is a QObject
• might have property, e.g. Color
• property change emits a signal
• can be animated easily
– Effect applies to QGraphicsItem & QWidget
– Custom effect? Subclass QGraphicsEffect
47

48. As Simple As...
QGraphicsGrayscaleEffect *effect;
effect = new QGraphicsGrayscaleEffect;
item->setGraphicsEffect(effect);
Effect is applied to the item
and its children!
48

49. Grayscale Effect
49

50. Grayscale Effect with Strength=0.8
50

51. Colorize Effect
51

52. Colorize Effect with Strength=0.8
52

53. Pixelize Effect
53

54. Blur Effect
54

55. Drop Shadow Effect
55

56. Lighting Example
56

57. Blur Picker Example
blurry
sharp
57

58. Fade Message Example
Something will happen
58

59. Scale Effect
59

60. Scale Effect Implementation
void draw(QPainter *painter,
QGraphicsEffectSource *source) {
QPixmap pixmap;
pixmap = source->pixmap(Qt::DeviceCoordinates);
painter->save();
painter->setBrush(Qt::NoBrush);
painter->setPen(Qt::red);
painter->drawRect(pixmap.rect());
painter->scale(0.5, 0.5);
painter->translate(pixmap.rect().bottomRight()/2);
painter->drawPixmap(0, 0, pixmap);
painter->restore();
}
60

61. Night Mode Effect
61

62. Night Mode Effect Implementation
void draw(QPainter *painter,
QGraphicsEffectSource *source) {
QPixmap pixmap;
pixmap = source->pixmap(Qt::DeviceCoordinates);
QPainter p(&pixmap);
p.setCompositionMode
(QPainter::CompositionMode_Difference);
p.fillRect(pixmap.rect(), Qt::white);
p.end();
painter->drawPixmap(0, 0, pixmap);
}
62

63. Frame Effect
63

64. Extending the Bounding Box
QRectF boundingRectFor(const QRectF &rect) const {
return rect.adjusted(-5, -5, 5, 5);
}
item bounding box
“effective” bounding box
64

65. Frame Effect Implementation
void draw(QPainter *painter,
QGraphicsEffectSource *source) {
QPixmap pixmap;
pixmap = source->pixmap(Qt::DeviceCoordinates);
QRectF bound = boundingRectFor(pixmap.rect());
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(Qt::green);
painter->drawRoundedRect(bound, 15, 15);
painter->drawPixmap(0, 0, pixmap);
painter->restore();
}
65

66. Reflection Effect
66

67. Enlarging the Bounding Box (Again)
QRectF boundingRectFor(const QRectF &rect) const {
return rect.adjusted(0, 0, 0, rect.height());
}
item bounding box
“effective” bounding box
67

68. Reflection Effect Implementation
void draw(QPainter *painter,
QGraphicsEffectSource *source) {
QPixmap pixmap;
pixmap = source->pixmap(Qt::DeviceCoordinates);
painter->save();
painter->drawPixmap(0, 0, pixmap);
painter->setOpacity(0.2);
painter->scale(1, -1);
painter->translate(0, -pixmap.height());
painter->drawPixmap(0, 0, pixmap);
painter->restore();
}
68

69. Qt 4.7?
Future?
69

70. Declarative UI
70

71. Further Directions
– Optimization!
– Composite effects
– Geometry deformation
– Morphing
– More physics: force, gravity, ...
– Bitmap vs vector
71

72. Genie Effect
72

73. Deformation
73

74. Underwater Effect
74

75. That's all, folks...
Thank You!
75

76. Bleeding-Edge
labs.qt.nokia.com
bit.ly/graphicsdojo
76