Cs 352 computer graphics
Download
1 / 30

QT - Calvin College Computer Science - PowerPoint PPT Presentation


  • 564 Views
  • 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?

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

PowerPoint Slideshow about 'QT - Calvin College Computer Science' - 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 l.jpg

CS 352: Computer Graphics

The

QT

portable

GUI Toolkit


Perspective l.jpg
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


Gui toolkits l.jpg
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 l.jpg
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 l.jpg
    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 l.jpg
    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();

    }


    Event handling l.jpg
    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 l.jpg
    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


    Button l.jpg
    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();

    }


    Defining signals and slots l.jpg
    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();

      };


    Signals and slots l.jpg
    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++


    Qwidget l.jpg
    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.


    Qpixmap qimage l.jpg
    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


    Qpainter l.jpg
    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


    Qpainter use l.jpg
    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 l.jpg
    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);

      lastPoint=endPoint;

    • ScribbleWindow::paintEvent(QEvent *event)

      QPainter painter(&image);

      QPainter painter(this);

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


    Menus l.jpg
    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


    File i o l.jpg
    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())

      scribbleArea->openImage(fileName);

      }


    Selecting colors l.jpg
    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(

      canvas->penColor());

      if (c.isValid())

      canvas->setPenColor( c );

      }


    Opengl l.jpg
    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


    Animation l.jpg
    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);


    Qglwidget l.jpg
    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?


    Opengl and pixmaps l.jpg
    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 l.jpg
    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 l.jpg
    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)


    Convolution l.jpg
    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) 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 l.jpg
    Web resources for image processing

    • Gamma correction

    • Blurring

    • Sharpening

    • Edge detection


    Qmake l.jpg
    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


    Using qt l.jpg
    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 l.jpg
    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


    ad