Special Effects with Qt Graphics View

  • 41,164 views
Uploaded 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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
41,164
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
633
Comments
3
Likes
16

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