Petri Niemi, Qt Advanced Part 1, 6.3.2010, Hagenberg

1. Qt Advanced
Part I
1

2. Contents
• Graphics View
• Qt Property System
• Animation Framework
2

3. Qt Advanced
Graphics View
3

4. Graphics View In General
• Provides a surface for managing and interacting with a large number of custom-
made 2D graphical items
• Event propagation architecture provided
• Allows precise double-precision interaction capabilities for the items on the scene
• Items can handle key, mouse press, move, release and double click events
• Tracks mouse movement
• Uses Binary Space Partitioning tree to provide very fast item discovery
• Items may be QWidgets, although not very usual
4

5. Coordinate Systems
• Three coordinate systems, corresponding to the graphics view classes (parts of
the
th system):
t )
• Graphics Item
• Graphics Scene
• Graphics View
• Convenience functions for coordinate mappings are provided
5

6. Graphics Item – QGraphicsItem
• Graphical item on the screen
• Several standard it
S l t d d item classes exist: rectangle, ellipse, t t
l i t t l lli text
• Items live in their own local coordinate system.
• Coordinates are usually centered around its center point (0, 0), and this is also the center
for all transformations.
• Item features
• Mouse press, move, release, double click, mouse hover event, wheel event, context menu
events
• Keyboard input focus, key events
• Drag and drop
• Grouping
• Collision detection
• Set a shape for your items
• Override collision detection function if needed
6

7. Graphics Scene – QGraphicsScene
• Container for item objects
• P id a f t interface for managing a large number of it
Provides fast i t f f i l b f items
• Propagates events to each item
• Manages item state (
g (selection, focus))
QGraphicsScene scene;
QGraphicsItem *rect = scene addRect(QRectF(0 0 100 100));
scene.addRect(QRectF(0, 0, 100,
scene.addItem(newGraphicsItem);
QGraphicsItem *item = scene.itemAt(50, 50);
// item == rect
7

8. Graphics View - QGraphicsView
• The view widget for displaying the contents of a QGraphicsScene
• You can add a QGraphicsView directly from the UI Designer
• Like an empty canvas for your Graphics Items
• C
Convenient and efficient use of t
i t d ffi i t f transformations
f ti
• Uses QMatrix or QTransform
• rotate()
()
• scale()
• translate()
• shear()
8

9. Transformations
• View can transform scene’s co ordinate system
scene s co-ordinate
• Easy to add transformations to graphic view items or to the whole view
QTransform transform;
transform.translate(50, 50);
transform.rotate(45);
transform.scale(0.5, 1.0);
transform scale(0 5 1 0);
view.setTransform(transform);
// Also available:
view.rotate(45);
9

10. Adding QWidgets to Graphics View
• QGraphicsWidget
• Concrete base class of all widget items in the graphics scene
• Layout management
• Geometry management
• Inherited by QGraphicsProxyWidget
• Used for adding normal QWidgets to the scene
QGraphicsScene scene;
QLineEdit *edit = new QLineEdit;
QGraphicsProxyWidget *proxy = scene.addWidget(edit);
edit->isVisible(); // returns true
QGraphicsView view(&scene);
view.show();
10

11. Graphics View Classes
11

12. Items are not Widgets
• Th major diff
The j difference b t
between QG hi It
QGraphicsItem and, say QLabel i th t th
d QL b l is that the
former is not a QWidget subclass
• This has, among others, the following implications:
• You can’t place QWidgets in a QGraphicsScene (without the proxy class
described earlier)
• You can’t place QGraphicsItems outside a QGraphicsScene
• You can’t use Qlayout-derived layout managers with QGraphicsItems –
QGraphicsLayout is the base class for layouts instead
• QGraphicsScene/QGraphicsItem has its own internal event system that is slightly
p p y g y
different from the regular QEvent system
• QGraphicsItems can, unlike QWidgets, be arbitrarily transformed
• This allows the creation of items that support high q
pp g quality zooming etc
y g
12

13. Existing Graphics Items
• QGraphicsLineItem – A line segment
• QAbstractGraphicsShapeItem – Common baseclass for “shape items”, ie. ellipses,
polygons etc.
• QGraphicsEllipseItem – An ellipse or ”pie segment”
g
• QGraphicsPolygonItem – A polygon
• QGraphicsRectItem – A rectangle
• QGraphicsPathItem – A QPainterPath
• QGraphicsPixmapItem – A pixmap
• QGraphicsTextItem – A rich text string (can be editable)
• QGraphicsSimpleTextItem – A non-editable plain text string
• QGraphicsSvgItem – An SVG element
13

14. Event Handling
• Event handling for QGraphicsItems is very similar to QWidget
• Example handlers:
• keyPressEvent(QKeyEvent*)
• mouseMoveEvent(QGraphicsSceneMouseEvent*)
(Q p )
• contextMenuEvent(QGraphicsSceneContextMenuEvent*)
• dragEnterEvent(QGraphicsSceneDragDropEvent*)
• focusInEvent(QFocusEvent*)
f I E t(QF E t*)
• hoverEnterEvent(QGraphicsSceneHoverEvent*)
• And similar to QWidget::event(QEvent*) there is
g ( )
QGraphicsItem::sceneEvent(QEvent*) that receives all events for an item
14

15. Qt Advanced
Qt Property System
15

16. Qt Property System – 1/2
• Data members of QObject-derived classes can be exposed as properties
• Properties are defined in class declarations using the Q PROPERTY macro
Q_PROPERTY
• Syntax:
Q_PROPERTY( type name READ getFunction
[WRITE setFunction ] [RESET resetFunction ]
[DESIGNABLE bool ] [SCRIPTABLE bool ] [STORED bool ] )
• Examples:
Q_PROPERTY( QString title READ title WRITE setTitle )
Q_PROPERTY( bool enabled READ isEnabled WRITE setEnabled )
• Properties can be accessed using the functions QObject::property() and
QObject::setProperty()
• No need to even know the exact type of the object you are manipulating!
• If the property named in QObject::setProperty() does not exist, it will be dynamically added to the
object at run-time
run time
• Many widget members are Qt properties
• Used e.g. in the animation framework
16

17. Qt Property System – 2/2
// MyObject.h
class MyObject : public QObject {
Q_OBJECT
Q_PROPERTY(QString text READ text WRITE setText)
public: // Constructor and destructor omitted for simplicity
void setText(const QString& text) const { m_text = text; }
QString text() const { return m_text; }
p
private:
QString m_text;
};
// Usage in SomeCode.cpp:
MyObject* myObject = new MyObject();
QObject* object = myObject;
myObject->setText(”Some text”); // Access either in the normal way...
object->setProperty(”text”, ”Other text”); // ... or by using the property system
17

18. Qt Advanced
Animation Framework
18

19. Introduction 1(2)
• I Qt 4.6 a new Animation F
In 46 A i ti Framework was introduced
k i t d d
• The idea is to provide an easy and scalable way of creating animated
and smooth GUIs
• Hides the complexity of handling timers
• Provides a set of pre-defined easing curves, custom curves can be
provided b the d
id d by h developer as needed
l d d
• Works by modifying the properties of the QObjects being animated
19

20. Introduction 2(2)
• Easy to use together with the State Machine Framework to provide animated
transitions b t
t iti between states
t t
• State Machine Framework is introduced in the next session
• Normally the animations have a finite duration
• QTimeLine used as a timer behind the scenes
• Can be made to loop and run backwards
• If duration is set to -1, the animation will run until explicitly stopped
20

21. Main Classes
21

22. Example – Animating a Button
• What do you think the example below does?
Q
QPushButton button("Animated Button");
( )
button.show();
QPropertyAnimation animation(&button, "geometry");
animation.setDuration(10000);
animation.setStartValue(QRect(0, 0, 100, 30));
animation.setKeyValueAt(0.5, QRect(250, 250, 100, 30));
animation.setEndValue(QRect(0, 0, 100, 30));
animation.start();
22

23. QGraphicsObject
• All normal QWidgets can easily be animated as they are, since they
y y y
derive from QObject
• This is not the case with QGraphicsItems
• Because QObject-functionality is not always needed; this way this common
QObject functionality
base class remains lighter weight
• A new class was introduced to help with custom graphics classes:
QGraphicsObject
• Provides access to signals, slots and properties
• Use it as your base class when needed
23

24. Non-QObject Graphics Classes 1(2)
• H
How t use the existing non-QObject graphics classes with th
to th i ti QObj t hi l ith the
Animation FW?
• QGraphicsPixmapItem, QGraphicsLineItem
• QAbstractGraphicsShapeItem-derived classes
• Derive from the wanted utility class, and
• Add QObject as another base class when needed
• In other words, do exactly like QGraphicsObject does it!
Add when needed
24

25. Non-QObject Graphics Classes 2(2)
• Th custom subclass (
The t b l (MyPixmapItem) can now also expose it b
i ) l its base
class’s member variables as properties
• A suitable setter function is needed in the base class
• For example, base class provides a setter and a getter function and
subclass uses these to declare a property:
class MyPixmapItem : public QObject, public QGraphicsPixmapItem {
Q_OBJECT
// Refers to QGraphicsItem::pos() and setPos()
Q_PROPERTY(QPointF pos READ pos WRITE setPos)
...
25

26. Animation Groups 1(2)
• Classes QSequentialAnimationGroup and
QParalleAnimationGroup can be used to run multiple animations
in sequence or in parallel
• Their base class QAnimationGroup further derives from
Q p
QAbstractAnimation
• An animation group can be used wherever a ”normal” animation could –
e.g. a g p within a g p
g group group
• Enables building very complex animation sequences
26

27. Animation Groups 2(2)
QPropertyAnimation* animation1 = new QPropertyAnimation(...);
QPropertyAnimation* animation2 = new QPropertyAnimation(...);
QPropertyAnimation* animation3 = new QPropertyAnimation(...);
QPropertyAnimation* animation4 = new QPropertyAnimation(...);
QParallelAnimationGroup *parallel = new QParallelAnimationGroup();
parallel->addAnimation(animation2);
parallel->addAnimation(animation3);
QSequentialAnimationGroup* seq = new QSequentialAnimationGroup();
seq->addAnimation(animation1);
dd i i ( i i 1)
seq->addAnimation(parallel);
seq->addAnimation(animation4);
seq->start();
27

28. Easing Curves
• Th Animation FW provides multiple pre-made easing curves f your
The A i ti id lti l d i for
convenience
• Represented by the class QEasingCurve
• Custom curves can implemented by the developer; see the class
documentation for details
• Typically used to control e.g. how the animation starts and/or finishes
yp y g
• QEasingCurve::OutBounce
• QEasingCurve::InOutQuad
•…
QPropertyAnimation animation(&button, "geometry");
animation.setEasingCurve(QEasingCurve::OutBounce);
g g
• Take a look at the Easing Curves example in the Qt Demo tool
28

29. Summary
• Graphics View is the framework used for nice graphics and animations in Qt
• Think of it as a canvas that contains graphical items
• Items can move around freely
• Enables creation of attractive GUIs
• Qt extends basic C++ functionality with its property system
• An extremely versatile mechanism for exposing object’s internals
y p g j
• Breaks a basic OO-principle: information encapsulation
• Works via the meta-object system
• U d e.g. b th A i ti F
Used by the Animation Framework
k
• The new Animation Framework makes implementing complex animations even
easier than before
• No need to worry about timers
• Nice extra features provided, e.g. easing curves
29