![Page 1: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/1.jpg)
Praktische Aspekte
der InformatikThomas Löwe
Prof. Marcus Magnor
![Page 2: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/2.jpg)
Your ProposalIt’s due 27.11.2016!
![Page 3: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/3.jpg)
Your Proposal
• Use the template available on the website.
• Your proposal is a guideline for your project:
Required goals
Optional goals
• Don’t worry too much about your proposal,
you can still change details later on.
• You will have to upload your proposal to our
SVN server as part of the next assignment.
![Page 4: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/4.jpg)
Your Proposal
proposal.txt
Name, Matrikelnummer, Bachelor/Master Studiengang
Projektname
Kurze Zusammenfassung
Detaillierte Beschreibung/Auflistung der Funktionalität
Welche externen Bibliotheken werden benutzt und wofür?
Welche besonderen Anforderungen ergeben sich?
![Page 5: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/5.jpg)
GUI ProgrammingQt, Signals and Slots, moc, ui, and Qt Designer
![Page 6: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/6.jpg)
Further Reading
Warning!The following slides are meant to give you
a very superficial introduction.
If you want to learn more, have a look at:
http://doc.qt.io/qt-5
![Page 7: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/7.jpg)
Outline
About Qt
Signals and Slots (.moc)
User Interfaces (.ui)
Resources (.qrc)
QObject
Assignment
http://graphics.tu-bs.de/teaching/seminars/ss16/padi/ 7
![Page 8: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/8.jpg)
What is Qt?
• Qt is a cross-platform application and UI framework
• Qt comes with tons of extras
It’s own build system (qmake)
It’s own specialized IDE (Qt Creator)
A great documentation (Qt Assistant)
![Page 9: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/9.jpg)
What is Qt?
• Benefits:
Big and Powerful
Filled with useful extras
Has excellent documentation (use it!)
Comes with its own tool chain
• Drawbacks:
May require extra compile steps
You might not need everything
![Page 10: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/10.jpg)
Qt Example
#include <QApplication>
#include <QMainWindow>
int main(int argc, char *argv[]) {
QApplication app(argc, argv);
QWidget * window = new QWidget;
window->resize(320, 240);
window->setWindowTitle("Simple example");
window->show();
return app.exec();
}
![Page 11: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/11.jpg)
Qt Example
#include <QApplication>
#include <QMainWindow>
#include <QBoxLayout>
#include <QPushButton>
int main(int argc, char *argv[]) {
QApplication app(argc, argv);
QWidget * window = new QWidget;
window->resize(320, 240);
window->setWindowTitle("Simple example");
window->setLayout(new QBoxLayout(QBoxLayout::TopToBottom));
QPushButton * button = new QPushButton("Magic!");
window->layout()->addWidget(button);
window.show();
return app.exec();
}
![Page 12: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/12.jpg)
What’s different in Qt?
• Signals and Slots
Classes can communicate with SIGNALS and SLOTS.
Can be queried/connected at runtime.
Can communicate across threads.
• Code Generators
Qt-specific stuff is translated to standard C++
MOC: Qt-enhanced headers to C++
UIC: ui-xml to C++ headers
RCC: Resources to binaries
![Page 13: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/13.jpg)
Outline
About Qt
Signals and Slots (.moc)
User Interfaces (.ui)
Resources (.qrc)
QObject
Assignment
http://graphics.tu-bs.de/teaching/seminars/ss16/padi/ 13
![Page 14: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/14.jpg)
Signals and Slots
class Counter : public QObject {
Q_OBJECT // Mandatory!!
public:
Counter(QObject * parent = 0);
virtual ~Counter();
int value() const;
public slots:
void setValue(int value);
signals:
void valueChanged(int newValue); // needs no implementation!
private:
int value_;
};
…
void Counter::setValue(int value) {
if (this->value_ != value) {
this->value_ = value;
emit valueChanged(this->value_); // Emit a signal …
}
}
![Page 15: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/15.jpg)
Signals and Slots
Counter * sender = new Counter;
Counter * receiver = new Counter;
// Old Syntax (still valid)
connect(sender, SIGNAL(valueChanged(int)),
receiver, SLOT(setValue(int));
// NEW: Alternative syntax
connect(sender, &Counter::valueChanged,
receiver, &Counter::setValue);
// NEW: Connecting to simple function
connect(sender, &Counter::valueChanged, someFunction);
https://wiki.qt.io/New_Signal_Slot_Syntax
![Page 16: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/16.jpg)
Meta Object Compiler
http://thelins.se/learnqt/wp-content/uploads/qt-buildsystem.png
![Page 17: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/17.jpg)
Meta Object Compiler
Makefile
$(EXE): main.o moc_counter.o counter.o
g++ $(LIBPATH) $(OPTIONS) $^ -o $@
main.o: main.cpp
g++ $(INCPATH) $(CCFLAGS) -c $<
moc_counter.o: moc_counter.cpp
g++ $(INCPATH) $(CCFLAGS) -c moc_counter.cpp
moc_counter.cpp: counter.h
moc $(INCPATH) $< -o $@
counter.o: counter.cpp
g++ $(INCPATH) $(CCFLAGS) -c counter.cpp
clean:
rm -f *.o *~ $(EXE) moc_*.cpp
![Page 18: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/18.jpg)
Outline
About Qt
Signals and Slots (.moc)
User Interfaces (.ui)
Resources (.qrc)
QObject
Assignment
http://graphics.tu-bs.de/teaching/seminars/ss16/padi/ 18
![Page 19: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/19.jpg)
User Interfaces
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>CommunicateClassName</class>
<widget class="QWidget" name="CommunicateClassName">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>350</width>
<height>190</height>
</rect>
</property>
<property name="windowTitle">
<string>Communicate</string>
</property>
<widget class="QPushButton" name="plus">
<property name="geometry">
<rect>
<x>50</x>
<y>40</y>
<width>75</width>
<height>30</height>
[…]
![Page 20: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/20.jpg)
User Interfaces
![Page 21: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/21.jpg)
User Interfaces
You can…… compose a new widget from existing ones
… organize child widgets using layouts
… style widgets using stylesheets (qss)
http://doc.qt.io/qt-5/qtwidgets-index.html
![Page 22: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/22.jpg)
User Interfaces
#include <QWidget>
#include "ui_communicate.h"
class Communicate : public QWidget {
Q_OBJECT
public:
Communicate(QWidget * parent = NULL)
: QWidget(parent), ui(new Ui::Communicate) {
ui->setupUi(this);
connect(ui->plus, SIGNAL(clicked()), this, SLOT(onPlus()));
connect(ui->minus, SIGNAL(clicked()), this, SLOT(onMinus()));
}
virtual ~Communicate() {
delete ui;
}
public slots:
void onPlus() { ... }
void onMinus() { ... }
private:
Ui::Communicate * ui;
}
![Page 23: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/23.jpg)
User Interface Compiler
http://thelins.se/learnqt/wp-content/uploads/qt-buildsystem.png
![Page 24: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/24.jpg)
User Interface Compiler
Makefile
$(EXE): main.o moc_communicate.o communicate.o
g++ $(LIBPATH) $(OPTIONS) $^ -o $@
main.o: main.cpp ui_communicate.h
g++ $(INCPATH) $(CCFLAGS) -c $<
moc_communicate.o: moc_communicate.cpp
g++ $(INCPATH) $(CCFLAGS) -c moc_communicate.cpp
moc_communicate.cpp: communicate.h ui_communicate.h
moc $(INCPATH) $< -o $@
communicate.o: communicate.cpp ui_communicate.h
g++ $(INCPATH) $(CCFLAGS) -c communicate.cpp
ui_communicate.h: communicate.ui
uic $< -o $@
![Page 25: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/25.jpg)
Outline
About Qt
Signals and Slots (.moc)
User Interfaces (.ui)
Resources (.qrc)
QObject
Assignment
http://graphics.tu-bs.de/teaching/seminars/ss16/padi/ 25
![Page 26: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/26.jpg)
Resources
icons.qrc
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file>images/copy.png</file>
<file>images/cut.png</file>
<file>images/new.png</file>
<file>images/open.png</file>
<file>images/paste.png</file>
<file>images/save.png</file>
…
</qresource>
</RCC>
In your code:
QImage icon(":/images/copy.png");
http://doc.qt.io/qt-5/resources.html
![Page 27: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/27.jpg)
Resource Compiler
http://thelins.se/learnqt/wp-content/uploads/qt-buildsystem.png
![Page 28: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/28.jpg)
Outline
About Qt
Signals and Slots (.moc)
User Interfaces (.ui)
Resources (.qrc)
QObject
Assignment
http://graphics.tu-bs.de/teaching/seminars/ss16/padi/ 28
![Page 29: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/29.jpg)
What’s different in Qt?
• Code Generators
Qt-specific stuff is translated to standard C++
MOC: Qt-enhanced headers to C++
UIC: ui-xml to C++ headers
RCC: Resources to binaries
… or just use qmake
• Signals and Slots
Classes communicate using SIGNALS and SLOTS.
• (That means objects do not have to know each other)
Can be queried/connected at runtime.
Can communicate across threads.
![Page 30: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/30.jpg)
A few cool things about QObjects
• Have a look at the documentation of QObject!
http://doc.qt.io/qt-5/qobject.html
SIGNAL / SLOT
Events (especially for QWidget)
findChildren
Q_PROPERTY macro
QMetaObject
![Page 31: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/31.jpg)
Events
If you want to create your very own Widget…
… you can add interaction by overloading these protected functions:
virtual void keyPressEvent(QKeyEvent * event);
virtual void keyReleaseEvent(QKeyEvent * event);
virtual void mousePressEvent(QMouseEvent * event);
virtual void mouseReleaseEvent(QMouseEvent * event);
virtual void mouseMoveEvent(QMouseEvent * event);
…
… you can also customize what is drawn:
virtual void paintEvent(QPaintEvent * event) {
QPainter p(this); // check out the documentation!
p.setPen(Qt::blue);
p.setFont(QFont(“Arial”, 32));
p.drawText(this->rect(), Qt::AlignCenter, “My Widget!”);
…
}
![Page 32: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/32.jpg)
findChildren
• By design QObjects know nothing about each other
• QObject are organized in a tree structure.
Delete one object (node) and the entire subtree gets cleaned up.
Objects should only communicate using events or signals / slots.
• QObject::findChildren can be useful:
// Temporarily find all children that are QPushButtons
QList<QPushButton*> allButtons = parent.findChildren<QPushButton*>();
// Temporarily find all children that are QWidgets named “widgetname”
QList<QWidget*> widgets = parent.findChildren<QWidget*>("widgetname");
![Page 33: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/33.jpg)
Q_PROPERTY macro
#include <QObject>
class MyObject : public QObject {
Q_OBJECT
Q_PROPERTY(int foo READ getFoo WRITE setFoo)
public:
MyObject(QObject * parent = 0);
virtual ~MyObject();
int getFoo() const;
void setFoo(int foo);
private:
int foo;
}
…
// Data-driven design
MyObject a;
a.setProperty(“foo”, 42); // calls: a.setFoo(42);
![Page 34: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/34.jpg)
QMetaObject
• Every QObject has a QMetaObject.
myObject->metaObject()
• QMetaObjects are magic
What is the name of this object’s class?
How many function does my class have?
Please, invoke function 5 with these arguments!
… and many, many more.
• It’s great for data-driven design!
http://doc.qt.io/qt-5/metaobjects.html
![Page 35: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/35.jpg)
A few cool things about QObjects
• Have a look at the documentation of QObject!
http://doc.qt.io/qt-5/qobject.html
SIGNAL / SLOT
Events (especially for QWidget)
findChildren
Q_PROPERTY macro
QMetaObject
![Page 36: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/36.jpg)
Outline
About Qt
Signals and Slots (.moc)
User Interfaces (.ui)
Resources (.qrc)
QObject
Assignment
http://graphics.tu-bs.de/teaching/seminars/ss16/padi/ 36
![Page 37: Praktische Aspekte der Informatik€¦ · Your Proposal •Use the template available on the website. •Your proposal is a guideline for your project: Required goals Optional goals](https://reader034.vdocuments.us/reader034/viewer/2022042218/5ec38d114ea3634ab929c317/html5/thumbnails/37.jpg)
Assignment
A. Look at the examples
Have a look at, compile, and understand all examples.
B. Simple Data Visualization
Implement a small Qt widget that reads a .csv file,
and draws a simple graph (Bar Graph, Line Graph, etc.)
Look at assignment_stub for more information.
C. Have Fun!
How about more graph types?
How about multiple graphs?
How about animation?
…
http://graphics.tu-bs.de/teaching/seminars/ss16/padi/ 37