352: CS Computer Graphics The
QT
portable GUI Toolkit
Chapter 3b 2
Interactive Computer Graphics
Perspective
How hard is it to build a computer? How hard is it to build a word processor? Why? Holy grail of software engineering: reuse Where has reuse been successful? Why? A major success in reuse: GUI toolkits, componentstyle software architecture A way to serve the world: design, document, distribute
Chapter 3b 3
Interactive Computer Graphics
GUI toolkits
Windows MFC, .net Mac MacOS, Carbon, Cocoa Unix and Linux many. E.g. GTK (www.gtk.org)
Java cross platform
QT: portable
Not cross platform; verbose?
"framework" also handles sending events to widgets Not based on layering (too slow, LCD) Not based on API emulation (slow; different platforms require different API) Based on GUI emulation Fast, responsive, cross platform, compact code, ...
Chapter 3b 4
Interactive Computer Graphics
QT notes
GUI emulation
Commercial, but GNUlicensed open source version
Different API, same lookandfeel Fast Harder to implement GUI emulation may not be perfect
Online documentation, tutorial
Used for KDE Shunned by Red Hat
Use: concepts, familiarity with widgets, and using the documentation...
Chapter 3b 5
Interactive Computer Graphics
QT examples
Various widgets Panes splitter Tables table XML parsing tagreader Networking, sound, printing 2D graphics drawlines canvas xform OpenGL support gear OpenGL widgets, pixmaps glpixmaps
Chapter 3b 6
Interactive Computer Graphics
Hello World
#include <QApplication> #include <QPushButton> int main(int argc, char *argv[]) { QApplication app(argc, argv); QPushButton hello("Hello world!"); hello.show(); return app.exec(); }
Chapter 3b 7
Interactive Computer Graphics
Event handling
In glut we registered callback functions
Could use virtual methods
Callback registration is not typesafe Usually very primitive events, e.g. mousedown Would rather have a button's click handler called by toolkit Clean C++ solution But it can be a nuisance you have to derive a new class to handle an event
Could use macros to tie C++ methods to events (MFC)
Message maps are hard to read, hard to write, and not typesafe (though in Visual C++, IDE handles them)
Chapter 3b 8
Interactive Computer Graphics
Event handling in QT
QT's new approach: signals and slots
Strict separation
A widget sends out various signals Object methods can be declared as slots Compatible signals and slots can be connected or plugged together like a telephone switchboard (parameter types must match) This strict separation between UI components and program elements lends itself to component based programming Goal: separate UI from program logic
Chapter 3b 9
Interactive Computer Graphics
Button
#include <QApplication> [...] int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; window.resize(200, 120); QPushButton quit("Quit", &window); quit.setFont(QFont("Times", 18, QFont::Bold)); quit.setGeometry(10, 40, 180, 40); QObject::connect(&quit, SIGNAL(clicked()), &app, SLOT(quit())); window.show(); return app.exec(); }
Chapter 3b 10
Interactive Computer Graphics
Defining signals and slots
New C++ syntax for defining signals and slots, added to public, private, etc.
class myClass : public Qobject { Q_OBJECT //required macro, no semicolon ... signals: void somethingHappened(); ... public slots: void slotDoSomething(); ... private slots: void slotDoSomethingInternal(); ... };
Chapter 3b 11
Interactive Computer Graphics
Signals and Slots
Signals: emit events
Slots: receive and handle events
declare as signals, otherwise normal member functions You don't implement them. Rather, you send them with the (new) keyword emit E.g. emit(sliderChanged(5)) Normal member fcns declared as slots
Connect: must connect signals to slots
moc: meta object compiler (preprocessor) converts these new keywords to real C++
QObject::connect( mymenu, SIGNAL(activated(int)), myobject, SLOT(slotDoMenuFunction(int)) );
Chapter 3b 12
Interactive Computer Graphics
QWidget
Base class for all UI widgets Properties
Slots
width, height, backgroundColor, font, mouseTracking, backgroundPixmap, etc. repaint, show, hide, move, setGeometry, setMainWidget, etc. mouseMoveEvent, keyPressEvent, resizeEvent, paintEvent, enterEvent, leaveEvent, etc.
Signals:
Chapter 3b 13
Interactive Computer Graphics
QPixmap, QImage
QPixmap: offscreen pixmap optimized for drawing Member functions: fill, resize, load, save, ... Paint on it with a QPainter QImage: similar, but optimized for access to pixel data
Chapter 3b 14
Interactive Computer Graphics
QPainter
Paints on a paint device (window, QPixmap...) Member functions such as
setPen, setBrush, setBackgroundColor, setViewport Scale, shear, rotate, translate moveTo, lineTo, drawPoint, drawLine, drawRect, drawEllipse, drawPolyline, drawArc, drawPolygon, drawPixmap, drawImage, drawText, fillRect
Chapter 3b 15
Interactive Computer Graphics
QPainter use
99% of QPainter use is in reimplementing QWidget::paintEvent()
void SimpleExampleWidget::paintEve nt() { QPainter paint( this ); paint.setPen( Qt::blue ); paint.drawText(rect(), AlignCenter,
Chapter 3b 16
Interactive Computer Graphics
Scribble (Trolltech example)
class ScribbleArea: public QWidget Offscreen image buffer: ScribbleArea::mousePressEvent( QMouseEvent* event): ScribbleWindow::mouseMoveEvent:
QPainter painter(&image); Painter.drawLine(lastPoint, endPoint); lastPoint=endPoint; lastPoint = event>pos(); QImage image;
ScribbleWindow::paintEvent(QEvent *event)
QPainter painter(&image); QPainter painter(this); painter.drawImage(QPoint(0,0), image);
Chapter 3b 17
Interactive Computer Graphics
Menus
Using Menus
Define "actions", which are menu items with shortcuts, connected to slots Define menus Add actions to menus Define menuBar Add menus to menuBar
Chapter 3b 18
Interactive Computer Graphics
File I/O
To load an image: get filename, load using builtin methods
void ScribbleArea::slotLoad() { QString filename = QFileDialog::getOpenFileName( this, tr("Open File"), QDir::currentPath()); if (!filename.isEmpty()) scribbleArea->openImage(fileName); }
Chapter 3b 19
Interactive Computer Graphics
Selecting colors
Builtin dialogues for common tasks are God's gift to graphics programming!
QColor QColorDialog::getColor( QColor initial);
void Scribble::slotColor() { QColor c = QColorDialog::getColor( canvas->penColor()); if (c.isValid()) canvas->setPenColor( c ); }
Chapter 3b 20
Interactive Computer Graphics
OpenGL
Use QT instead of glut for windows, GUI QGLWidget instead of QWidget
Hellogl, grabber examples
paint with GL functions, not QPainter Reimplement initializeGL(), paintGL(), resizeGL() [ instead of paintEvent() and resizeEvent() ] repaintGL() is called each time a window is resized, including before the viewport is first drawuse for setting up sizespecific parameters such as viewing transform
Chapter 3b 21
Interactive Computer Graphics
Animation
How would you get things to move smoothly? QTimer() can call a slot at intervals
QTimer *timer = new QTimer(this); connect(timer, SIGNAL(timeout()), this, SLOT(drawNextFrame())); timer->start(20);
Chapter 3b 22
Interactive Computer Graphics
QGLWidget
Important members:
initializeGL(), resizeGL(), paintGL() qglColor(), qglClearColor() setAutoBufferSwap(bool), swapBuffers() QImage grabFrameBuffer() QImage convertToGLFormat( QImage &image ) How to get images in/out of a QGLWidget?
Chapter 3b 23
Interactive Computer Graphics
OpenGL and Pixmaps
QPixmap, QImage have support for load, save Save: use grabFrameBuffer to make a QImage and use QImage::save() Load: copy offscreen pixmap back into OpenGL GLPaint example
Chapter 3b 24
Interactive Computer Graph...