Your SlideShare is downloading. ×
Special Effects with Qt Graphics View
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Special Effects with Qt Graphics View

43,318

Published on

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 …

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

Published in: Technology, Business
3 Comments
18 Likes
Statistics
Notes
No Downloads
Views
Total Views
43,318
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
659
Comments
3
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×