Qt Application Programming with C++ - Part 2

Object communication • Signals & Slots • Event Handling

Objectives • How objects communication • Details of signals & slots • Which variations for signal/slot connections exist • How to create custom signals & slots • What the role of the Qt event loop is • How Qt handles events

• Between objects Signals & Slots • Between Qt and the application Events • Between Objects on threads Signal & Slots + Events • Between Applications DBus, QSharedMemory Object communication

Callbacks General Problem How do you get from "the user clicks a button" to your logic? • Possible solutions • Callbacks • Based on function pointers • Not type-safe • Observer Pattern (Listener) • Based on interface classes • Needs listener registration • Many interface classes • Qt uses • Signals and slots for high-level (semantic) callbacks • Virtual methods for low-level (syntactic) events.

Connecting signals and slots Signal emitted slot implementedSignal/slot connection QObject::connect(slider,SIGNAL(valueChanged),progressbar, SLOT(setValue)) QObject::connect(slider,SIGNAL(valueChanged),progressbar, SLOT(setValue)) void QProgressBar::setValue(int value) { mvalue = value } void QProgressBar::setValue(int value) { mvalue = value } void Qslider::mousePressEvent(…) { emit valueChanged(value) } void Qslider::mousePressEvent(…) { emit valueChanged(value) } Demo

Connection variants • Qt 4 style: connect(slider,SIGNAL(valueChanged(int)), progressBar, SLOT(setValue(int))); • Using function pointers (Qt5): connect( slider, &QSlider::valueChanged, progressBar, &QSpinBox::setValue ); Demo • Using non-member function: static void printValue(int value) {...} connect( slider, &QSignal::valueChanged, &printValue ); Demo

Custom slots • File: myclass.h class MyClass : public QObject { Q_OBJECT // marker for moc // ... public slots: void setValue(int value); // a custom slot }; • File: myclass.cpp void MyClass::setValue(int value) { // slot implementation } Demo

Custom signals • File: myclass.h class MyClass : public QObject { Q_OBJECT // marker for moc // ... signals: void valueChanged(int value); // a custom signal }; • File: myclass.cpp // No implementation for a signal • Sending a signal emit valueChanged(value); • Demo

Q_OBJECT - flag • Q_OBJECT • Enhances QObject with meta-object information • Required for signals • Required for slots when using the Qt4 way • moc creates meta-object information • moc -o moc_myclass.cpp myclass.h • c++ -c myclass.cpp; c++ -c moc_myclass.cpp • c++ -o myapp moc_myclass.o myclass.o • qmake takes care of mocing files for you

Variations of Signal/Slot Signal(s) Connect to Slot(s) One  Many Many  One One  Another signal • Signal to Signal connection connect(bt, SIGNAL(clicked()), this, SIGNAL(okSignal())); • Not allowed to name parameters connect( m_slider, SIGNAL( valueChanged( int value ) ) this, SLOT( setValue( int newValue ) ) )

Rules for Signal/Slot Can ignore arguments, but not create values from nothing. Eg: Signal Slot rangeChanged(int,int)    setRange(int,int) setValue(int) Update() valueChanged(int)   X setValue(int) Update() setRange(int,int) textChanged(QSting) X setValue(int)

Hands-on • Lab 1: Select colour • Objective • Template code • Lab 2: Slider • Objective • Template code

Event Processing Qt is an event-driven UI toolkit Qapplication::exec() runs the event loop 1.Generate Events • by input devices: keyboard, mouse, etc. • by Qt itself (e.g. timers) 2.Queue Events • by event loop 3.Dispatch Events • by QApplication to receiver: QObject • Key events sent to widget with focus • Mouse events sent to widget under cursor 4.Handle Events • by QObject event handler methods

Event Processing QPAQPA QcoreApplicationQcoreApplicationEvent loopEvent loop QQuickViewQQuickViewQQuickMouseAreaQQuickMouseArea Press mePress me QQuickMouseArea QQuickView

Event Processing QPAQPA QcoreApplicationQcoreApplicationEvent loopEvent loop sendSpontaneousEvent (QObject *, QEvent *)

Event Processing QCoreApplicationQCoreApplication QWindowQWindow QQuickCanvasQQuickCanvas QQuickViewQQuickView 1 event (QEvent *) 2 event (...) 3 mousePressEvent (...) MouseEvent

Event Processing QWindowQWindow QQuickCanvasQQuickCanvas QQuickViewQQuickView QQuickItemQQuickItem QQuickMouseAreaQQuickMouseArea mousePressEvent (QMouseEvent *)

Event Handling • QObject::event(QEvent *event) • Handles all events for this object • Specialized event handlers for QWidget and QQuickItem: • mousePressEvent() for mouse clicks • touchEvent() for key presses • Accepting an Event • event->accept() / event->ignore() • Accepts or ignores the event • Accepted is the default. • Event propagation • Happens if event is ignored • Might be propagated to parent widget Demo

Event Handling • QCloseEvent delivered to top level widgets (windows) • Accepting event allows window to close • Ignoring event keeps window open void MyWidget::closeEvent(QCloseEvent *event) { if (maybeSave()) { writeSettings(); event->accept(); // close window } else { event->ignore(); // keep window } } Demo

Summary • How do you connect a signal to a slot? • How would you implement a slot? • How would you emit a signal? • Can you return a value from a slot? • When do you need to run qmake? • Where do you place the Q_OBJECT macro and when do you need it? • What is the purpose of the event loop • How does an event make it from the device to an object in Qt?

Multithreading • Most GUI applications have a single thread of execution in which the event loop is running • However, if the user invokes a time consuming operation the interface freezes. We can work around this in different ways: • Using the QApplication::processEvent() during long tasks to make sure events (key, window, etc.) are delivered and the UI stays responsive. • Using threads to perform the long running tasks. Qt has a number of options for this.

Multithreading Technologies • QThread: Low-Level API with Optional Event Loops • QThreadPool and QRunnable: Reusing Threads • QtConcurrent: Using a High-level API • WorkerScript: Threading in QML

QThread • QThread is the central class in Qt to run code in a different thread • It's a QObject subclass • Not copiable/moveable • Has signals to notify when the thread starts/finishes • It is meant to manage a thread

QThread usage • To create a new thread executing some code, subclass QThread and reimplement run() • Then create an instance of the subclass and call start() • Threads have priorities that you can specify as an optional parameter to start(), or change with setPriority() • The thread will stop running when (some time after) returning from run() • QThread::isRunning() and QThread::isFinished() provide information about the execution of the thread • You can also connect to the QThread::started() and QThread::finished() signals • A thread can stop its execution temporarily by calling one of the QThread::sleep() functions • Generally a bad idea, being event driven (or polling) is much much Better • You can wait for a QThread to finish by calling wait() on it • Optionally passing a maximum number of milliseconds to wait

QThread caveats From a non-main thread you cannot: • Perform any GUI operation • Including, but not limited to: using any QWidget / Qt Quick / Qpixmap APIs • Using QImage, QPainter, etc. (i.e. "client side") is OK • Using OpenGL may be OK: check at runtime QOpenGLContext::supportsThreadedOpenGL() • Call Q(Core|Gui)Application::exec() • Be sure to always destroy all the QObjects living in secondary threads before destroying the corresponding QThread object • Do not ever block the GUI thread

QThread usage • There are two basic strategies of running code in a separate thread with QThread: • Without an event loop • With an event loop

QThread usage without an event loop • Subclass QThread and override QThread::run() • Create an instance and start the new thread via QThread::start() • Demo

QThread usage with an event loop • An event loop is necessary when dealing with timers, networking, queued connections, and so on. • Qt supports per-thread event loops: • Each thread-local event loop delivers events for the QObjects living in that thread. QThread::exec()QThread::exec() QApplication::exec()QApplication::exec() Obj 1Obj 1 Obj 2Obj 2 Obj 3Obj 3 Obj 1Obj 1 Obj 2Obj 2 Obj 3Obj 3 Obj 4Obj 4 Thread 1 Main Thread QThread::exec()QThread::exec() Obj 1Obj 1 Obj 2Obj 2 Obj 3Obj 3 Thread 2

QThread usage with an event loop • We can start a thread-local event loop by calling QThread::exec() from within run(): 1 class MyThread : public QThread { 2 private: 3 void run() override { 4 auto socket = new QTcpSocket; 5 socket->connectToHost(...); 67 exec(); // run the event loop 89 // cleanup 10 } 11}; Demo • QThread::quit() or QThread::exit() will quit the event loop • We can also use QEventLoop • Or manual calls to QCoreApplication::processEvents() • The default implementation of QThread::run() actually calls QThread::exec() • This allows us to run code in other threads without sub classing QThread:

QtConcurrent • QtConcurrent is a namespace that provides higher-level classes and algorithms for writing concurrent software. • Using QtConcurrent's functional map/filter/reduce algorithms, which apply functions in parallel to each item in a container. • You can write a program that automatically takes advantage of the system's multiple cores by distributing the processing across the threads managed by the thread pool.

QtConcurrent • Qt Concurrent supports several STL-compatible container and iterator types, but works best with Qt containers that have random-access iterators, such as QList or Qvector • Demo

QThreadPool and QRunnable • Creating and destroying threads frequently can be expensive. • To avoid the cost of thread creation, a thread pool can be used. • A thread pool is a place where threads can be parked and fetched. • We derive a class from QRunnable. The code we want to run in another thread needs to be placed in the reimplemented QRunnable::run() method. • Demo

Synchronization • Any concurrent access to shared resources must not result in a data race • Two conditions for this to happen: 1. At least one of the accesses is a write 2. The accesses are not atomic and no access happens before the other

Synchronization Qt has a complete set of cross-platform, low-level APIs for dealing with synchronization: • QMutex is a mutex class (recursive and non-recursive) • QSemaphore is a semaphore • QWaitCondition is a condition variable • QReadWriteLock is a shared mutex • QAtomicInt is an atomic int • QAtomicPointer<T> is an atomic pointer to T • Demo’

Thread safety in Qt A function is: • Thread safe: if it's safe for it to be invoked at the same time, from multiple threads, on the same data, without synchronization • Reentrant: if it's safe for it to be invoked at the same time, from multiple threads, on different data; otherwise it requires external synchronization • Non-reentrant (thread unsafe): if it cannot be invoked from more than one thread at all For classes, the above definitions apply to non-static member functions when invoked on the same instance.

Examples • Thread safe: • QMutex • QObject::connect() • QCoreApplication::postEvent() • Reentrant: • QString • QVector • QImage • value classes in general • Non-reentrant: • QWidget (including all of its subclasses) • QQuickItem • QPixmap • in general, GUI classes are usable only from the main thread

QtMultimedia • Qt Multimedia is an essential module that provides a rich set of QML types and C++ classes to handle multimedia content. • It also provides necessary APIs to access the camera and radio functionality.

Features • Access raw audio devices for input and output • Play low latency sound effects • Play media files in playlists (such as compressed audio or video files) • Record audio and compress it • Tune and listen to radio stations • Use a camera, including viewfinder, image capture, and movie recording • Play 3D positional audio with Qt Audio Engine • Decode audio media files into memory for processing • Accessing video frames or audio buffers as they are played or recorded

Audio • Qt Multimedia offers a range of audio classes, covering both low and high level approaches to audio input, output and processing. • For playing media or audio files that are not simple, uncompressed audio, you can use the QMediaPlayer C++ class. • The QMediaPlayer class and associated QML types are also capable of playing video, if required. • The compressed audio formats supported does depend on the operating system environment, and also what media plugins the user may have installed. • For recording audio to a file, the QAudioRecorder class allows you to compress audio data from an input device and record it. • Demo

Video • We can use the QMediaPlayer class to decode a video file, and display it using QVideoWidget, QGraphicsVideoItem, or a custom class. • Demo

Objectives • Painting on Widgets • Color Handling • Painting Operations • Style Sheets

Objectives • Painting • You paint with a painter on a paint device during a paint event • Qt widgets know how to paint themselves • Often widgets look like we want • Painting allows device independent 2D visualization • Allows to draw pie charts, line charts and many more • StyleSheets • Fine grained control over the look and feel • Easily applied using style sheets in CSS format

Module Objectives Covers techniques for general 2D graphics and styling applications. • Painting • Painting infrastructure • Painting on widget • Color Handling • Define and use colors • Pens, Brushes, Palettes • Shapes • Drawing shapes • Transformation • 2D transformations of a coordinate system • Style Sheets • How to make small customizations • How to apply a theme to a widget or application

Painting & Styling • Painting on Widgets • Color Handling • Painting Operations • Style Sheets

QPainter • Paints on paint devices (QPaintDevice) • QPaintDevice implemented by • On-Screen: QWidget • Off-Screen: QImage, QPixmap • And others ... • Provides drawing functions • Lines, shapes, text or pixmaps • Controls • Rendering quality • Clipping • Composition modes

Painting on Widgets • Override paintEvent(QPaintEvent*) void CustomWidget::paintEvent(QPaintEvent *) { QPainter painter(this); painter.drawRect(0,0,100,200); // x,y,w,h } • Schedule painting • update(): schedules paint event • repaint(): repaints directly • Qt handles double-buffering • To enable filling background: • QWidget::setAutoFillBackground(true)

Coordinate System • Controlled by QPainter • Origin: Top-Left • Rendering • Logical - mathematical • Aliased - right and below • Anti-aliased – smoothing • Rendering quality switch • QPainter::setRenderHint()

Geometry Classes • QSize(w,h) • scale, transpose • QPoint(x,y) • QLine(point1, point2) • translate, dx, dy • QRect(point, size) • adjust, move • translate, scale, center QSize size(100,100); QPoint point(0,0); QRect rect(point, size); rect.adjust(10,10,-10,-10); QPoint center = rect.center();

Color Values • Using different color models: • QColor(255,0,0) // RGB • QColor::fromHsv(h,s,v) // HSV • QColor::fromCmyk(c,m,y,k) // CMYK • Defining colors: QColor(255,0,0); // red in RGB QColor(255,0,0, 63); // red 25% opaque (75% transparent) QColor("#FF0000"); // red in web-notation QColor("red"); // by svg-name Qt::red; // predefined Qt global colors • Many powerful helpers for manipulating colors QColor("black").lighter(150); // a shade of gray • QColor always refers to device color space

QPen • A pen (QPen) consists of: • a color or brush • a width • a style (e.g. NoPen or SolidLine) • a cap style (i.e. line endings) • a join style (connection of lines) • Activate with QPainter::setPen(). QPainter painter(this); QPen pen = painter.pen(); pen.setBrush(Qt::red); pen.setWidth(3); painter.setPen(pen); // draw a rectangle with 3 pixel width red outline painter.drawRect(0,0,100,100);

The Outline Rule The outline equals the size plus half the pen width on each side. •For a pen of width 1: QPen pen(Qt::red, 1); // width = 1 float hpw = pen.widthF()/2; // half-pen width QRectF rect(x,y,width,height); QRectF outline = rect.adjusted(-hpw, -hpw, hpw, hpw); •Due to integer rounding on a non-antialiased grid, the outline is shifted by 0.5 pixel towards the bottom right. •Demo

QBrush • QBrush defines fill pattern of shapes • Brush configuration • setColor(color) • setStyle(Qt::BrushStyle) • NoBrush, SolidPattern, ... • QBrush(gradient) // QGradient's • setTexture(pixmap) • Brush with solid red fill painter.setPen(Qt::red); painter.setBrush(QBrush(Qt::yellow, Qt::SolidPattern)); painter.drawRect(rect);

Gradient fills • Gradients used with QBrush • Gradient types • QLinearGradient • QConicalGradient • QRadialGradient • Gradient from P1(0,0) to P2(100,100) QLinearGradient gradient(0, 0, 100, 100); // position, color: position from 0..1 gradient.setColorAt(0, Qt::red); gradient.setColorAt(0.5, Qt::green); gradient.setColorAt(1, Qt::blue); painter.setBrush(gradient); // draws rectangle, filled with brush painter.drawRect(0, 0, 100, 100 ); • Demo

Brush on QPen • Possible to set a brush on a pen • Strokes generated will be filled with the brush • Demo

Color Themes and Palettes • To support widgets color theming • setColor(blue) not recommended • Colors needs to be managed • QPalette manages colors • Consist of color groups • enum QPalette::ColorGroup • Resemble widget states • QPalette::Active • Used for window with keyboard focus • QPalette::Inactive • Used for other windows • QPalette::Disabled • Used for disabled widgets

Drawing Figures • Painter configuration • pen width: 2 • pen color: red • font size: 10 • brush color: yellow • brush style: solid • Demo

Drawing Text • QPainter::drawText(rect, flags, text) QPainter painter(this); painter.drawText(rect, Qt::AlignCenter, tr("Qt")); painter.drawRect(rect); • QFontMetrics • calculate size of strings QFont font("times", 24); QFontMetrics fm(font); int pixelsWide = fm.width("Width of this text?"); int pixelsHeight = fm.height();

Transformation • Manipulating the coordinate system • translate(x,y) • scale(sx,sy) • rotate(a) • shear(sh, • Demo

Transform and Center • scale(sx, sy) • scales around QPoint(0,0) • Same applies to all transform operations • Scale around center? painter.drawRect(r); painter.translate(r.center()); painter.scale(sx,sy); painter.translate(-r.center()); // draw center-scaled rect painter.drawRect(r);

QPainterPath • Container for painting operations • Enables reuse of shapes QPainterPath path; path.addRect(20, 20, 60, 60); path.moveTo(0, 0); path.cubicTo(99, 0, 50, 50, 99, 99); path.cubicTo(0, 99, 50, 50, 0, 0); painter.drawPath(path); • Path information controlPointRect() - rect containing all points contains() - test if given shape is inside path intersects() - test given shape intersects path • Demo

Hands-on • Lab 7: Pie chart • Objectives • Template code

Qt Style Sheets • Mechanism to customize appearance of widgets • Additional to subclassing QStyle • Inspired by HTML CSS • Textual specifications of styles • Applying Style Sheets • QApplication::setStyleSheet(sheet) • On whole application • QWidget::setStyleSheet(sheet) • On a specific widget (incl. child widgets) • Demo

CSS Rules CSS Rule selector { property : value; property : value } • Selector: specifies the widgets • Property/value pairs: specify properties to change. QPushButton {color:red; background-color:white} • Examples of stylable elements • Colors, fonts, pen style, alignment. • Background images. • Position and size of sub controls. • Border and padding of the widget itself. • Reference of stylable elements • stylesheet-reference

The Box Model • Every widget treated as box • Four concentric rectangles • Margin, Border, Padding, Content • Customizing QPushButton QPushButton { border-width: 2px; border-radius: 10px; padding: 6px; // ... } • By default, margin, border-width, and padding are 0

Selector Types • *{ } // Universal selector • All widgets • QPushButton { } // Type Selector • All instances of class • QPushButton { } // Class Selector • All instances of class, but not subclasses • QPushButton#objectName // ID Selector • All Instances of class with objectName • QDialog QPushButton { } // Descendant Selector • All instances of QPushButton which are child of QDialog • QDialog > QPushButton { } // Direct Child Selector • All instances of QPushButton which are direct child of QDialog • QPushButton[enabled="true"] // Property Selector • All instances of class which match property

Selector Details • Property Selector • If property changes it is required to re-set style sheet • Combining Selectors • QLineEdit, QComboBox, QPushButton { color: red } • Pseudo-States • Restrict selector based on widget's state • Example: QPushButton:hover {color:red} • Demo • Selecting Subcontrols • Access subcontrols of complex widgets • as QComboBox, QSpinBox, ... • QComboBox::drop-down { image: url(dropdown.png) } • Subcontrols positioned relative to other elements • Change using subcontrol-origin and subcontrol-position

Cascading Effective style sheet obtained by merging 1. Widgets's ancestor (parent, grandparent, etc.) 2. Application stylesheet • On conflict: widget own style sheet preferred qApp->setStyleSheet("QPushButton { color: white }"); button->setStyleSheet("* { color: blue }"); • Style on button forces button to have blue text • In spite of more specific application rule • Demo

Selector Specifity • Conflict: When rules on same level specify same property • Specificity of selectors apply QPushButton:hover { color: white } QPushButton { color: red } • Selectors with pseudo-states are more specific • Calculating selector's specificity • a Count number of ID attributes in selector • b Count number of property specifications • c Count number of class names • Concatenate numbers a-b-c. Highest score wins. • If rules scores equal, use last declared rule QPushButton {} /* a=0 b=0 c=1 -> specificity = 1 */ QPushButton#ok {} /* a=1 b=0 c=1 -> specificity = 101 */ • Demo

Hands-on • Try this demo code and • Investigate style sheet • Modify style sheet • Remove style sheetand implement your own

Objectives • Main Windows • Settings • Resources • Deploying Qt Applications

Objectives We will create an application to show fundamental concepts • Main Window: How a typical main window is structured • Settings: Store/Restore application settings • Resources: Adding icons and other files to your application • Deployment: Distributing your application

Application creation • Main Windows • Settings • Resources • Deploying Qt Applications

Application Ingredients • Main window with • Menu bar • Tool bar, Status bar • Central widget • Often a dock window • Settings (saving state) • Resources (e.g icons) • Translation • Load/Save documents Not a complete list

Main Window • QMainWindow: main application window • Has own layout • Central Widget • QMenuBar • QToolBar • QDockWidget • QStatusBar • Central Widget • QMainWindow::setCentralWidget( widget ) • Just any widget object

QAction Action is an abstract user interface command • Emits signal triggered on execution • Connected slot performs action • Added to menus, toolbar, key shortcuts • Each performs same way • Regardless of user interface used void MainWindow::setupActions() { QAction* action = new QAction(tr("Open ..."), this); action->setIcon(QIcon(":/images/open.png")); action->setShortcut(QKeySequence::Open); action->setStatusTip(tr("Open file")); connect(action, SIGNAL(triggered()), this, SLOT(onOpen())); menu->addAction(action); toolbar->addAction(action); • Qaction Documentation

QAction capabilities • setEnabled(bool) • Enables disables actions • In menu and toolbars, etc... • setCheckable(bool) • Switches checkable state (on/off) • setChecked(bool) toggles checked state • setData(QVariant) • Stores data with the action • Documentation • QAction

Menu Bar • QMenuBar: a horizontal menu bar • QMenu: represents a menu • indicates action state • QAction: menu items added to QMenu void MainWindow::setupMenuBar() { QMenuBar* bar = menuBar(); QMenu* menu = bar->addMenu(tr("&File")); menu->addAction(action); menu->addSeparator(); QMenu* subMenu = menu->addMenu(tr("Sub Menu")); ...

QToolBar • Movable panel ... • Contains set of controls • Can be horizontal or vertical • QMainWindow::addToolbar( toolbar ) • Adds toolbar to main window • QMainWindow::addToolBarBreak() • Adds section splitter • QToolBar::addAction( action ) • Adds action to toolbar • QToolBar::addWidget(widget) • Adds widget to toolbar void MainWindow::setupToolBar() { QToolBar* bar = addToolBar(tr("File")); bar->addAction(action); bar->addSeparator(); bar->addWidget(new QLineEdit(tr("Find ..."))); ...

QToolButton • Quick-access button to commands or options • Used when adding action to QToolBar • Can be used instead QPushButton • Different visual appearance! • Advantage: allows to attach action QToolButton* button = new QToolButton(this); button->setDefaultAction(action); // Can have a menu button->setMenu(menu); // Shows menu indicator on button button->setPopupMode(QToolButton::MenuButtonPopup); // Control over text + icon placements button->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

QStatusBar Horizontal bar Suitable for presenting status information • showMessage( message, timeout ) • Displays temporary message for specified milli-seconds • clearMessage() • Removes any temporary message • addWidget() or addPermanentWidget() • Normal, permanent messages displayed by widget void MainWindow::createStatusBar() { QStatusBar* bar = statusBar(); bar->showMessage(tr("Ready")); bar->addWidget(new QLabel(tr("Label on StatusBar")));

QDockWidget • Window docked into main window • Qt::DockWidgetArea enum • Left, Right, Top, Bottom dock areas • QMainWindow::setCorner(corner,area) • Sets area to occupy specified corner • QMainWindow::setDockOptions(options) • Specifies docking behavior (animated, nested, tabbed, ...) void MainWindow::createDockWidget() { QDockWidget *dock = new QDockWidget(tr("Title"), this); dock->setAllowedAreas(Qt::LeftDockWidgetArea); QListWidget *widget = new QListWidget(dock); dock->setWidget(widget); addDockWidget(Qt::LeftDockWidgetArea, dock);

QMenu and Context Menus • Launch via event handler void MyWidget::contextMenuEvent(event) { m_contextMenu->exec(event->globalPos()); • or signal customContextMenuRequested() • Connect to signal to show context menu • Or via QWidget::actions() list • QWidget::addAction(action) • setContextMenuPolicy(Qt::ActionsContextMenu) • Displays QWidget::actions() as context menu

Hands-on • Lab 8: Text editor • Objectives • Template code

QSettings • Configure QSettings QCoreApplication::setOrganizationName("MyCompany"); QCoreApplication::setOrganizationDomain( "mycompany.com" ); QCoreApplication::setApplicationName("My Application"); • Typical usage QSettings settings; settings.setValue("group/value", 68); int value = settings.value("group/value").toInt(); • Values are stored as QVariant • Keys form hierarchies using '/' • or use beginGroup(prefix) / endGroup() • value() excepts default value • settings.value("group/value", 68).toInt() • If value not found and default not specified Invalid QVariant() returned

Restoring State • Store geometry of application void MainWindow::writeSettings() { QSettings settings; settings.setValue("MainWindow/size", size()); settings.setValue("MainWindow/pos", pos()); } • Restore geometry of application void MainWindow::readSettings() { QSettings settings; settings.beginGroup("MainWindow"); resize(settings.value("size", QSize(400, 400)).toSize()); move(settings.value("pos", QPoint(200, 200)).toPoint()); settings.endGroup(); }

Resource System • Platform-independent mechanism for storing binary files • Not limited to images • Resource files stored in application's executable • Useful if application requires files • E.g. icons, translation files, sounds • Don't risk of losing files, easier deployment • Docs

Using Resources • Resources specified in .qrc file <!DOCTYPE RCC><RCC version="1.0"> <qresource> <file>images/copy.png</file> <file>images/cut.png</file> </qresource> </RCC> • Can be created using QtCreator • Resources are accessible with ':' prefix • Example: ":/images/cut.png" • Simply use resource path instead of file name • QIcon(":/images/cut.png") • To compile resource, edit .pro file • RESOURCES += application.qrc • qmake produces make rules to generate binary file

Hands-On • Use your previous text editor, to use Qt resource system for icons • Tip: You can use Qt Creator to create QRC files

Ways of Deploying • Static Linking • Results in stand-alone executable • +Only few files to deploy • -Executables are large • -No flexibility • -You cannot deploy plugins • Shared Libraries • +Can deploy plugins • +Qt libs shared between applications • +Smaller, more flexible executables • -More files to deploy • Qt is by default compiled as shared library • If Qt is pre-installed on system • Use shared libraries approach • Reference Documentation

Deployment • Shared Library Version • If Qt is not a system library • Need to redistribute Qt libs with application • Minimal deployment • Libraries used by application • Plugins used by Qt • Ensure Qt libraries use correct path to find Qt plugins • Static Linkage Version • Build Qt statically • $QTDIR/configure -static <your other options> • Specify required options (e.g. sql drivers) • Link application against Qt • Check that application runs stand-alone • Copy application to machine without Qt and run it

Dialogs and Designer • Dialogs • Common Dialogs • Qt Designer

Dialogs and Designer • Custom Dialogs • Modality • Inheriting QDialog • Dialog buttons • Predefined Dialogs • File, color, input and font dialogs • Message boxes • Progress dialogs • Wizard dialogs • Qt Designer • Design UI Forms • Using forms in your code • Dynamic form loading

QDialog • Base class of dialog window widgets • General Dialogs can have 2 modes • Modal dialog • Remains in foreground, until closed • Blocks input to remaining application • Example: Configuration dialog • Modeless dialog • Operates independently in application • Example: Find/Search dialog • Modal dialog example MyDialog dialog(this); dialog.setMyInput(text); if(dialog.exec() == Dialog::Accepted) { // exec blocks until user closes dialog

Modeless Dialog • Use show() • Displays dialog • Returns control to caller void EditorWindow::find() { if (!m_findDialog) { m_findDialog = new FindDialog(this); connect(m_findDialog, SIGNAL(findNext()), this, SLOT(onFindNext())); } m_findDialog->show(); // returns immediately m_findDialog->raise(); // on top of other windows m_findDialog->activateWindow(); // keyboard focus }

Custom Dialogs • Inherit from QDialog • Create and layout widgets • Use QDialogButtonBox for dialog buttons • Connect buttons to accept()/reject() • Override accept()/reject() MyDialog::MyDialog(QWidget *parent) : QDialog(parent) { m_label = new QLabel(tr("Input Text"), this); m_edit = new QLineEdit(this); m_box = new QDialogButtonBox( QDialogButtonBox::Ok| QDialogButtonBox::Cancel, this); connect(m_box, SIGNAL(accepted()), this, SLOT(accept())); connect(m_box, SIGNAL(rejected()), this, SLOT(reject())); ... // layout widgets } void MyDialog::accept() { // customize close behaviour if(isDataValid()) { QDialog::accept() } }

Deletion and Extension • Deletion of dialogs • No need to keep dialogs around forever • Call QObject::deleteLater() • Or setAttribute(Qt::WA_DeleteOnClose) • Or override closeEvent() • Dialogs with extensions: • QWidget::show()/hide() used on extension m_more = new QPushButton(tr("&More")); m_more->setCheckable(true); m_extension = new QWidget(this); // add your widgets to extension m_extension->hide(); connect(m_more, SIGNAL(toggled(bool)), m_extension, SLOT(setVisible(bool))); • Example

QFileDialog • Allow users to select files or directories • Asking for a file name QString fileName = QFileDialog::getOpenFileName(this, tr("Open File")); if(!fileName.isNull()) { // do something useful } • QFileDialog::getOpenFileNames() • Returns one or more selected existing files • QFileDialog::getSaveFileName() • Returns a file name. File does not have to exist. • QFileDialog::getExistingDirectory() • Returns an existing directory. • setFilter("Image Files (*.png *.jpg *.bmp)") • Displays files matching the patterns

QMessageBox • Provides a modal dialog for ... • informing the user • asking a question and receiving an answer • Typical usage, questioning a user QMessageBox::StandardButton ret = QMessageBox::question(parent, title, text); if(ret == QMessageBox::Ok) { // do something useful } • Very flexible in appearance • Reference documentation • Other convenience methods • QMessageBox::information(...) • QMessageBox::warning(...) • QMessageBox::critical(...) • QMessageBox::about(...)

QProgressDialog • Provides feedback on the progress of a slow operation QProgressDialog dialog("Copy", "Abort", 0, count, this); dialog.setWindowModality(Qt::WindowModal); for (int i = 0; i < count; i++) { dialog.setValue(i); if (dialog.wasCanceled()) { break; } //... copy one file } dialog.setValue(count); // ensure set to maximum • Initialize with setValue(0) • Otherwise estimation of duration will not work • When operation progresses, check for cancel • QProgressDialog::wasCanceled() • Or connect to QProgressDialog::canceled() • To stay reactive call QApplication::processEvents() • See Documentation

QErrorMessage • Similar to QMessageBox with checkbox • Asks if message shall be displayed again m_error = new QErrorMessage(this); m_error->showMessage(message, type); • Messages will be queued • QErrorMessage::qtHandler() • installs an error handler for debugging • Shows qDebug(), qWarning() and qFatal() messages in QErrorMessage box

Other Common Dialogs • Asking for Input - QInputDialog • QInputDialog::getText(...) • QInputDialog::getInt(...) • QInputDialog::getDouble(...) • QInputDialog::getItem(...) • Selecting Color - QColorDialog • QColorDialog::getColor(...) • Selecting Font - QFontDialog • QFontDialog::getFont(...) • Example

Qwizard Guiding the user • Input dialog • Consisting of sequence of pages • Purpose: Guide user through process • Page by page • Supports • Linear and non-linear wizards • Registering and using fields • Access to pages by ID • Page initialization and cleanup • Title, sub-title • Logo, banner, watermark, background • Documentation • Each page is a QWizardPage • QWizard::addPage() • Adds page to wizard • example

Hands-on • Lab 9: Dialog • Objectives • Template code

Summary • When would you use a modal dialog, and when would you use a non-modal dialog? • When should you call exec() and when should you call show()? • Can you bring up a modal dialog, when a modal dialog is already active? • When do you need to keep widgets as instance variables? • What is the problem with this code: QDialog *dialog = new QDialog(parent); QCheckBox *box = new QCheckBox(dialog);

Qt Designer • Design UI forms visually • Visual Editor for • Signal/slot connections • Actions • Tab handling • Buddy widgets • Widget properties • Integration of custom widgets • Resource files

Designer Views Object Inspector Displays hierarchy of objects on form Property Editor Displays properties of selected object Widget Box Provides selection of widgets, layouts

Editing Modes • Widget Editing • Change appearance of form • Add layouts • Edit properties of widgets • Signal and Slots Editing • Connect widgets together with signals & slots • Buddy Editing • Assign buddy widgets to label • Buddy widgets help keyboard focus handling correctly • Tab Order Editing • Set order for widgets to receive the keyboard focus

UI Form Files • Form stored in .ui file • format is XML • uic tool generates code • From myform.ui • to ui_myform.h // ui_mainwindow.h class Ui_MainWindow { public: QLineEdit *fileName; ... // simplified code void setupUi(QWidget *) { /* setup widgets */ } }; • Form ui file in project (.pro) FORMS += mainwindow.ui

Form Wizards • Add New... "Designer Form" • or "Designer Form Class" (for C++ integration)

Naming Widgets 1. Place widgets on form 2. Edit objectName property • objectName defines member name in generated code

Form layout QFormLayout: Suitable for most input forms

Top-Level Layout • First layout child widgets • Finally select empty space and set top-level layout

Preview Mode Check that widget is nicely resizable

Code Integration // orderform.h class Ui_OrderForm; class OrderForm : public QDialog { private: Ui_OrderForm *ui; // pointer to UI object }; • "Your Widget" derives from appropriate base class • *ui member encapsulate UI class • Makes header independent of designer generated code

Code Integration // orderform.cpp #include "ui_orderform.h" OrderForm::OrderForm(QWidget *parent) : QDialog(parent), ui(new Ui_OrderForm) { ui->setupUi(this); } OrderForm::~OrderForm() { delete ui; ui=0; } • Default behavior in Qt Creator

Signals and Slots • Widgets are available as public members • ui->fileName->setText("image.png") • Name based on widgets object name • You can set up signals & slots traditionally... • connect(ui->okButton, SIGNAL(clicked()), ... • Auto-connection facility for custom slots • Automatically connect signals to slots in your code • Based on object name and signal • void on_objectName_signal(parameters); • Example: on_okButton_clicked() slot • Automatic connections • Qt Creator: right-click on widget and "Go To Slot" • Generates a slot using auto-connected name

Loading .ui files • Forms can be processed at runtime • Produces dynamically generated user interfaces • Disadvantages • Slower, harder to maintain • Risk: .ui file not available at runtime • Loading .ui file QUiLoader loader; QFile file("forms/textfinder.ui"); file.open(QFile::ReadOnly); QWidget *formWidget = loader.load(&file, this); • Locate objects in form ui_okButton = qFindChild<QPushButton*>(this, "okButton");

Hands-on • Lab 10: Order form • Objectives • Template code

Objectives • Model/View Concept • Custom Models • Delegates • Editing item data • Data Widget Mapper • Drag and Drop • Custom Tree Model

Objectives Using Model/View • Introducing to the concepts of model-view • Showing Data using standard item models Custom Models • Writing a simple read-only custom model. • Editable Models • Custom Delegates • Using Data Widget Mapper • Custom Proxy Models • Drag and Drop

Model/View • Model/View Concept • Custom Models • Delegates • Editing item data • Data Widget Mapper • Drag and Drop • Custom Tree Model

Why Model/View? • Isolated domain-logic • From input and presentation • Makes Components Independent • For Development • For Testing • For Maintenance • Foster Component Reuse • Reuse of Presentation Logic • Reuse of Domain Model

Model/View Components ViewView ModelModel DataData Delegate Rendering Editing Rendering Demo

View Classes • QtQuick ItemView • Abstract base class for scrollable views • QtQuick ListView • Items of data in a list • QtQuick GridView • Items of data in a grid • QtQuick PathView • Items of data along a specified path

Model Classes • QAbstractItemModel • Abstract interface of models • Abstract Item Models • Implement to use • Ready-Made Models • Convenient to use • Proxy Models • Reorder/filter/sort your items • Model class documentation QAbstractItemModelQAbstractItemModel QAbstractListModelQAbstractListModel QAbstractTableModelQAbstractTableModel QAbstractProxyModelQAbstractProxyModel QFileSystemModelQFileSystemModel QStandardItemModelQStandardItemModel QStringListModelQStringListModel QSortFilterProxyModelQSortFilterProxyModel

Data-Model-View Relationships • Standard Item Model • Data+Model combined • View is separated • Model is your data • Custom Item Models • Model is adapter to data • View is separated ModelModel ViewView ModelModel ViewView DataData DataData

QModelIndex • Refers to item in model • Contains all information to specify location • Located in given row and column • May have a parent index • QModelIndex API • row() - row index refers to • column() - column index refers to • parent() - parent of index • or QModelIndex() if no parent • isValid() • Valid index belongs to a model • Valid index has non-negative row and column numbers • model() - the model index refers to • data( role ) - data for given role

Table/Tree • Rows and columns • Item location in table model • Item has no parent (parent.isValid() == false) indexA = model->index(0, 0, QModelIndex()); indexB = model->index(1, 1, QModelIndex()); indexC = model->index(2, 1, QModelIndex()); • Parents, rows, and columns • Item location in tree model indexA = model->index(0, 0, QModelIndex()); indexC = model->index(2, 1, QModelIndex()); // asking for index with given row, column and parent indexB = model->index(1, 0, indexA);

Item and Item Roles • Item performs various roles • for other components (delegate, view, ...) • Supplies different data • for different situations • Example: • Qt::DisplayRole used displayed string in view • Asking for data QVariant value = model->data(index, role); // Asking for display text QString text = model->data(index, Qt::DisplayRole).toString() • Standard roles • Defined by Qt::ItemDataRole

Showing simple Data QStandardItemModel - Convenient Model • QStandardItemModel • Classic item-based approach • Only practical for small sets of data model = new QStandardItemModel(parent); item = new QStandardItem("A (0,0)"); model->appendRow(item); model->setItem(0, 1, new QStandardItem("B (0,1)")); item->appendRow(new QStandardItem("C (0,0)")); Demo • "B (0,1)" and "C (0,0)" - Not visible. (list view is only 1-dimensional)

Proxy Model • QSortFilterProxyModel • Transforms structure of source model • Maps indexes to new indexes view = new QQuickView(parent); // insert proxy model between model and view proxy = new QSortFilterProxyModel(parent); proxy->setSourceModel(model); view->engine()->rootContext()->setContextProperty("_proxy", proxy); Note: Need to load all data to sort or filter

Sorting/Filtering • Filter with Proxy Model // filter column 1 by "India" proxy->setFilterWildcard("India"); proxy->setFilterKeyColumn(1); • Sorting with Proxy Model // sort column 0 ascending proxy->sort(0, Qt::AscendingOrder); • Filter via TextInputs signal TextInput { onTextChanged: _proxy.setFilterWildcard(text) } • Demo

Summary • Models • QAbstractItemModel • Other Abstract Models • Ready-Made Models • Proxy Models • Index • row(),column(),parent() • data( role ) • model() • Item Role • Qt::DisplayRole • Standard Roles in Qt::ItemDataRoles • Model Structures • List, Table and Tree • Components • Model - Adapter to Data • View - Displays Structure • Delegate - Paints Item • Index - Location in Model • Views • ListView • GridView • PathView

Implementing a Model • Variety of classes to choose from • QAbstractListModel • One dimensional list • QAbstractTableModel • Two-dimensional tables • QAbstractItemModel • Generic model class • QStringListModel • One-dimensional model • Works on string list • QStandardItemModel • Model that stores the data • Notice: Need to subclass abstract models

Step 1: Read Only List Model class MyModel: public QAbstractListModel { public: // return row count for given parent int rowCount( const QModelIndex &parent) const; // return data, based on current index and requested role QVariant data( const QModelIndex &index, int role = Qt::DisplayRole) const; }; Demo

Step 2: Header Information QVariant MyModel::headerData(int section, Qt::Orientation orientation, int role) const { // return column or row header based on orientation } Demo

Step 3: Enabling Editing // should contain Qt::ItemIsEditable Qt::ItemFlags MyModel::flags(const QModelIndex &index) const { return QAbstractListModel::flags() | Qt::ItemIsEditable; } // set role data for item at index to value bool MyModel::setData( const QModelIndex & index, const QVariant & value, int role = Qt::EditRole) { ... = value; // set data to your backend emit dataChanged(topLeft, bottomRight); // if successful } Demo

Step 4: Row Manipulation // insert count rows into model before row bool MyModel::insertRows(int row, int count, parent) { beginInsertRows(parent, first, last); // insert data into your backend endInsertRows(); } // removes count rows from parent starting with row bool MyModel::removeRows(int row, int count, parent) { beginRemoveRows(parent, first, last); // remove data from your backend endRemoveRows(); } Demo

Hands-on • Lab 11: City list model • Objectives • Template code

Item Delegates • QAbstractItemDelegate subclasses • Control appearance of items in views • Provide edit and display mechanisms • QItemDelegate, QStyledItemDelegate • Default delegates • Suitable in most cases • Model needs to provide appropriate data • When to go for Custom Delegates? • More control over appearance of items

Item Appearance Data table shown has no custom delegate • No need for custom delegate! • Use Qt::ItemRole to customize appearance

QAbstractItemDelegate class BarGraphDelegate : public QAbstractItemDelegate { public: void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const; QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const; }; Demo Documentation

Editor Delegate • Provides QComboBox • for editing a series of values class CountryDelegate : public QItemDelegate { public: // returns editor for editing data QWidget *createEditor( parent, option, index ) const; // sets data from model to editor void setEditorData( editor, index ) const; // sets data from editor to model void setModelData( editor, model, index ) const; // updates geometry of editor for index void updateEditorGeometry( editor, option, index ) const; };

Creating Editor • Create editor by index QWidget *CountryDelegate::createEditor( ... ) const { QComboBox *editor = new QComboBox(parent); editor->addItems( m_countries ); return editor; } • Set data to editor void CountryDelegate::setEditorData( ... ) const { QComboBox* combo = static_cast<QComboBox*>( editor ); QString country = index.data().toString(); int idx = m_countries.indexOf( country ); combo->setCurrentIndex( idx ); }

Data to the model • When user finished editing • view asks delegate to store data into model void CountryDelegate::setModelData(editor, model, index) const { QComboBox* combo = static_cast<QComboBox*>( editor ); model->setData( index, combo->currentText() ); } • If editor has finished editing // copy edtitors data to model emit commitData( editor ); // close/destroy editor emit closeEditor( editor, hint ); // hint: indicates action performed next to editing

Editor's geometry • Delegate manages editor's geometry • View provides geometry information • QStyleOptionViewItem void CountryDelegate::updateEditorGeometry( ... ) const { // don't allow to get smaller than editors sizeHint() QSize size = option.rect.size().expandedTo(editor-> sizeHint()); QRect rect(QPoint(0,0), size); rect.moveCenter(option.rect.center()); editor->setGeometry( rect ); } • Demo • Case of multi-index editor • Position editor in relation to indexes

Setting Delegates • view->setItemDelegate( ... ) • view->setItemDelegateForColumn( ... ) • view->setItemDelegateForRow(... )

QDataWidgetMapper • Maps model sections to widgets • Widgets updated, when current index changes • Orientation • Horizontal => Data Columns • Vertical => Data Rows Mapping

QDataWidgetMapper • Mapping Setup mapper = new QDataWidgetMapper(this); mapper->setOrientation(Qt::Horizontal); mapper->setModel(model); // mapper->addMapping( widget, model-section) mapper->addMapping(nameEdit, 0); mapper->addMapping(addressEdit, 1); mapper->addMapping(ageSpinBox, 2); // populate widgets with 1st row mapper->toFirst(); • Track Navigation connect(nextButton, SIGNAL(clicked()), mapper, SLOT(toNext())); connect(previousButton, SIGNAL(clicked()), mapper, SLOT(toPrevious())); Demo

Mapped Property class QLineEdit : public QWidget { Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged USER true) // USER property }; • USER indicates property is user-editable property • Only one USER property per class • Used to transfer data between the model and the widget addMapping(lineEdit, 0); // uses "text" user property addMapping(lineEdit, 0, "inputMask"); // uses named property Demo

Drag and Drop for Views • Enable the View // enable item dragging view->setDragEnabled(true); // allow to drop internal or external items view->setAcceptDrops(true); // show where dragged item will be dropped view->setDropIndicatorShown(true); • Model has to provide support for drag and drop operations Qt::DropActions MyModel::supportedDropActions() const { return Qt::CopyAction | Qt::MoveAction; } • Model needs to support actions • For example Qt::MoveAction • implement MyModel::removeRows( ... )

QStandardItemModel • Setup of Model • Model is ready by default • model->mimeTypes() • "application/x-qabstractitemmodeldatalist“ • "application/x-qstandarditemmodeldatalist" • model->supportedDragActions() • QDropEvent::Copy | QDropEvent::Move • model->supportedDropActions() • QDropEvent::Copy | QDropEvent::Move • Setup of Item item = new QStandardItem("Drag and Droppable Item"); // drag by default copies item item->setDragEnabled(true); // drop mean adding dragged item as child item->setDropEnabled(true); Demo

QAbstractItemModel class MyModel : public QAbstractItemModel { public: // actions supported by the data in this model Qt::DropActions supportedDropActions() const; // for supported index return Qt::ItemIs(Drag|Drop)Enabled Qt::ItemFlags flags(const QModelIndex &index) const; // returns list of MIME types that are supported QStringList QAbstractItemModel::mimeTypes() const; // returns object with serialized data in mime formats QMimeData *mimeData(const QModelIndexList &indexes) const; // true if data and action can be handled, otherwise false bool dropMimeData(const QMimeData *data, Qt::DropAction action, int row, int column, const QModelIndex &parent); }; Demo

A Custom Tree Model in 5 Steps 1. Read-OnlyModel 2. EditableModel 3. Insert-RemoveModel 4. LazyModel 5. Drag and DropModel

A Node Structure class Node { public: Node(const QString& aText="No Data", Node *aParent=0); ~Node(); QVariant data() const; public: QString text; Node *parent; QList<Node*> children; }; Demo (node.h)

Read-Only Model class ReadOnlyModel : public QAbstractItemModel { public: ... QModelIndex index( row, column, parent ) const; QModelIndex parent child ) const; int rowCount( parent ) const; int columnCount( parent ) const; QVariant data( index, role) const; protected: // important helper methods QModelIndex indexForNode(Node *node) const; Node* nodeForIndex(const QModelIndex &index) const; int rowForNode(Node *node) const; };

Editable Model class EditableModel : public ReadOnlyModel { public: ... bool setData( index, value, role ); Qt::ItemFlags flags( index ) const; };

Insert/Remove Model class InsertRemoveModel : public EditableModel { public: ... void insertNode(Node *parentNode, int pos, Node *node); void removeNode(Node *node); void removeAllNodes(); };

Lazy Model class LazyModel : public ReadOnlyModel { public: ... bool hasChildren( parent ) const; bool canFetchMore( parent ) const; void fetchMore( parent ); };

DnD Model class DndModel : public InsertRemoveModel { public: ... Qt::ItemFlags flags( index ) const; Qt::DropActions supportedDragActions() const; Qt::DropActions supportedDropActions() const; QStringList mimeTypes() const; QMimeData *mimeData( indexes ) const; bool dropMimeData(data, dropAction, row, column, parent); bool removeRows(row, count, parent); bool insertRows(row, count, parent); };

Objectives • Using GraphicsView Classes • Coordinate Systems and Transformations • Widgets in a Scene • Drag and Drop • Effects • Performance Tuning

Objectives • Using QGraphicsView-related classes • Coordinate Schemes, Transformations • Extending items • Event handling • Painting • Boundaries

Graphics View • Using GraphicsView Classes • Coordinate Systems and Transformations • Widgets in a Scene • Drag and Drop • Effects • Performance Tuning

GraphicsView Framework • Provides: • A surface for managing interactive 2D graphical items • A view widget for visualizing the items • Uses MVC paradigm • Resolution Independent • Animation Support • Fast item discovery, hit tests, collision detection • Using Binary Space Paritioning (BSP) tree indexes • Can manage large numbers of items (tens of thousands) • Supports zooming, printing and rendering

Hello World #include <QtWidgets> int main(int argc, char **argv) { QApplication app(argc, argv); QGraphicsView view; QGraphicsScene *scene = new QGraphicsScene(&view); view.setScene(scene); QGraphicsRectItem *rect = new QGraphicsRectItem(-10, -10, 120, 50); scene->addItem(rect); QGraphicsTextItem *text = scene->addText( "Hello World!"); view.show(); return app.exec(); } Demo

UML relationship • QGraphicsScene is: • a "model" for QGraphicsView • a "container" for QGraphicsItems

QGraphicsScene • Container for Graphic Items • Items can exist in only one scene at a time • Propagates events to items • Manages Collision Detection • Supports fast item indexing • Manages item selection and focus • Renders scene onto view • z-order determines which items show up in front of others

QGraphicsScene • addItem() • Add an item to the scene • (remove from previous scene if necessary) • Also addEllipse(), addPolygon(), addText(), etc QGraphicsEllipseItem *ellipse = scene->addEllipse(-10, -10, 120, 50); QGraphicsTextItem *text = scene->addText("Hello World!"); • items() • returns items intersecting a particular point or region • selectedItems() • returns list of selected items • sceneRect() • bounding rectangle for the entire scene

QGraphicsView • Scrollable widget viewport onto the scene • Zooming, rotation, and other transformations • Translates input events (from the View) into QGraphicsSceneEvents • Maps coordinates between scene and viewport • Provides "level of detail" information to items • Supports OpenGL

QGraphicsView • setScene() • sets the QGraphicsScene to use • setRenderHints() • antialiasing, smooth pixmap transformations, etc • centerOn() • takes a QPoint or a QGraphicsItem as argument • ensures point/item is centered in View • mapFromScene(), mapToScene() • map to/from scene coordinates • scale(), rotate(), translate(), matrix() • transformations

QGraphicsItem • Abstract base class: basic canvas element • Supports parent/child hierarchy • Easy to extend or customize concrete items: • QGraphicsRectItem, QGraphicsPolygonItem, QGraphicsPixmapItem, QGraphicsTextItem, etc. • SVG Drawings, other widgets • Items can be transformed: • move, scale, rotate • using local coordinate systems • Supports Drag and Drop similar to QWidget

QGraphicsItem methods • pos() • get the item's position in scene • moveBy() • Moves an item relative to its own position. • zValue() • get a Z order for item in scene • show(), hide() - set visibility • setEnabled(bool) - disabled items can not take focus or receive events • setFocus(Qt::FocusReason) - sets input focus. • setSelected(bool) • select/deselect an item • typically called from QGraphicsScene::setSelectionArea()

Select, Focus, Move • QGraphicsItem::setFlags() • Determines which operations are supported on an item • QGraphicsItemFlags • QGraphicsItem::ItemIsMovable • QGraphicsItem::ItemIsSelectable • QGraphicsItem::ItemIsFocusable item->setFlags( QGraphicsItem::ItemIsMovable|QGraphicsItem::ItemIsSelectable);

Groups of Items • Any QGraphicsItem can have children • QGraphicsItemGroup is an invisible item for grouping child items • To group child items in a box with an outline (for example), use a QGraphicsRectItem

Parents and Children • Parent propagates values to child items: • setEnabled() • setFlags() • setPos() • setOpacity() • etc... • Enables composition of items.

Coordinate Systems Each View and Item has its own local coordinate system

Coordinates • Coordinates are local to an item • Logical coordinates, not pixels • Floating point, not integer • Without transformations, 1 logical coordinate = 1 pixel. • Items inherit position and transform from parent • zValue is relative to parent • Item transformation does not affect its local coordinate system • Items are painted recursively • From parent to children • in increasing zValue order

QTransform Coordinate systems can be transformed using QTransform QTransform is a 3x3 matrix describing a linear transformation from (x,y) to (xt, yt) • m13 and m23 • Control perspective transformations • Documentation m11 m12 m13 m21 m22 m23 m31 m32 m33 xt = m11*x + m21*y + m31 yt = m22*y + m12*x + m32 if projected: wt = m13*x + m23*y + m33 xt /= wt yt /= wt

Common Transformations • Commonly-used convenience functions: • scale() • rotate() • shear() • translate() • Saves you the trouble of defining transformation matrices • rotate() takes optional 2nd argument: axis of rotation. • Z axis is "simple 2D rotation" • Non-Z axis rotations are "perspective" projections.

View transformations t = QTransform(); // identity matrix t.rotate(45, Qt::ZAxis); // simple rotate t.scale(1.5, 1.5) // scale by 150% view->setTransform(t); // apply transform to entire view • setTransformationAnchor() • An anchor is a point that remains fixed before/after the transform. • AnchorViewCenter: (Default) The center point remains the same • AnchorUnderMouse: The point under the mouse remains the same • NoAnchor: Scrollbars remain unchanged.

Item Transformations • QGraphicsItem supports same transform operations: • setTransform(), transform() • rotate(), scale(), shear(), translate() . An item's effective transformation: The product of its own and all its ancestors' transformations TIP: When managing the transformation of items, store the desired rotation, scaling etc. in member variables and build a QTransform from the identity transformation when they change. Don't try to deduce values from the current transformation and/or try to use it as the base for further changes.

Zooming • Zooming is done with view->scale() void MyView::zoom(double factor) { double width = matrix().mapRect(QRectF(0, 0, 1, 1)).width(); width *= factor; if ((width < 0.05) || (width > 10)) return; scale(factor, factor); }

Ignoring Transformations • Sometimes we don't want particular items to be transformed before display. • View transformation can be disabled for individual items. • Used for text labels in a graph that should not change size when the graph is zoomed. item->setFlag( QGraphicsItem::ItemIgnoresTransformations); Demo

Items not widgets • QGraphicsItem: • Lightweight compared to QWidget • No signals/slots/properties • Scenes can easily contain thousands of Items • Uses different QEvent sub-hierarchy (derived from • QGraphicsSceneEvent) • Supports transformations directly • QWidget: • Derived from QObject (less light-weight) • supports signals, slots, properties, etc • can be embedded in a QGraphicsScene with a QGraphicsProxyWidget

QGraphicsWidget • Advanced functionality graphics item • Provides signals/slots, layouts, geometry, palette, etc. • Not a QWidget! • Base class for QGraphicsProxyWidget

QGraphicsProxyWidget • QGraphicsItem that can embed a QWidget in a QGraphicsScene • Handles complex widgets like QFileDialog • Takes ownership of related widget • Synchronizes states/properties: • visible, enabled, geometry, style, palette, font, cursor, sizeHint,windowTitle, etc • Proxies events between Widget and GraphicsView • If either (widget or proxy) is deleted, the other is also! • Widget must not already have a parent • Only top-level widgets can be added to a scene

Embedded Widget #include <QtWidgets> int main(int argc, char **argv) { QApplication app(argc, argv); QCalendarWidget *calendar = new QCalendarWidget; QGraphicsScene scene; QGraphicsProxyWidget *proxy = scene.addWidget(calendar); QGraphicsView view(&scene); view.show(); return app.exec(); }

QGraphicsLayout • For layout of QGraphicsLayoutItem (+derived) classes in QGraphicsView • Concrete classes: • QGraphicsLinearLayout: equivalent to QBoxLayout, arranges items horizontally or vertically • QGraphicsGridLayout: equivalent to QGridLayout, arranges items in a grid • QGraphicsWidget::setLayout() - set layout for child items of this QGraphicsWidget

Drag and Drop • Items can be: • Dragged • Dropped onto other items • Dropped onto scenes • for handling empty drop areas

Start Drag Starting an item drag is similar to dragging from a QWidget. • Override event handlers: • mousePressEvent() • mouseMoveEvent() • In mouseMoveEvent(), decide if drag started? if so: • Create a QDrag instance • Attach a QMimeData to it • Call QDrag::exec() • Function returns when user drops • Does not block event loop • Demo

Drop on a scene • Override QGraphicsScene::dropEvent() • To accept drop: • acceptProposedAction() • setDropAction(Qt::DropAction); accept(); • Override QGraphicsScene::dragMoveEvent() • Optional overrides: • dragEnterEvent(), dragLeaveEvent()

Graphics Effects Effects can be applied to graphics items: • Base class for effects is QGraphicsEffect. • Standard effects include blur, colorize, opacity and drop shadow. • Effects are set on items. • QGraphicsItem::setGraphicsEffect() • Effects cannot be shared or layered. • Custom effects can be written.

Graphics Effects • Applying a blur effect to a pixmap. QPixmap pixmap(":/images/qt-banner.png"); QGraphicsItem *blurItem = scene-> addPixmap(pixmap); QGraphicsBlurEffect *blurEffect = new QGraphicsBlurEffect(); blurItem->setGraphicsEffect(blurEffect); blurEffect->setBlurRadius(5); • An effect is owned by the item that uses it. • Updating an effect causes the item to be updated.

Level of Detail • Don't draw what you can't see! • QStyleOptionGraphicsItem passed to paint() • Contains palette, state, matrix members • qreal levelOfDetailFromTransform(QTransform T) method • "levelOfDetail" is max width/height of the unity rectangle needed to draw this shape onto a QPainter with a QTransform of T. • use worldTransform() of painter for current transform. • Zoomed out: levelOfDetail < 1.0 • Zoomed in: levelOfDetail > 1.0

Caching tips • Cache item painting into a pixmap • So paint() runs faster • Cache boundingRect() and shape() • Avoid recomputing expensive operations that stay the same • Be sure to invalidate manually cached items after zooming and other transforms QRectF MyItem::boundingRect() const { if (m_rect.isNull()) calculateBoundingRect(); return m_rect; } QPainterPath MyItem::shape() const { if (m_shape.isEmpty()) calculateShape(); return m_shape; }

setCacheMode() • Property of QGraphicsView and QGraphicsItem • Allows caching of pre-rendered content in a QPixmap • Drawn on the viewport • Especially useful for gradient shape backgrounds • Invalidated whenever view is transformed. QGraphicsView view; view.setBackgroundBrush(QImage(":/images/backgroundtile.png")); view.setCacheMode(QGraphicsView::CacheBackground);

Tweaking The following methods allow you to tweak performance of view/scene/items: • QGraphicsView::setViewportUpdateMode() • QGraphicsView::setOptimizationFlags() • QGraphicsScene::setItemIndexMethod() • QGraphicsScene::setBspTreeDepth() • QGraphicsItem::setFlags() • ItemDoesntPropagateOpacityToChildren and ItemIgnoresParentOpacity especially recommended if your items are opaque!

Tips for better performance • boundingRect() and shape() are called frequently so they should run fast! • boundingRect() should be as small as possible • shape() should return simplest reasonable path • Try to avoid drawing gradients on the painter. Consider using pre-rendered backgrounds from images instead. • It is costly to dynamically insert/remove items from the scene. Consider hiding and reusing items instead. • Embedded widgets in a scene is costly. • Try using a different paint engine (OpenGL, Direct3D, etc) • setViewport (new QGLWidget); • Avoid curved and dashed lines • Alpha blending and antialiasing are expensive

What is QML Declarative language for User Interface elements: • Describes the user interface • What elements look like • How elements behave • UI specified as tree of elements with properties

Elements • Elements are structures in the markup language • Represent visual and non-visual parts • Item is the base type of visual elements • Not visible itself • Has a position, dimensions • Usually used to group visual elements • Rectangle, Text, TextInput,... • Non-visual elements: • States, transitions,... • Models, paths,… • Gradients, timers, etc. • Elements contain properties • Can also be extended with custom properties • QML Elements

Properties Elements are described by properties: • Simple name-value definitions • width, height, color,… • With default values • Each has a well-defined type • Separated by semicolons or line breaks • Used for • Identifying elements (id property) • Customizing their appearance • Changing their behavior • Demo

Qt Application Programming with C++ - Part 2

More Related Content

What's hot

Similar to Qt Application Programming with C++ - Part 2

More from Emertxe Information Technologies Pvt Ltd

Recently uploaded

In this document

Qt Application Programming with C++ - Part 2