CS 352: Computer Graphics

1
CS 352 Computer Graphics
The QT portable GUI Toolkit
2
Perspective

• How hard is it to build a computer?
• How hard is it to build a word processor?
• Why?
• Holy grail of software engineering re-use
• Where has re-use been successful? Why?
• A major success in re-use GUI toolkits,
  component-style software architecture
• A way to serve the world design, document,
  distribute

3
GUI toolkits

• Windows MFC, .net
• Mac MacOS, Carbon, Cocoa
• Unix and Linux many. E.g. GTK (www.gtk.org)
• Not cross platform verbose?
• Java cross platform
• QT portable
• "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,

4
QT notes

• GUI emulation
• Different API, same look-and-feel
• Fast
• Harder to implement
• GUI emulation may not be perfect
• Commercial, but GNU-licensed open source version
• Used for KDE
• Shunned by Red Hat
• Online documentation, tutorial
• Use concepts, familiarity with widgets, and
  using the documentation

5
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

6
Hello World

• include ltQApplicationgt
• include ltQPushButtongt
• int main(int argc, char argv)
• QApplication app(argc, argv)
• QPushButton hello("Hello world!")
• hello.show()
• return app.exec()

7
Event handling

• In glut we registered callback functions
• Callback registration is not type-safe
• Usually very primitive events, e.g. mousedown
• Would rather have a button's click handler called
  by toolkit
• Could use virtual methods
• 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 type-safe (though in Visual C, IDE handles
  them)

8
Event handling in QT

• QT's new approach signals and slots
• 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)
• Strict separation
• This strict separation between UI components and
  program elements lends itself to component-based
  programming
• Goal separate UI from program logic

9
Button

• include ltQApplicationgt
• 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,
  QFontBold))
• quit.setGeometry(10, 40, 180, 40)
• QObjectconnect(quit, SIGNAL(clicked()),
  app,
• SLOT(quit()))
• window.show()
• return app.exec()

10
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()

11
Signals and Slots

• Signals emit 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))
• Slots receive and handle events
• Normal member fcns declared as slots
• Connect must connect signals to slots
• QObjectconnect( mymenu, SIGNAL(activated(int)),
  myobject, SLOT(slotDoMenuFunction(int)) )
• moc meta object compiler (preprocessor) converts
  these new keywords to real C

12
QWidget

• Base class for all UI widgets
• Properties
• width, height, backgroundColor, font,
  mouseTracking, backgroundPixmap, etc.
• Slots
• repaint, show, hide, move, setGeometry,
  setMainWidget, etc.
• Signals
• mouseMoveEvent, keyPressEvent, resizeEvent,
  paintEvent, enterEvent, leaveEvent, etc.

13
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

14
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, drawArc, drawPolyline, drawPolygon,
  drawPixmap, drawImage, drawText, fillRect

15
QPainter use

• 99 of QPainter use is in reimplementing
  QWidgetpaintEvent()
• void SimpleExampleWidgetpaintEvent()
• QPainter paint( this )
• paint.setPen( Qtblue )
• paint.drawText(rect(), AlignCenter, "Zyzzyvas
  are the Last Word in Rodents!")
• A nice, full, fast 2D drawing class, though it
  uses the CPU, not the graphics card

16
Scribble (Trolltech example)

• class ScribbleArea public QWidget
• Offscreen image buffer
• QImage image
• ScribbleAreamousePressEvent( QMouseEvent
  event)
• lastPoint event-gtpos()
• ScribbleWindowmouseMoveEvent QPainter
  painter(image)
• Painter.drawLine(lastPoint, endPoint)
• lastPointendPoint
• ScribbleWindowpaintEvent(QEvent event)
• QPainter painter(image)
• QPainter painter(this)
• painter.drawImage(QPoint(0,0), image)

17
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

18
File I/O

• To load an image get filename, load using
  built-in methods
• void ScribbleAreaslotLoad()
• QString filename QFileDialoggetOpenFileName(
• this, tr(Open File), QDircurrentPath())
• if (!filename.isEmpty())
• scribbleArea-gtopenImage(fileName)

19
Selecting colors

• Built-in dialogues for common tasks are God's
  gift to graphics programming!
• QColor QColorDialoggetColor( QColor initial)
• void ScribbleslotColor()
• QColor c QColorDialoggetColor(
• canvas-gtpenColor())
• if (c.isValid())
• canvas-gtsetPenColor( c )

20
OpenGL

• Use QT instead of glut for windows, GUI
• QGLWidget instead of QWidget
• paint with GL functions, not QPainter
• Re-implement initializeGL(), paintGL(),
  resizeGL() instead of paintEvent() and
  resizeEvent()
• repaintGL() is called each time a window is
  resized, including before the viewport is first
  draw--use for setting up size-specific parameters
  such as viewing transform
• Hellogl, grabber examples

21
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-gtstart(20)

22
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?

23
OpenGL and Pixmaps

• QPixmap, QImage have support for load, save
• Save use grabFrameBuffer to make a QImage and
  use QImagesave()
• Load copy offscreen pixmap back into OpenGL
• GLPaint example

24
Image processing tidbits

• How would you brighten an image?
• How would you increase the contrast?
• How would you blur or soften an image?
• How would you sharpen an image?

25
Gamma correction

• How bright is 0? 256? 128?
• People's perception is not linear twice the
  number of photons one step brighter
• Intensities needed e.g. 1, ½, ¼, 1/8,
• Different monitors have different, non-linear
  brightness function for voltage (gamma)
• NTSC, I k N ?
• I brightness, N electrons (driving voltage)
• NTSC gamma 2.2
• Better monitors gamma is lower, e.g. 1.4
• Need "gamma correction" (intensity look-up table)

26
Convolution

• Generate a new image from old
• Each pixel x,y in new is based on region of the
  old, e.g. 3x3, centered on x,y
• Each pixel in region is multiplied by a
  coefficient in the (3x3) convolution kernel
• Example kernels
• Blurring averaging. E.g. all values in kernel
  1/9.
• Sharpening differentiation. E.g. all values
  1/8 except center value, which is 2
• Edge detection e.g. Roberts Cross, -1 0 1 \ -2
  0 2 \ -1 0 1

27
Web resources for image processing

• Gamma correction
• Blurring
• Sharpening
• Edge detection

28
QMake

• You can define a .pro project file and run qmake
  to generate a makefile
• QTScribble2.pro
• TEMPLATE app
• CONFIG qt opengl warn_on release
• HEADERS
• SOURCES qtscribble2.cpp

29
Using QT

• Download, install open source version from
  http//www.qtsoftware.com/downloads/opensource/app
  dev
• Can use qmake project, qmake, make
• Eclipse plug-in available
• Mac installation enables Xcode development

30
Using the QT documentation

• You will need to refer constantly to the QT
  documentation to find available classes, members,
  parameters
• It's available at http//doc.trolltech.com