cs 352 computer graphics l.
Skip this Video
Loading SlideShow in 5 Seconds..
CS 352: Computer Graphics PowerPoint Presentation
Download Presentation
CS 352: Computer Graphics

Loading in 2 Seconds...

play fullscreen
1 / 30

CS 352: Computer Graphics - PowerPoint PPT Presentation

  • Uploaded on

CS 352: Computer Graphics The QT portable GUI Toolkit 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?

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'CS 352: Computer Graphics' - johana

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cs 352 computer graphics

CS 352: Computer Graphics




GUI Toolkit

  • 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
gui toolkits
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, …
qt notes
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…
qt examples
QT examples
  • Various widgets
  • Panes – splitter
  • Tables – table
  • XML parsing – tagreader
  • Networking, sound, printing
  • 2D graphics – drawlinescanvasxform
  • OpenGL support – gear
  • OpenGL widgets, pixmaps – glpixmaps
hello world
Hello World

#include <QApplication>

#include <QPushButton>

int main(int argc, char *argv[])


QApplication app(argc, argv);

QPushButton hello("Hello world!");


return app.exec();


event handling
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)
event handling in qt
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

#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,



return app.exec();


defining signals and slots
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


void somethingHappened();

public slots:

void slotDoSomething();

private slots:

void slotDoSomethingInternal();


signals and slots
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
    • QObject::connect( mymenu, SIGNAL(activated(int)), myobject, SLOT(slotDoMenuFunction(int)) );
  • moc: meta object compiler (preprocessor) converts these new keywords to real C++
  • 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.
qpixmap qimage
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
  • 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
qpainter use
QPainter use
  • 99% of QPainter use is in reimplementing QWidget::paintEvent()

void SimpleExampleWidget::paintEvent()


QPainter paint( this );

paint.setPen( Qt::blue );

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
scribble trolltech example
Scribble (Trolltech example)
  • class ScribbleArea: public QWidget
  • Offscreen image buffer:

QImage image;

  • ScribbleArea::mousePressEvent( QMouseEvent* event):

lastPoint = event->pos();

  • ScribbleWindow::mouseMoveEvent:QPainter painter(&image);

Painter.drawLine(lastPoint, endPoint);


  • ScribbleWindow::paintEvent(QEvent *event)

QPainter painter(&image);

QPainter painter(this);

painter.drawImage(QPoint(0,0), image);

  • 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
file i o
File I/O
  • To load an image: get filename, load using built-in methods

void ScribbleArea::slotLoad()


QString filename = QFileDialog::getOpenFileName(

this, tr(“Open File”), QDir::currentPath());

if (!filename.isEmpty())



selecting colors
Selecting colors
  • Built-in dialogues for common tasks are God's gift to graphics programming!

QColor QColorDialog::getColor( QColor initial);

void Scribble::slotColor()


QColor c = QColorDialog::getColor(


if (c.isValid())

canvas->setPenColor( c );


  • 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
  • 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,



  • 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?
opengl and pixmaps
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
image processing tidbits
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?
gamma correction
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)
  • 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) convolutionkernel
  • 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. Robert’s Cross, [-1 0 1 \ -2 0 2 \ -1 0 1]
web resources for image processing
Web resources for image processing
  • Gamma correction
  • Blurring
  • Sharpening
  • Edge detection
  • You can define a .pro project file and run qmake to generate a makefile
  • QTScribble2.pro:


CONFIG = qt opengl warn_on release


SOURCES = qtscribble2.cpp

using qt
Using QT
  • Download, install open source version from http://www.qtsoftware.com/downloads/opensource/appdev
  • Can use qmake –project, qmake, make
  • Eclipse plug-in available
  • Mac installation enables Xcode development
using the qt documentation
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