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

Special Effects with Qt Graphics View

on

  • 45,707 views

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

Statistics

Views

Total Views
45,707
Views on SlideShare
45,390
Embed Views
317

Actions

Likes
15
Downloads
612
Comments
3

8 Embeds 317

http://www.slideshare.net 210
http://websites.networksolutions.com 44
http://www.evolvebeyondmoney.com 28
http://evolvebeyondmoney.com 16
http://qt-world.weebly.com 14
http://health.medicbd.com 3
http://webcache.googleusercontent.com 1
http://www.weebly.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Special Effects with Qt Graphics View Special Effects with Qt Graphics View Presentation Transcript

  • Special F/X with Graphics View 09/25/09 Ariya Hidayat
  • About Myself Open-source Developer Ph.D in EE 2
  • Agenda Four Dot Five – What you can do already Four Dot Six – What you can (ab)use soon 3
  • Goals Provoke ideas! Incite passion! Engage creativity! 4
  • A Word of Caution With great power must come great responsibility. 5
  • Spread the Love All examples are available from... labs.qt.nokia.com bit.ly/graphicsdojo 6
  • Qt 4.5 7
  • Gradients Transformation Animation, Kinetic Scrolling Composition Modes 8
  • Linear Gradient 9
  • Radial Gradient 10
  • Gradients: Quick Recipe Applies to: QAbstractGraphicsShapeItem QGraphicsEllipseItem, QGraphicsPathItem, QGraphicsPolygonItem, QGraphicsRectItem or your own subclass(es). Classes to use: – QLinearGradient – QRadialGradient – QConicalGradient 11
  • 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
  • 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
  • Shadow with Gradients magnifier 14
  • 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
  • Translucent Reflection 16
  • Flip Vertically QImage::mirrored() 17
  • More Natural Look Linear gradient, on the alpha channel 18
  • 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
  • Opacity QPainter::setOpacity(...) 20
  • Transformation Scaling Rotation Perspective 21
  • Rotation transform.rotate(30, Qt::ZAxis) 22
  • Perspective Transformation: The Recipe transform.rotate (60, Qt::XAxis) transform.rotate(60, Qt::YAxis) 23
  • Reflection & Transformation 24
  • Timeline-based Animation deacceleration acceleration 25
  • Linear Motion vs Non-linear Motion Linear EaseInOut deacceleration acceleration 26
  • Flick List (or Kinetic Scrolling) 27
  • Using FlickCharm QGraphicsView canvas; FlickCharm charm; charm.activateOn(&canvas); 28
  • 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
  • Parallax Effect 30
  • Composition Modes 31
  • Colorize (or Tint Effect) 32
  • 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
  • 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
  • Glow Effect 35
  • Night Mode 36
  • 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
  • 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
  • Qt 4.6 39
  • Animation Framework State Machine Graphics Effects 40
  • Animation Framework 41
  • What People Want – (soft) drop shadow – blur – colorize – some other random stuff 42
  • Graphics F/X QGraphicsEffect QGraphicsColorizeEffect QGraphicsGrayscaleEffect QGraphicsPixelizeEffect QGraphicsBlurEffect QGraphicsDropShadowEffect QGraphicsOpacityEffect 43
  • Challenges – software vs hardware – good API 44
  • 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
  • API One API to rule them all, ... 46
  • 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
  • As Simple As... QGraphicsGrayscaleEffect *effect; effect = new QGraphicsGrayscaleEffect; item->setGraphicsEffect(effect); Effect is applied to the item and its children! 48
  • Grayscale Effect 49
  • Grayscale Effect with Strength=0.8 50
  • Colorize Effect 51
  • Colorize Effect with Strength=0.8 52
  • Pixelize Effect 53
  • Blur Effect 54
  • Drop Shadow Effect 55
  • Lighting Example 56
  • Blur Picker Example blurry sharp 57
  • Fade Message Example Something will happen 58
  • Scale Effect 59
  • 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
  • Night Mode Effect 61
  • 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
  • Frame Effect 63
  • Extending the Bounding Box QRectF boundingRectFor(const QRectF &rect) const { return rect.adjusted(-5, -5, 5, 5); } item bounding box “effective” bounding box 64
  • 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
  • Reflection Effect 66
  • 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
  • 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
  • Qt 4.7? Future? 69
  • Declarative UI 70
  • Further Directions – Optimization! – Composite effects – Geometry deformation – Morphing – More physics: force, gravity, ... – Bitmap vs vector 71
  • Genie Effect 72
  • Deformation 73
  • Underwater Effect 74
  • That's all, folks... Thank You! 75
  • Bleeding-Edge labs.qt.nokia.com bit.ly/graphicsdojo 76